fix(web): align create note type menu items and refine table icon

apps/web/src/components/MemoCard.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState, useEffect, type DragEvent, type MouseEvent, type PointerEvent as ReactPointerEvent, type KeyboardEvent as ReactKeyboardEvent } from "react";
 import { useTranslation } from "react-i18next";
 import * as m from "motion/react-m";
-import { GitBranch, Network, Table, Workflow, Star, Check, MoreHorizontal, RotateCcw, Trash2 } from "lucide-react";
+import { GitBranch, Network, TableProperties, Workflow, Star, Check, MoreHorizontal, RotateCcw, Trash2 } from "lucide-react";
 import { getMemoListTimestamp, type MemoSummary } from "@edgeever/shared";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
@@ -418,7 +418,7 @@ export const MemoCard = ({
             <div className="space-y-1.5">
               <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-slate-500">
                 <span className="inline-flex items-center gap-1 rounded border border-slate-200 px-1.5 py-0.5">
-                  <Table className="h-3 w-3" aria-hidden="true" />{tableLabel}
+                  <TableProperties className="h-3 w-3" aria-hidden="true" />{tableLabel}
                 </span>
                 {memo.tablePreview ? <span>{t("structuredTable.listCounts", { records: memo.tablePreview.recordCount, fields: memo.tablePreview.fieldCount })}</span> : null}
               </div>

apps/web/src/components/NotebookPane.test.mjs

@@ -47,13 +47,16 @@ test("keeps the desktop sync status bar and sidebar chrome compact without shrin
 
 test("lists diagram note types in the create menu without beta badges", () => {
   const createTypeMenu = source.split("const CreateMemoTypeItems")[1]?.split("const getSyncStatusLabel")[0];
+  const diagramSection = createTypeMenu?.split('onCreateMemo("table")')[0];
 
   expect(createTypeMenu).toContain('onCreateMemo()');
   expect(createTypeMenu).toContain('onCreateMemo("mind-map")');
   expect(createTypeMenu).toContain('onCreateMemo("flowchart")');
   expect(createTypeMenu).toContain('onCreateMemo("architecture")');
-  expect(createTypeMenu).not.toContain("DiagramBetaBadge");
-  expect(createTypeMenu).not.toContain("Beta");
+  expect(createTypeMenu).toContain('onCreateMemo("table")');
+  expect(diagramSection).not.toContain("DiagramBetaBadge");
+  expect(diagramSection).not.toContain("Beta");
+  expect(createTypeMenu).toContain("Beta");
 });
 
 describe("NotebookPane sidebar collapse", () => {

apps/web/src/components/NotebookPane.tsx

@@ -30,7 +30,7 @@ import {
   RotateCcw,
   FileText,
   Network,
-  Table,
+  TableProperties,
   Workflow,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -306,24 +306,24 @@ const CreateMemoTypeItems = ({ onCreateMemo }: { onCreateMemo: (kind?: NoteCreat
 
   return (
     <>
-      <DropdownMenuItem onSelect={() => onCreateMemo()}>
-        <FileText className="h-4 w-4" />
-        {t("diagram.normalNote")}
+      <DropdownMenuItem className="gap-2" onSelect={() => onCreateMemo()}>
+        <FileText className="h-4 w-4 shrink-0" />
+        <span className="min-w-0 flex-1 truncate">{t("diagram.normalNote")}</span>
       </DropdownMenuItem>
-      <DropdownMenuItem onSelect={() => onCreateMemo("mind-map")}>
-        <Network className="h-4 w-4" />
-        {t("diagram.mindMap")}
+      <DropdownMenuItem className="gap-2" onSelect={() => onCreateMemo("mind-map")}>
+        <Network className="h-4 w-4 shrink-0" />
+        <span className="min-w-0 flex-1 truncate">{t("diagram.mindMap")}</span>
       </DropdownMenuItem>
-      <DropdownMenuItem onSelect={() => onCreateMemo("flowchart")}>
-        <Workflow className="h-4 w-4" />
-        {t("diagram.flowchart")}
+      <DropdownMenuItem className="gap-2" onSelect={() => onCreateMemo("flowchart")}>
+        <Workflow className="h-4 w-4 shrink-0" />
+        <span className="min-w-0 flex-1 truncate">{t("diagram.flowchart")}</span>
       </DropdownMenuItem>
-      <DropdownMenuItem onSelect={() => onCreateMemo("architecture")}>
-        <Boxes className="h-4 w-4" />
-        {t("diagram.architecture")}
+      <DropdownMenuItem className="gap-2" onSelect={() => onCreateMemo("architecture")}>
+        <Boxes className="h-4 w-4 shrink-0" />
+        <span className="min-w-0 flex-1 truncate">{t("diagram.architecture")}</span>
       </DropdownMenuItem>
       <DropdownMenuItem className="gap-2" onSelect={() => onCreateMemo("table")}>
-        <Table className="h-4 w-4" />
+        <TableProperties className="h-4 w-4 shrink-0" />
         <span className="min-w-0 flex-1 truncate">{t("structuredTable.name")}</span>
         <span className="inline-flex shrink-0 items-center rounded-full border border-emerald-200/80 bg-emerald-50 px-1.5 py-0.5 text-[10px] font-semibold leading-none tracking-wide text-emerald-700">
           Beta

apps/web/src/components/TableEditorPane.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { flexRender, getCoreRowModel, useReactTable, type ColumnDef } from "@tanstack/react-table";
-import { ChevronLeft, Download, Plus, Table, Trash2 } from "lucide-react";
+import { ChevronLeft, Download, Plus, TableProperties, Trash2 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import {
   addTableField,
@@ -456,7 +456,7 @@ export const TableEditorPane = ({
           </TooltipTrigger>
           <TooltipContent>{t("structuredTable.back")}</TooltipContent>
         </Tooltip>
-        <Table className="h-4 w-4 text-emerald-600" aria-hidden="true" />
+        <TableProperties className="h-4 w-4 text-emerald-600" aria-hidden="true" />
         <div className="min-w-0 flex-1">
           <MemoTitleInput
             ariaLabel={t("structuredTable.title")}

apps/web/src/components/WorkspaceMobileChrome.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import { Boxes, ChevronDown, ChevronRight, FileText, Home, Network, Plus, Search, Table, UserRound, Workflow, X } from "lucide-react";
+import { Boxes, ChevronDown, ChevronRight, FileText, Home, Network, Plus, Search, TableProperties, UserRound, Workflow, X } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
@@ -85,12 +85,24 @@ export const MobileBottomNav = ({
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="center" side="top" sideOffset={8} className="w-52">
-            <DropdownMenuItem onSelect={() => onCreateMemo()}><FileText className="h-4 w-4" />{t("diagram.normalNote")}</DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => onCreateMemo("mind-map")}><Network className="h-4 w-4" />{t("diagram.mindMap")}</DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => onCreateMemo("flowchart")}><Workflow className="h-4 w-4" />{t("diagram.flowchart")}</DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => onCreateMemo("architecture")}><Boxes className="h-4 w-4" />{t("diagram.architecture")}</DropdownMenuItem>
+            <DropdownMenuItem className="gap-2" onSelect={() => onCreateMemo()}>
+              <FileText className="h-4 w-4 shrink-0" />
+              <span className="min-w-0 flex-1 truncate">{t("diagram.normalNote")}</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="gap-2" onSelect={() => onCreateMemo("mind-map")}>
+              <Network className="h-4 w-4 shrink-0" />
+              <span className="min-w-0 flex-1 truncate">{t("diagram.mindMap")}</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="gap-2" onSelect={() => onCreateMemo("flowchart")}>
+              <Workflow className="h-4 w-4 shrink-0" />
+              <span className="min-w-0 flex-1 truncate">{t("diagram.flowchart")}</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="gap-2" onSelect={() => onCreateMemo("architecture")}>
+              <Boxes className="h-4 w-4 shrink-0" />
+              <span className="min-w-0 flex-1 truncate">{t("diagram.architecture")}</span>
+            </DropdownMenuItem>
             <DropdownMenuItem className="gap-2" onSelect={() => onCreateMemo("table")}>
-              <Table className="h-4 w-4" />
+              <TableProperties className="h-4 w-4 shrink-0" />
               <span className="min-w-0 flex-1 truncate">{t("structuredTable.name")}</span>
               <span className="inline-flex shrink-0 items-center rounded-full border border-emerald-200/80 bg-emerald-50 px-1.5 py-0.5 text-[10px] font-semibold leading-none tracking-wide text-emerald-700">
                 Beta