Feature Components

Domain-specific components for Assessments, Timetable, Notes, and more

Feature Components Overview

Feature components are domain-specific components that implement business logic for specific features in DesQTA. These components are located in src/lib/components/ and are organized by feature area.

Assessment Components

AssessmentCard

Displays a single assessment with status, due date, and subject information.

<script lang="ts">
  import AssessmentCard from '$lib/components/AssessmentCard.svelte';
  
  const assessment = {
    id: 123,
    title: 'Math Assignment',
    code: 'MATH101',
    due: '2024-12-20',
    status: 'SUBMITTED',
    colour: '#6366f1',
    metaclass: 456
  };
</script>

<AssessmentCard {assessment} showSubject={true} />

Props:

  • assessment: Assessment - Assessment object
  • showSubject: boolean - Show subject code

Assessment Interface:

interface Assessment {
  id: number;
  title: string;
  code: string;
  due: string;
  status: string;
  colour: string;
  metaclass: number;
}

AssessmentListView

Displays assessments in a list format with filtering and sorting.

<script lang="ts">
  import AssessmentListView from '$lib/components/AssessmentListView.svelte';
  
  let assessments = $state<Assessment[]>([]);
  let filters = $state({
    status: 'all',
    subject: 'all',
    dateRange: 'all'
  });
</script>

<AssessmentListView 
  {assessments}
  {filters}
  onFilterChange={(newFilters) => filters = newFilters}
/>

Props:

  • assessments: Assessment[] - List of assessments
  • filters: AssessmentFilters - Filter configuration
  • onFilterChange: (filters: AssessmentFilters) => void - Filter change callback

AssessmentBoardView

Kanban-style board view for assessments organized by status.

<script lang="ts">
  import AssessmentBoardView from '$lib/components/AssessmentBoardView.svelte';
  
  let assessments = $state<Assessment[]>([]);
</script>

<AssessmentBoardView {assessments} />

Features:

  • Drag and drop between columns
  • Status-based organization
  • Visual progress indicators

AssessmentCalendarView

Calendar view showing assessments by due date.

<script lang="ts">
  import AssessmentCalendarView from '$lib/components/AssessmentCalendarView.svelte';
  
  let assessments = $state<Assessment[]>([]);
  let selectedDate = $state<Date | null>(null);
</script>

<AssessmentCalendarView 
  {assessments}
  bind:selectedDate
/>

Props:

  • assessments: Assessment[] - List of assessments
  • selectedDate: Date | null - Currently selected date (use bind:selectedDate)

AssessmentGanttView

Gantt chart view for visualizing assessment timelines.

<script lang="ts">
  import AssessmentGanttView from '$lib/components/AssessmentGanttView.svelte';
  
  let assessments = $state<Assessment[]>([]);
</script>

<AssessmentGanttView {assessments} />

Features:

  • Timeline visualization
  • Overlapping assessment detection
  • Zoom controls

AssessmentDetails

Detailed view for a single assessment with tabs for overview, submissions, and analytics.

<script lang="ts">
  import AssessmentDetails from '$lib/components/AssessmentDetails.svelte';
  
  let assessmentId = $state(123);
  let metaclass = $state(456);
</script>

<AssessmentDetails {assessmentId} {metaclass} />

Props:

  • assessmentId: number - Assessment ID
  • metaclass: number - Metaclass ID

Tabs:

  • Overview: General information
  • Submissions: Submission history
  • Analytics: Performance metrics

AssessmentOverview

Summary dashboard showing assessment statistics and upcoming deadlines.

<script lang="ts">
  import AssessmentOverview from '$lib/components/AssessmentOverview.svelte';
  
  let assessments = $state<Assessment[]>([]);
</script>

<AssessmentOverview {assessments} />

Displays:

  • Total assessments
  • Overdue count
  • Due soon count
  • Completion rate
  • Grade distribution

AssessmentSubmissions

Manages assessment submissions with file upload and status tracking.

<script lang="ts">
  import AssessmentSubmissions from '$lib/components/AssessmentSubmissions.svelte';
  
  let assessmentId = $state(123);
</script>

<AssessmentSubmissions {assessmentId} />

Features:

  • File upload
  • Submission history
  • Status tracking
  • Comments and notes

AssessmentHeader

Header component for assessment pages with title, actions, and breadcrumbs.

<script lang="ts">
  import AssessmentHeader from '$lib/components/AssessmentHeader.svelte';
  
  let assessment = $state<Assessment | null>(null);
</script>

<AssessmentHeader {assessment} />

AssessmentTabs

Tab navigation for assessment detail views.

