feat!(6-2): add basic gui interface [skip ci]

.gitignore

@@ -27,3 +27,6 @@ vite.config.ts.timestamp-*
 .direnv
 
 target
+
+# IntelliJ
+.idea

package.json

@@ -27,6 +27,7 @@
 		"autoprefixer": "^10.4.20",
 		"bits-ui": "^1.0.0-next.78",
 		"clsx": "^2.1.1",
+		"lucide-svelte": "^0.474.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"semantic-release": "^24.2.1",
@@ -43,7 +44,8 @@
 	"dependencies": {
 		"@tauri-apps/api": "^2.2.0",
 		"@tauri-apps/cli": "^2.2.5",
-		"bun-types": "^1.1.45"
+		"bun-types": "^1.1.45",
+		"mode-watcher": "^0.5.1"
 	},
 	"repository": {
 		"type": "git",

src/lib/components/app-sidebar.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" module>
+	import {
+		BarChart3,
+		FolderOpen,
+		Home,
+		Import, Plus,
+		SettingsIcon, SquarePen
+	} from 'lucide-svelte';
+
+	const data = {
+		user: {
+			name: "shadcn",
+			email: "m@example.com",
+			avatar: "/avatars/shadcn.jpg",
+		},
+		navMain: [
+			{
+				title: "Home",
+				url: "/",
+				icon: Home,
+			},
+			{
+				title: "All Projects",
+				url: "all-projects",
+				icon: FolderOpen,
+			},
+			{
+				title: "Create project",
+				url: "create-project",
+				icon: Plus,
+			},
+			{
+				title: "Statistics",
+				url: "statistics",
+				icon: BarChart3,
+			},
+		],
+		navSecondary: [
+			{
+				title: "Settings",
+				url: "settings",
+				icon: SettingsIcon,
+			},
+		],
+	};
+</script>
+
+<script lang="ts">
+	import NavMain from "$lib/components/nav-main.svelte";
+	import NavSecondary from "$lib/components/nav-secondary.svelte";
+	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
+	import Command from "lucide-svelte/icons/command";
+	import type { ComponentProps } from "svelte";
+
+	let { ref = $bindable(null), ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
+</script>
+
+<Sidebar.Root bind:ref variant="inset" {...restProps}>
+	<Sidebar.Header>
+		<Sidebar.Menu>
+			<Sidebar.MenuItem>
+				<Sidebar.MenuButton size="lg">
+					{#snippet child({ props })}
+						<a {...props}>
+							<div
+								class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg "
+							>
+								<Command class="size-4" />
+							</div>
+							<div class="grid flex-1 text-left text-sm leading-tight">
+								<span class="truncate font-semibold">Episko</span>
+							</div>
+						</a>
+					{/snippet}
+				</Sidebar.MenuButton>
+			</Sidebar.MenuItem>
+		</Sidebar.Menu>
+	</Sidebar.Header>
+	<Sidebar.Content>
+		<NavMain items={data.navMain} />
+	</Sidebar.Content>
+	<Sidebar.Footer>
+		<NavSecondary items={data.navSecondary} class="mt-auto" />
+	</Sidebar.Footer>
+</Sidebar.Root>

src/lib/components/nav-main.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import * as Sidebar from "$lib/components/ui/sidebar";
+
+	let {
+		items,
+	}: {
+		items: {
+			title: string;
+			url: string;
+			icon: any;
+		}[];
+	} = $props();
+</script>
+
+
+<Sidebar.Group>
+	<Sidebar.Menu>
+		{#each items as item (item.title)}
+			<Sidebar.MenuItem>
+				<Sidebar.MenuButton size="sm">
+					{#snippet child({ props})}
+						<a href={item.url} {...props}>
+							<item.icon />
+							<span>{item.title}</span>
+						</a>
+					{/snippet}
+				</Sidebar.MenuButton>
+			</Sidebar.MenuItem>
+		{/each}
+	</Sidebar.Menu>
+</Sidebar.Group>

src/lib/components/nav-projects.svelte

@@ -0,0 +1,76 @@
+<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 { useSidebar } from "$lib/components/ui/sidebar/index.js";
+	import Ellipsis from "lucide-svelte/icons/ellipsis";
+	import Folder from "lucide-svelte/icons/folder";
+	import Share from "lucide-svelte/icons/share";
+	import Trash2 from "lucide-svelte/icons/trash-2";
+
+	let {
+		projects,
+	}: {
+		projects: {
+			name: string;
+			url: string;
+			// This should be `Component` after lucide-svelte updates types
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			icon: any;
+		}[];
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<Sidebar.Group class="group-data-[collapsible=icon]:hidden">
+	<Sidebar.GroupLabel>Projects</Sidebar.GroupLabel>
+	<Sidebar.Menu>
+		{#each projects as item (item.name)}
+			<Sidebar.MenuItem>
+				<Sidebar.MenuButton>
+					{#snippet child({ props })}
+						<a href={item.url} {...props}>
+							<item.icon />
+							<span>{item.name}</span>
+						</a>
+					{/snippet}
+				</Sidebar.MenuButton>
+				<DropdownMenu.Root>
+					<DropdownMenu.Trigger>
+						{#snippet child({ props })}
+							<Sidebar.MenuAction showOnHover {...props}>
+								<Ellipsis />
+								<span class="sr-only">More</span>
+							</Sidebar.MenuAction>
+						{/snippet}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content
+						class="w-48"
+						side={sidebar.isMobile ? "bottom" : "right"}
+						align={sidebar.isMobile ? "end" : "start"}
+					>
+						<DropdownMenu.Item>
+							<Folder class="text-muted-foreground" />
+							<span>View Project</span>
+						</DropdownMenu.Item>
+						<DropdownMenu.Item>
+							<Share class="text-muted-foreground" />
+							<span>Share Project</span>
+						</DropdownMenu.Item>
+						<DropdownMenu.Separator />
+						<DropdownMenu.Item>
+							<Trash2 class="text-muted-foreground" />
+							<span>Delete Project</span>
+						</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
+			</Sidebar.MenuItem>
+		{/each}
+		<Sidebar.MenuItem>
+			<Sidebar.MenuButton>
+				<Ellipsis />
+				<span>More</span>
+			</Sidebar.MenuButton>
+		</Sidebar.MenuItem>
+	</Sidebar.Menu>
+</Sidebar.Group>

src/lib/components/nav-secondary.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		items,
+		...restProps
+	}: {
+		items: {
+			title: string;
+			url: string;
+			// This should be `Component` after lucide-svelte updates types
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			icon: any;
+		}[];
+	} & ComponentProps<typeof Sidebar.Group> = $props();
+</script>
+
+<Sidebar.Group bind:ref {...restProps}>
+	<Sidebar.GroupContent>
+		<Sidebar.Menu>
+			{#each items as item (item.title)}
+				<Sidebar.MenuItem>
+					<Sidebar.MenuButton size="sm">
+						{#snippet child({ props })}
+							<a href={item.url} {...props}>
+								<item.icon />
+								<span>{item.title}</span>
+							</a>
+						{/snippet}
+					</Sidebar.MenuButton>
+				</Sidebar.MenuItem>
+			{/each}
+		</Sidebar.Menu>
+	</Sidebar.GroupContent>
+</Sidebar.Group>