Rework Header Component for Auth handling

Add Input Component from shadcn
Implemented Mode Select and FIlters for Admin Page
2023-12-11 20:16:20 +01:00 · 2023-12-11 20:16:04 +01:00 · 2023-12-10 23:21:54 +01:00 · 2023-12-10 23:21:35 +01:00 · 2023-12-10 23:21:13 +01:00 · 2023-12-10 23:19:42 +01:00
107 changed files with 2590 additions and 555 deletions
--- a/.gitignore
+++ b/.gitignore
@ -12,3 +12,4 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*

 /.vscode
+/.idea
--- a/components.json
+++ b/components.json
@ -0,0 +1,13 @@
+{
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "style": "new-york",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app.postcss",
+    "baseColor": "slate"
+  },
+  "aliases": {
+    "components": "$lib/components",
+    "utils": "$lib/utils"
+  }
+}
--- a/package.json
+++ b/package.json
@ -9,40 +9,44 @@
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write ."
+    "format": "prettier --plugin-search-dir . --write .",
+    "ui": "npx shadcn-svelte@latest"
  },
  "devDependencies": {
+    "@fontsource/fira-mono": "^4.5.10",
+    "@neoconfetti/svelte": "^1.0.0",
    "@sveltejs/adapter-auto": "^2.0.0",
    "@sveltejs/kit": "^1.20.4",
+    "@types/cookie": "^0.5.1",
+    "@types/node": "^20.6.0",
    "@typescript-eslint/eslint-plugin": "^5.45.0",
    "@typescript-eslint/parser": "^5.45.0",
+    "autoprefixer": "^10.4.15",
    "eslint": "^8.28.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-svelte": "^2.30.0",
+    "postcss": "^8.4.29",
+    "postcss-load-config": "^4.0.1",
    "prettier": "^2.8.0",
    "prettier-plugin-svelte": "^2.10.1",
-    "svelte": "^4.0.5",
+    "svelte": "^5.0.0-next.17",
    "svelte-check": "^3.4.3",
+    "svelte-loading-spinners": "^0.3.4",
    "tslib": "^2.4.1",
    "typescript": "^5.0.0",
-    "vite": "^4.4.2",
-    "postcss": "8.4.29",
-    "autoprefixer": "10.4.15",
-    "tailwindcss": "3.3.3",
-    "@skeletonlabs/skeleton": "2.0.0",
-    "@skeletonlabs/tw-plugin": "0.1.0",
-    "vite-plugin-tailwind-purgecss": "0.1.3",
-    "@types/node": "20.6.0",
-    "@fontsource/fira-mono": "^4.5.10",
-		"@neoconfetti/svelte": "^1.0.0",
-		"@types/cookie": "^0.5.1",
-		"postcss-load-config": "^4.0.1",
-		"svelte-loading-spinners": "^0.3.4"
+    "vite": "^4.4.2"
  },
  "type": "module",
  "dependencies": {
+    "bits-ui": "^0.11.6",
    "chart.js": "^4.3.3",
    "chartjs-plugin-datalabels": "^2.2.0",
-		"svelte-chartjs": "^3.1.2"
+    "clsx": "^2.0.0",
+    "flowbite": "^2.2.0",
+    "radix-icons-svelte": "^1.2.1",
+    "svelte-chartjs": "^3.1.2",
+    "tailwind-merge": "^2.1.0",
+    "tailwind-variants": "^0.1.18",
+    "tailwindcss": "^3.3.6"
  }
 }
--- a/src/app.html
+++ b/src/app.html
@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en" class="dark h-full">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" data-theme="wintry">
-		<div style="display: contents" class="h-screen overflow-hidden contents">%sveltekit.body%</div>
+	<body class="h-full w-full" data-sveltekit-preload-data="hover">
+		%sveltekit.body%
 	</body>
 </html>
--- a/src/app.postcss
+++ b/src/app.postcss
@ -1,6 +1,78 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-@tailwind variants;
 