<script lang="ts">
  import AssessmentTabs from '$lib/components/AssessmentTabs.svelte';
  
  let activeTab = $state('overview');
</script>

<AssessmentTabs bind:activeTab />

AssessmentViewTabs

View switcher for different assessment visualization modes.

<script lang="ts">
  import AssessmentViewTabs from '$lib/components/AssessmentViewTabs.svelte';
  
  let view = $state<'list' | 'board' | 'calendar' | 'gantt'>('list');
</script>

<AssessmentViewTabs bind:view />

UpcomingAssessments

Widget showing upcoming assessments with countdown timers.

<script lang="ts">
  import UpcomingAssessments from '$lib/components/UpcomingAssessments.svelte';
  
  let limit = $state(5);
</script>

<UpcomingAssessments {limit} />

Props:

  • limit: number - Maximum number of assessments to show

Timetable Components

TimetableGrid

Main timetable grid component displaying weekly schedule.

<script lang="ts">
  import TimetableGrid from '$lib/components/TimetableGrid.svelte';
  
  let lessons = $state<Lesson[]>([]);
  let weekStart = $state(new Date());
</script>

<TimetableGrid {lessons} {weekStart} />

Props:

  • lessons: Lesson[] - Array of lessons
  • weekStart: Date - Start date of the week

Lesson Interface:

interface Lesson {
  id: number;
  subject: string;
  startTime: string;
  endTime: string;
  day: number; // 0-6 (Sunday-Saturday)
  room?: string;
  teacher?: string;
  colour?: string;
}

TimetableHeader

Header for timetable with week navigation and view options.

<script lang="ts">
  import TimetableHeader from '$lib/components/TimetableHeader.svelte';
  
  let currentWeek = $state(new Date());
  let view = $state<'week' | 'day'>('week');
</script>

<TimetableHeader bind:currentWeek bind:view />

Props:

  • currentWeek: Date - Current week (use bind:currentWeek)
  • view: 'week' | 'day' - View mode (use bind:view)

TimetableLesson

Individual lesson card component.

<script lang="ts">
  import TimetableLesson from '$lib/components/TimetableLesson.svelte';
  
  const lesson = {
    id: 1,
    subject: 'Mathematics',
    startTime: '09:00',
    endTime: '10:00',
    room: 'Room 101',
    teacher: 'Mr. Smith',
    colour: '#6366f1'
  };
</script>

<TimetableLesson {lesson} />

TimetableExport

Export timetable to various formats (PDF, CSV, iCal).

<script lang="ts">
  import TimetableExport from '$lib/components/TimetableExport.svelte';
  
  let lessons = $state<Lesson[]>([]);
</script>

<TimetableExport {lessons} />

Export Formats:

  • PDF
  • CSV
  • iCal (for calendar apps)

TimetablePdfViewer

PDF viewer for timetable documents.

<script lang="ts">
  import TimetablePdfViewer from '$lib/components/TimetablePdfViewer.svelte';
  
  let pdfUrl = $state<string | null>(null);
</script>

<TimetablePdfViewer {pdfUrl} />

TimeGridEvent

Event component for time-based grid layouts.

<script lang="ts">
  import TimeGridEvent from '$lib/components/timetable/TimeGridEvent.svelte';
  
  const event = {
    id: 1,
    title: 'Math Class',
    start: new Date('2024-12-20T09:00'),
    end: new Date('2024-12-20T10:00'),
    colour: '#6366f1'
  };
</script>

<TimeGridEvent {event} />

TodaySchedule

Widget showing today's schedule with upcoming lessons.

<script lang="ts">
  import TodaySchedule from '$lib/components/TodaySchedule.svelte';
  
  let lessons = $state<Lesson[]>([]);
</script>

<TodaySchedule {lessons} />

Notes Components

NotesContainer

Main container for the notes feature with file explorer and editor.

<script lang="ts">
  import NotesContainer from '$lib/components/notes/NotesContainer.svelte';
  
  let selectedNoteId = $state<string | null>(null);
</script>

<NotesContainer bind:selectedNoteId />

Features:

  • File explorer sidebar
  • Rich text editor
  • Search functionality
  • File management

TipTapNotesEditor

Rich text editor built with TipTap for note-taking.

<script lang="ts">
  import TipTapNotesEditor from '$lib/components/notes/TipTapNotesEditor.svelte';
  
  let content = $state('');
  let noteId = $state<string | null>(null);
</script>

<TipTapNotesEditor 
  bind:content
  {noteId}
  onSave={(content) => console.log('Saved:', content)}
/>

Props:

  • content: string - Editor content (use bind:content)
  • noteId: string | null - Current note ID
  • onSave: (content: string) => void - Save callback

