Merge pull request #1 from justin13888/dev

Merge v1 (alpha)

biome.jsonc

@@ -18,6 +18,6 @@
     },
     "vcs": {
         "enabled": true,
-        "clientKind":"git"
+        "clientKind": "git"
     }
 }

shiba/components/dark-mode-switcher.tsx

@@ -0,0 +1,43 @@
+import { ColorModeContext } from "@kobalte/core";
+import { Moon, Sun } from "lucide-solid";
+import { Motion } from "solid-Motionone";
+import { type Component, useContext } from "solid-js";
+
+export const DarkModeSwitcher: Component = () => {
+    const { colorMode, toggleColorMode } = useContext(ColorModeContext)!;
+
+    return (
+        <button
+            onClick={toggleColorMode}
+            class="p-2 rounded-full bg-gray-200 dark:bg-gray-800 transition-colors duration-300"
+            aria-label={
+                colorMode() === "dark"
+                    ? "Switch to light mode"
+                    : "Switch to dark mode"
+            }
+        >
+            <Motion.div
+                animate={{ rotate: colorMode() === "dark" ? 360 : 0 }}
+                transition={{ duration: 0.5, easing: "ease-in-out" }}
+                class="relative w-6 h-6"
+            >
+                <Motion.div
+                    initial={false}
+                    animate={{ opacity: colorMode() === "dark" ? 0 : 1 }}
+                    transition={{ duration: 0.25 }}
+                    class="absolute inset-0"
+                >
+                    <Sun class="w-6 h-6 text-yellow-500" />
+                </Motion.div>
+                <Motion.div
+                    initial={false}
+                    animate={{ opacity: colorMode() === "dark" ? 1 : 0 }}
+                    transition={{ duration: 0.25 }}
+                    class="absolute inset-0"
+                >
+                    <Moon class="w-6 h-6 text-blue-500" />
+                </Motion.div>
+            </Motion.div>
+        </button>
+    );
+};

shiba/components/editable-card-title.tsx

@@ -0,0 +1,64 @@
+import { type Component, type ComponentProps, createSignal } from "solid-js";
+import { CardTitle } from "./ui/card";
+
+export const EditableCardTitle: Component<
+    Omit<
+        ComponentProps<"h3"> & {
+            initialValue: string;
+            onUpdateValue: (val: string) => any;
+        },
+        "children"
+    >
+> = (props) => {
+    let lastValue = props.initialValue;
+    const [isEditing, setIsEditing] = createSignal(false);
+    const [value, setValue] = createSignal(props.initialValue); // use children as initial value
+
+    const handleDoubleClick = () => {
+        setIsEditing(true);
+    };
+
+    const handleBlur = () => {
+        setIsEditing(false);
+        const currentValue = value();
+        if (props.onUpdateValue && currentValue) {
+            props.onUpdateValue(currentValue);
+            lastValue = currentValue;
+        }
+    };
+
+    const handleReset = () => {
+        setIsEditing(false);
+        setValue(props.initialValue);
+    };
+
+    return (
+        <CardTitle
+            {...props}
+            onDblClick={handleDoubleClick}
+            class={props.class}
+        >
+            {isEditing() ? (
+                <input
+                    type="text"
+                    value={value()}
+                    onInput={(e) => {
+                        setValue(e.target.value);
+                    }}
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                            handleBlur();
+                        } else if (e.key === "Escape") {
+                            handleReset();
+                        }
+                    }}
+                    onBlur={handleBlur}
+                    class="w-full border rounded px-2 py-1"
+                    autofocus
+                />
+            ) : (
+                value() || <span class="italic">Untitled</span>
+            )}
+        </CardTitle>
+    );
+};

shiba/components/statusbar.tsx

@@ -1,5 +1,12 @@
+import { tabCount } from "@/utils/store";
 import { Check, CircleX, Loader } from "lucide-solid";
-import type { Accessor, Component } from "solid-js";
+import {
+    type Accessor,
+    type Component,
+    Match,
+    Switch,
+    createSignal,
+} from "solid-js";
 
 // TODO: Implement with sync status
 
@@ -17,9 +24,7 @@ const SyncStatus: Component<SyncStatusProps> = ({ status }) => {
     const colourError = "text-red-500";
     return (
         <span
-            class={
-                `flex flex-row items-center space-x-2 text-xs"`
-            }
+            class={`flex flex-row items-center space-x-2 text-xs"`}
             aria-label="Sync status"
         >
             <Switch fallback={<p>Unknown...</p>}>

shiba/components/ui/badge.tsx

@@ -0,0 +1,42 @@
+import { cn } from "@/utils";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import { type ComponentProps, splitProps } from "solid-js";
+
+export const badgeVariants = cva(
+    "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring",
+    {
+        variants: {
+            variant: {
+                default:
+                    "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+                secondary:
+                    "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                destructive:
+                    "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+                outline: "text-foreground",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+);
+
+export const Badge = (
+    props: ComponentProps<"div"> & VariantProps<typeof badgeVariants>,
+) => {
+    const [local, rest] = splitProps(props, ["class", "variant"]);
+
+    return (
+        <div
+            class={cn(
+                badgeVariants({
+                    variant: local.variant,
+                }),
+                local.class,
+            )}
+            {...rest}
+        />
+    );
+};

shiba/components/ui/card.tsx

@@ -1,5 +1,5 @@
 import type { Component, ComponentProps } from "solid-js";
-import { splitProps } from "solid-js";
+import { createSignal, splitProps } from "solid-js";
 
 import { cn } from "@/utils";