From 653a23f80512f532cb15206754937488f75a5849 Mon Sep 17 00:00:00 2001
From: xyroscar <shiv.baratam@gmail.com>
Date: Mon, 24 Nov 2025 16:19:09 -0800
Subject: [PATCH] formatting files, removing unused app sidebar

---
 src/lib/components/app-sidebar.svelte      | 198 ---------------------
 src/lib/components/search-form.svelte      |  37 ++--
 src/lib/components/version-switcher.svelte |  88 ++++-----
 src/lib/services/onboarding.ts             |   4 +-
 src/lib/theme-switcher.ts                  |  77 ++++----
 5 files changed, 114 insertions(+), 290 deletions(-)
 delete mode 100644 src/lib/components/app-sidebar.svelte

diff --git a/src/lib/components/app-sidebar.svelte b/src/lib/components/app-sidebar.svelte
deleted file mode 100644
index 7a69362..0000000
--- a/src/lib/components/app-sidebar.svelte
+++ /dev/null
@@ -1,198 +0,0 @@
-<script lang="ts" module>
-	// sample data
-	const data = {
-		versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
-		navMain: [
-			{
-				title: "Getting Started",
-				url: "#",
-				items: [
-					{
-						title: "Installation",
-						url: "#",
-					},
-					{
-						title: "Project Structure",
-						url: "#",
-					},
-				],
-			},
-			{
-				title: "Building Your Application",
-				url: "#",
-				items: [
-					{
-						title: "Routing",
-						url: "#",
-					},
-					{
-						title: "Data Fetching",
-						url: "#",
-						isActive: true,
-					},
-					{
-						title: "Rendering",
-						url: "#",
-					},
-					{
-						title: "Caching",
-						url: "#",
-					},
-					{
-						title: "Styling",
-						url: "#",
-					},
-					{
-						title: "Optimizing",
-						url: "#",
-					},
-					{
-						title: "Configuring",
-						url: "#",
-					},
-					{
-						title: "Testing",
-						url: "#",
-					},
-					{
-						title: "Authentication",
-						url: "#",
-					},
-					{
-						title: "Deploying",
-						url: "#",
-					},
-					{
-						title: "Upgrading",
-						url: "#",
-					},
-					{
-						title: "Examples",
-						url: "#",
-					},
-				],
-			},
-			{
-				title: "API Reference",
-				url: "#",
-				items: [
-					{
-						title: "Components",
-						url: "#",
-					},
-					{
-						title: "File Conventions",
-						url: "#",
-					},
-					{
-						title: "Functions",
-						url: "#",
-					},
-					{
-						title: "next.config.js Options",
-						url: "#",
-					},
-					{
-						title: "CLI",
-						url: "#",
-					},
-					{
-						title: "Edge Runtime",
-						url: "#",
-					},
-				],
-			},
-			{
-				title: "Architecture",
-				url: "#",
-				items: [
-					{
-						title: "Accessibility",
-						url: "#",
-					},
-					{
-						title: "Fast Refresh",
-						url: "#",
-					},
-					{
-						title: "Next.js Compiler",
-						url: "#",
-					},
-					{
-						title: "Supported Browsers",
-						url: "#",
-					},
-					{
-						title: "Turbopack",
-						url: "#",
-					},
-				],
-			},
-			{
-				title: "Community",
-				url: "#",
-				items: [
-					{
-						title: "Contribution Guide",
-						url: "#",
-					},
-				],
-			},
-		],
-	};
-</script>
-
-<script lang="ts">
-	import SearchForm from "./search-form.svelte";
-	import VersionSwitcher from "./version-switcher.svelte";
-	import * as Collapsible from "$lib/components/ui/collapsible/index.js";
-	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
-	import type { ComponentProps } from "svelte";
-
-	let { ref = $bindable(null), ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
-</script>
-
-<Sidebar.Root bind:ref {...restProps}>
-	<Sidebar.Header>
-		<VersionSwitcher versions={data.versions} defaultVersion={data.versions[0]} />
-		<SearchForm />
-	</Sidebar.Header>
-	<Sidebar.Content class="gap-0">
-		<!-- We create a collapsible SidebarGroup for each parent. -->
-		{#each data.navMain as item (item.title)}
-			<Collapsible.Root title={item.title} open class="group/collapsible">
-				<Sidebar.Group>
-					<Sidebar.GroupLabel
-						class="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
-					>
-						{#snippet child({ props })}
-							<Collapsible.Trigger {...props}>
-								{item.title}
-								<ChevronRightIcon
-									class="ms-auto transition-transform group-data-[state=open]/collapsible:rotate-90"
-								/>
-							</Collapsible.Trigger>
-						{/snippet}
-					</Sidebar.GroupLabel>
-					<Collapsible.Content>
-						<Sidebar.GroupContent>
-							<Sidebar.Menu>
-								{#each item.items as subItem (subItem.title)}
-									<Sidebar.MenuItem>
-										<Sidebar.MenuButton isActive={subItem.isActive}>
-											{#snippet child({ props })}
-												<a href={subItem.url} {...props}>{subItem.title}</a>
-											{/snippet}
-										</Sidebar.MenuButton>
-									</Sidebar.MenuItem>
-								{/each}
-							</Sidebar.Menu>
-						</Sidebar.GroupContent>
-					</Collapsible.Content>
-				</Sidebar.Group>
-			</Collapsible.Root>
-		{/each}
-	</Sidebar.Content>
-	<Sidebar.Rail />
-</Sidebar.Root>
diff --git a/src/lib/components/search-form.svelte b/src/lib/components/search-form.svelte
index 8544a96..208c5e7 100644
--- a/src/lib/components/search-form.svelte
+++ b/src/lib/components/search-form.svelte
@@ -1,21 +1,28 @@
 <script lang="ts">
-	import { Label } from "$lib/components/ui/label/index.js";
-	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
-	import type { WithElementRef } from "$lib/utils.js";
-	import SearchIcon from "@lucide/svelte/icons/search";
-	import type { HTMLFormAttributes } from "svelte/elements";
+  import { Label } from "$lib/components/ui/label/index.js";
+  import * as Sidebar from "$lib/components/ui/sidebar/index.js";
+  import type { WithElementRef } from "$lib/utils.js";
+  import SearchIcon from "@lucide/svelte/icons/search";
+  import type { HTMLFormAttributes } from "svelte/elements";
 
-	let { ref = $bindable(null), ...restProps }: WithElementRef<HTMLFormAttributes> = $props();
+  let {
+    ref = $bindable(null),
+    ...restProps
+  }: WithElementRef<HTMLFormAttributes> = $props();
 </script>
 
 <form bind:this={ref} {...restProps}>
-	<Sidebar.Group class="py-0">
-		<Sidebar.GroupContent class="relative">
-			<Label for="search" class="sr-only">Search</Label>
-			<Sidebar.Input id="search" placeholder="Search the docs..." class="ps-8" />
-			<SearchIcon
-				class="pointer-events-none absolute start-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50"
-			/>
-		</Sidebar.GroupContent>
-	</Sidebar.Group>
+  <Sidebar.Group class="py-0">
+    <Sidebar.GroupContent class="relative">
+      <Label for="search" class="sr-only">Search</Label>
+      <Sidebar.Input
+        id="search"
+        placeholder="Search the docs..."
+        class="ps-8"
+      />
+      <SearchIcon
+        class="pointer-events-none absolute start-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50"
+      />
+    </Sidebar.GroupContent>
+  </Sidebar.Group>
 </form>
diff --git a/src/lib/components/version-switcher.svelte b/src/lib/components/version-switcher.svelte
index a06825a..48a8506 100644
--- a/src/lib/components/version-switcher.svelte
+++ b/src/lib/components/version-switcher.svelte
@@ -1,48 +1,54 @@
 <script lang="ts">
-	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
-	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
-	import GalleryVerticalEndIcon from "@lucide/svelte/icons/gallery-vertical-end";
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+  import * as Sidebar from "$lib/components/ui/sidebar/index.js";
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
+  import GalleryVerticalEndIcon from "@lucide/svelte/icons/gallery-vertical-end";
 
-	let { versions, defaultVersion }: { versions: string[]; defaultVersion: string } = $props();
+  let {
+    versions,
+    defaultVersion,
+  }: { versions: string[]; defaultVersion: string } = $props();
 
-	let selectedVersion = $state(defaultVersion);
+  let selectedVersion = $state(defaultVersion);
 </script>
 
 <Sidebar.Menu>
-	<Sidebar.MenuItem>
-		<DropdownMenu.Root>
-			<DropdownMenu.Trigger>
-				{#snippet child({ props })}
-					<Sidebar.MenuButton
-						size="lg"
-						class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-						{...props}
-					>
-						<div
-							class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
-						>
-							<GalleryVerticalEndIcon class="size-4" />
-						</div>
-						<div class="flex flex-col gap-0.5 leading-none">
-							<span class="font-medium">Documentation</span>
-							<span class="">v{selectedVersion}</span>
-						</div>
-						<ChevronsUpDownIcon class="ms-auto" />
-					</Sidebar.MenuButton>
-				{/snippet}
-			</DropdownMenu.Trigger>
-			<DropdownMenu.Content class="w-(--bits-dropdown-menu-anchor-width)" align="start">
-				{#each versions as version (version)}
-					<DropdownMenu.Item onSelect={() => (selectedVersion = version)}>
-						v{version}
-						{#if version === selectedVersion}
-							<CheckIcon class="ms-auto" />
-						{/if}
-					</DropdownMenu.Item>
-				{/each}
-			</DropdownMenu.Content>
-		</DropdownMenu.Root>
-	</Sidebar.MenuItem>
+  <Sidebar.MenuItem>
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+          <Sidebar.MenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            {...props}
+          >
+            <div
+              class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
+            >
+              <GalleryVerticalEndIcon class="size-4" />
+            </div>
+            <div class="flex flex-col gap-0.5 leading-none">
+              <span class="font-medium">Documentation</span>
+              <span class="">v{selectedVersion}</span>
+            </div>
+            <ChevronsUpDownIcon class="ms-auto" />
+          </Sidebar.MenuButton>
+        {/snippet}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        class="w-(--bits-dropdown-menu-anchor-width)"
+        align="start"
+      >
+        {#each versions as version (version)}
+          <DropdownMenu.Item onSelect={() => (selectedVersion = version)}>
+            v{version}
+            {#if version === selectedVersion}
+              <CheckIcon class="ms-auto" />
+            {/if}
+          </DropdownMenu.Item>
+        {/each}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  </Sidebar.MenuItem>
 </Sidebar.Menu>
diff --git a/src/lib/services/onboarding.ts b/src/lib/services/onboarding.ts
index 54b7bef..a20437b 100644
--- a/src/lib/services/onboarding.ts
+++ b/src/lib/services/onboarding.ts
@@ -1,3 +1,3 @@
 export async function check_onboarding(): Promise<Boolean> {
-    return Promise.resolve(true);
-}
\ No newline at end of file
+  return Promise.resolve(true);
+}
diff --git a/src/lib/theme-switcher.ts b/src/lib/theme-switcher.ts
index ab0cf1b..3b96ad1 100644
--- a/src/lib/theme-switcher.ts
+++ b/src/lib/theme-switcher.ts
@@ -1,45 +1,54 @@
-import { writable } from 'svelte/store';
-import { browser } from '$app/environment';
+import { writable } from "svelte/store";
+import { browser } from "$app/environment";
 
-export const themes = ['light', 'dark', 'latte', 'frappe', 'macchiato', 'mocha'] as const;
+export const themes = [
+  "light",
+  "dark",
+  "latte",
+  "frappe",
+  "macchiato",
+  "mocha",
+] as const;
 type Theme = (typeof themes)[number];
 
 const createThemeStore = () => {
-	const { subscribe, set } = writable<Theme>('light');
+  const { subscribe, set } = writable<Theme>("light");
 
-	function applyTheme(theme: Theme) {
-		if (browser) {
-			document.documentElement.classList.remove(...themes);
-			document.documentElement.classList.add(theme);
-			localStorage.setItem('theme', theme);
-			set(theme);
-		}
-	}
+  function applyTheme(theme: Theme) {
+    if (browser) {
+      document.documentElement.classList.remove(...themes);
+      document.documentElement.classList.add(theme);
+      localStorage.setItem("theme", theme);
+      set(theme);
+    }
+  }
 
-	function initializeTheme() {
-		if (browser) {
-			const storedTheme = localStorage.getItem('theme') as Theme | null;
-			const systemTheme: Theme = window.matchMedia('(prefers-color-scheme: dark)').matches
-				? 'dark'
-				: 'light';
-			const initialTheme = storedTheme ?? systemTheme;
-			applyTheme(initialTheme);
-		}
-	}
+  function initializeTheme() {
+    if (browser) {
+      const storedTheme = localStorage.getItem("theme") as Theme | null;
+      const systemTheme: Theme = window.matchMedia(
+        "(prefers-color-scheme: dark)"
+      ).matches
+        ? "dark"
+        : "light";
+      const initialTheme = storedTheme ?? systemTheme;
+      applyTheme(initialTheme);
+    }
+  }
 
-	function resetToSystem() {
-		if (browser) {
-			localStorage.removeItem('theme');
-			initializeTheme();
-		}
-	}
+  function resetToSystem() {
+    if (browser) {
+      localStorage.removeItem("theme");
+      initializeTheme();
+    }
+  }
 
-	return {
-		subscribe,
-		applyTheme,
-		initializeTheme,
-		resetToSystem
-	};
+  return {
+    subscribe,
+    applyTheme,
+    initializeTheme,
+    resetToSystem,
+  };
 };
 
 export const theme = createThemeStore();