Features:

  • Rich text formatting
  • SEQTA mentions
  • Image embedding
  • Code blocks
  • Tables

TipTapToolbar

Toolbar for the notes editor with formatting options.

<script lang="ts">
  import TipTapToolbar from '$lib/components/notes/TipTapToolbar.svelte';
  
  let editor: any = null;
</script>

<TipTapToolbar {editor} />

TipTapBubbleMenu

Context menu that appears when text is selected.

<script lang="ts">
  import TipTapBubbleMenu from '$lib/components/notes/TipTapBubbleMenu.svelte';
  
  let editor: any = null;
</script>

<TipTapBubbleMenu {editor} />

TipTapContextMenu

Right-click context menu for the editor.

<script lang="ts">
  import TipTapContextMenu from '$lib/components/notes/TipTapContextMenu.svelte';
  
  let editor: any = null;
</script>

<TipTapContextMenu {editor} />

TipTapStatusBar

Status bar showing word count, character count, and editor state.

<script lang="ts">
  import TipTapStatusBar from '$lib/components/notes/TipTapStatusBar.svelte';
  
  let editor: any = null;
</script>

<TipTapStatusBar {editor} />

NotesFileExplorer

File explorer sidebar for navigating notes.

<script lang="ts">
  import NotesFileExplorer from '$lib/components/notes/NotesFileExplorer.svelte';
  
  let selectedNoteId = $state<string | null>(null);
</script>

<NotesFileExplorer bind:selectedNoteId />

Features:

  • Folder navigation
  • File creation
  • File deletion
  • Drag and drop organization

NotesList

List view of notes with search and filtering.

<script lang="ts">
  import NotesList from '$lib/components/notes/NotesList.svelte';
  
  let notes = $state<Note[]>([]);
  let searchQuery = $state('');
</script>

<NotesList {notes} bind:searchQuery />

NotesSearch

Search component for notes with advanced filtering.

<script lang="ts">
  import NotesSearch from '$lib/components/notes/NotesSearch.svelte';
  
  let searchQuery = $state('');
  let onSearch = (query: string) => {
    console.log('Search:', query);
  };
</script>

<NotesSearch bind:searchQuery {onSearch} />

Notes Plugins

WeeklyScheduleEmbed

Embed weekly schedule into notes.

<script lang="ts">
  import WeeklyScheduleEmbed from '$lib/components/notes/plugins/WeeklyScheduleEmbed.svelte';
</script>

<WeeklyScheduleEmbed />

TimetableSelector

Select and embed timetable into notes.

<script lang="ts">
  import TimetableSelector from '$lib/components/notes/plugins/TimetableSelector.svelte';
</script>

<TimetableSelector />

SeqtaMentionTooltip

Tooltip showing SEQTA user/class information when mentioned.

<script lang="ts">
  import SeqtaMentionTooltip from '$lib/components/notes/plugins/SeqtaMentionTooltip.svelte';
</script>

<SeqtaMentionTooltip mention="@username" />

SeqtaMentionDetailModal

Modal showing detailed information about a SEQTA mention.

<script lang="ts">
  import SeqtaMentionDetailModal from '$lib/components/notes/plugins/SeqtaMentionDetailModal.svelte';
  
  let mentionId = $state<string | null>(null);
</script>

<SeqtaMentionDetailModal bind:mentionId />

LessonContentEmbed

Embed lesson content from SEQTA into notes.

<script lang="ts">
  import LessonContentEmbed from '$lib/components/notes/plugins/LessonContentEmbed.svelte';
  
  let lessonId = $state<number | null>(null);
</script>

<LessonContentEmbed {lessonId} />

Analytics Components

AssessmentTable

Table view for assessment analytics with sorting and filtering.

<script lang="ts">
  import AssessmentTable from '$lib/components/analytics/AssessmentTable.svelte';
  
  let assessments = $state<Assessment[]>([]);
</script>

<AssessmentTable {assessments} />

AssessmentFilters

Filter controls for assessment analytics.

<script lang="ts">
  import AssessmentFilters from '$lib/components/analytics/AssessmentFilters.svelte';
  
  let filters = $state({
    subject: 'all',
    dateRange: 'all',
    status: 'all'
  });
</script>

<AssessmentFilters bind:filters />

AnalyticsBarChart

Bar chart component for assessment analytics.

<script lang="ts">
  import AnalyticsBarChart from '$lib/components/analytics/AnalyticsBarChart.svelte';
  
  let data = $state([
    { label: 'Math', value: 85 },
    { label: 'English', value: 92 },
    { label: 'Science', value: 78 }
  ]);
</script>

<AnalyticsBarChart {data} />

