chore: add documentation for svelte components

src/widgets/AppSidebar/ui/AppSidebar.svelte

@@ -1,4 +1,16 @@
 <script lang="ts">
+/**
+ * AppSidebar Component
+ *
+ * Main application sidebar widget. Contains filter controls and action buttons
+ * for font filtering operations. Organized into two sections:
+ *
+ * - Filters: Category-based filter groups (providers, subsets, categories)
+ * - Controls: Apply/Reset buttons for filter actions
+ *
+ * Uses Sidebar.Root from shadcn for responsive sidebar behavior including
+ * mobile drawer and desktop persistent sidebar modes.
+ */
 import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
 import Controls from './Controls.svelte';
 import Filters from './Filters.svelte';

src/widgets/AppSidebar/ui/Controls.svelte

@@ -1,4 +1,15 @@
 <script lang="ts">
+/**
+ * Controls Component
+ *
+ * Action button group for filter operations. Provides two buttons:
+ *
+ * - Reset: Clears all active filters (outline variant for secondary action)
+ * - Apply: Applies selected filters (primary variant for main action)
+ *
+ * Buttons are equally sized (flex-1) for balanced layout. Note:
+ * Functionality not yet implemented - wire up to filter stores.
+ */
 import { Button } from '$shared/shadcn/ui/button';
 </script>
 

src/widgets/AppSidebar/ui/Filters.svelte

@@ -1,26 +1,42 @@
 <script lang="ts">
+/**
+ * Filters Component
+ *
+ * Orchestrates all filter properties for the sidebar. Connects filter stores
+ * to CheckboxFilter components, organizing them by filter type:
+ *
+ * - Font provider: Google Fonts vs Fontshare
+ * - Font subset: Character subsets available (Latin, Latin Extended, etc.)
+ * - Font category: Serif, Sans-serif, Display, etc.
+ *
+ * Uses $derived for reactive access to filter states, ensuring UI updates
+ * when selections change through any means (sidebar, programmatically, etc.).
+ */
 import { categoryFilterStore } from '$features/CategoryFilter';
 import { providersFilterStore } from '$features/ProvidersFilter';
 import { subsetsFilterStore } from '$features/SubsetsFilter';
 import CheckboxFilter from '$shared/ui/CheckboxFilter/CheckboxFilter.svelte';
 
-const { categories: providers } = $derived($providersFilterStore);
-const { categories: subsets } = $derived($subsetsFilterStore);
-const { categories } = $derived($categoryFilterStore);
+/** Reactive properties from providers filter store */
+const { properties: providers } = $derived($providersFilterStore);
+/** Reactive properties from subsets filter store */
+const { properties: subsets } = $derived($subsetsFilterStore);
+/** Reactive properties from categories filter store */
+const { properties: categories } = $derived($categoryFilterStore);
 </script>
 
 <CheckboxFilter
-    filterName="Font provider"
-    categories={providers}
-    onCategoryToggle={providersFilterStore.toggleCategory}
+    displayedLabel="Font provider"
+    properties={providers}
+    onPropertyToggle={providersFilterStore.toggleProperty}
 />
 <CheckboxFilter
-    filterName="Font subset"
-    categories={subsets}
-    onCategoryToggle={subsetsFilterStore.toggleCategory}
+    displayedLabel="Font subset"
+    properties={subsets}
+    onPropertyToggle={subsetsFilterStore.toggleProperty}
 />
 <CheckboxFilter
-    filterName="Font category"
-    categories={categories}
-    onCategoryToggle={categoryFilterStore.toggleCategory}
+    displayedLabel="Font category"
+    properties={categories}
+    onPropertyToggle={categoryFilterStore.toggleProperty}
 />