feat: add board background patterns (dots, grid, gradient) with settings dropdown

src/components/layout/TopBar.tsx

@@ -1,11 +1,20 @@
 import { useState, useRef, useEffect, useCallback } from "react";
-import { ArrowLeft, Settings, Search, Undo2, Redo2 } from "lucide-react";
+import { ArrowLeft, Settings, Search, Undo2, Redo2, SlidersHorizontal } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   Tooltip,
   TooltipTrigger,
   TooltipContent,
 } from "@/components/ui/tooltip";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { useAppStore } from "@/stores/app-store";
 import { useBoardStore } from "@/stores/board-store";
 
@@ -158,6 +167,37 @@ export function TopBar() {
             </Tooltip>
           </>
         )}
+        {isBoardView && board && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="text-pylon-text-secondary hover:text-pylon-text"
+              >
+                <SlidersHorizontal className="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>Background</DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  {(["none", "dots", "grid", "gradient"] as const).map((bg) => (
+                    <DropdownMenuItem
+                      key={bg}
+                      onClick={() => useBoardStore.getState().updateBoardSettings({ ...board.settings, background: bg })}
+                    >
+                      {bg.charAt(0).toUpperCase() + bg.slice(1)}
+                      {board.settings.background === bg && (
+                        <span className="ml-auto text-pylon-accent">*</span>
+                      )}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
         {savingStatus && (
           <span className="mr-2 font-mono text-xs text-pylon-text-secondary">
             {savingStatus}