@cryptiklemur/lattice 1.47.0 → 2.0.0

package/src/client/components/settings/Appearance.tsx

@@ -0,0 +1,275 @@
+import { memo, useMemo, useCallback, useState, useEffect } from "react";
+import { useTheme } from "../../hooks/useTheme";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { Sun, Moon, Check, Plus, Pencil, Trash2, Download } from "lucide-react";
+import type { ThemeEntry } from "../../themes/index";
+import { ThemeWizard } from "./ThemeWizard";
+import { ThemeSwatches } from "./ThemePreview";
+import { ContextMenu, useContextMenu } from "../ui/ContextMenu";
+import type { ServerMessage } from "@lattice/shared";
+
+var SWATCH_KEYS = [
+  "base00", "base01", "base02", "base03",
+  "base04", "base05", "base06", "base07",
+  "base08", "base09", "base0A", "base0B",
+  "base0C", "base0D", "base0E", "base0F",
+] as const;
+
+var ThemeCard = memo(function ThemeCard({
+  entry,
+  active,
+  onSelect,
+}: {
+  entry: ThemeEntry;
+  active: boolean;
+  onSelect: (id: string) => void;
+}) {
+  var t = entry.theme;
+
+  function handleClick() {
+    onSelect(entry.id);
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      className={
+        "flex flex-col gap-2 p-3 sm:p-2.5 px-3 rounded-lg border cursor-pointer text-left transition-colors duration-[120ms] relative focus-visible:ring-2 focus-visible:ring-primary " +
+        (active
+          ? "border-primary bg-base-300 shadow-sm"
+          : "border-base-content/15 bg-base-300 hover:border-base-content/30")
+      }
+    >
+      {active && (
+        <div className="absolute top-1.5 right-1.5 w-3.5 h-3.5 rounded-full bg-primary flex items-center justify-center">
+          <Check size={8} className="text-primary-content" strokeWidth={1.8} />
+        </div>
+      )}
+
+      <div className="flex gap-[3px] flex-wrap w-[80px]">
+        {SWATCH_KEYS.map(function (key) {
+          return (
+            <div
+              key={key}
+              className="w-[10px] h-[10px] rounded-sm flex-shrink-0 ring-1 ring-base-content/10"
+              style={{ background: "#" + t[key] }}
+            />
+          );
+        })}
+      </div>
+
+      <div className="text-[12px] font-medium text-base-content">
+        {t.name}
+      </div>
+    </button>
+  );
+});
+
+function ThemeGroup({
+  label,
+  entries,
+  currentThemeId,
+  onSelect,
+}: {
+  label: string;
+  entries: ThemeEntry[];
+  currentThemeId: string;
+  onSelect: (id: string) => void;
+}) {
+  if (entries.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mb-6">
+      <div className="text-[11px] font-mono font-bold tracking-[0.1em] uppercase text-base-content/40 mb-3">
+        {label}
+      </div>
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-2">
+        {entries.map(function (entry) {
+          return (
+            <ThemeCard
+              key={entry.id}
+              entry={entry}
+              active={entry.id === currentThemeId}
+              onSelect={onSelect}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+interface CustomTheme {
+  name: string;
+  author: string;
+  variant: string;
+  filename: string;
+  colors: Record<string, string>;
+}
+
+export function Appearance() {
+  var { mode, currentThemeId, toggleMode, setTheme, themes } = useTheme();
+  var ws = useWebSocket();
+  var [wizardOpen, setWizardOpen] = useState(false);
+  var [editTheme, setEditTheme] = useState<CustomTheme | null>(null);
+  var [customThemes, setCustomThemes] = useState<CustomTheme[]>([]);
+  var ctxMenu = useContextMenu<CustomTheme>();
+
+  useEffect(function () {
+    function handleCustomList(msg: ServerMessage) {
+      if ((msg as any).type === "theme:custom_list") {
+        setCustomThemes((msg as any).themes || []);
+      }
+    }
+    function handleSaved(msg: ServerMessage) {
+      if ((msg as any).type === "theme:saved" || (msg as any).type === "theme:deleted") {
+        ws.send({ type: "theme:list_custom" } as any);
+      }
+    }
+    ws.subscribe("theme:custom_list", handleCustomList);
+    ws.subscribe("theme:saved", handleSaved);
+    ws.subscribe("theme:deleted", handleSaved);
+    ws.send({ type: "theme:list_custom" } as any);
+    return function () {
+      ws.unsubscribe("theme:custom_list", handleCustomList);
+      ws.unsubscribe("theme:saved", handleSaved);
+      ws.unsubscribe("theme:deleted", handleSaved);
+    };
+  }, []);
+
+  var darkThemes = useMemo(function () {
+    return themes.filter(function (e) { return e.theme.variant === "dark"; });
+  }, [themes]);
+
+  var lightThemes = useMemo(function () {
+    return themes.filter(function (e) { return e.theme.variant === "light"; });
+  }, [themes]);
+
+  var handleThemeSelect = useCallback(function (id: string) {
+    setTheme(id);
+  }, [setTheme]);
+
+  function handleEditCustom(theme: CustomTheme) {
+    setEditTheme(theme);
+    setWizardOpen(true);
+  }
+
+  function handleDeleteCustom(theme: CustomTheme) {
+    ws.send({ type: "theme:delete", name: theme.filename } as any);
+  }
+
+  function handleExportCustom(theme: CustomTheme) {
+    var obj: Record<string, string> = {
+      name: theme.name,
+      author: theme.author,
+      variant: theme.variant,
+    };
+    for (var key of Object.keys(theme.colors)) {
+      obj[key] = theme.colors[key];
+    }
+    var blob = new Blob([JSON.stringify(obj, null, 2)], { type: "application/json" });
+    var url = URL.createObjectURL(blob);
+    var a = document.createElement("a");
+    a.href = url;
+    a.download = theme.filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  return (
+    <div className="py-2">
+      <div className="flex items-center justify-between mb-6">
+        <div className="text-[12px] font-semibold text-base-content/40">Color Mode</div>
+        <button
+          onClick={toggleMode}
+          className="btn btn-ghost btn-sm border border-base-content/20"
+        >
+          {mode === "dark" ? (
+            <>
+              <Sun size={12} />
+              Switch to Light
+            </>
+          ) : (
+            <>
+              <Moon size={12} />
+              Switch to Dark
+            </>
+          )}
+        </button>
+      </div>
+
+      <ThemeGroup
+        label="Dark Themes"
+        entries={darkThemes}
+        currentThemeId={currentThemeId}
+        onSelect={handleThemeSelect}
+      />
+
+      <ThemeGroup
+        label="Light Themes"
+        entries={lightThemes}
+        currentThemeId={currentThemeId}
+        onSelect={handleThemeSelect}
+      />
+
+      <div className="mb-6">
+        <div className="text-[11px] font-mono font-bold tracking-[0.1em] uppercase text-base-content/40 mb-3">
+          Custom Themes
+        </div>
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-2">
+          {customThemes.map(function (ct) {
+            return (
+              <button
+                key={ct.filename}
+                onClick={function () { handleEditCustom(ct); }}
+                onContextMenu={function (e) { ctxMenu.open(e, ct); }}
+                data-allow-context-menu
+                className="flex flex-col gap-2 p-3 sm:p-2.5 px-3 rounded-lg border cursor-pointer text-left transition-colors duration-[120ms] relative border-base-content/15 bg-base-300 hover:border-base-content/30"
+              >
+                <div className="absolute top-1.5 right-1.5">
+                  <Pencil size={10} className="text-base-content/20" />
+                </div>
+                <ThemeSwatches colors={ct.colors} />
+                <div className="text-[12px] font-medium text-base-content truncate w-full">
+                  {ct.name}
+                </div>
+              </button>
+            );
+          })}
+
+          <button
+            onClick={function () { setEditTheme(null); setWizardOpen(true); }}
+            className="flex flex-col items-center justify-center gap-2 p-3 rounded-lg border-2 border-dashed border-base-content/15 cursor-pointer text-left transition-colors duration-[120ms] hover:border-primary/40 hover:bg-primary/5 min-h-[70px]"
+          >
+            <Plus size={18} className="text-base-content/25" />
+            <div className="text-[11px] text-base-content/30">Create Theme</div>
+          </button>
+        </div>
+      </div>
+
+      {ctxMenu.state && (
+        <ContextMenu
+          x={ctxMenu.state.x}
+          y={ctxMenu.state.y}
+          onClose={ctxMenu.close}
+          label="Custom theme actions"
+          items={[
+            { label: "Edit", icon: <Pencil size={14} />, onClick: function () { handleEditCustom(ctxMenu.state!.data); } },
+            { label: "Export JSON", icon: <Download size={14} />, onClick: function () { handleExportCustom(ctxMenu.state!.data); } },
+            { type: "divider" as const },
+            { label: "Delete", icon: <Trash2 size={14} />, danger: true, onClick: function () { handleDeleteCustom(ctxMenu.state!.data); } },
+          ]}
+        />
+      )}
+
+      {wizardOpen && (
+        <ThemeWizard
+          onClose={function () { setWizardOpen(false); setEditTheme(null); }}
+          editTheme={editTheme ? { name: editTheme.name, author: editTheme.author, variant: editTheme.variant as "dark" | "light", colors: editTheme.colors } : null}
+        />
+      )}
+    </div>
+  );
+}

package/{client/src → src/client}/components/settings/Notifications.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useNotificationPreference } from "../../hooks/useNotifications";
+import { usePushNotifications } from "../../hooks/usePushNotifications";
 
 var NOTIFICATION_TYPES = [
   { key: "responses", label: "Claude responses", description: "When Claude finishes a response" },
@@ -21,6 +22,7 @@ function saveTypePrefs(prefs: Record<string, boolean>): void {
 
 export function Notifications() {
   var notifPref = useNotificationPreference();
+  var push = usePushNotifications();
   var [typePrefs, setTypePrefs] = useState<Record<string, boolean>>(loadTypePrefs);
 
   function toggleType(key: string) {
@@ -56,6 +58,39 @@ export function Notifications() {
         </div>
       </div>
 
+      {push.status !== "unsupported" && (
+        <div>
+          <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
+            Push Notifications
+          </h2>
+          <div className="flex items-center justify-between py-2 px-3 bg-base-300 border border-base-content/15 rounded-xl">
+            <div>
+              <div className="text-[13px] text-base-content">Enable push notifications</div>
+              <div className="text-[11px] text-base-content/30 mt-0.5">
+                {push.status === "denied"
+                  ? "Blocked by browser — update in browser settings"
+                  : push.status === "subscribed"
+                    ? "Receiving push notifications even when the tab is closed"
+                    : "Get notified even when Lattice is not open"}
+              </div>
+            </div>
+            <input
+              type="checkbox"
+              className="toggle toggle-sm toggle-primary"
+              checked={push.status === "subscribed"}
+              onChange={function () {
+                if (push.status === "subscribed") {
+                  void push.unsubscribe();
+                } else {
+                  void push.subscribe();
+                }
+              }}
+              disabled={push.status === "denied"}
+            />
+          </div>
+        </div>
+      )}
+
       <div>
         <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
           Notification Types

package/src/client/components/settings/ThemePreview.tsx

@@ -0,0 +1,140 @@
+import { useMemo } from "react";
+
+interface ThemePreviewProps {
+  colors: Record<string, string>;
+  variant: "dark" | "light";
+  compact?: boolean;
+}
+
+function hexToStyle(hex: string): string {
+  return "#" + hex.replace(/^#/, "");
+}
+
+export function ThemePreview(props: ThemePreviewProps) {
+  var c = props.colors;
+  var style = useMemo(function () {
+    return {
+      "--preview-bg": hexToStyle(c.base00 || "1f1f28"),
+      "--preview-surface": hexToStyle(c.base01 || "2a2a37"),
+      "--preview-selection": hexToStyle(c.base02 || "363646"),
+      "--preview-comment": hexToStyle(c.base03 || "54546d"),
+      "--preview-dark-fg": hexToStyle(c.base04 || "727169"),
+      "--preview-fg": hexToStyle(c.base05 || "dcd7ba"),
+      "--preview-light-fg": hexToStyle(c.base06 || "c8c093"),
+      "--preview-bright-fg": hexToStyle(c.base07 || "ffffff"),
+      "--preview-red": hexToStyle(c.base08 || "c34043"),
+      "--preview-orange": hexToStyle(c.base09 || "ffa066"),
+      "--preview-yellow": hexToStyle(c.base0A || "c0a36e"),
+      "--preview-green": hexToStyle(c.base0B || "76946a"),
+      "--preview-cyan": hexToStyle(c.base0C || "6a9589"),
+      "--preview-blue": hexToStyle(c.base0D || "7e9cd8"),
+      "--preview-purple": hexToStyle(c.base0E || "957fb8"),
+      "--preview-brown": hexToStyle(c.base0F || "d27e99"),
+    } as React.CSSProperties;
+  }, [c]);
+
+  if (props.compact) {
+    return (
+      <div
+        className="rounded-lg overflow-hidden border border-base-content/10"
+        style={{ ...style, background: "var(--preview-bg)", color: "var(--preview-fg)" }}
+      >
+        <div className="flex h-[80px]">
+          <div className="w-10 shrink-0 p-1.5 flex flex-col gap-1" style={{ background: "var(--preview-surface)" }}>
+            <div className="w-full h-1.5 rounded-full" style={{ background: "var(--preview-blue)", opacity: 0.6 }} />
+            <div className="w-full h-1.5 rounded-full" style={{ background: "var(--preview-comment)" }} />
+            <div className="w-full h-1.5 rounded-full" style={{ background: "var(--preview-comment)" }} />
+          </div>
+          <div className="flex-1 p-2 flex flex-col gap-1.5">
+            <div className="flex justify-end">
+              <div className="rounded-lg px-2 py-1 text-[8px] max-w-[70%]" style={{ background: "var(--preview-blue)", color: "var(--preview-bright-fg)" }}>
+                Hello world
+              </div>
+            </div>
+            <div className="flex">
+              <div className="rounded-lg px-2 py-1 text-[8px] max-w-[70%]" style={{ background: "var(--preview-selection)", color: "var(--preview-fg)" }}>
+                Response text
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="rounded-xl overflow-hidden border border-base-content/10 shadow-lg"
+      style={{ ...style, background: "var(--preview-bg)", color: "var(--preview-fg)" }}
+    >
+      <div className="flex h-[280px]">
+        <div className="w-[120px] shrink-0 p-3 flex flex-col gap-2 border-r" style={{ background: "var(--preview-surface)", borderColor: "var(--preview-selection)" }}>
+          <div className="text-[10px] font-bold mb-1" style={{ color: "var(--preview-light-fg)" }}>Projects</div>
+          <div className="flex items-center gap-1.5">
+            <div className="w-3 h-3 rounded" style={{ background: "var(--preview-blue)", opacity: 0.3 }} />
+            <div className="text-[9px]" style={{ color: "var(--preview-fg)" }}>lattice</div>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div className="w-3 h-3 rounded" style={{ background: "var(--preview-green)", opacity: 0.3 }} />
+            <div className="text-[9px]" style={{ color: "var(--preview-dark-fg)" }}>my-app</div>
+          </div>
+          <div className="mt-auto">
+            <div className="text-[8px] mb-1" style={{ color: "var(--preview-comment)" }}>Sessions</div>
+            <div className="text-[8px] truncate" style={{ color: "var(--preview-dark-fg)" }}>Fix auth bug</div>
+            <div className="text-[8px] truncate" style={{ color: "var(--preview-comment)" }}>Add dark mode</div>
+          </div>
+        </div>
+
+        <div className="flex-1 flex flex-col">
+          <div className="flex-1 p-3 flex flex-col gap-2 overflow-hidden">
+            <div className="flex justify-end">
+              <div className="rounded-xl px-3 py-1.5 text-[10px] max-w-[75%]" style={{ background: "var(--preview-blue)", color: "var(--preview-bright-fg)" }}>
+                Can you fix the login page?
+              </div>
+            </div>
+
+            <div className="flex gap-2">
+              <div className="w-4 h-4 rounded-full shrink-0 mt-0.5" style={{ background: "var(--preview-blue)", opacity: 0.2 }} />
+              <div className="rounded-xl px-3 py-1.5 text-[10px] max-w-[75%] border" style={{ background: "var(--preview-selection)", borderColor: "var(--preview-comment)", opacity: 0.3 }}>
+                <span style={{ color: "var(--preview-fg)" }}>I'll update the </span>
+                <code className="px-1 rounded text-[9px]" style={{ background: "var(--preview-bg)", color: "var(--preview-orange)" }}>LoginForm</code>
+                <span style={{ color: "var(--preview-fg)" }}> component.</span>
+              </div>
+            </div>
+
+            <div className="rounded-lg p-2 text-[9px] font-mono border" style={{ background: "var(--preview-bg)", borderColor: "var(--preview-selection)" }}>
+              <div><span style={{ color: "var(--preview-purple)" }}>function</span> <span style={{ color: "var(--preview-blue)" }}>login</span><span style={{ color: "var(--preview-dark-fg)" }}>(</span><span style={{ color: "var(--preview-orange)" }}>user</span><span style={{ color: "var(--preview-dark-fg)" }}>)</span> {"{"}</div>
+              <div className="ml-3"><span style={{ color: "var(--preview-purple)" }}>var</span> <span style={{ color: "var(--preview-red)" }}>token</span> = <span style={{ color: "var(--preview-blue)" }}>auth</span>(<span style={{ color: "var(--preview-green)" }}>"secret"</span>);</div>
+              <div className="ml-3"><span style={{ color: "var(--preview-purple)" }}>return</span> {"{"} <span style={{ color: "var(--preview-yellow)" }}>ok</span>: <span style={{ color: "var(--preview-orange)" }}>true</span> {"}"};</div>
+              <div>{"}"}</div>
+            </div>
+          </div>
+
+          <div className="px-3 py-2 border-t" style={{ borderColor: "var(--preview-selection)" }}>
+            <div className="rounded-lg px-3 py-1.5 text-[9px]" style={{ background: "var(--preview-surface)", color: "var(--preview-comment)" }}>
+              Type a message...
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ThemeSwatches(props: { colors: Record<string, string> }) {
+  var keys = ["base00", "base01", "base02", "base03", "base04", "base05", "base06", "base07", "base08", "base09", "base0A", "base0B", "base0C", "base0D", "base0E", "base0F"];
+  return (
+    <div className="flex gap-0.5 rounded overflow-hidden">
+      {keys.map(function (key) {
+        return (
+          <div
+            key={key}
+            className="h-4 flex-1"
+            style={{ background: "#" + (props.colors[key] || "000000").replace(/^#/, "") }}
+            title={key + ": #" + (props.colors[key] || "000000")}
+          />
+        );
+      })}
+    </div>
+  );
+}