@cryptiklemur/lattice 0.0.0 → 1.1.0

package/client/src/components/panels/StickyNotes.tsx

@@ -1,187 +1,187 @@
-import { useCallback, useEffect, useState } from "react";
-import type { StickyNote, ServerMessage } from "@lattice/shared";
-import { useWebSocket } from "../../hooks/useWebSocket";
-
-interface NoteCardProps {
-  note: StickyNote;
-  onEdit: (id: string) => void;
-  onDelete: (id: string) => void;
-}
-
-function NoteCard(props: NoteCardProps) {
-  var { note, onEdit, onDelete } = props;
-  return (
-    <div className="card bg-base-200 border border-base-300">
-      <div className="card-body p-3">
-        <div className="text-[13px] text-base-content whitespace-pre-wrap break-words leading-relaxed min-h-12">
-          {note.content}
-        </div>
-        <div className="flex gap-1.5 justify-end mt-2">
-          <button
-            onClick={function () { onEdit(note.id); }}
-            className="btn btn-ghost btn-xs border border-base-300"
-          >
-            Edit
-          </button>
-          <button
-            onClick={function () { onDelete(note.id); }}
-            className="btn btn-ghost btn-xs border border-base-300 text-base-content/60"
-          >
-            Delete
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-interface EditModalProps {
-  initial: string;
-  onSave: (content: string) => void;
-  onCancel: () => void;
-}
-
-function EditModal(props: EditModalProps) {
-  var { initial, onSave, onCancel } = props;
-  var [content, setContent] = useState(initial);
-
-  return (
-    <div className="fixed inset-0 bg-black/50 z-[1000] flex items-center justify-center" role="dialog" aria-modal="true" aria-label="Edit note">
-      <div className="card bg-base-200 border border-base-300 w-[400px] max-w-[90vw] shadow-2xl">
-        <div className="card-body p-5">
-          <div className="text-[13px] font-semibold text-base-content mb-3">Edit Note</div>
-          <textarea
-            autoFocus
-            value={content}
-            onChange={function (e) { setContent(e.target.value); }}
-            className="textarea textarea-bordered w-full min-h-[120px] bg-base-300 text-base-content text-[13px] resize-y"
-          />
-          <div className="flex gap-2 justify-end mt-3">
-            <button
-              onClick={onCancel}
-              className="btn btn-ghost btn-sm"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={function () { onSave(content); }}
-              className="btn btn-primary btn-sm"
-            >
-              Save
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function StickyNotes() {
-  var { send, subscribe, unsubscribe } = useWebSocket();
-  var [notes, setNotes] = useState<StickyNote[]>([]);
-  var [editingId, setEditingId] = useState<string | null>(null);
-  var [creating, setCreating] = useState(false);
-
-  var editingNote = editingId ? notes.find(function (n) { return n.id === editingId; }) : null;
-
-  var handleMessage = useCallback(function (msg: ServerMessage) {
-    if (msg.type === "notes:list_result") {
-      setNotes(msg.notes);
-      return;
-    }
-    if (msg.type === "notes:created") {
-      setNotes(function (prev) { return [...prev, msg.note]; });
-      return;
-    }
-    if (msg.type === "notes:updated") {
-      setNotes(function (prev) {
-        return prev.map(function (n) { return n.id === msg.note.id ? msg.note : n; });
-      });
-      return;
-    }
-    if (msg.type === "notes:deleted") {
-      setNotes(function (prev) { return prev.filter(function (n) { return n.id !== msg.id; }); });
-      return;
-    }
-  }, []);
-
-  useEffect(function () {
-    subscribe("notes:list_result", handleMessage);
-    subscribe("notes:created", handleMessage);
-    subscribe("notes:updated", handleMessage);
-    subscribe("notes:deleted", handleMessage);
-    send({ type: "notes:list" });
-    return function () {
-      unsubscribe("notes:list_result", handleMessage);
-      unsubscribe("notes:created", handleMessage);
-      unsubscribe("notes:updated", handleMessage);
-      unsubscribe("notes:deleted", handleMessage);
-    };
-  }, [send, subscribe, unsubscribe, handleMessage]);
-
-  function handleCreate(content: string) {
-    if (content.trim()) {
-      send({ type: "notes:create", content: content.trim() });
-    }
-    setCreating(false);
-  }
-
-  function handleEdit(content: string) {
-    if (editingId && content.trim()) {
-      send({ type: "notes:update", id: editingId, content: content.trim() });
-    }
-    setEditingId(null);
-  }
-
-  function handleDelete(id: string) {
-    send({ type: "notes:delete", id });
-  }
-
-  return (
-    <div className="flex flex-col h-full bg-base-100">
-      <div className="flex items-center justify-between px-4 py-3 border-b border-base-300">
-        <span className="text-[13px] font-semibold text-base-content">Sticky Notes</span>
-        <button
-          onClick={function () { setCreating(true); }}
-          className="btn btn-primary btn-xs"
-        >
-          New Note
-        </button>
-      </div>
-
-      <div className="flex-1 overflow-auto p-3 flex flex-col gap-2.5">
-        {notes.length === 0 && (
-          <div className="text-base-content/50 text-[13px] text-center mt-10">
-            No notes yet. Create one to get started.
-          </div>
-        )}
-        {notes.map(function (note) {
-          return (
-            <NoteCard
-              key={note.id}
-              note={note}
-              onEdit={setEditingId}
-              onDelete={handleDelete}
-            />
-          );
-        })}
-      </div>
-
-      {creating && (
-        <EditModal
-          initial=""
-          onSave={handleCreate}
-          onCancel={function () { setCreating(false); }}
-        />
-      )}
-
-      {editingNote && (
-        <EditModal
-          initial={editingNote.content}
-          onSave={handleEdit}
-          onCancel={function () { setEditingId(null); }}
-        />
-      )}
-    </div>
-  );
-}
+import { useCallback, useEffect, useState } from "react";
+import type { StickyNote, ServerMessage } from "@lattice/shared";
+import { useWebSocket } from "../../hooks/useWebSocket";
+
+interface NoteCardProps {
+  note: StickyNote;
+  onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
+}
+
+function NoteCard(props: NoteCardProps) {
+  var { note, onEdit, onDelete } = props;
+  return (
+    <div className="card bg-base-200 border border-base-300">
+      <div className="card-body p-3">
+        <div className="text-[13px] text-base-content whitespace-pre-wrap break-words leading-relaxed min-h-12">
+          {note.content}
+        </div>
+        <div className="flex gap-1.5 justify-end mt-2">
+          <button
+            onClick={function () { onEdit(note.id); }}
+            className="btn btn-ghost btn-xs border border-base-300"
+          >
+            Edit
+          </button>
+          <button
+            onClick={function () { onDelete(note.id); }}
+            className="btn btn-ghost btn-xs border border-base-300 text-base-content/60"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface EditModalProps {
+  initial: string;
+  onSave: (content: string) => void;
+  onCancel: () => void;
+}
+
+function EditModal(props: EditModalProps) {
+  var { initial, onSave, onCancel } = props;
+  var [content, setContent] = useState(initial);
+
+  return (
+    <div className="fixed inset-0 bg-black/50 z-[1000] flex items-center justify-center" role="dialog" aria-modal="true" aria-label="Edit note">
+      <div className="card bg-base-200 border border-base-300 w-[400px] max-w-[90vw] shadow-2xl">
+        <div className="card-body p-5">
+          <div className="text-[13px] font-semibold text-base-content mb-3">Edit Note</div>
+          <textarea
+            autoFocus
+            value={content}
+            onChange={function (e) { setContent(e.target.value); }}
+            className="textarea textarea-bordered w-full min-h-[120px] bg-base-300 text-base-content text-[13px] resize-y"
+          />
+          <div className="flex gap-2 justify-end mt-3">
+            <button
+              onClick={onCancel}
+              className="btn btn-ghost btn-sm"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={function () { onSave(content); }}
+              className="btn btn-primary btn-sm"
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function StickyNotes() {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var [notes, setNotes] = useState<StickyNote[]>([]);
+  var [editingId, setEditingId] = useState<string | null>(null);
+  var [creating, setCreating] = useState(false);
+
+  var editingNote = editingId ? notes.find(function (n) { return n.id === editingId; }) : null;
+
+  var handleMessage = useCallback(function (msg: ServerMessage) {
+    if (msg.type === "notes:list_result") {
+      setNotes(msg.notes);
+      return;
+    }
+    if (msg.type === "notes:created") {
+      setNotes(function (prev) { return [...prev, msg.note]; });
+      return;
+    }
+    if (msg.type === "notes:updated") {
+      setNotes(function (prev) {
+        return prev.map(function (n) { return n.id === msg.note.id ? msg.note : n; });
+      });
+      return;
+    }
+    if (msg.type === "notes:deleted") {
+      setNotes(function (prev) { return prev.filter(function (n) { return n.id !== msg.id; }); });
+      return;
+    }
+  }, []);
+
+  useEffect(function () {
+    subscribe("notes:list_result", handleMessage);
+    subscribe("notes:created", handleMessage);
+    subscribe("notes:updated", handleMessage);
+    subscribe("notes:deleted", handleMessage);
+    send({ type: "notes:list" });
+    return function () {
+      unsubscribe("notes:list_result", handleMessage);
+      unsubscribe("notes:created", handleMessage);
+      unsubscribe("notes:updated", handleMessage);
+      unsubscribe("notes:deleted", handleMessage);
+    };
+  }, [send, subscribe, unsubscribe, handleMessage]);
+
+  function handleCreate(content: string) {
+    if (content.trim()) {
+      send({ type: "notes:create", content: content.trim() });
+    }
+    setCreating(false);
+  }
+
+  function handleEdit(content: string) {
+    if (editingId && content.trim()) {
+      send({ type: "notes:update", id: editingId, content: content.trim() });
+    }
+    setEditingId(null);
+  }
+
+  function handleDelete(id: string) {
+    send({ type: "notes:delete", id });
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-base-100">
+      <div className="flex items-center justify-between px-4 py-3 border-b border-base-300">
+        <span className="text-[13px] font-semibold text-base-content">Sticky Notes</span>
+        <button
+          onClick={function () { setCreating(true); }}
+          className="btn btn-primary btn-xs"
+        >
+          New Note
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-auto p-3 flex flex-col gap-2.5">
+        {notes.length === 0 && (
+          <div className="text-base-content/50 text-[13px] text-center mt-10">
+            No notes yet. Create one to get started.
+          </div>
+        )}
+        {notes.map(function (note) {
+          return (
+            <NoteCard
+              key={note.id}
+              note={note}
+              onEdit={setEditingId}
+              onDelete={handleDelete}
+            />
+          );
+        })}
+      </div>
+
+      {creating && (
+        <EditModal
+          initial=""
+          onSave={handleCreate}
+          onCancel={function () { setCreating(false); }}
+        />
+      )}
+
+      {editingNote && (
+        <EditModal
+          initial={editingNote.content}
+          onSave={handleEdit}
+          onCancel={function () { setEditingId(null); }}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -1,151 +1,151 @@
-import { memo, useMemo, useCallback } from "react";
-import { useTheme } from "../../hooks/useTheme";
-import { Sun, Moon, Check } from "lucide-react";
-import type { ThemeEntry } from "../../themes/index";
-
-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>
-  );
-}
-
-export function Appearance() {
-  var { mode, currentThemeId, toggleMode, setTheme, themes } = useTheme();
-
-  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]);
-
-  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>
-  );
-}
+import { memo, useMemo, useCallback } from "react";
+import { useTheme } from "../../hooks/useTheme";
+import { Sun, Moon, Check } from "lucide-react";
+import type { ThemeEntry } from "../../themes/index";
+
+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>
+  );
+}
+
+export function Appearance() {
+  var { mode, currentThemeId, toggleMode, setTheme, themes } = useTheme();
+
+  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]);
+
+  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>
+  );
+}