AnalyticsAreaChart

Area chart component for trend visualization.

<script lang="ts">
  import AnalyticsAreaChart from '$lib/components/analytics/AnalyticsAreaChart.svelte';
  
  let data = $state([
    { date: '2024-01', value: 80 },
    { date: '2024-02', value: 85 },
    { date: '2024-03', value: 90 }
  ]);
</script>

<AnalyticsAreaChart {data} />

PerformanceLineChart

Line chart for performance tracking over time.

<script lang="ts">
  import PerformanceLineChart from '$lib/components/performance/PerformanceLineChart.svelte';
  
  let data = $state([
    { date: '2024-01', grade: 80 },
    { date: '2024-02', grade: 85 },
    { date: '2024-03', grade: 90 }
  ]);
</script>

<PerformanceLineChart {data} />

PerformanceGraph

Comprehensive performance visualization.

<script lang="ts">
  import PerformanceGraph from '$lib/components/PerformanceGraph.svelte';
  
  let assessments = $state<Assessment[]>([]);
</script>

<PerformanceGraph {assessments} />

GradeDistribution

Visualization of grade distribution across subjects.

<script lang="ts">
  import GradeDistribution from '$lib/components/GradeDistribution.svelte';
  
  let grades = $state<Grade[]>([]);
</script>

<GradeDistribution {grades} />

GradePredictions

AI-powered grade predictions based on historical data.

<script lang="ts">
  import GradePredictions from '$lib/components/GradePredictions.svelte';
  
  let assessments = $state<Assessment[]>([]);
</script>

<GradePredictions {assessments} />

Other Feature Components

FocusTimer

Pomodoro-style focus timer for study sessions.

<script lang="ts">
  import FocusTimer from '$lib/components/FocusTimer.svelte';
</script>

<FocusTimer />

Features:

  • Pomodoro technique
  • Customizable durations
  • Break reminders
  • Session tracking

TodoList

Task management component.

<script lang="ts">
  import TodoList from '$lib/components/TodoList.svelte';
  
  let todos = $state<Todo[]>([]);
</script>

<TodoList bind:todos />

MessagesPreview

Preview of recent messages.

<script lang="ts">
  import MessagesPreview from '$lib/components/MessagesPreview.svelte';
  
  let messages = $state<Message[]>([]);
</script>

<MessagesPreview {messages} />

MessageItem

Individual message component.

<script lang="ts">
  import MessageItem from '$lib/components/MessageItem.svelte';
  
  const message = {
    id: 1,
    from: 'Teacher Name',
    subject: 'Assignment Reminder',
    preview: 'Don\'t forget to submit...',
    timestamp: new Date(),
    unread: true
  };
</script>

<MessageItem {message} />

RecentNews

Widget showing recent news items.

<script lang="ts">
  import RecentNews from '$lib/components/RecentNews.svelte';
  
  let limit = $state(5);
</script>

<RecentNews {limit} />

NoticesPane

Panel displaying school notices.

<script lang="ts">
  import NoticesPane from '$lib/components/NoticesPane.svelte';
  
  let notices = $state<Notice[]>([]);
</script>

<NoticesPane {notices} />

Homework

Homework assignment component.

<script lang="ts">
  import Homework from '$lib/components/Homework.svelte';
  
  let assignments = $state<HomeworkAssignment[]>([]);
</script>

<Homework {assignments} />

Component Composition

Building Feature Pages

<script lang="ts">
  import AssessmentOverview from '$lib/components/AssessmentOverview.svelte';
  import AssessmentViewTabs from '$lib/components/AssessmentViewTabs.svelte';
  import AssessmentListView from '$lib/components/AssessmentListView.svelte';
  import AssessmentBoardView from '$lib/components/AssessmentBoardView.svelte';
  
  let assessments = $state<Assessment[]>([]);
  let view = $state<'list' | 'board'>('list');
</script>

<div class="space-y-6">
  <AssessmentOverview {assessments} />
  
  <AssessmentViewTabs bind:view />
  
  {#if view === 'list'}
    <AssessmentListView {assessments} />
  {:else if view === 'board'}
    <AssessmentBoardView {assessments} />
  {/if}
</div>

Best Practices

  1. Data Loading: Use services to load data, not directly in components
  2. State Management: Keep component state local when possible
  3. Error Handling: Always handle loading and error states
  4. Performance: Use $derived for computed values
  5. Accessibility: Include proper ARIA labels and keyboard navigation
  6. Responsive Design: Ensure components work on all screen sizes

Next Steps

Edit this page
Common Components
Reusable UI components used throughout DesQTA
Layout Components
Application structure and navigation components