-html, body { @apply h-full overflow-hidden; }
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 222.2 84% 4.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: hsl(212.7,26.8%,83.9);
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@ -1,6 +0,0 @@
-<script lang="ts">
-	export let text: string;
-	export let action: any = () => {};
-</script>
-
-<button class="btn px-4 py-2 mx-2 rounded-token variant-ringed-primary hover:variant-filled-primary active:variant-filled-primary" on:click={action}>{text}</button>
--- a/src/lib/components/consts.ts
+++ b/src/lib/components/consts.ts
@ -1,2 +0,0 @@
-export const apiBaseUrl = 'https://wip.chellaris.net/api';
-export const MACHINE_GROUP_ID = 12;
--- a/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/src/lib/components/ui/avatar/avatar-fallback.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = AvatarPrimitive.FallbackProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Fallback
+	class={cn(
+		"flex h-full w-full items-center justify-center rounded-full bg-muted",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Fallback>
--- a/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/src/lib/components/ui/avatar/avatar-image.svelte
@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = AvatarPrimitive.ImageProps;
+
+	let className: $$Props["class"] = undefined;
+	export let src: $$Props["src"] = undefined;
+	export let alt: $$Props["alt"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Image
+	{src}
+	{alt}
+	class={cn("aspect-square h-full w-full", className)}
+	{...$$restProps}
+/>
--- a/src/lib/components/ui/avatar/avatar.svelte
+++ b/src/lib/components/ui/avatar/avatar.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = AvatarPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let delayMs: $$Props["delayMs"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Root
+	{delayMs}
+	class={cn(
+		"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Root>
--- a/src/lib/components/ui/avatar/index.ts
+++ b/src/lib/components/ui/avatar/index.ts
@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback
+};
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { buttonVariants, type Props, type Events } from ".";
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@ -0,0 +1,52 @@
+import type { Button as ButtonPrimitive } from "bits-ui";
+import { tv, type VariantProps } from "tailwind-variants";
+import Root from "./button.svelte";
+
+const buttonVariants = tv({
+	base: "inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+	variants: {
+		variant: {
+			default:
+				"bg-primary text-primary-foreground shadow hover:bg-primary/90",
+			destructive:
+				"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+			outline:
+				"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+			secondary:
+				"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-9 px-4 py-2",
+			sm: "h-8 rounded-md px-3 text-xs",
+			lg: "h-10 rounded-md px-8",
+			icon: "h-9 w-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+
+type Variant = VariantProps<typeof buttonVariants>["variant"];
+type Size = VariantProps<typeof buttonVariants>["size"];
+
+type Props = ButtonPrimitive.Props & {
+	variant?: Variant;
+	size?: Size;
+};
+
+type Events = ButtonPrimitive.Events;
+
+export {
+	Root,
+	type Props,
+	type Events,
+	//
+	Root as Button,
+	type Props as ButtonProps,
+	type Events as ButtonEvents,
+	buttonVariants
+};
--- a/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/src/lib/components/ui/checkbox/checkbox.svelte
@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import { Check, Minus } from "radix-icons-svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CheckboxPrimitive.Props;
+	type $$Events = CheckboxPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = false;
+	export { className as class };
+</script>
+
+<CheckboxPrimitive.Root
+	class={cn(
+		"box-content peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		className
+	)}
+	bind:checked
+	on:click
+	{...$$restProps}
+>
+	<CheckboxPrimitive.Indicator
+		class={cn("flex items-center justify-center text-current h-4 w-4")}
+		let:isChecked
+		let:isIndeterminate
+	>
+		{#if isIndeterminate}
+			<Minus class="h-3.5 w-3.5" />
+		{:else}
+			<Check
+				class={cn("h-3.5 w-3.5", !isChecked && "text-transparent")}
+			/>
+		{/if}
+	</CheckboxPrimitive.Indicator>
+</CheckboxPrimitive.Root>
--- a/src/lib/components/ui/checkbox/index.ts
+++ b/src/lib/components/ui/checkbox/index.ts
@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+	Root,
+	//
+	Root as Checkbox
+};
--- a/src/lib/components/ui/collapsible/collapsible-content.svelte
+++ b/src/lib/components/ui/collapsible/collapsible-content.svelte
@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+	import { slide } from "svelte/transition";
+	type $$Props = CollapsiblePrimitive.ContentProps;
+
+	export let transition: $$Props["transition"] = slide;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150
+	};
+</script>
+
+<CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}>
+	<slot />
+</CollapsiblePrimitive.Content>
--- a/src/lib/components/ui/collapsible/index.ts
+++ b/src/lib/components/ui/collapsible/index.ts
@ -0,0 +1,15 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+import Content from "./collapsible-content.svelte";
+
+const Root = CollapsiblePrimitive.Root;
+const Trigger = CollapsiblePrimitive.Trigger;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger
+};
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@ -0,0 +1,35 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { Check } from "radix-icons-svelte";
+
+	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
+	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:checked
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<DropdownMenuPrimitive.CheckboxIndicator>
+			<Check class="h-4 w-4" />
+		</DropdownMenuPrimitive.CheckboxIndicator>
+	</span>
+	<slot />
+</DropdownMenuPrimitive.CheckboxItem>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@ -0,0 +1,26 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils";
+
+	type $$Props = DropdownMenuPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<slot />
+</DropdownMenuPrimitive.Content>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@ -0,0 +1,31 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DropdownMenuPrimitive.ItemProps & {
+		inset?: boolean;
+	};
+	type $$Events = DropdownMenuPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Item
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		inset && "pl-8",
+		className
+	)}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+	{...$$restProps}
+>
+	<slot />
+</DropdownMenuPrimitive.Item>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DropdownMenuPrimitive.LabelProps & {
+		inset?: boolean;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Label
+	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	{...$$restProps}
+>
+	<slot />
+</DropdownMenuPrimitive.Label>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@ -0,0 +1,11 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	type $$Props = DropdownMenuPrimitive.RadioGroupProps;
+
+	export let value: $$Props["value"] = undefined;
+</script>
+
+<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
+	<slot />
+</DropdownMenuPrimitive.RadioGroup>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@ -0,0 +1,35 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { DotFilled } from "radix-icons-svelte";
+
+	type $$Props = DropdownMenuPrimitive.RadioItemProps;
+	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: DropdownMenuPrimitive.RadioItemProps["value"];
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{value}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<DropdownMenuPrimitive.RadioIndicator>
+			<DotFilled class="h-4 w-4 fill-current" />
+		</DropdownMenuPrimitive.RadioIndicator>
+	</span>
+	<slot />
+</DropdownMenuPrimitive.RadioItem>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@ -0,0 +1,14 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DropdownMenuPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Separator
+	class={cn("-mx-1 my-1 h-px bg-muted", className)}
+	{...$$restProps}
+/>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span
+	class={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+	{...$$restProps}
+>
+	<slot />
+</span>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@ -0,0 +1,29 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils";
+
+	type $$Props = DropdownMenuPrimitive.SubContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		x: -10,
+		y: 0
+	};
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+	on:focusout
+	on:pointermove
+>
+	<slot />
+</DropdownMenuPrimitive.SubContent>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@ -0,0 +1,32 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { ChevronRight } from "radix-icons-svelte";
+
+	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	};
+	type $$Events = DropdownMenuPrimitive.SubTriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	class={cn(
+		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent",
+		inset && "pl-8",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<slot />
+	<ChevronRight class="ml-auto h-4 w-4" />
+</DropdownMenuPrimitive.SubTrigger>
--- a/src/lib/components/ui/dropdown-menu/index.ts
+++ b/src/lib/components/ui/dropdown-menu/index.ts
@ -0,0 +1,48 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+
+const Sub = DropdownMenuPrimitive.Sub;
+const Root = DropdownMenuPrimitive.Root;
+const Trigger = DropdownMenuPrimitive.Trigger;
+const Group = DropdownMenuPrimitive.Group;
+
+export {
+	Sub,
+	Root,
+	Item,
+	Label,
+	Group,
+	Trigger,
+	Content,
+	Shortcut,
+	Separator,
+	RadioItem,
+	SubContent,
+	SubTrigger,
+	RadioGroup,
+	CheckboxItem,
+	//
+	Root as DropdownMenu,
+	Sub as DropdownMenuSub,
+	Item as DropdownMenuItem,
+	Label as DropdownMenuLabel,
+	Group as DropdownMenuGroup,
+	Content as DropdownMenuContent,
+	Trigger as DropdownMenuTrigger,
+	Shortcut as DropdownMenuShortcut,
+	RadioItem as DropdownMenuRadioItem,
+	Separator as DropdownMenuSeparator,
+	RadioGroup as DropdownMenuRadioGroup,
+	SubContent as DropdownMenuSubContent,
+	SubTrigger as DropdownMenuSubTrigger,
+	CheckboxItem as DropdownMenuCheckboxItem
+};
--- a/src/lib/components/ui/input/index.ts
+++ b/src/lib/components/ui/input/index.ts
@ -0,0 +1,25 @@
+import Root from "./input.svelte";
+
+type FormInputEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+	blur: FormInputEvent<FocusEvent>;
+	change: FormInputEvent<Event>;
+	click: FormInputEvent<MouseEvent>;
+	focus: FormInputEvent<FocusEvent>;
+	keydown: FormInputEvent<KeyboardEvent>;
+	keypress: FormInputEvent<KeyboardEvent>;
+	keyup: FormInputEvent<KeyboardEvent>;
+	mouseover: FormInputEvent<MouseEvent>;
+	mouseenter: FormInputEvent<MouseEvent>;
+	mouseleave: FormInputEvent<MouseEvent>;
+	paste: FormInputEvent<ClipboardEvent>;
+	input: FormInputEvent<InputEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Input
+};
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+	import type { InputEvents } from ".";
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+</script>
+
+<input
+	class={cn(
+		"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+	{...$$restProps}
+/>
--- a/src/lib/components/ui/label/index.ts
+++ b/src/lib/components/ui/label/index.ts
@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label
+};
--- a/src/lib/components/ui/label/label.svelte
+++ b/src/lib/components/ui/label/label.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = LabelPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<LabelPrimitive.Root
+	class={cn(
+		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</LabelPrimitive.Root>
--- a/src/lib/components/ui/menubar/index.ts
+++ b/src/lib/components/ui/menubar/index.ts
@ -0,0 +1,52 @@
+import { Menubar as MenubarPrimitive } from "bits-ui";
+
+import Root from "./menubar.svelte";
+import CheckboxItem from "./menubar-checkbox-item.svelte";
+import Content from "./menubar-content.svelte";
+import Item from "./menubar-item.svelte";
+import Label from "./menubar-label.svelte";
+import RadioItem from "./menubar-radio-item.svelte";
+import Separator from "./menubar-separator.svelte";
+import Shortcut from "./menubar-shortcut.svelte";
+import SubContent from "./menubar-sub-content.svelte";
+import SubTrigger from "./menubar-sub-trigger.svelte";
+import Trigger from "./menubar-trigger.svelte";
+
+const Menu = MenubarPrimitive.Menu;
+const Group = MenubarPrimitive.Group;
+const Sub = MenubarPrimitive.Sub;
+const RadioGroup = MenubarPrimitive.RadioGroup;
+
+export {
+	Root,
+	CheckboxItem,
+	Content,
+	Item,
+	Label,
+	RadioItem,
+	Separator,
+	Shortcut,
+	SubContent,
+	SubTrigger,
+	Trigger,
+	Menu,
+	Group,
+	Sub,
+	RadioGroup,
+	//
+	Root as Menubar,
+	CheckboxItem as MenubarCheckboxItem,
+	Content as MenubarContent,
+	Item as MenubarItem,
+	Label as MenubarLabel,
+	RadioItem as MenubarRadioItem,
+	Separator as MenubarSeparator,
+	Shortcut as MenubarShortcut,
+	SubContent as MenubarSubContent,
+	SubTrigger as MenubarSubTrigger,
+	Trigger as MenubarTrigger,
+	Menu as MenubarMenu,
+	Group as MenubarGroup,
+	Sub as MenubarSub,
+	RadioGroup as MenubarRadioGroup
+};
--- a/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
+++ b/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { Check } from "radix-icons-svelte";
+
+	type $$Props = MenubarPrimitive.CheckboxItemProps;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let checked: $$Props["checked"] = undefined;
+</script>
+
+<MenubarPrimitive.CheckboxItem
+	bind:checked
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+	on:pointerdown
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<MenubarPrimitive.CheckboxIndicator>
+			<Check class="h-4 w-4" />
+		</MenubarPrimitive.CheckboxIndicator>
+	</span>
+	<slot />
+</MenubarPrimitive.CheckboxItem>
--- a/src/lib/components/ui/menubar/menubar-content.svelte
+++ b/src/lib/components/ui/menubar/menubar-content.svelte
@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils";
+
+	type $$Props = MenubarPrimitive.ContentProps;
+	let className: $$Props["class"] = undefined;
+	export let align: $$Props["align"] = "start";
+	export let alignOffset: $$Props["alignOffset"] = -4;
+	export let sideOffset: $$Props["sideOffset"] = 8;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export { className as class };
+</script>
+
+<MenubarPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	{align}
+	{alignOffset}
+	class={cn(
+		"z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</MenubarPrimitive.Content>
--- a/src/lib/components/ui/menubar/menubar-item.svelte
+++ b/src/lib/components/ui/menubar/menubar-item.svelte
@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = MenubarPrimitive.ItemProps & {
+		inset?: boolean;
+	};
+	type $$Events = MenubarPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<MenubarPrimitive.Item
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		inset && "pl-8",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+	on:pointerdown
+>
+	<slot />
+</MenubarPrimitive.Item>
--- a/src/lib/components/ui/menubar/menubar-label.svelte
+++ b/src/lib/components/ui/menubar/menubar-label.svelte
@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = MenubarPrimitive.LabelProps & {
+		inset?: boolean;
+	};
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<MenubarPrimitive.Label
+	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	{...$$restProps}
+>
+	<slot />
+</MenubarPrimitive.Label>
--- a/src/lib/components/ui/menubar/menubar-radio-item.svelte
+++ b/src/lib/components/ui/menubar/menubar-radio-item.svelte
@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { DotFilled } from "radix-icons-svelte";
+
+	type $$Props = MenubarPrimitive.RadioItemProps;
+	type $$Events = MenubarPrimitive.RadioItemEvents;
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export { className as class };
+</script>
+
+<MenubarPrimitive.RadioItem
+	{value}
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+	on:pointerdown
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<MenubarPrimitive.RadioIndicator>
+			<DotFilled class="h-4 w-4 fill-current" />
+		</MenubarPrimitive.RadioIndicator>
+	</span>
+	<slot />
+</MenubarPrimitive.RadioItem>
--- a/src/lib/components/ui/menubar/menubar-separator.svelte
+++ b/src/lib/components/ui/menubar/menubar-separator.svelte
@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = MenubarPrimitive.SeparatorProps;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<MenubarPrimitive.Separator
+	class={cn("-mx-1 my-1 h-px bg-muted", className)}
+	{...$$restProps}
+/>
--- a/src/lib/components/ui/menubar/menubar-shortcut.svelte
+++ b/src/lib/components/ui/menubar/menubar-shortcut.svelte
@ -0,0 +1,18 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span
+	class={cn(
+		"ml-auto text-xs tracking-widest text-muted-foreground",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</span>
--- a/src/lib/components/ui/menubar/menubar-sub-content.svelte
+++ b/src/lib/components/ui/menubar/menubar-sub-content.svelte
@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils";
+
+	type $$Props = MenubarPrimitive.SubContentProps;
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		x: -10,
+		y: 0
+	};
+	export { className as class };
+</script>
+
+<MenubarPrimitive.SubContent
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</MenubarPrimitive.SubContent>
--- a/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
+++ b/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { ChevronRight } from "radix-icons-svelte";
+
+	type $$Props = MenubarPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	};
+	type $$Events = MenubarPrimitive.SubTriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<MenubarPrimitive.SubTrigger
+	class={cn(
+		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+		inset && "pl-8",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<slot />
+	<ChevronRight class="ml-auto h-4 w-4" />
+</MenubarPrimitive.SubTrigger>
--- a/src/lib/components/ui/menubar/menubar-trigger.svelte
+++ b/src/lib/components/ui/menubar/menubar-trigger.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = MenubarPrimitive.TriggerProps;
+	type $$Events = MenubarPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<MenubarPrimitive.Trigger
+	class={cn(
+		"flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:pointerenter
+>
+	<slot />
+</MenubarPrimitive.Trigger>
--- a/src/lib/components/ui/menubar/menubar.svelte
+++ b/src/lib/components/ui/menubar/menubar.svelte
@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = MenubarPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<MenubarPrimitive.Root
+	class={cn(
+		"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+		className
+	)}
+>
+	<slot />
+</MenubarPrimitive.Root>
--- a/src/lib/components/ui/popover/index.ts
+++ b/src/lib/components/ui/popover/index.ts
@ -0,0 +1,14 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+import Content from "./popover-content.svelte";
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger
+};
--- a/src/lib/components/ui/popover/popover-content.svelte
+++ b/src/lib/components/ui/popover/popover-content.svelte
@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils";
+
+	type $$Props = PopoverPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export let align: $$Props["align"] = "center";
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export { className as class };
+</script>
+
+<PopoverPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{align}
+	{sideOffset}
+	{...$$restProps}
+	class={cn(
+		"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+		className
+	)}
+>
+	<slot />
+</PopoverPrimitive.Content>
--- a/src/lib/components/ui/select/index.ts
+++ b/src/lib/components/ui/select/index.ts
@ -0,0 +1,34 @@
+import { Select as SelectPrimitive } from "bits-ui";
+
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+const Input = SelectPrimitive.Input;
+const Value = SelectPrimitive.Value;
+
+export {
+	Root,
+	Item,
+	Group,
+	Input,
+	Label,
+	Value,
+	Content,
+	Trigger,
+	Separator,
+	//
+	Root as Select,
+	Item as SelectItem,
+	Group as SelectGroup,
+	Input as SelectInput,
+	Label as SelectLabel,
+	Value as SelectValue,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator
+};
--- a/src/lib/components/ui/select/select-content.svelte
+++ b/src/lib/components/ui/select/select-content.svelte
@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils";
+	import { scale } from "svelte/transition";
+
+	type $$Props = SelectPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let inTransition: $$Props["inTransition"] = flyAndScale;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
+	export let outTransition: $$Props["outTransition"] = scale;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
+		start: 0.95,
+		opacity: 0,
+		duration: 50
+	};
+	export { className as class };
+</script>
+
+<SelectPrimitive.Content
+	{inTransition}
+	{inTransitionConfig}
+	{outTransition}
+	{outTransitionConfig}
+	{sideOffset}
+	class={cn(
+		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+>
+	<div class="w-full p-1">
+		<slot />
+	</div>
+</SelectPrimitive.Content>
--- a/src/lib/components/ui/select/select-item.svelte
+++ b/src/lib/components/ui/select/select-item.svelte
@ -0,0 +1,35 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { Check } from "radix-icons-svelte";
+
+	type $$Props = SelectPrimitive.ItemProps;
+	type $$Events = Required<SelectPrimitive.ItemEvents>;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export let label: $$Props["label"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Item
+	{value}
+	{disabled}
+	{label}
+	class={cn(
+		"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:pointermove
+	on:focusin
+>
+	<span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+		<SelectPrimitive.ItemIndicator>
+			<Check class="h-4 w-4" />
+		</SelectPrimitive.ItemIndicator>
+	</span>
+	<slot />
+</SelectPrimitive.Item>
--- a/src/lib/components/ui/select/select-label.svelte
+++ b/src/lib/components/ui/select/select-label.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.LabelProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Label
+	class={cn("px-2 py-1.5 text-sm font-semibold", className)}
+	{...$$restProps}
+>
+	<slot />
+</SelectPrimitive.Label>
--- a/src/lib/components/ui/select/select-separator.svelte
+++ b/src/lib/components/ui/select/select-separator.svelte
@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Separator
+	class={cn("-mx-1 my-1 h-px bg-muted", className)}
+	{...$$restProps}
+/>
--- a/src/lib/components/ui/select/select-trigger.svelte
+++ b/src/lib/components/ui/select/select-trigger.svelte
@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { CaretSort } from "radix-icons-svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.TriggerProps;
+	type $$Events = SelectPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Trigger
+	class={cn(
+		"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+	<div>
+		<CaretSort class="h-4 w-4 opacity-50" />
+	</div>
+</SelectPrimitive.Trigger>
--- a/src/lib/components/ui/separator/index.ts
+++ b/src/lib/components/ui/separator/index.ts
@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator
+};
--- a/src/lib/components/ui/separator/separator.svelte
+++ b/src/lib/components/ui/separator/separator.svelte
@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SeparatorPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let orientation: $$Props["orientation"] = "horizontal";
+	export let decorative: $$Props["decorative"] = undefined;
+	export { className as class };
+</script>
+
+<SeparatorPrimitive.Root
+	class={cn(
+		"shrink-0 bg-border",
+		orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+		className
+	)}
+	{orientation}
+	{decorative}
+	{...$$restProps}
+/>
--- a/src/lib/components/ui/skeleton/index.ts
+++ b/src/lib/components/ui/skeleton/index.ts
@ -0,0 +1,7 @@
+import Root from "./skeleton.svelte";
+
+export {
+	Root,
+	//
+	Root as Skeleton
+};
--- a/src/lib/components/ui/skeleton/skeleton.svelte
+++ b/src/lib/components/ui/skeleton/skeleton.svelte
@ -0,0 +1,14 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("animate-pulse rounded-md bg-primary/10", className)}
+	{...$$restProps}
+/>
--- a/src/lib/components_custom/Button.svelte
+++ b/src/lib/components_custom/Button.svelte
@ -0,0 +1,12 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import UserSettingsStore from '$lib/stores/UserSettingsStore';
+	import { themes } from '$lib/types/themes';
+
+	let {children, onclick} = $props()
+
+	let themeId = $derived($UserSettingsStore.themeId)
+</script>
+
+<button {onclick} class="border-2 border-{themes[themeId].primaryAction} hover:border-{themes[themeId].secondaryAction}">{@render children()}</button>
--- a/src/lib/components_custom/DropDown.svelte
+++ b/src/lib/components_custom/DropDown.svelte
--- a/src/lib/components_custom/DropDownElement.svelte
+++ b/src/lib/components_custom/DropDownElement.svelte
--- a/src/lib/components_custom/LoadingSpinner.svelte
+++ b/src/lib/components_custom/LoadingSpinner.svelte
--- a/src/lib/components_custom/LoadingSpinnerLocal.svelte
+++ b/src/lib/components_custom/LoadingSpinnerLocal.svelte
--- a/src/lib/components_custom/consts.ts
+++ b/src/lib/components_custom/consts.ts
@ -0,0 +1,2 @@
+export const apiBaseUrl = 'https://www.chellaris.net/api';
+export const MACHINE_GROUP_ID = 12;
--- a/src/lib/stores/UserSettingsStore.ts
+++ b/src/lib/stores/UserSettingsStore.ts
@ -0,0 +1,6 @@
+import { writable, type Writable } from "svelte/store";
+import { UserSettings } from '$lib/types/userSettings';
+
+const UserSettingsStore: Writable<UserSettings> = writable(new UserSettings());
+
+export default UserSettingsStore;
--- a/src/lib/types/themes.ts
+++ b/src/lib/types/themes.ts
@ -0,0 +1,27 @@
+export type Theme = {
+	backgroundColor: string,
+	textColor: string,
+	primaryAction: string,
+	secondaryAction: string,
+}
+const lightTheme = {
+	backgroundColor: "slate-50",
+	textColor:  "slate-950",
+	primaryAction: "sky-300",
+	secondaryAction: "sky-600",
+}
+
+const darkTheme = {
+	backgroundColor: "slate-950",
+	textColor: "slate-50",
+	primaryAction: "sky-300",
+	secondaryAction: "sky-600",
+}
+
+export const themes = [
+	lightTheme,
+	darkTheme
+]
+
+
+
--- a/src/lib/types/userSettings.ts
+++ b/src/lib/types/userSettings.ts
@ -0,0 +1,8 @@
+export class UserSettings {
+	themeId: number
+
+	constructor() {
+		this.themeId = 1 // DEBUG
+		return this
+	}
+}
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -0,0 +1,62 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cubicOut } from "svelte/easing";
+import type { TransitionConfig } from "svelte/transition";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+type FlyAndScaleParams = {
+    y?: number;
+    x?: number;
+    start?: number;
+    duration?: number;
+};
+
+export const flyAndScale = (
+    node: Element,
+    params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+): TransitionConfig => {
+    const style = getComputedStyle(node);
+    const transform = style.transform === "none" ? "" : style.transform;
+
+    const scaleConversion = (
+        valueA: number,
+        scaleA: [number, number],
+        scaleB: [number, number]
+    ) => {
+        const [minA, maxA] = scaleA;
+        const [minB, maxB] = scaleB;
+
+        const percentage = (valueA - minA) / (maxA - minA);
+        const valueB = percentage * (maxB - minB) + minB;
+
+        return valueB;
+    };
+
+    const styleToString = (
+        style: Record<string, number | string | undefined>
+    ): string => {
+        return Object.keys(style).reduce((str, key) => {
+            if (style[key] === undefined) return str;
+            return str + `${key}:${style[key]};`;
+        }, "");
+    };
+
+    return {
+        duration: params.duration ?? 200,
+        delay: 0,
+        css: (t) => {
+            const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+            const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+            const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+            return styleToString({
+                transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+                opacity: t
+            });
+        },
+        easing: cubicOut
+    };
+};
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,18 +1,24 @@
+<svelte:options runes={true} />
+
 <script lang="ts">
 	import '../app.postcss';
-
-	import { Modal, autoModeWatcher, type ModalComponent, getModalStore, type ModalSettings, initializeStores } from '@skeletonlabs/skeleton';
-	import { apiBaseUrl } from '$lib/components/consts';
+	import { browser } from '$app/environment';
+	import { writable } from 'svelte/store';
+	import { themes } from '$lib/types/themes'
+	import { apiBaseUrl } from '$lib/components_custom/consts';
 	import { LeanChellarisDataStore } from '$lib/stores/ChellarisData';
 	import Header from './Header.svelte';
-	import { AppShell } from '@skeletonlabs/skeleton';
 	import Settings from './Settings.svelte';
 	import AdminSelectedGameStore from '$lib/stores/admin-page/GameStore';
 	import type { ChellarisGameInfo } from '$lib/types/chellaris';
+	import UserSettingsStore from '$lib/stores/UserSettingsStore';
+	import AuthTokenStore from '$lib/stores/AuthTokenStore';

-	initializeStores();
+	if (browser) {
+		$AuthTokenStore = document.cookie.split("=")[document.cookie.split("=").length - 1];
+	}

-	$: {
+/*	$: {
 		fetch(apiBaseUrl + '/v3/ethics').then((res) => {
 			res.json().then((data) => {
 				$LeanChellarisDataStore.ethics = data.ethics;
@ -33,33 +39,16 @@
 				
 			});
 		});
-	}
-
-
-
-	const modalComponentRegistry: Record<string, ModalComponent> = {
-		settingsModal: {
-			ref: Settings,
-			props: { background: 'bg-red-500'}
-		}
-	}
+	}*/

 </script>

-<svelte:head>{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}</svelte:head>
-
-<Modal components={modalComponentRegistry}/>
-
-<AppShell regionPage="relative">
-	<svelte:fragment slot="header">
-		<Header/>
-	</svelte:fragment>
-	<!-- (sidebarLeft) -->
-	<!-- (sidebarRight) -->
-	<!-- <svelte:fragment slot="pageHeader">Page Header</svelte:fragment> -->
-	<!-- Router Slot -->
+<Header />
+<div class="m-4 border-2 border-accent rounded-lg h-[calc(100%-5.75rem-1px)]">
 	<slot />
-	<!-- ---- / ---- -->
-	<!-- (pageFooter) -->
-	<!-- (footer) -->
-</AppShell>
+</div>
+<!-- Router Slot -->
+<!-- ---- / ---- -->
+<!-- (pageFooter) -->
+<!-- (footer) -->
+
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,13 +1,22 @@
-<!-- YOU CAN DELETE EVERYTHING IN THIS PAGE -->
+<svelte:options runes={true} />

-<div class="container h-full mx-auto flex justify-center items-center">
+<script lang="ts">
+</script>
+
+<svelte:head>
+	<title>Home</title>
+	<meta name="description" content="Landing Page for the Chellaris Multiplayer Group" />
+</svelte:head>
+
+<div class="container py-2 h-full mx-auto flex flex-col justify-center items-center">
+	<h1>Chellaris</h1>
 	<div class="space-y-5">
 		<ul>
 			<li>
-				<a class="hover:text-primary-500" href="/graphs">Graphs</a>
+				<a class="hover:text-primary-500" href="/current">Current Game</a>
 			</li>
 			<li>
-				<a class="hover:text-primary-500" href="/legacy-graphs">Game 15 Graphs</a>
+				<a class="hover:text-primary-500" href="/archive/1">Previous Game</a>
 			</li>
 		</ul>
 	</div>
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@ -1,55 +1,194 @@
+<svelte:options runes={true} />
+
 <script lang="ts">
 	import { page } from '$app/stores';
 	import discord from '$lib/images/discord.svg';
-	import { AppBar, LightSwitch, TabAnchor, TabGroup, getModalStore, type ModalSettings } from '@skeletonlabs/skeleton';
-	import Settings from './Settings.svelte';
-	import Button from '$lib/components/Button.svelte';
+	import AuthTokenStore from '$lib/stores/AuthTokenStore';
+	import { Exit, EyeClosed, EyeOpen } from 'radix-icons-svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { Separator } from '$lib/components/ui/separator';
+	import { Input } from '$lib/components/ui/input';
+	import * as Popover from '$lib/components/ui/popover';
+	import * as Avatar from '$lib/components/ui/avatar';

-	let showSettings = false;
-
-	const modalStore = getModalStore();
-
-	const openSettings = () => {
-		const settings: ModalSettings = {
-			type: 'component',
-			component: 'settingsModal'
-		};
-		modalStore.trigger(settings);
+	type User = {
+		token: string,
+		tokenVisible: boolean,
+		discord: string | undefined,
+		picture: string | undefined,
+		admin: boolean
 	}

+	let user: User | undefined = $state(undefined);
+
+	function handleLogout() {
+		$AuthTokenStore = ""
+		document.cookie = "authToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/"
+		user = undefined
+	}
+
+	async function handleLogin() {
+		// pretend we are handling the login via a fetch
+		await new Promise((resolve) => setTimeout(resolve, 200));
+		let ret = {
+			token: $AuthTokenStore,
+			discord: "neshura",
+			picture: "/avatar.png",
+			admin: true
+		}
+
+		if (true) {
+			const d = new Date();
+			let authExpiryDays = 14
+			d.setTime(d.getTime() + (authExpiryDays*24*60*60*1000));
+			document.cookie = "authToken=" + ret.token + "; expires=" + d.toUTCString() + "; path=/";
+
+			user = {
+				token: ret.token,
+				tokenVisible: false,
+				discord: ret.discord ?? undefined,
+				picture: ret.picture ?? undefined,
+				admin: ret.admin
+			}
+		}
+		else {
+			// handle login failure
+		}
+	}
+
+	if ($AuthTokenStore != "") {
+		handleLogin()
+	}
 </script>

-<AppBar gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-content-end">
-	<svelte:fragment slot="lead">
-		<p />
-	</svelte:fragment>
-	<TabGroup
-		padding="px-4 py-2"
-		justify="justify-center"
-		rounded="rounded-tr-xl rounded-tl-xl"
-		border="border-b-2 border-primary-500"
-		active="variant-glass-primary hover:variant-ghost-primary"
-		hover="hover:variant-ghost-primary"
+<div class="flex gap-2 items-center justify-center py-3 bg-primary-foreground">
+	<!-- spacer -->
+		<Button
+			variant="link"
+			href="https://discord.gg/invite/BYNeHaPNh9"
+			target="_blank"
+			rel="noopener noreferrer"
+			class="h-8 w-8 items-center flex"
 		>
-		<!--<div aria-current={$page.url.pathname.startsWith('/sign-up') ? 'page' : undefined}>
-		<a href="/sign-up">Empire Sign-Up</a>
-	</div>-->
-		<TabAnchor class="mr-1" href="/" selected={$page.url.pathname === '/'}>Home</TabAnchor>
-		<TabAnchor class="mx-1" href="/graphs" selected={$page.url.pathname.startsWith('/graphs')}>Graphs</TabAnchor>
-		<TabAnchor class="mx-1" href="/legacy-graphs" selected={$page.url.pathname === '/legacy-graphs'}>Game 15 Graphs</TabAnchor>
-		<TabAnchor class="mx-1" href="/admin" selected={$page.url.pathname === '/admin'}>Admin Menu</TabAnchor>
-		<TabAnchor class="ml-1" href="/about" selected={$page.url.pathname === '/about'}>About</TabAnchor>
-	</TabGroup>
-
-	<svelte:fragment slot="trail">
-		<Button text="Settings" action={openSettings} />
-			<LightSwitch />
-		<div>
-			<!-- Logo -->
-			<a class="lg:!ml-0 w-[32px] lg:w-auto overflow-hidden" href="https://discord.gg/invite/BYNeHaPNh9" target="_blank" rel="noopener noreferrer">
-				<img width="32px" height="32px" src={discord} alt="Discord" />
-			</a>
+			<Avatar.Root class="h-6 w-6">
+				<Avatar.Image src={discord} alt="DC" />
+				<Avatar.Fallback>US</Avatar.Fallback>
+			</Avatar.Root>
+		</Button>
+		<Button
+			variant="ghost"
+			href="/"
+			class="{$page.url.pathname === '/' ? 'text-accent-foreground bg-accent' : ''}"
+		>
+			Home
+		</Button>
+		<Button
+			variant="ghost"
+			href="/current"
+			class="{$page.url.pathname === '/current' ? 'text-accent-foreground bg-accent' : ''}"
+		>
+			Game [Current Game]
+		</Button>
+		<Button
+			variant="ghost"
+			href="/archive"
+			class="{$page.url.pathname.startsWith('/archive') ? 'text-accent-foreground bg-accent' : ''}"
+		>
+			Archives
+		</Button>
+		{#if user !== undefined && user.admin}
+			<Button
+				variant="ghost"
+				href="/admin"
+				class="{$page.url.pathname === '/admin' ? 'text-accent-foreground bg-accent' : ''}"
+			>
+				Admin
+			</Button>
+			<Button
+				variant="ghost"
+				href="/admin/new"
+				class="{$page.url.pathname === '/admin/new' ? 'text-accent-foreground bg-accent' : ''}"
+			>
+				Admin (New)
+			</Button>
+		{/if}
+		{#if user !== undefined}
+			<Popover.Root>
+				<Popover.Trigger>
+					<Button
+						variant="ghost"
+						class="relative h-8 w-8 rounded-full align-middle"
+					>
+						<Avatar.Root class="h-8 w-8">
+							<Avatar.Image src={user.picture} alt="@user" />
+							<Avatar.Fallback>US</Avatar.Fallback>
+						</Avatar.Root>
+					</Button>
+				</Popover.Trigger>
+				<Popover.Content class="w-56 p-0">
+					<div class="w-full p-1">
+						<div class="px-2 py-1.5 font-normal">
+							<div class="flex flex-row items-center gap-1">
+								{#if user.tokenVisible}
+									<p class="text-sm font-medium leading-none w-12">{user.token}</p> <!--Make the UserToken hidden by default-->
+								{:else}
+									<p class="text-sm font-medium leading-none w-12">******</p>
+								{/if}
+								<Button variant="ghost" size="sm" class="p-0 h-2 justify-start" on:click={() => {if (user !== undefined) user.tokenVisible = !user.tokenVisible}}>
+									{#if user.tokenVisible}
+										<EyeOpen />
+									{:else}
+										<EyeClosed />
+									{/if}
+								</Button>
 							</div>
-	</svelte:fragment>
-</AppBar>
-<div />
+							{#if user.discord}
+								<p class="mt-1 text-xs leading-none text-muted-foreground">@{user.discord}</p>
+							{/if}
+						</div>
+					</div>
+					<Separator orientation="horizontal" />
+					<div class="w-full p-1">
+						<Button variant="ghost" class="justify-start h-8 px-2 py-1.5 text-sm w-full" href="/profile">
+							Profile
+						</Button>
+						<Button variant="ghost" class="justify-start h-8 px-2 py-1.5 text-sm w-full" href="/settings">
+							Settings
+						</Button>
+					</div>
+					<Separator orientation="horizontal" />
+					<div class="w-full p-1">
+						<Button variant="ghost" class="flex flex-row items-center justify-start h-8 space-x-1 px-2 py-1.5 text-sm w-full" on:click={handleLogout}>
+							<p>Log out </p>
+							<Exit />
+						</Button>
+					</div>
+				</Popover.Content>
+			</Popover.Root>
+		{:else}
+			<Popover.Root>
+				<Popover.Trigger>
+					<Button
+						variant="ghost"
+						class="relative"
+					>
+						Log In
+					</Button>
+				</Popover.Trigger>
+				<Popover.Content class="w-40 p-1 ">
+					<form class="flex flex-col items-center gap-1" on:submit={handleLogin}>
+						<Input type="text" placeholder="User Token" bind:value={$AuthTokenStore} />
+						<div class="flex flex-row">
+							<Button variant="link" class="flex flex-row items-center h-8 space-x-1 px-2 py-1.5 text-sm w-full text-muted-foreground" href="/sign-up" >
+								Sign Up
+							</Button>
+							<Button variant="secondary" class="justify-start h-8 px-2 py-1.5 text-sm w-full" type="submit">
+								Log In
+							</Button>
+						</div>
+					</form>
+				</Popover.Content>
+			</Popover.Root>
+		{/if}
+</div>
+<Separator orientation="horizontal"></Separator>
--- a/src/routes/Settings.svelte
+++ b/src/routes/Settings.svelte
@ -1,12 +1,9 @@
 <script lang="ts">
 	import { browser } from "$app/environment";
-	import Button from "$lib/components/Button.svelte";
+	import Button from "$lib/components_custom/Button.svelte";
 	import AuthTokenStore from "$lib/stores/AuthTokenStore";
-	import { getModalStore } from "@skeletonlabs/skeleton";
 	import { fade, slide } from "svelte/transition";

-  const modalStore = getModalStore();
-
  let showAuthSaved = false;
  let showPlaceholder = true;

@ -32,7 +29,7 @@
  const handleSubmit = () => {
    console.log("submitted ", gameGroupSettings);
    document.cookie = "authToken=" + authToken;
-    modalStore.close();
+    // somehow close the modal
  }

  let gameGroupSettings: [] = [];
--- a/src/routes/admin/+page.server.ts
+++ b/src/routes/admin/+page.server.ts
@ -1,4 +1,4 @@
-import { apiBaseUrl } from "$lib/components/consts";
+import { apiBaseUrl } from "$lib/components_custom/consts";
 import { redirect } from "@sveltejs/kit";

 export async function load({ cookies }) {
@ -9,7 +9,8 @@ export async function load({ cookies }) {
    }
  })).json();

-  if (!auth.admin && !auth.moderator) {
+  /*if (!auth.admin && !auth.moderator) {
    throw redirect(303, '/401');
-  }
+  }*/
+  console.log("WARNING: Admin Auth Check is disabled! DO NOT USE IN PRODUCTION")
 }
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import LoadingSpinnerLocal from '$lib/components/LoadingSpinnerLocal.svelte';
-	import { apiBaseUrl } from '$lib/components/consts';
+	import LoadingSpinnerLocal from '$lib/components_custom/LoadingSpinnerLocal.svelte';
+	import { apiBaseUrl } from '$lib/components_custom/consts';
 	import AuthTokenStore from '$lib/stores/AuthTokenStore';
 	import AdminSelectedEmpireStore from '$lib/stores/admin-page/EmpireStore';
 	import AdminSelectedGameStore from '$lib/stores/admin-page/GameStore';
--- a/src/routes/admin/+page.ts
+++ b/src/routes/admin/+page.ts
@ -1,4 +1,4 @@
-import { apiBaseUrl } from "$lib/components/consts";
+import { apiBaseUrl } from "$lib/components_custom/consts";
 import AdminSelectedEmpireStore from "$lib/stores/admin-page/EmpireStore";
 import AdminSelectedGameStore from "$lib/stores/admin-page/GameStore";
 import type { ChellarisGameInfo } from "$lib/types/chellaris";
--- a/src/routes/admin/EmpireDetails.svelte
+++ b/src/routes/admin/EmpireDetails.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
-	import DropDown from '$lib/components/DropDown.svelte';
-	import DropDownElement from '$lib/components/DropDownElement.svelte';
-	import { MACHINE_GROUP_ID, apiBaseUrl } from '$lib/components/consts';
+	import DropDown from '$lib/components_custom/DropDown.svelte';
+	import DropDownElement from '$lib/components_custom/DropDownElement.svelte';
+	import { MACHINE_GROUP_ID, apiBaseUrl } from '$lib/components_custom/consts';
 	import { LeanChellarisDataStore } from '$lib/stores/ChellarisData';
 	import type { ChellarisEmpire, ChellarisGameGroup } from '$lib/types/chellaris';
 	import type { EmpireEthic } from '$lib/types/stellaris';
--- a/src/routes/admin/new/+page.server.ts
+++ b/src/routes/admin/new/+page.server.ts
@ -0,0 +1,16 @@
+import { apiBaseUrl } from "$lib/components_custom/consts";
+import { redirect } from "@sveltejs/kit";
+
+export async function load({ cookies }) {
+  const auth = await (await fetch(apiBaseUrl + "/v3/auth", {
+    headers: {
+      'Content-Type': 'application/json',
+      'x-api-key': cookies.get("authToken") || ""
+    }
+  })).json();
+
+  /*if (!auth.admin && !auth.moderator) {
+    throw redirect(303, '/401');
+  }*/
+  console.log("WARNING: Admin Auth Check is disabled! DO NOT USE IN PRODUCTION")
+}
--- a/src/routes/admin/new/+page.svelte
+++ b/src/routes/admin/new/+page.svelte
@ -0,0 +1,372 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { Separator } from '$lib/components/ui/separator';
+	import * as Collapsible from "$lib/components/ui/collapsible";
+	import { Button } from '$lib/components/ui/button';
+	import { CaretDown, CaretRight } from 'radix-icons-svelte';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import { Label } from '$lib/components/ui/label';
+	import { Skeleton } from '$lib/components/ui/skeleton';
+	import { range } from 'svelte-loading-spinners/utils';
+	import * as Select from '$lib/components/ui/select';
+	import AdminSelectedGameStore from '$lib/stores/admin-page/GameStore';
+	import AdminSelectedGroupStore from '$lib/stores/admin-page/GroupStore';
+	import AdminSelectedEmpireStore from '$lib/stores/admin-page/EmpireStore';
+	import {
+		type ChellarisEmpire,
+		type ChellarisGameGroup,
+		type ChellarisGameInfo,
+		createBlankEmpire
+	} from '$lib/types/chellaris';
+	import { apiBaseUrl } from '$lib/components_custom/consts';
+
+	// Dummy Data, Replace with API fetch
+	function defaultEmpires() {
+		return [
+			{
+				id: 0,
+				name: "Test Empire 1"
+			},
+			{
+				id: 1,
+				name: "Test Empire 2"
+			}
+		]
+	}
+
+	function defaultGroups() {
+		return [
+			{
+				id: 0,
+				checked: false,
+				name: "Test Group 1",
+				empires: defaultEmpires()
+			},
+			{
+				id: 1,
+				checked: false,
+				name: "Test Group 2",
+				empires: defaultEmpires()
+			}
+		]
+	}
+
+	type Empire = {
+		id: number,
+		name: string
+	}
+
+	type Group = {
+		id: number,
+		checked: boolean,
+		name: string,
+		empires: Array<Empire>
+	}
+
+	type Game = {
+		id: number,
+		checked: boolean,
+		name: string,
+		groups: Array<Group>
+	}
+
+	let games: Array<Game> = $state([
+		{
+			id: 0,
+			checked: false,
+			name: "Test 1",
+			groups: defaultGroups()
+		},
+		{
+			id: 1,
+			checked: false,
+			name: "Test 2",
+			groups: defaultGroups()
+		},
+		{
+			id: 2,
+			checked: false,
+			name: "Test 3",
+			groups: defaultGroups()
+		},
+		{
+			id: 3,
+			checked: false,
+			name: "Test 4",
+			groups: defaultGroups()
+		}
+	])
+
+	let filteredGames = $derived(games.filter(game => game.checked))
+	let filteredGroups = $derived(filteredGames.flatMap(game => game.groups.filter(group => group.checked)))
+
+	$effect(() => {
+		console.log(games)
+	})
+
+	const modes = [
+		{ value: "Game", label: "Games" },
+		{ value: "Group", label: "Groups" },
+		{ value: "Empire", label: "Empires" },
+		{ value: "Ethic", label: "Ethics" },
+		{ value: "Portrait", label: "Portraits" },
+		{ value: "User", label: "Users" }
+	];
+
+	let modeSelect = $state(modes[0]);
+
+	// Helper Function
+
+	function newGame() {
+		let newGame = {
+			id: games.length,
+			checked: false,
+			name: `Test ${games.length + 1}`,
+			groups: defaultGroups()
+		}
+		return newGame
+	}
+
+</script>
+
+<div class="h-full grid grid-cols-5">
+	<div class="pt-4 px-2 flex flex-col items-center border-r-2 border-accent gap-2">
+		<div class="flex flex-row gap-2">
+			<h2 class="self-center">
+				Editing
+			</h2>
+			<Select.Root bind:selected={modeSelect}>
+				<Select.Trigger class="w-28">
+					<Select.Value />
+				</Select.Trigger>
+				<Select.Content>
+					<Select.Group>
+						{#each modes as mode}
+							<Select.Item value={mode.value} label={mode.label}>
+								{mode.label}
+							</Select.Item>
+						{/each}
+					</Select.Group>
+				</Select.Content>
+				<Select.Input name="modeSelect" />
+			</Select.Root>
+		</div>
+		<Separator orientation="horizontal" class="w-[90%]" />
+		<h2>{modeSelect.value} Filters</h2>
+		{#if modeSelect.value == modes[0].value}
+
+		{:else if modeSelect.value == modes[1].value}
+			<Separator orientation="horizontal" class="w-[90%]" />
+			<Collapsible.Root class="w-[90%] space-y-2">
+				<Collapsible.Trigger asChild let:builder>
+					<Button builders={[builder]} variant="ghost" size="sm" class="w-full p-0 justify-start">
+						{#if builder["data-state"] == "open"}
+							<CaretDown />
+						{:else}
+							<CaretRight />
+						{/if}
+						<h4 class="rounded-md text-sm font-semibold text-left align-middle">
+							Games
+						</h4>
+					</Button>
+				</Collapsible.Trigger>
+				<Collapsible.Content class="space-y-2">
+					{#each games as game}
+						<div class="pl-4 flex items-center space-x-2">
+							<Checkbox id="{game.id.toString()}" checked={game.checked} on:click={() => game.checked = !game.checked} />
+							<Label
+								for="{game.id.toString()}"
+								class=""
+							>
+								{game.name}
+							</Label>
+						</div>
+					{/each}
+				</Collapsible.Content>
+			</Collapsible.Root>
+			<Separator orientation="horizontal" class="w-[90%]" />
+		{:else if modeSelect.value == modes[2].value}
+			<Separator orientation="horizontal" class="w-[90%]" />
+			<Collapsible.Root class="w-[90%] space-y-2">
+				<Collapsible.Trigger asChild let:builder>
+					<Button builders={[builder]} variant="ghost" size="sm" class="w-full p-0 justify-start">
+						{#if builder["data-state"] == "open"}
+							<CaretDown />
+						{:else}
+							<CaretRight />
+						{/if}
+						<h4 class="rounded-md text-sm font-semibold text-left align-middle">
+							Games
+						</h4>
+					</Button>
+				</Collapsible.Trigger>
+				<Collapsible.Content class="space-y-2">
+					{#each games as game}
+						<div class="pl-4 flex items-center space-x-2">
+							<Checkbox id="{game.id.toString()}" checked={game.checked} on:click={() => game.checked = !game.checked} />
+							<Label
+								for="{game.id.toString()}"
+								class=""
+							>
+								{game.name}
+							</Label>
+						</div>
+					{/each}
+				</Collapsible.Content>
+			</Collapsible.Root>
+			<Collapsible.Root class="w-[90%] space-y-2">
+				<Collapsible.Trigger asChild let:builder>
+					<Button builders={[builder]} variant="ghost" size="sm" class="w-full p-0 justify-start">
+						{#if builder["data-state"] == "open"}
+							<CaretDown />
+						{:else}
+							<CaretRight />
+						{/if}
+						<h4 class="rounded-md text-sm font-semibold text-left align-middle">
+							Groups
+						</h4>
+					</Button>
+				</Collapsible.Trigger>
+				<Collapsible.Content class="space-y-2">
+					{#if games.filter(value => value.checked == true).length == 0}
+						<div class="pl-4 flex flex-col items-center space-x-2 text-muted-foreground">
+							<Label class="text-center" >No Games Selected</Label>
+						</div>
+					{/if}
+					{#each games as game}
+						{#if game.checked}
+							{#each game.groups as group}
+								<div class="pl-4 flex items-center space-x-2">
+									<Checkbox id="{game.id}-{group.id}" checked={group.checked} on:click={() => {games[game.id].groups[group.id].checked = !group.checked}} />
+									<Label
+										for="{game.id}-{group.id}"
+										class=""
+									>
+										{game.name} {group.name}
+									</Label>
+								</div>
+							{/each}
+						{/if}
+					{/each}
+				</Collapsible.Content>
+			</Collapsible.Root>
+			<Separator orientation="horizontal" class="w-[90%]" />
+		{:else if modeSelect.value == modes[3].value}
+			<Separator orientation="horizontal" class="w-[90%]" />
+			<Collapsible.Root class="w-[90%] space-y-2">
+				<Collapsible.Trigger asChild let:builder>
+					<Button builders={[builder]} variant="ghost" size="sm" class="w-full p-0 justify-start">
+						{#if builder["data-state"] == "open"}
+							<CaretDown />
+						{:else}
+							<CaretRight />
+						{/if}
+						<h4 class="rounded-md text-sm font-semibold text-left align-middle">
+							Games
+						</h4>
+					</Button>
+				</Collapsible.Trigger>
+				<Collapsible.Content class="space-y-2">
+					{#each games as game}
+						<div class="pl-4 flex items-center space-x-2">
+							<Checkbox id="{game.id.toString()}" checked={game.checked} on:click={() => game.checked = !game.checked} />
+							<Label
+								for="{game.id.toString()}"
+								class=""
+							>
+								{game.name}
+							</Label>
+						</div>
+					{/each}
+				</Collapsible.Content>
+			</Collapsible.Root>
+			<Separator orientation="horizontal" class="w-[90%]" />
+		{:else if modeSelect.value == modes[4].value}
+			<Separator orientation="horizontal" class="w-[90%]" />
+			<Collapsible.Root class="w-[90%] space-y-2">
+				<Collapsible.Trigger asChild let:builder>
+					<Button builders={[builder]} variant="ghost" size="sm" class="w-full p-0 justify-start">
+						{#if builder["data-state"] == "open"}
+							<CaretDown />
+						{:else}
+							<CaretRight />
+						{/if}
+						<h4 class="rounded-md text-sm font-semibold text-left align-middle">
+							Games
+						</h4>
+					</Button>
+				</Collapsible.Trigger>
+				<Collapsible.Content class="space-y-2">
+					{#each games as game}
+						<div class="pl-4 flex items-center space-x-2">
+							<Checkbox id="{game.id.toString()}" checked={game.checked} on:click={() => game.checked = !game.checked} />
+							<Label
+								for="{game.id.toString()}"
+								class=""
+							>
+								{game.name}
+							</Label>
+						</div>
+					{/each}
+				</Collapsible.Content>
+			</Collapsible.Root>
+			<Separator orientation="horizontal" class="w-[90%]" />
+		{/if}
+
+	</div>
+	<div class="pt-6 px-3 flex flex-col col-span-2 items-center border-r-2 border-accent text-center text-muted-foreground gap-2 overflow-y-scroll">
+		{#if modeSelect.value == modes[0].value}
+			{#each games as game}
+				<!--<Skeleton class="h-12 w-[90%]" />-->
+				<div class="px-6 h-12 w-[90%] flex flex-row items-center border-2 rounded-md bg-primary/10">
+					<p class="text-primary">{game.name}</p>
+				</div>
+			{:else}
+				No Content
+			{/each}
+			<Button
+				class="px-6 h-12 w-[90%] flex flex-row items-center border-2 rounded-md bg-primary/10 text-primary hover:bg-primary/5"
+				on:click={() => {games.push(newGame())}}
+			>
+				Add Game
+			</Button>
+		{:else if modeSelect.value == modes[1].value}
+			{#each filteredGames as game}
+				{#each game.groups as group}
+					<Skeleton class="h-12 w-[90%]" />
+				{/each}
+			{:else}
+				No Content
+			{/each}
+			<Button>Add Group</Button>
+		{:else if modeSelect.value == modes[2].value}
+			{console.log(filteredGroups)}
+			{#each filteredGroups as group}
+				{#each group.empires as empire}
+					<Skeleton class="h-12 w-[90%]" />
+				{/each}
+			{:else}
+				No Content
+			{/each}
+			<Button>Add Empire</Button>
+		{:else if modeSelect.value == modes[3].value}
+			{#each filteredGames as game}
+				<Skeleton class="h-12 w-[90%]" />
+			{:else}
+				No Content
+			{/each}
+			<Button>Add Ethic</Button>
+		{:else if modeSelect.value == modes[4].value}
+			{#each filteredGames as game}
+				<Skeleton class="h-12 w-[90%]" />
+			{:else}
+				No Content
+			{/each}
+			<Button>Add Portrait</Button>
+		{/if}
+	</div>
+	<div class="pt-6 px-3 flex flex-col col-span-2 text-center text-muted-foreground">
+		No Content
+	</div>
+</div>
--- a/src/routes/archive/+page.svelte
+++ b/src/routes/archive/+page.svelte
@ -0,0 +1,6 @@
+<script lang="ts">
+</script>
+
+<div>
+	PREVIOUS GAMES PAGE
+</div>
--- a/src/routes/archive/[gameId]/+page.svelte
+++ b/src/routes/archive/[gameId]/+page.svelte
@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { PageData } from './$types'
+	export let data: PageData;
+</script>
+
+<div>
+	PREVIOUS GAME {data.gameId} PAGE
+</div>
--- a/src/routes/archive/[gameId]/+page.ts
+++ b/src/routes/archive/[gameId]/+page.ts
@ -0,0 +1,8 @@
+import { error } from '@sveltejs/kit';
+
+/** @type {import('./$types').PageLoad} */
+export function load({ params }) {
+	return {
+		gameId: params.gameId
+	}
+}
--- a/src/routes/current/+page.svelte
+++ b/src/routes/current/+page.svelte
@ -0,0 +1,3 @@
+<div>
+	CURRENT GAME PAGE
+</div>
--- a/src/routes/legacy/about/+page.svelte
+++ b/src/routes/legacy/about/+page.svelte
--- a/src/routes/legacy/about/+page.ts
+++ b/src/routes/legacy/about/+page.ts
--- a/src/routes/legacy/graphs/+layout.svelte
+++ b/src/routes/legacy/graphs/+layout.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
 	import SubNav from './SubNav.svelte';
-	import '../../app.postcss';
+	import '../../../app.postcss';
 	import { goto } from "$app/navigation";
 	import { page } from "$app/stores";
 	import GraphsTabStore from '$lib/stores/GraphsTab';
--- a/src/routes/legacy/graphs/+layout.ts
+++ b/src/routes/legacy/graphs/+layout.ts
@ -2,9 +2,9 @@ import ChellarisDataStore from '$lib/stores/ChellarisData';
 import SelectedGameStore from '$lib/stores/GameFilter';
 import SelectedGameGroupsStore, { type SelectedChellarisGroups } from "$lib/stores/GameGroupFilter";
 import GraphsTabStore from '$lib/stores/GraphsTab';
-import type { LayoutLoad } from "./$types";
-import type { ChellarisInfo } from '../../lib/types/chellaris';
-import { apiBaseUrl } from '$lib/components/consts';
+import type { LayoutLoad } from "../../../../.svelte-kit/types/src/routes";
+import type { ChellarisInfo } from '$lib/types/chellaris';
+import { apiBaseUrl } from '$lib/components_custom/consts';

 export const load: LayoutLoad = async ({ fetch }) => {
  let store: string | null;
--- a/src/routes/legacy/graphs/+page.svelte
+++ b/src/routes/legacy/graphs/+page.svelte
--- a/src/routes/legacy/graphs/GameGroupSelection.svelte
+++ b/src/routes/legacy/graphs/GameGroupSelection.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
-	import DropDown from '$lib/components/DropDown.svelte';
-	import DropDownElement from '$lib/components/DropDownElement.svelte';
+	import DropDown from '$lib/components_custom/DropDown.svelte';
+	import DropDownElement from '$lib/components_custom/DropDownElement.svelte';
 	import SelectedGameGroupsStore from '$lib/stores/GameGroupFilter';
 	import SelectedGameStore from '$lib/stores/GameFilter';
 	import ChellarisDataStore from '$lib/stores/ChellarisData';
--- a/src/routes/legacy/graphs/GameSelection.svelte
+++ b/src/routes/legacy/graphs/GameSelection.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
-	import DropDown from '$lib/components/DropDown.svelte';
-	import DropDownElement from '$lib/components/DropDownElement.svelte';
+	import DropDown from '$lib/components_custom/DropDown.svelte';
+	import DropDownElement from '$lib/components_custom/DropDownElement.svelte';
 	import SelectedGameStore from '$lib/stores/GameFilter';
 	import ChellarisDataStore from '$lib/stores/ChellarisData';

--- a/src/routes/legacy/graphs/SubNav.svelte
+++ b/src/routes/legacy/graphs/SubNav.svelte
--- a/src/routes/legacy/graphs/excel-style/+page.svelte
+++ b/src/routes/legacy/graphs/excel-style/+page.svelte
@ -4,7 +4,7 @@
 	import type { ChellarisGameGroup, ChellarisInfo, ChellarisEmpire, ChellarisGame } from '$lib/types/chellaris';
 	import ChellarisDataStore from '$lib/stores/ChellarisData';
 	import GraphsTabStore from '$lib/stores/GraphsTab';
-	import LoadingSpinner from '$lib/components/LoadingSpinner.svelte';
+	import LoadingSpinner from '$lib/components_custom/LoadingSpinner.svelte';

 	$: selectedGame = $ChellarisDataStore.games[$SelectedGameStore];
 	$: selectedGameGroupData = $SelectedGameGroupsStore[$SelectedGameStore];
--- a/src/routes/legacy/graphs/tab/+page.svelte
+++ b/src/routes/legacy/graphs/tab/+page.svelte
--- a/src/routes/legacy/graphs/tab2/+page.svelte
+++ b/src/routes/legacy/graphs/tab2/+page.svelte
--- a/src/routes/legacy/legacy-graphs/+page.svelte
+++ b/src/routes/legacy/legacy-graphs/+page.svelte
@ -3,7 +3,7 @@
 	import EthicsBar from './EthicsBar.svelte';
 	import PopsPie from './PopsPie.svelte';
 	import EmpireStats from './EmpireStats.svelte';
-	import LoadingSpinner from '$lib/components/LoadingSpinner.svelte';
+	import LoadingSpinner from '$lib/components_custom/LoadingSpinner.svelte';
 	import { navigating } from '$app/stores';
 	import { fade } from 'svelte/transition';

--- a/src/routes/legacy/legacy-graphs/+page.ts
+++ b/src/routes/legacy/legacy-graphs/+page.ts
@ -1,5 +1,5 @@
-import { apiBaseUrl } from "$lib/components/consts";
-import type { PageLoad } from "../$types";
+import { apiBaseUrl } from "$lib/components_custom/consts";
+import type { PageLoad } from "../../../../.svelte-kit/types/src/routes";

 export const  load: PageLoad = async ({ fetch }) => {
  const popsRet: { speciesArray: Array<number> } = await (await fetch(apiBaseUrl + '/v1/species')).json();
--- a/src/routes/legacy/legacy-graphs/EmpireStats.svelte
+++ b/src/routes/legacy/legacy-graphs/EmpireStats.svelte
--- a/src/routes/legacy/legacy-graphs/EthicsBar.svelte
+++ b/src/routes/legacy/legacy-graphs/EthicsBar.svelte
--- a/src/routes/legacy/legacy-graphs/EthicsWeb.svelte
+++ b/src/routes/legacy/legacy-graphs/EthicsWeb.svelte
--- a/src/routes/legacy/legacy-graphs/PopsPie.svelte
+++ b/src/routes/legacy/legacy-graphs/PopsPie.svelte
--- a/src/routes/legacy/sign-up/+page.svelte
+++ b/src/routes/legacy/sign-up/+page.svelte
@ -0,0 +1,10 @@
+<svelte:head>
+	<title>Empire Sign-Up</title>
+	<meta name="description" content="Empire Sign-Up" />
+</svelte:head>
+
+<div class="text-column">
+	<h1>Empire Sign-Up: Not yet implemented</h1>
+
+	<p>For now only Sign-Up statistics and the backend have been migrated.</p>
+</div>
--- a/src/routes/legacy/sign-up/+page.ts
+++ b/src/routes/legacy/sign-up/+page.ts
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
--- a/Show more
+++ b/Show more
Author	SHA1	Message	Date
Neshura	a458f1d600	Rework Header Component for Auth handling	2023-12-11 20:16:20 +01:00
Neshura	c571f084d7	Add Input Component from shadcn	2023-12-11 20:16:04 +01:00
Neshura	01e301eb60	Implemented Mode Select and FIlters for Admin Page	2023-12-10 23:21:54 +01:00
Neshura	4d6f3c23c3	Add Shadcn Components	2023-12-10 23:21:35 +01:00
Neshura	cf477b1f25	Updates to Navbar Account PopOver	2023-12-10 23:21:13 +01:00
Neshura	792b11248a	Package.json Version Bump	2023-12-10 23:19:42 +01:00
Neshura	79bdf1bc6c	Use entire site height by default	2023-12-09 18:54:09 +01:00
Neshura	bbe681d6d9	Svelte 5 Version Bump (fixed #each block problems)	2023-12-09 18:54:00 +01:00
Neshura	0ac6065a83	Svelte Rune Mode fixes	2023-12-09 18:53:45 +01:00
Neshura	59a0cb4bc9	Temporary Auth disable on Admin page for testing	2023-12-09 18:53:07 +01:00
Neshura	e2bbc2f1eb	Admin "new" route auth checking	2023-12-09 18:52:53 +01:00
Neshura	c0c38e7aa7	Added several UI components from shadcn	2023-12-09 18:52:40 +01:00
Neshura	17e52b12d0	Reworked Navbar to use shadcn	2023-12-06 21:02:07 +01:00
Neshura	69574ae124	shadcn UI config changes	2023-12-06 21:01:54 +01:00
Neshura	fb4425a20c	Removed Various orphan packages, added UI yarn alias	2023-12-06 21:01:39 +01:00
Neshura	596b9d7f79	Moved Account to Profile	2023-12-06 21:01:02 +01:00
Neshura	3fd683b6ee	Add shadcn UI	2023-12-06 21:00:46 +01:00
Neshura	8da05a33cb	Move Components to new Directory	2023-12-06 21:00:38 +01:00
Neshura	4eef07de01	Dummy content	2023-12-05 20:27:38 +01:00
Neshura	fdbb265ae6	Modify some lib components for Svelte 5	2023-12-05 19:25:34 +01:00
Neshura	f0c66fb4a2	move Svelte-4 components to legacy route	2023-12-05 19:25:14 +01:00
Neshura	47aadc9ef5	Rework Top Level Components to not use Skeleton	2023-12-05 19:24:56 +01:00
Neshura	59c2fd8f2d	Remove most of Skeleton-UI	2023-12-05 19:24:27 +01:00
Neshura	33c3eb5581	Package Version Bump. Now Using Svelte 5 Preview	2023-12-04 16:18:12 +01:00