feat: added content settings and other minor improvements (#88)

* feat: added command menu

* feat: added partial content settings

* feat: improved progress bar with real progress

* feat: added working of input chips & other minor improvements

* feat: completed adding all settings and some other minor improvements

frontend/package.json

@@ -18,6 +18,7 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/luxon": "^3.3.7",
+		"@types/nprogress": "^0.2.3",
 		"@typescript-eslint/eslint-plugin": "^6.14.0",
 		"@typescript-eslint/parser": "^6.0.0",
 		"autoprefixer": "^10.4.14",
@@ -40,9 +41,11 @@
 	"dependencies": {
 		"bits-ui": "^0.11.8",
 		"clsx": "^2.0.0",
+		"cmdk-sv": "^0.0.12",
 		"lucide-svelte": "^0.298.0",
 		"luxon": "^3.4.4",
 		"mode-watcher": "^0.1.2",
+		"nprogress": "^0.2.0",
 		"svelte-sonner": "^0.3.6",
 		"sveltekit-superforms": "^1.13.0",
 		"tailwind-merge": "^2.1.0",

frontend/src/app.pcss

@@ -1,3 +1,5 @@
+@import 'nprogress.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

frontend/src/lib/components/header.svelte

@@ -2,9 +2,8 @@
 	import type { NavItem } from '$lib/types';
 	import ThemeSwitcher from '$lib/components/theme-switcher.svelte';
 	import NavigationItem from '$lib/components/header-item.svelte';
-	import { Mountain, MoreHorizontal, X, Loader2 } from 'lucide-svelte';
+	import { Mountain, MoreHorizontal, X, Command } from 'lucide-svelte';
 	import { Button } from '$lib/components/ui/button';
-	import { navigating } from '$app/stores';
 
 	const navItems: NavItem[] = [
 		{
@@ -32,6 +31,13 @@
 	<a href="/" class="flex items-center gap-2">
 		<Mountain class="h-8 w-8" />
 		<h1 class="text-3xl font-semibold tracking-wider">Iceberg</h1>
+		<div class="ml-2 hidden lg:flex items-center p-2 px-4 bg-slate-100 dark:bg-slate-900 rounded-md">
+			<div class="flex items-center">
+				<Command class="h-4 w-4" />
+				<span>K</span>
+			</div>
+			<span class="ml-2">to open command palette</span>
+		</div>
 	</a>
 	<nav class="items-center gap-6 tracking-wider hidden md:flex">
 		<div class="flex items-center gap-3">
@@ -49,12 +55,6 @@
 	</nav>
 </header>
 
-{#if $navigating}
-	<div class="loading-bar dark:bg-white bg-black z-[99]">
-		<div class="loading-animation"></div>
-	</div>
-{/if}
-
 <div
 	id="mobilenav"
 	class:h-0={!showMenu}
@@ -80,28 +80,4 @@
 	#mobilenav {
 		transition: all 0.5s ease-in-out;
 	}
-	.loading-bar {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 4px;
-		overflow: hidden;
-	}
-
-	.loading-animation {
-		width: 100%;
-		height: 100%;
-		background: linear-gradient(to right, transparent, #888, transparent);
-		animation: loading 1s infinite;
-	}
-
-	@keyframes loading {
-		0% {
-			transform: translateX(-100%);
-		}
-		100% {
-			transform: translateX(100%);
-		}
-	}
 </style>

frontend/src/lib/components/ui/command/command-dialog.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Command from "./command.svelte";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import type { Dialog as DialogPrimitive } from "bits-ui";
+	import type { Command as CommandPrimitive } from "cmdk-sv";
+
+	type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps;
+
+	export let open: $$Props["open"] = false;
+	export let value: $$Props["value"] = undefined;
+</script>
+
+<Dialog.Root bind:open {...$$restProps}>
+	<Dialog.Content class="overflow-hidden p-0 shadow-lg">
+		<Command
+			class="[&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
+			{...$$restProps}
+			bind:value
+		>
+			<slot />
+		</Command>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/ui/command/command-empty.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CommandPrimitive.EmptyProps;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Empty
+	class={cn("py-6 text-center text-sm", className)}
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.Empty>

frontend/src/lib/components/ui/command/command-group.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils";
+	type $$Props = CommandPrimitive.GroupProps;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Group
+	class={cn(
+		"overflow-hidden p-1 text-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.Group>

frontend/src/lib/components/ui/command/command-input.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { Search } from "lucide-svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CommandPrimitive.InputProps;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let value: string = "";
+</script>
+
+<div class="flex items-center border-b px-2" data-cmdk-input-wrapper="">
+	<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+	<CommandPrimitive.Input
+		class={cn(
+			"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+			className
+		)}
+		{...$$restProps}
+		bind:value
+	/>
+</div>

frontend/src/lib/components/ui/command/command-item.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CommandPrimitive.ItemProps;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Item
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.Item>

frontend/src/lib/components/ui/command/command-list.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CommandPrimitive.ListProps;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.List
+	class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.List>

frontend/src/lib/components/ui/command/command-separator.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CommandPrimitive.SeparatorProps;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Separator
+	class={cn("-mx-1 h-px bg-border", className)}
+	{...$$restProps}
+/>

frontend/src/lib/components/ui/command/command-shortcut.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<span
+	class={cn(
+		"ml-auto text-xs tracking-widest text-muted-foreground",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</span>

frontend/src/lib/components/ui/command/command.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CommandPrimitive.CommandProps;
+
+	export let value: $$Props["value"] = undefined;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Root
+	class={cn(
+		"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+		className
+	)}
+	bind:value
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.Root>