Review fixes: board hashes skip non-files, jump buttons off in another project, theme follows other windows

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: Jing-yilin

canvas/server/boards.ts

@@ -13,7 +13,7 @@ export const boardHash = (file: string) =>
 /**
  * What each board in a boards directory holds, by `<slug>/<file>.html`: a generator writes every
  * board on each run, and only the ones whose bytes changed are news. An unreadable or missing
- * folder holds none.
+ * folder holds none, and a dot-file or a folder named like a board is no board.
  */
 export function hashBoards(canvasesDir: string) {
   const list = (dir: string) => {
@@ -25,12 +25,15 @@ export function hashBoards(canvasesDir: string) {
   };
   const hashes = new Map<string, string>();
   for (const slug of list(canvasesDir))
-    for (const name of list(path.join(canvasesDir, slug)))
-      if (name.endsWith(".html"))
-        hashes.set(
-          `${slug}/${name}`.normalize("NFC"),
-          boardHash(path.join(canvasesDir, slug, name)),
-        );
+    for (const name of list(path.join(canvasesDir, slug))) {
+      const file = path.join(canvasesDir, slug, name);
+      if (
+        name.endsWith(".html") &&
+        !name.startsWith(".") &&
+        fs.statSync(file, { throwIfNoEntry: false })?.isFile()
+      )
+        hashes.set(`${slug}/${name}`.normalize("NFC"), boardHash(file));
+    }
   return hashes;
 }
 

canvas/src/App.tsx

@@ -15,6 +15,7 @@ import {
   renderPlaintextFromRichText,
   toRichText,
   type Editor,
+  type TLPage,
   type TLPageId,
   type TLAsset,
   type TLAssetStore,
@@ -1208,13 +1209,9 @@ export default function App() {
       // (canvas.json). Its own canvas first, where the library puts it. None when it has gone
       // since the reply, deleted or renamed by a later one.
       const slug = board.split("/")[0];
-      const pages = editor
-        .getPages()
-        .sort(
-          (a, b) =>
-            Number(b.meta.canvasSlug === slug) -
-            Number(a.meta.canvasSlug === slug),
-        );
+      const own = (page: TLPage) =>
+        Number(String(page.meta.canvasSlug).normalize("NFC") === slug);
+      const pages = editor.getPages().sort((a, b) => own(b) - own(a));
       for (const page of pages)
         for (const id of editor.getPageShapeIds(page)) {
           const shape = editor.getShape(id)!;

canvas/src/ChatPanel.tsx

@@ -258,9 +258,10 @@ interface Attached {
 /**
  * What a reply made or changed, each a button that finds it on the canvas: blue for a new board
  * and green for a rewritten one, as their rings are there. Folded to three rows when there are
- * more, which a generator rewriting every board makes common.
+ * more, which a generator rewriting every board makes common. Off when the reply's project is not
+ * the one in front, whose canvas would not have them.
  */
-function MadeBoards({ made }: { made: MadeBoard[] }) {
+function MadeBoards({ made, away }: { made: MadeBoard[]; away: boolean }) {
   const list = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
   const [folds, setFolds] = useState(false);
@@ -279,7 +280,12 @@ function MadeBoards({ made }: { made: MadeBoard[] }) {
             key={m.board}
             type="button"
             data-made={m.status}
-            title={`Show ${m.board} on the canvas`}
+            disabled={away}
+            title={
+              away
+                ? `${m.board} is in another project`
+                : `Show ${m.board} on the canvas`
+            }
             onClick={() =>
               window.dispatchEvent(
                 new CustomEvent(FOCUS_BOARD, { detail: m.board }),
@@ -1404,7 +1410,7 @@ export function ChatPanel(props: {
                 ),
               )}
               {t.end?.made && t.end.made.length > 0 && (
-                <MadeBoards made={t.end.made} />
+                <MadeBoards made={t.end.made} away={t.project !== project} />
               )}
               {!t.end ? (
                 <p className="sp-chat-dim">Working…</p>

canvas/src/ThemeSwitcher.tsx

@@ -16,6 +16,12 @@ export function ThemeSwitcher() {
   const [theme, setTheme] = useState(storedTheme);
   // The app starts on the OS's until the page says, since the pick lives in the page's storage.
   useEffect(() => window.startup?.theme(storedTheme()), []);
+  // Picked in another window of the same app, which shares the storage.
+  useEffect(() => {
+    const follow = () => setTheme(storedTheme());
+    window.addEventListener("storage", follow);
+    return () => window.removeEventListener("storage", follow);
+  }, []);
   return (
     <div className="sp-theme" role="radiogroup" aria-label="Theme">
       {CHOICES.map(([value, label, Icon]) => (