@cryptiklemur/lattice 1.3.0 → 1.5.0

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

@@ -1,241 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { ChevronRight, FileIcon } from "lucide-react";
-import type { FileEntry, FsListResultMessage, FsReadResultMessage } from "@lattice/shared";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import type { ServerMessage } from "@lattice/shared";
-
-interface TreeNode {
-  entry: FileEntry;
-  children: TreeNode[] | null;
-  expanded: boolean;
-}
-
-function buildNodes(entries: FileEntry[]): TreeNode[] {
-  return entries.map(function (entry) {
-    return { entry, children: null, expanded: false };
-  });
-}
-
-interface FileTreeItemProps {
-  node: TreeNode;
-  depth: number;
-  selectedPath: string | null;
-  onToggle: (path: string) => void;
-  onSelect: (path: string) => void;
-}
-
-function FileTreeItem(props: FileTreeItemProps) {
-  var { node, depth, selectedPath, onToggle, onSelect } = props;
-  var isSelected = selectedPath === node.entry.path;
-  var isDir = node.entry.isDirectory;
-
-  return (
-    <div>
-      <div
-        onClick={function () {
-          if (isDir) {
-            onToggle(node.entry.path);
-          } else {
-            onSelect(node.entry.path);
-          }
-        }}
-        className={
-          "flex items-center gap-1.5 py-[3px] pr-2 cursor-pointer text-[13px] rounded select-none " +
-          (isSelected ? "bg-base-300 text-primary" : "text-base-content hover:bg-base-200")
-        }
-        style={{ paddingLeft: (8 + depth * 16) + "px" }}
-      >
-        {isDir ? (
-          <ChevronRight
-            size={12}
-            className="flex-shrink-0 text-base-content/40 transition-transform duration-[120ms]"
-            style={{ transform: node.expanded ? "rotate(90deg)" : "none" }}
-          />
-        ) : (
-          <FileIcon
-            size={12}
-            className="flex-shrink-0 text-base-content/40"
-          />
-        )}
-        <span
-          className={
-            "truncate " +
-            (isDir ? "text-info" : "text-base-content")
-          }
-        >
-          {node.entry.name}
-        </span>
-      </div>
-      {isDir && node.expanded && node.children && (
-        <div>
-          {node.children.map(function (child) {
-            return (
-              <FileTreeItem
-                key={child.entry.path}
-                node={child}
-                depth={depth + 1}
-                selectedPath={selectedPath}
-                onToggle={onToggle}
-                onSelect={onSelect}
-              />
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function FileBrowser() {
-  var { send, subscribe, unsubscribe } = useWebSocket();
-  var [rootNodes, setRootNodes] = useState<TreeNode[]>([]);
-  var [selectedPath, setSelectedPath] = useState<string | null>(null);
-  var [fileContent, setFileContent] = useState<string | null>(null);
-  var [loadingContent, setLoadingContent] = useState(false);
-  var nodesRef = useRef<TreeNode[]>([]);
-
-  nodesRef.current = rootNodes;
-
-  var handleListResult = useCallback(function (msg: ServerMessage) {
-    var listMsg = msg as FsListResultMessage;
-    var newNodes = buildNodes(listMsg.entries);
-
-    if (listMsg.path === "" || listMsg.path === ".") {
-      setRootNodes(newNodes);
-      return;
-    }
-
-    function updateNodes(nodes: TreeNode[]): TreeNode[] {
-      return nodes.map(function (node) {
-        if (node.entry.path === listMsg.path) {
-          return Object.assign({}, node, { children: newNodes, expanded: true });
-        }
-        if (node.children) {
-          return Object.assign({}, node, { children: updateNodes(node.children) });
-        }
-        return node;
-      });
-    }
-
-    setRootNodes(function (prev) {
-      return updateNodes(prev);
-    });
-  }, []);
-
-  var handleReadResult = useCallback(function (msg: ServerMessage) {
-    var readMsg = msg as FsReadResultMessage;
-    setFileContent(readMsg.content);
-    setLoadingContent(false);
-  }, []);
-
-  var handleFsChanged = useCallback(function (msg: ServerMessage) {
-    var changedPath = (msg as { path: string }).path;
-    if (changedPath === selectedPath) {
-      send({ type: "fs:read", path: changedPath });
-    }
-  }, [selectedPath, send]);
-
-  useEffect(function () {
-    subscribe("fs:list_result", handleListResult);
-    subscribe("fs:read_result", handleReadResult);
-    subscribe("fs:changed", handleFsChanged);
-
-    send({ type: "fs:list", path: "." });
-
-    return function () {
-      unsubscribe("fs:list_result", handleListResult);
-      unsubscribe("fs:read_result", handleReadResult);
-      unsubscribe("fs:changed", handleFsChanged);
-    };
-  }, [handleListResult, handleReadResult, handleFsChanged, send, subscribe, unsubscribe]);
-
-  function handleToggle(path: string) {
-    function findAndToggle(nodes: TreeNode[]): TreeNode[] {
-      return nodes.map(function (node) {
-        if (node.entry.path === path) {
-          if (!node.expanded && !node.children) {
-            send({ type: "fs:list", path });
-            return Object.assign({}, node, { expanded: true });
-          }
-          return Object.assign({}, node, { expanded: !node.expanded });
-        }
-        if (node.children) {
-          return Object.assign({}, node, { children: findAndToggle(node.children) });
-        }
-        return node;
-      });
-    }
-    setRootNodes(function (prev) {
-      return findAndToggle(prev);
-    });
-  }
-
-  function handleSelect(path: string) {
-    setSelectedPath(path);
-    setFileContent(null);
-    setLoadingContent(true);
-    send({ type: "fs:read", path });
-  }
-
-  return (
-    <div className="flex h-full w-full overflow-hidden bg-base-100">
-      <div className="w-[220px] flex-shrink-0 border-r border-base-300 overflow-y-auto p-2">
-        <div className="text-[11px] font-semibold tracking-[0.06em] uppercase text-base-content/40 px-2 pb-2 pt-1">
-          Files
-        </div>
-        {rootNodes.length === 0 ? (
-          <div className="px-2 py-3 text-[12px] text-base-content/40">
-            Loading...
-          </div>
-        ) : (
-          rootNodes.map(function (node) {
-            return (
-              <FileTreeItem
-                key={node.entry.path}
-                node={node}
-                depth={0}
-                selectedPath={selectedPath}
-                onToggle={handleToggle}
-                onSelect={handleSelect}
-              />
-            );
-          })
-        )}
-      </div>
-
-      <div className="flex-1 flex flex-col overflow-hidden">
-        {selectedPath && (
-          <div className="h-9 flex-shrink-0 flex items-center px-4 border-b border-base-300 bg-base-200 text-[12px] text-base-content/60 font-mono overflow-hidden">
-            <span className="truncate">{selectedPath}</span>
-          </div>
-        )}
-
-        <div className="flex-1 overflow-auto">
-          {!selectedPath && (
-            <div className="h-full flex items-center justify-center text-base-content/40 text-[13px]">
-              Select a file to view its contents
-            </div>
-          )}
-
-          {selectedPath && loadingContent && (
-            <div className="h-full flex items-center justify-center text-base-content/40 text-[13px]">
-              Loading...
-            </div>
-          )}
-
-          {selectedPath && !loadingContent && fileContent !== null && (
-            <pre className="m-0 p-4 text-[13px] font-mono text-base-content leading-relaxed whitespace-pre-wrap break-words">
-              {fileContent}
-            </pre>
-          )}
-
-          {selectedPath && !loadingContent && fileContent === null && (
-            <div className="h-full flex items-center justify-center text-base-content/40 text-[13px]">
-              Cannot display this file (binary or too large)
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,187 +0,0 @@
-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>
-  );
-}