feat: add options page (#22)

.changeset/poor-needles-watch.md

@@ -0,0 +1,5 @@
+---
+"gregmat-buddy": minor
+---
+
+added options page

components.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "default",
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "src/entrypoints/options/app.css",
+		"baseColor": "slate"
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/utils"
+	},
+	"typescript": true
+}

package.json

@@ -22,15 +22,20 @@
     "@types/vimeo__player": "^2.18.3",
     "@wxt-dev/module-svelte": "^1.0.1",
     "autoprefixer": "^10.4.20",
+    "bits-ui": "^0.21.16",
+    "clsx": "^2.1.1",
     "svelte": "^4.2.19",
     "svelte-check": "^3.8.6",
+    "tailwind-merge": "^2.5.4",
+    "tailwind-variants": "^0.2.1",
     "tailwindcss": "^3.4.14",
     "tslib": "^2.8.0",
     "typescript": "^5.6.3",
     "wxt": "^0.19.13"
   },
   "dependencies": {
     "@vimeo/player": "^2.24.0",
-    "fast-glob": "^3.3.2"
+    "fast-glob": "^3.3.2",
+    "lucide-svelte": "^0.453.0"
   }
 }

src/components/option/index.ts

@@ -0,0 +1,7 @@
+import Root from "./option.svelte";
+
+export {
+  Root,
+  //
+  Root as Option,
+};

src/components/option/option.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { Label } from "@/components/ui/label";
+  import { Switch } from "@/components/ui/switch";
+  import * as Tooltip from "@/components/ui/tooltip";
+  import { CircleHelp } from "lucide-svelte";
+
+  export let id: string;
+  export let handler: (id: string, checked: boolean) => void;
+  export let checked: boolean = false;
+  export let tooltip: string = "";
+
+  let isInitialLoad = true;
+
+  $: if (!isInitialLoad) {
+    handler(id, checked);
+  } else {
+    isInitialLoad = false;
+  }
+</script>
+
+<div class="px-2 flex justify-between">
+  <Label for={id} class="my-auto"><slot /></Label>
+  <div class="flex gap-2 items-center">
+    {#if tooltip !== ""}
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <CircleHelp size={20} class="stroke-gray-400 dark:stroke-zinc-400" />
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          <p>{tooltip}</p>
+        </Tooltip.Content>
+      </Tooltip.Root>
+    {/if}
+    <Switch {id} bind:checked />
+  </div>
+</div>

src/components/ui/label/index.ts

@@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label,
+};

src/components/ui/label/label.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Label as LabelPrimitive } from "bits-ui";
+  import { cn } from "@/utils";
+
+  type $$Props = LabelPrimitive.Props;
+  type $$Events = LabelPrimitive.Events;
+
+  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}
+  on:mousedown
+>
+  <slot />
+</LabelPrimitive.Root>

src/components/ui/switch/index.ts

@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};