chore: add documentation for svelte components

src/app/App.svelte

@@ -1,4 +1,14 @@
 <script lang="ts">
+/**
+ * App Component
+ *
+ * Application entry point component. Wraps the main page route within the shared
+ * layout shell. This is the root component mounted by the application.
+ *
+ * Structure:
+ * - Layout provides sidebar, header/footer, and page container
+ * - Page renders the current route content
+ */
 import Page from '$routes/Page.svelte';
 import Layout from './ui/Layout.svelte';
 </script>

src/app/ui/Layout.svelte

@@ -1,8 +1,23 @@
 <script lang="ts">
+/**
+ * Layout Component
+ *
+ * Root layout wrapper that provides the application shell structure. Handles favicon,
+ * sidebar provider initialization, and renders child routes with consistent structure.
+ *
+ * Layout structure:
+ * - Header area (currently empty, reserved for future use)
+ * - Collapsible sidebar with main content area
+ * - Footer area (currently empty, reserved for future use)
+ *
+ * Uses Sidebar.Provider to enable mobile-responsive collapsible sidebar behavior
+ * throughout the application.
+ */
 import favicon from '$shared/assets/favicon.svg';
 import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
 import { AppSidebar } from '$widgets/AppSidebar';
 
+/** Slot content for route pages to render */
 let { children } = $props();
 </script>