@jant/core 0.2.17 → 0.2.18

package/src/routes/dash/settings.tsx

@@ -8,11 +8,7 @@ import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { DashLayout } from "../../theme/layouts/index.js";
 import { sse } from "../../lib/sse.js";
-import {
-  getSiteName,
-  getSiteDescription,
-  getSiteLanguage,
-} from "../../lib/config.js";
+import { getSiteLanguage, getConfigFallback } from "../../lib/config.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -22,12 +18,14 @@ function SettingsContent({
   siteName,
   siteDescription,
   siteLanguage,
-  saved,
+  siteNameFallback,
+  siteDescriptionFallback,
 }: {
   siteName: string;
   siteDescription: string;
   siteLanguage: string;
-  saved: boolean;
+  siteNameFallback: string;
+  siteDescriptionFallback: string;
 }) {
   const { t } = useLingui();
 
@@ -43,27 +41,11 @@ function SettingsContent({
         {t({ message: "Settings", comment: "@context: Dashboard heading" })}
       </h1>
 
-      {saved && (
-        <div
-          id="settings-saved-toast"
-          class="alert mb-4 max-w-lg transition-opacity duration-300"
-          data-init={`console.log('[toast] init fired at', Date.now()); history.replaceState({}, '', '/dash/settings'); setTimeout(() => { console.log('[toast] hiding at', Date.now()); const el = document.getElementById('settings-saved-toast'); if (el) { el.style.opacity = '0'; setTimeout(() => el.remove(), 300) } }, 3000)`}
-        >
-          <h2>
-            {t({
-              message: "Settings saved successfully.",
-              comment: "@context: Toast message after saving settings",
-            })}
-          </h2>
-        </div>
-      )}
-
       <div class="flex flex-col gap-6 max-w-lg">
         <form
           data-signals={generalSignals}
           data-on:submit__prevent="@post('/dash/settings')"
         >
-          <div id="settings-message"></div>
           <div class="card">
             <header>
               <h2>
@@ -85,7 +67,7 @@ function SettingsContent({
                   type="text"
                   data-bind="siteName"
                   class="input"
-                  required
+                  placeholder={siteNameFallback}
                 />
               </div>
 
@@ -96,7 +78,12 @@ function SettingsContent({
                     comment: "@context: Settings form field",
                   })}
                 </label>
-                <textarea data-bind="siteDescription" class="textarea" rows={3}>
+                <textarea
+                  data-bind="siteDescription"
+                  class="textarea"
+                  rows={3}
+                  placeholder={siteDescriptionFallback}
+                >
                   {siteDescription}
                 </textarea>
               </div>
@@ -135,7 +122,6 @@ function SettingsContent({
           data-signals="{currentPassword: '', newPassword: '', confirmPassword: ''}"
           data-on:submit__prevent="@post('/dash/settings/password')"
         >
-          <div id="password-message"></div>
           <div class="card">
             <header>
               <h2>
@@ -212,23 +198,33 @@ function SettingsContent({
 
 // Settings page
 settingsRoutes.get("/", async (c) => {
-  const siteName = await getSiteName(c);
-  const siteDescription = await getSiteDescription(c);
+  const { settings } = c.var.services;
+
+  // Fetch raw DB values (null if not set)
+  const dbSiteName = await settings.get("SITE_NAME");
+  const dbSiteDescription = await settings.get("SITE_DESCRIPTION");
   const siteLanguage = await getSiteLanguage(c);
+
+  // Fallback values (ENV > Default) for placeholders
+  const siteNameFallback = getConfigFallback(c, "SITE_NAME");
+  const siteDescriptionFallback = getConfigFallback(c, "SITE_DESCRIPTION");
+
   const saved = c.req.query("saved") !== undefined;
 
   return c.html(
     <DashLayout
       c={c}
       title="Settings"
-      siteName={siteName}
+      siteName={dbSiteName || siteNameFallback}
       currentPath="/dash/settings"
+      toast={saved ? { message: "Settings saved successfully." } : undefined}
     >
       <SettingsContent
-        siteName={siteName}
-        siteDescription={siteDescription}
+        siteName={dbSiteName || ""}
+        siteDescription={dbSiteDescription || ""}
         siteLanguage={siteLanguage}
-        saved={saved}
+        siteNameFallback={siteNameFallback}
+        siteDescriptionFallback={siteDescriptionFallback}
       />
     </DashLayout>,
   );
@@ -242,14 +238,25 @@ settingsRoutes.post("/", async (c) => {
     siteLanguage: string;
   }>();
 
-  const oldLanguage =
-    (await c.var.services.settings.get("SITE_LANGUAGE")) ?? "en";
+  const { settings } = c.var.services;
 
-  await c.var.services.settings.setMany({
-    SITE_NAME: body.siteName,
-    SITE_DESCRIPTION: body.siteDescription,
-    SITE_LANGUAGE: body.siteLanguage,
-  });
+  const oldLanguage = (await settings.get("SITE_LANGUAGE")) ?? "en";
+
+  // For text fields: empty = remove from DB (fall back to ENV > Default)
+  if (body.siteName.trim()) {
+    await settings.set("SITE_NAME", body.siteName.trim());
+  } else {
+    await settings.remove("SITE_NAME");
+  }
+
+  if (body.siteDescription.trim()) {
+    await settings.set("SITE_DESCRIPTION", body.siteDescription.trim());
+  } else {
+    await settings.remove("SITE_DESCRIPTION");
+  }
+
+  // Language always has a value from the select
+  await settings.set("SITE_LANGUAGE", body.siteLanguage);
 
   const languageChanged = oldLanguage !== body.siteLanguage;
 
@@ -258,10 +265,7 @@ settingsRoutes.post("/", async (c) => {
       // Language changed - full reload needed to update all UI text
       await stream.redirect("/dash/settings?saved");
     } else {
-      // No language change - show inline success message
-      await stream.patchElements(
-        '<div id="settings-message"><div class="alert mb-4 transition-opacity duration-300" data-init="setTimeout(() => { el.style.opacity = \'0\'; setTimeout(() => el.remove(), 300) }, 3000)"><h2>Settings saved successfully.</h2></div></div>',
-      );
+      await stream.toast("Settings saved successfully.");
     }
   });
 });
@@ -276,9 +280,7 @@ settingsRoutes.post("/password", async (c) => {
 
   if (body.newPassword !== body.confirmPassword) {
     return sse(c, async (stream) => {
-      await stream.patchElements(
-        '<div id="password-message"><div class="alert-destructive mb-4"><h2>Passwords do not match.</h2></div></div>',
-      );
+      await stream.toast("Passwords do not match.", "error");
     });
   }
 
@@ -293,16 +295,12 @@ settingsRoutes.post("/password", async (c) => {
     });
   } catch {
     return sse(c, async (stream) => {
-      await stream.patchElements(
-        '<div id="password-message"><div class="alert-destructive mb-4"><h2>Current password is incorrect.</h2></div></div>',
-      );
+      await stream.toast("Current password is incorrect.", "error");
     });
   }
 
   return sse(c, async (stream) => {
-    await stream.patchElements(
-      '<div id="password-message"><div class="alert mb-4"><h2>Password changed successfully.</h2></div></div>',
-    );
+    await stream.toast("Password changed successfully.");
     await stream.patchSignals({
       currentPassword: "",
       newPassword: "",

package/src/services/settings.ts

@@ -19,6 +19,7 @@ export interface SettingsService {
   getAll(): Promise<Record<string, string>>;
   set(key: SettingsKey, value: string): Promise<void>;
   setMany(entries: Partial<Record<SettingsKey, string>>): Promise<void>;
+  remove(key: SettingsKey): Promise<void>;
   isOnboardingComplete(): Promise<boolean>;
   completeOnboarding(): Promise<void>;
 }
@@ -54,6 +55,10 @@ export function createSettingsService(db: Database): SettingsService {
         });
     },
 
+    async remove(key) {
+      await db.delete(settings).where(eq(settings.key, key));
+    },
+
     async setMany(entries) {
       const timestamp = now();
       const keys = Object.keys(entries) as SettingsKey[];

package/src/styles/components.css

@@ -12,6 +12,32 @@
   }
 }
 
+/* Alert variants */
+@layer components {
+  .alert-success {
+    @apply relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current;
+    @apply text-success bg-card [&>svg]:text-current;
+
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6,
+    > strong,
+    > [data-title] {
+      @apply col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight;
+    }
+
+    > section {
+      @apply text-success col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed;
+
+      ul {
+        @apply list-inside list-disc text-sm;
+      }
+    }
+  }
+}
+
 /* Badge components */
 @layer components {
   .badge {
@@ -45,3 +71,70 @@
     color: white;
   }
 }
+
+/* Toast notifications */
+@layer components {
+  .toast-container {
+    @apply fixed top-4 right-4 z-50 flex flex-col gap-2 pointer-events-none;
+  }
+
+  .toast {
+    @apply pointer-events-auto rounded-lg border px-4 py-3 text-sm shadow-lg;
+    @apply flex items-start gap-2.5 min-w-64 max-w-sm;
+    background-color: var(--color-card);
+    animation: toast-in 0.3s ease-out;
+
+    > svg:first-child {
+      @apply size-4 shrink-0 translate-y-0.5;
+    }
+
+    > span {
+      @apply flex-1;
+    }
+  }
+
+  .toast-success {
+    color: var(--color-success);
+  }
+
+  .toast-error {
+    color: var(--color-destructive);
+  }
+
+  .toast-close {
+    @apply shrink-0 translate-y-0.5 cursor-pointer rounded-sm p-0 border-0 bg-transparent;
+    color: var(--color-muted-foreground);
+
+    &:hover {
+      color: var(--color-foreground);
+    }
+
+    > svg {
+      @apply size-3.5;
+    }
+  }
+
+  .toast-out {
+    animation: toast-out 0.3s ease-in forwards;
+  }
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes toast-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

package/src/theme/color-themes.ts

@@ -0,0 +1,321 @@
+/**
+ * Built-in Color Themes
+ *
+ * Each theme defines CSS variable overrides for light and dark modes,
+ * plus preview colors for the theme picker UI.
+ */
+
+/**
+ * A color theme definition with light and dark mode CSS variable overrides.
+ */
+export interface ColorTheme {
+  /** Stored in DB settings, e.g. "beach" */
+  id: string;
+  /** Display name, e.g. "Beach" */
+  name: string;
+  /** CSS variable overrides for :root (light mode) */
+  light: Record<string, string>;
+  /** CSS variable overrides for .dark (dark mode) */
+  dark: Record<string, string>;
+  /** Preview colors (hex) for theme picker cards */
+  preview: {
+    lightBg: string;
+    lightText: string;
+    lightLink: string;
+    darkBg: string;
+    darkText: string;
+    darkLink: string;
+  };
+}
+
+/**
+ * Create a comprehensive color theme from key colors.
+ * Derives card, popover, muted, secondary, accent, and sidebar variables.
+ */
+function defineTheme(opts: {
+  id: string;
+  name: string;
+  preview: ColorTheme["preview"];
+  light: {
+    bg: string;
+    fg: string;
+    primary: string;
+    primaryFg: string;
+    muted: string;
+    mutedFg: string;
+    border: string;
+  };
+  dark: {
+    bg: string;
+    fg: string;
+    primary: string;
+    primaryFg: string;
+    muted: string;
+    mutedFg: string;
+    border: string;
+  };
+}): ColorTheme {
+  const { light, dark } = opts;
+  return {
+    id: opts.id,
+    name: opts.name,
+    preview: opts.preview,
+    light: {
+      "--background": light.bg,
+      "--foreground": light.fg,
+      "--card": light.bg,
+      "--card-foreground": light.fg,
+      "--popover": light.bg,
+      "--popover-foreground": light.fg,
+      "--primary": light.primary,
+      "--primary-foreground": light.primaryFg,
+      "--secondary": light.muted,
+      "--secondary-foreground": light.fg,
+      "--muted": light.muted,
+      "--muted-foreground": light.mutedFg,
+      "--accent": light.muted,
+      "--accent-foreground": light.fg,
+      "--border": light.border,
+      "--input": light.border,
+      "--ring": light.primary,
+      "--sidebar": light.bg,
+      "--sidebar-foreground": light.fg,
+      "--sidebar-primary": light.primary,
+      "--sidebar-primary-foreground": light.primaryFg,
+      "--sidebar-accent": light.muted,
+      "--sidebar-accent-foreground": light.fg,
+      "--sidebar-border": light.border,
+      "--sidebar-ring": light.primary,
+    },
+    dark: {
+      "--background": dark.bg,
+      "--foreground": dark.fg,
+      "--card": dark.bg,
+      "--card-foreground": dark.fg,
+      "--popover": dark.bg,
+      "--popover-foreground": dark.fg,
+      "--primary": dark.primary,
+      "--primary-foreground": dark.primaryFg,
+      "--secondary": dark.muted,
+      "--secondary-foreground": dark.fg,
+      "--muted": dark.muted,
+      "--muted-foreground": dark.mutedFg,
+      "--accent": dark.muted,
+      "--accent-foreground": dark.fg,
+      "--border": dark.border,
+      "--input": dark.border,
+      "--ring": dark.primary,
+      "--sidebar": dark.bg,
+      "--sidebar-foreground": dark.fg,
+      "--sidebar-primary": dark.primary,
+      "--sidebar-primary-foreground": dark.primaryFg,
+      "--sidebar-accent": dark.muted,
+      "--sidebar-accent-foreground": dark.fg,
+      "--sidebar-border": dark.border,
+      "--sidebar-ring": dark.primary,
+    },
+  };
+}
+
+export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
+  {
+    id: "default",
+    name: "Default",
+    light: {},
+    dark: {},
+    preview: {
+      lightBg: "#ffffff",
+      lightText: "#1e1e1e",
+      lightLink: "#1e1e1e",
+      darkBg: "#262626",
+      darkText: "#fafafa",
+      darkLink: "#eaeaea",
+    },
+  },
+
+  defineTheme({
+    id: "beach",
+    name: "Beach",
+    preview: {
+      lightBg: "#f9f3ea",
+      lightText: "#3d3527",
+      lightLink: "#2d6a59",
+      darkBg: "#2d4553",
+      darkText: "#e2d6c4",
+      darkLink: "#7cc5a2",
+    },
+    light: {
+      bg: "oklch(0.97 0.01 85)",
+      fg: "oklch(0.28 0.02 65)",
+      primary: "oklch(0.46 0.1 170)",
+      primaryFg: "oklch(0.98 0.005 85)",
+      muted: "oklch(0.93 0.015 85)",
+      mutedFg: "oklch(0.52 0.015 65)",
+      border: "oklch(0.88 0.018 85)",
+    },
+    dark: {
+      bg: "oklch(0.27 0.03 210)",
+      fg: "oklch(0.88 0.015 80)",
+      primary: "oklch(0.72 0.1 165)",
+      primaryFg: "oklch(0.22 0.03 210)",
+      muted: "oklch(0.33 0.025 210)",
+      mutedFg: "oklch(0.65 0.015 80)",
+      border: "oklch(0.38 0.02 210)",
+    },
+  }),
+
+  defineTheme({
+    id: "gameboy",
+    name: "Gameboy",
+    preview: {
+      lightBg: "#d3d7c0",
+      lightText: "#2b3326",
+      lightLink: "#466740",
+      darkBg: "#1b1f18",
+      darkText: "#a6b09a",
+      darkLink: "#6d9660",
+    },
+    light: {
+      bg: "oklch(0.87 0.03 130)",
+      fg: "oklch(0.25 0.04 140)",
+      primary: "oklch(0.4 0.08 145)",
+      primaryFg: "oklch(0.92 0.02 130)",
+      muted: "oklch(0.83 0.035 130)",
+      mutedFg: "oklch(0.48 0.03 140)",
+      border: "oklch(0.79 0.035 130)",
+    },
+    dark: {
+      bg: "oklch(0.18 0.02 140)",
+      fg: "oklch(0.78 0.025 130)",
+      primary: "oklch(0.6 0.08 145)",
+      primaryFg: "oklch(0.15 0.02 140)",
+      muted: "oklch(0.24 0.02 140)",
+      mutedFg: "oklch(0.58 0.02 130)",
+      border: "oklch(0.3 0.02 140)",
+    },
+  }),
+
+  defineTheme({
+    id: "grayscale",
+    name: "Grayscale",
+    preview: {
+      lightBg: "#efefef",
+      lightText: "#3a3a3a",
+      lightLink: "#555555",
+      darkBg: "#1e1e1e",
+      darkText: "#c8c8c8",
+      darkLink: "#999999",
+    },
+    light: {
+      bg: "oklch(0.96 0 0)",
+      fg: "oklch(0.3 0 0)",
+      primary: "oklch(0.4 0 0)",
+      primaryFg: "oklch(0.96 0 0)",
+      muted: "oklch(0.92 0 0)",
+      mutedFg: "oklch(0.55 0 0)",
+      border: "oklch(0.87 0 0)",
+    },
+    dark: {
+      bg: "oklch(0.18 0 0)",
+      fg: "oklch(0.82 0 0)",
+      primary: "oklch(0.7 0 0)",
+      primaryFg: "oklch(0.18 0 0)",
+      muted: "oklch(0.24 0 0)",
+      mutedFg: "oklch(0.6 0 0)",
+      border: "oklch(0.3 0 0)",
+    },
+  }),
+
+  defineTheme({
+    id: "halloween",
+    name: "Halloween",
+    preview: {
+      lightBg: "#f9f2e3",
+      lightText: "#352200",
+      lightLink: "#cc5500",
+      darkBg: "#1e1000",
+      darkText: "#dfc390",
+      darkLink: "#ff8c00",
+    },
+    light: {
+      bg: "oklch(0.97 0.015 75)",
+      fg: "oklch(0.25 0.04 55)",
+      primary: "oklch(0.6 0.2 50)",
+      primaryFg: "oklch(0.98 0.01 75)",
+      muted: "oklch(0.93 0.02 75)",
+      mutedFg: "oklch(0.5 0.025 55)",
+      border: "oklch(0.88 0.025 75)",
+    },
+    dark: {
+      bg: "oklch(0.16 0.03 50)",
+      fg: "oklch(0.85 0.025 75)",
+      primary: "oklch(0.72 0.19 55)",
+      primaryFg: "oklch(0.14 0.03 50)",
+      muted: "oklch(0.22 0.025 50)",
+      mutedFg: "oklch(0.62 0.02 75)",
+      border: "oklch(0.28 0.025 50)",
+    },
+  }),
+
+  defineTheme({
+    id: "notepad",
+    name: "Notepad",
+    preview: {
+      lightBg: "#fdfce8",
+      lightText: "#333333",
+      lightLink: "#2060b8",
+      darkBg: "#2a291a",
+      darkText: "#d2d2b8",
+      darkLink: "#6695cc",
+    },
+    light: {
+      bg: "oklch(0.985 0.018 95)",
+      fg: "oklch(0.27 0 0)",
+      primary: "oklch(0.5 0.17 260)",
+      primaryFg: "oklch(0.985 0.01 95)",
+      muted: "oklch(0.94 0.022 95)",
+      mutedFg: "oklch(0.52 0 0)",
+      border: "oklch(0.88 0.025 95)",
+    },
+    dark: {
+      bg: "oklch(0.2 0.02 90)",
+      fg: "oklch(0.87 0.015 95)",
+      primary: "oklch(0.65 0.14 260)",
+      primaryFg: "oklch(0.98 0.01 95)",
+      muted: "oklch(0.26 0.018 90)",
+      mutedFg: "oklch(0.62 0.012 95)",
+      border: "oklch(0.32 0.018 90)",
+    },
+  }),
+
+  defineTheme({
+    id: "sonnet",
+    name: "Sonnet",
+    preview: {
+      lightBg: "#f7eef5",
+      lightText: "#2e1e2c",
+      lightLink: "#9845c8",
+      darkBg: "#1d1428",
+      darkText: "#d4c2d0",
+      darkLink: "#c080fc",
+    },
+    light: {
+      bg: "oklch(0.97 0.012 325)",
+      fg: "oklch(0.25 0.02 310)",
+      primary: "oklch(0.55 0.2 300)",
+      primaryFg: "oklch(0.98 0.008 325)",
+      muted: "oklch(0.93 0.016 325)",
+      mutedFg: "oklch(0.52 0.015 310)",
+      border: "oklch(0.88 0.016 325)",
+    },
+    dark: {
+      bg: "oklch(0.18 0.025 300)",
+      fg: "oklch(0.87 0.012 325)",
+      primary: "oklch(0.72 0.18 300)",
+      primaryFg: "oklch(0.98 0.008 325)",
+      muted: "oklch(0.24 0.022 300)",
+      mutedFg: "oklch(0.62 0.012 325)",
+      border: "oklch(0.3 0.022 300)",
+    },
+  }),
+];