@allbluecn/web-app 0.5.1 → 0.6.1

package/src/components/project/create-project-dialog.tsx

@@ -29,17 +29,14 @@ import {
 } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { IconPicker } from "@/components/shared/icon-picker";
-import { PROJECT_ICONS } from "@/components/shared/icon-packs/project";
+import { LucideIconPicker } from "@/components/shared/lucide-icon-picker";
 import { extractDisplayId, validateDisplayId } from "@/lib/project-display-id";
 import { checkDisplayIdAvailableFn, createProjectFn } from "@/server/serverFns/project";
 import { listWorkspacesBriefFn } from "@/server/serverFns/workspace";
@@ -77,7 +74,7 @@ export function CreateProjectDialog({
     defaultValues: {
       name: "",
       description: "",
-      icon: "folder-kanban",
+      icon: "",
       displayId: "",
       workspaceId: defaultWorkspaceId ?? "",
     },
@@ -134,7 +131,7 @@ export function CreateProjectDialog({
 
   const handleOpenChange = (newOpen: boolean) => {
     if (newOpen) {
-      form.setFieldValue("icon", "folder-kanban");
+      form.setFieldValue("icon", "");
       form.setFieldValue("name", "");
       form.setFieldValue("description", "");
       form.setFieldValue("displayId", "");
@@ -148,25 +145,20 @@ export function CreateProjectDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-200">
-        <DialogHeader className="p-4">
-          <DialogTitle>{t("project.create.title")}</DialogTitle>
-          <DialogDescription>{t("project.create.description")}</DialogDescription>
+      <DialogContent className="sm:max-w-260 -mt-50">
+        <DialogHeader>
+          <DialogTitle className="text-xl">{t("project.create.title")}</DialogTitle>
         </DialogHeader>
 
-        <div className="space-y-4 p-4">
-          <div className="flex flex-col gap-3 mb-20">
+        <div className="space-y-3 overflow-y-auto px-4 py-2 max-h-[60vh]">
+          <div className="flex gap-2">
             <form.Field name="icon" children={(field) => (
-              <IconPicker
-                icons={PROJECT_ICONS}
-                value={field.value ?? "folder-kanban"}
+              <LucideIconPicker
+                value={field.value}
                 onChange={(v) => field.handleChange(v)}
+                modal
               />
             )} />
-          </div>
-
-          <div className="flex flex-col gap-3">
-            <label className="text-sm font-medium ml-2">{t("project.create.nameLabel")} *</label>
             <form.Field name="name" children={(field) => (
               <Input
                 value={field.value ?? ""}
@@ -174,36 +166,11 @@ export function CreateProjectDialog({
                 onBlur={field.handleBlur}
                 placeholder={t("project.create.namePlaceholder")}
                 maxLength={100}
+                className="h-10 min-w-0 flex-1"
               />
             )} />
-          </div>
-
-          <div className="flex flex-col gap-3">
-            <label className="text-sm font-medium ml-2">{t("project.create.idLabel")} *</label>
-            <form.Field name="displayId" children={(field) => (
-              <Input
-                value={field.value ?? ""}
-                onChange={(e) => handleDisplayIdChange(e.target.value)}
-                onBlur={async () => {
-                  field.handleBlur();
-if (!field.value || validateDisplayId(field.value)) return;
-                  const res = await checkDisplayIdAvailableFn({ data: { displayId: field.value } });
-                  setDisplayIdError(res.available ? "" : res.reason ?? t("project.create.idUnavailable"));
-                }}
-                placeholder={t("project.create.idPlaceholder")}
-                maxLength={10}
-                className={displayIdError ? "border-destructive" : ""}
-              />
-            )} />
-            {displayIdError && (
-              <span className="ml-2 text-xs text-destructive">{displayIdError}</span>
-            )}
-          </div>
-
-          <div className="flex flex-col gap-3">
-            <label className="text-sm font-medium ml-2">{t("project.create.workspaceLabel")} *</label>
             {defaultWorkspaceId ? (
-              <span className="ml-2 px-3 py-2 rounded-md bg-muted border text-sm">
+              <span className="flex h-10 shrink-0 max-w-60 items-center truncate rounded-md border bg-muted px-3 text-sm">
                 {defaultWorkspaceName ?? t("project.create.workspaceSelected")}
               </span>
             ) : (
@@ -212,7 +179,7 @@ if (!field.value || validateDisplayId(field.value)) return;
                   value={field.value ?? ""}
                   onValueChange={(v) => field.handleChange(v)}
                 >
-                  <SelectTrigger className="ml-2">
+                  <SelectTrigger className="h-10 w-44 shrink-0">
                     <SelectValue placeholder={t("project.create.workspacePlaceholder")} />
                   </SelectTrigger>
                   <SelectContent>
@@ -227,29 +194,49 @@ if (!field.value || validateDisplayId(field.value)) return;
             )}
           </div>
 
-          <div className="space-y-2">
-            <label className="text-sm font-medium ml-2">{t("project.create.introLabel")}</label>
-            <form.Field name="description" children={(field) => (
-              <Textarea
+          <form.Field name="displayId" children={(field) => (
+            <div>
+              <Input
+                value={field.value ?? ""}
+                onChange={(e) => handleDisplayIdChange(e.target.value)}
+                onBlur={async () => {
+                  field.handleBlur();
+                  if (!field.value || validateDisplayId(field.value)) return;
+                  const res = await checkDisplayIdAvailableFn({ data: { displayId: field.value } });
+                  setDisplayIdError(res.available ? "" : res.reason ?? t("project.create.idUnavailable"));
+                }}
+                placeholder={t("project.create.idPlaceholder")}
+                maxLength={10}
+                className={`h-10 font-mono ${displayIdError ? "border-destructive" : ""}`}
+              />
+              {displayIdError && (
+                <p className="mt-1.5 text-xs text-destructive">{displayIdError}</p>
+              )}
+            </div>
+          )} />
+
+          <form.Field name="description" children={(field) => (
+            <div className="notion-full-width min-h-50 max-h-150 flex flex-col overflow-y-auto border rounded-md border-border">
+              <textarea
                 value={field.value ?? ""}
                 onChange={(e) => field.handleChange(e.target.value)}
                 onBlur={field.handleBlur}
                 placeholder={t("project.create.introPlaceholder")}
                 maxLength={500}
-                rows={3}
+                className="flex-1 min-h-0 resize-none bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
               />
-            )} />
-          </div>
+            </div>
+          )} />
 
           {error && <p className="text-sm text-destructive break-words">{error}</p>}
         </div>
 
-        <DialogFooter>
+        <DialogFooter className="items-center gap-3">
           <Button variant="outline" onClick={() => handleOpenChange(false)}>
-            {t("button.cancel")}
+            {t("common:button.cancel")}
           </Button>
           <Button onClick={handleSubmit} disabled={loading}>
-            {loading ? t("project.create.creating") : t("button.create")}
+            {loading ? t("project.create.creating") : t("common:button.create")}
           </Button>
         </DialogFooter>
       </DialogContent>

package/src/components/shared/__tests__/lucide-curated-icons.test.ts

@@ -0,0 +1,83 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { describe, expect, it } from "vitest";
+import { icons } from "lucide-react";
+import { CURATED_ICONS } from "@/components/shared/lucide-icon-picker/curated-icons";
+import { pascalToKebab } from "@/components/shared/lucide-icon-picker/icon-data";
+
+const BANNED_SUFFIX = /-(off|slash|ban|x)$/;
+const BANNED_NUMBER_TAIL = /-[0-9]+$/;
+/** lucide 官方正名含数字且常用的豁免清单（历史改名产物，非编号家族） */
+const NUMBER_TAIL_ALLOWLIST = new Set([
+  "undo-2",
+  "redo-2",
+  "share-2",
+  "volume-1",
+  "volume-2",
+  "gamepad-2",
+  "rows-3",
+  "columns-3",
+]);
+
+describe("CURATED_ICONS 精选名单完整性", () => {
+  it("数量在目标区间 400-520", () => {
+    expect(CURATED_ICONS.length).toBeGreaterThanOrEqual(400);
+    expect(CURATED_ICONS.length).toBeLessThanOrEqual(520);
+  });
+
+  it("name 无重复", () => {
+    const names = CURATED_ICONS.map((i) => i.name);
+    expect(new Set(names).size).toBe(names.length);
+  });
+
+  it("不含否定/关闭变体后缀", () => {
+    const bad = CURATED_ICONS.filter((i) => BANNED_SUFFIX.test(i.name));
+    expect(bad.map((i) => i.name)).toEqual([]);
+  });
+
+  it("不含数字结尾编号变体（豁免清单除外）", () => {
+    const bad = CURATED_ICONS.filter(
+      (i) => BANNED_NUMBER_TAIL.test(i.name) && !NUMBER_TAIL_ALLOWLIST.has(i.name)
+    );
+    expect(bad.map((i) => i.name)).toEqual([]);
+  });
+
+  it("name 与 lucide 官方组件名一一对应（pascalToKebab 校验）", () => {
+    const kebabSet = new Set(Object.keys(icons).map(pascalToKebab));
+    const bad = CURATED_ICONS.filter((i) => !kebabSet.has(i.name));
+    expect(bad.map((i) => i.name)).toEqual([]);
+  });
+
+  it("Icon 引用与 name 相互一致（反查 icons map 键再转 kebab 相等）", () => {
+    const entryByPascal = new Map(
+      Object.entries(icons).map(([pascal, Comp]) => [Comp, pascal])
+    );
+    const bad = CURATED_ICONS.filter((i) => {
+      const pascal = entryByPascal.get(i.Icon);
+      return !pascal || pascalToKebab(pascal) !== i.name;
+    });
+    expect(bad.map((i) => i.name)).toEqual([]);
+  });
+
+  it("每项 zh 关键词非空且无空字符串", () => {
+    const bad = CURATED_ICONS.filter(
+      (i) => i.zh.length === 0 || i.zh.some((k) => !k.trim())
+    );
+    expect(bad.map((i) => i.name)).toEqual([]);
+  });
+});

package/src/components/shared/__tests__/lucide-icon-data.test.ts

@@ -0,0 +1,131 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  buildSearchIndex,
+  filterIcons,
+  getRecentIcons,
+  isCJK,
+  pascalToKebab,
+  pushRecentIcon,
+  type CuratedIcon,
+} from "@/components/shared/lucide-icon-picker/icon-data";
+import { Star, Clock, FolderKanban } from "lucide-react";
+
+const fakeIcons: CuratedIcon[] = [
+  { name: "star", Icon: Star, zh: ["星标", "收藏", "评分"] },
+  { name: "clock", Icon: Clock, zh: ["时钟", "时间"] },
+  { name: "folder-kanban", Icon: FolderKanban, zh: ["看板", "项目"] },
+];
+
+describe("pascalToKebab", () => {
+  it("常规 PascalCase 转换", () => {
+    expect(pascalToKebab("FolderKanban")).toBe("folder-kanban");
+    expect(pascalToKebab("Star")).toBe("star");
+  });
+  it("连续大写开头（AArrowDown）", () => {
+    expect(pascalToKebab("AArrowDown")).toBe("a-arrow-down");
+  });
+  it("字母后接数字（Grid2x2 → grid-2x-2）", () => {
+    expect(pascalToKebab("Grid2x2")).toBe("grid-2x-2");
+  });
+  it("全小写单词（Github）", () => {
+    expect(pascalToKebab("Github")).toBe("github");
+  });
+});
+
+describe("isCJK", () => {
+  it("中文判真", () => {
+    expect(isCJK("星标")).toBe(true);
+    expect(isCJK("收藏")).toBe(true);
+  });
+  it("英文判假", () => {
+    expect(isCJK("star")).toBe(false);
+    expect(isCJK("")).toBe(false);
+  });
+});
+
+describe("buildSearchIndex + filterIcons", () => {
+  const index = buildSearchIndex(fakeIcons);
+
+  it("英文子串匹配", () => {
+    const names = filterIcons("star", index).map((e) => e.name);
+    expect(names).toEqual(["star"]);
+  });
+  it("kebab 分词匹配（folder-kanban 可用 kanban 命中）", () => {
+    const names = filterIcons("kanban", index).map((e) => e.name);
+    expect(names).toEqual(["folder-kanban"]);
+  });
+  it("大小写不敏感", () => {
+    const names = filterIcons("STAR", index).map((e) => e.name);
+    expect(names).toEqual(["star"]);
+  });
+  it("中文关键词匹配", () => {
+    const names = filterIcons("时间", index).map((e) => e.name);
+    expect(names).toEqual(["clock"]);
+  });
+  it("中文部分子串匹配", () => {
+    const names = filterIcons("星", index).map((e) => e.name);
+    expect(names).toEqual(["star"]);
+  });
+  it("无结果返回空数组", () => {
+    expect(filterIcons("zzz不存在", index)).toEqual([]);
+  });
+  it("结果保留 Icon 引用供渲染", () => {
+    const results = filterIcons("star", index);
+    expect(results[0].Icon).toBe(Star);
+  });
+});
+
+describe("recent icons (localStorage)", () => {
+  afterEach(() => {
+    // 顺序关键：先恢复被 stub 的 window，再操作 localStorage——
+    // SSR 用例 stubGlobal("window", undefined) 后若先 clear 会抛 TypeError
+    vi.unstubAllGlobals();
+    window.localStorage.clear();
+  });
+
+  it("空存储返回空数组", () => {
+    expect(getRecentIcons()).toEqual([]);
+  });
+  it("写入后最新在前", () => {
+    pushRecentIcon("star");
+    pushRecentIcon("clock");
+    expect(getRecentIcons()).toEqual(["clock", "star"]);
+  });
+  it("重复写入去重并前移", () => {
+    pushRecentIcon("star");
+    pushRecentIcon("clock");
+    pushRecentIcon("star");
+    expect(getRecentIcons()).toEqual(["star", "clock"]);
+  });
+  it("上限 16 截断", () => {
+    for (let i = 0; i < 20; i++) pushRecentIcon(`icon-${i}`);
+    expect(getRecentIcons()).toHaveLength(16);
+    expect(getRecentIcons()[0]).toBe("icon-19");
+  });
+  it("损坏 JSON 返回空数组不抛错", () => {
+    window.localStorage.setItem("allblue.ui.lucide-icon-picker.recent", "{broken");
+    expect(getRecentIcons()).toEqual([]);
+  });
+  it("SSR 无 window 安全", () => {
+    vi.stubGlobal("window", undefined);
+    expect(getRecentIcons()).toEqual([]);
+    expect(pushRecentIcon("star")).toEqual(["star"]);
+  });
+});

package/src/components/shared/__tests__/lucide-icon-picker.test.tsx

@@ -0,0 +1,197 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Star } from "lucide-react";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
+import { IconPickerPanel } from "@/components/shared/lucide-icon-picker/panel";
+import { LucideIconPicker } from "@/components/shared/lucide-icon-picker";
+import { CURATED_ICONS } from "@/components/shared/lucide-icon-picker/curated-icons";
+import { pushRecentIcon, getRecentIcons } from "@/components/shared/lucide-icon-picker/icon-data";
+
+describe("LucideIconByName", () => {
+  it("有效 name 渲染对应图标（jsdom 下 data-icon 属性不可靠，以 width 断言）", () => {
+    const { container } = render(<LucideIconByName name="star" size={20} />);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeTruthy();
+    expect(svg?.getAttribute("width")).toBe("20");
+    expect(svg?.innerHTML).toContain("<path");
+  });
+
+  it("精选外/未知 name 渲染 fallback（默认 Circle 占位）", () => {
+    const { container } = render(<LucideIconByName name="not-exist-icon" />);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeTruthy();
+    expect(svg?.innerHTML).toContain("<circle");
+  });
+
+  it("undefined name 渲染 fallback", () => {
+    const { container } = render(<LucideIconByName />);
+    expect(container.querySelector("svg")).toBeTruthy();
+  });
+
+  it("自定义 fallback 优先于默认占位", () => {
+    render(
+      <LucideIconByName name="not-exist" fallback={<Star data-testid="fb" />} />
+    );
+    expect(screen.getByTestId("fb")).toBeTruthy();
+  });
+
+  it("className 透传", () => {
+    const { container } = render(
+      <LucideIconByName name="star" className="text-primary" />
+    );
+    expect(container.querySelector("svg")?.getAttribute("class")).toContain(
+      "text-primary"
+    );
+  });
+});
+
+describe("IconPickerPanel", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it("渲染搜索框 + 全部图标网格；无最近记录时不显示最近使用小节", async () => {
+    render(<IconPickerPanel onPick={vi.fn()} />);
+    expect(
+      screen.getByRole("textbox", { name: /搜索/ })
+    ).toBeTruthy();
+    // tab 按钮已移除
+    expect(screen.queryByRole("button", { name: /最近使用/ })).toBeNull();
+    expect(screen.queryByRole("button", { name: /全部图标/ })).toBeNull();
+    // 无最近记录：不显示"最近使用"小节标题，网格 = 精选总数
+    expect(screen.queryByText(/最近使用/)).toBeNull();
+    expect(screen.getByText(/全部图标/)).toBeTruthy();
+    const cells = await screen.findAllByRole("button", { name: /^icon-cell-/ });
+    expect(cells.length).toBe(CURATED_ICONS.length);
+  });
+
+  it("英文搜索过滤 + Enter 选中第一个结果", async () => {
+    const onPick = vi.fn();
+    render(<IconPickerPanel onPick={onPick} />);
+    const input = screen.getByRole("textbox", { name: /搜索/ });
+    await userEvent.type(input, "kanban{Enter}");
+    expect(onPick).toHaveBeenCalledWith("folder-kanban");
+  });
+
+  it("中文搜索过滤并点击选中", async () => {
+    const onPick = vi.fn();
+    render(<IconPickerPanel onPick={onPick} />);
+    await userEvent.type(
+      screen.getByRole("textbox", { name: /搜索/ }),
+      "星标"
+    );
+    const cells = screen.getAllByRole("button", { name: /^icon-cell-/ });
+    expect(cells.length).toBeGreaterThanOrEqual(1);
+    await userEvent.click(cells[0]);
+    expect(onPick).toHaveBeenCalledWith("star");
+  });
+
+  it("无结果显示空态", async () => {
+    render(<IconPickerPanel onPick={vi.fn()} />);
+    await userEvent.type(
+      screen.getByRole("textbox", { name: /搜索/ }),
+      "zzzz不存在"
+    );
+    expect(screen.getByText(/未找到匹配的图标/)).toBeTruthy();
+    expect(screen.queryAllByRole("button", { name: /^icon-cell-/ })).toEqual([]);
+  });
+
+  it("有最近记录时同页显示最近使用小节（上下排列，总数 = 精选数 + 最近数）", async () => {
+    pushRecentIcon("star");
+    pushRecentIcon("clock");
+    render(<IconPickerPanel onPick={vi.fn()} />);
+    expect(screen.getByText(/最近使用/)).toBeTruthy();
+    expect(screen.getByText(/全部图标/)).toBeTruthy();
+    const cells = await screen.findAllByRole("button", { name: /^icon-cell-/ });
+    expect(cells.length).toBe(CURATED_ICONS.length + 2);
+  });
+
+  it("value 对应 cell 有选中态标识", async () => {
+    render(<IconPickerPanel value="star" onPick={vi.fn()} />);
+    const cell = screen.getByRole("button", { name: "icon-cell-star" });
+    expect(cell.getAttribute("data-selected")).toBe("true");
+  });
+});
+
+describe("LucideIconPicker（Popover 包装）", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    vi.stubGlobal(
+      "ResizeObserver",
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      }
+    );
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("不传 children 时渲染内置微笑触发按钮（未选择占位）", async () => {
+    render(<LucideIconPicker value={undefined} onChange={vi.fn()} />);
+    const trigger = screen.getByRole("button", { name: /选择图标/ });
+    expect(trigger.querySelector("svg")?.getAttribute("class")).toContain(
+      "lucide-smile"
+    );
+  });
+
+  it("内置触发按钮在选择后回显所选图标", async () => {
+    render(<LucideIconPicker value="clock" onChange={vi.fn()} />);
+    const trigger = screen.getByRole("button", { name: /选择图标/ });
+    expect(trigger.querySelector("svg")?.getAttribute("class")).toContain(
+      "lucide-clock"
+    );
+  });
+
+  it("渲染 trigger，点击后打开面板（lazy 加载完成）", async () => {
+    render(
+      <LucideIconPicker value="star" onChange={vi.fn()}>
+        <button type="button">选图标</button>
+      </LucideIconPicker>
+    );
+    await userEvent.click(screen.getByRole("button", { name: "选图标" }));
+    expect(
+      await screen.findByRole("button", { name: "icon-cell-star" })
+    ).toBeTruthy();
+  });
+
+  it("点击图标触发 onChange 并关闭弹窗、写入最近使用", async () => {
+    const onChange = vi.fn();
+    render(
+      <LucideIconPicker value={undefined} onChange={onChange}>
+        <button type="button">选图标</button>
+      </LucideIconPicker>
+    );
+    await userEvent.click(screen.getByRole("button", { name: "选图标" }));
+    await userEvent.click(
+      await screen.findByRole("button", { name: "icon-cell-clock" })
+    );
+    expect(onChange).toHaveBeenCalledWith("clock");
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("button", { name: "icon-cell-clock" })
+      ).toBeNull()
+    );
+    expect(getRecentIcons()).toEqual(["clock"]);
+  });
+});