From 0871adf6a897f205b442c80cd4aaeb7807584b8b Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Fri, 26 Jun 2026 14:12:09 -0400
Subject: [PATCH] Align command palette icons and shortcuts (#2057)

* fix command palette icons and shortcuts

* Address command palette review feedback

* increase limit

* upd

* fix(app): restore media-aware file entry icons

* knip

* fix(app): address command palette review

GitOrigin-RevId: 08f373031616ce86e331db976240a1dd20cdd94c
---
 .../components/CommandPalette.dom.test.tsx    | 117 ++++++++++++++++
 .../app/src/components/CommandPalette.tsx     |  17 ++-
 .../ComposerContextChips.dom.test.tsx         |  24 +++-
 .../src/components/ComposerContextChips.tsx   |  10 +-
 packages/app/src/components/FileTree.tsx      |   7 +-
 .../components/command-palette-search.test.ts |  37 +++--
 .../src/components/command-palette-search.ts  |  31 ++--
 .../src/components/file-entry-icon.test.tsx   |  34 +++++
 .../app/src/components/file-entry-icon.tsx    | 132 ++++++++++++++++++
 .../editor/ComposerMentionInput.dom.test.tsx  |  28 ++--
 .../composer-mention/ComposerMentionMenu.tsx  |  13 +-
 .../composer-mention/composer-mention.ts      |   4 +-
 .../app/src/editor/link-path-suggestions.tsx  |  21 ++-
 .../src/editor/registry/lucide-svg.test.ts    |  14 +-
 .../app/src/editor/registry/lucide-svg.ts     |  20 ++-
 .../app/src/lib/keyboard-shortcuts.test.ts    |  19 +++
 packages/app/src/lib/keyboard-shortcuts.ts    |   8 ++
 packages/app/src/locales/en/messages.json     |   1 +
 packages/app/src/locales/en/messages.po       |   5 +
 packages/app/src/locales/pseudo/messages.json |   1 +
 packages/app/src/locales/pseudo/messages.po   |   5 +
 21 files changed, 467 insertions(+), 81 deletions(-)
 create mode 100644 packages/app/src/components/file-entry-icon.test.tsx
 create mode 100644 packages/app/src/components/file-entry-icon.tsx

diff --git a/packages/app/src/components/CommandPalette.dom.test.tsx b/packages/app/src/components/CommandPalette.dom.test.tsx
index cd3ae1923..3bf433a15 100644
--- a/packages/app/src/components/CommandPalette.dom.test.tsx
+++ b/packages/app/src/components/CommandPalette.dom.test.tsx
@@ -280,6 +280,12 @@ describe('CommandPalette DOM behavior', () => {
     expect(switchProject.querySelector('svg[aria-hidden="true"]')).not.toBeNull();
     expect(document.body.textContent).not.toContain('Start fresh in a new folder');
 
+    expect(screen.getByTestId('command-palette-new-file').textContent).toMatch(/⌘ N|Ctrl N/);
+    expect(screen.getByTestId('command-palette-new-folder').textContent).toMatch(
+      /⇧⌘ N|Ctrl Shift N/,
+    );
+    expect(screen.getByTestId('command-palette-open-folder').textContent).toMatch(/⌘ O|Ctrl O/);
+
     fireEvent.click(switchProject);
     await waitFor(() => expect(bridge.navigator.open).toHaveBeenCalledTimes(1));
 
@@ -309,6 +315,15 @@ describe('CommandPalette DOM behavior', () => {
     expect(screen.queryByTestId('command-palette-switch-project')).toBeNull();
   });
 
+  test('new-folder shortcut is desktop-only while new-file shortcut is always visible', async () => {
+    await renderPalette({ bridge: null });
+
+    expect(screen.getByTestId('command-palette-new-file').textContent).toMatch(/⌘ N|Ctrl N/);
+    expect(screen.getByTestId('command-palette-new-folder').textContent).not.toMatch(
+      /⇧⌘ N|Ctrl Shift N/,
+    );
+  });
+
   test('settings command is searchable by preferences/config, closes the palette, and routes through the canonical hash', async () => {
     const { onOpenChange } = await renderPalette({ bridge: null });
 
@@ -561,4 +576,106 @@ describe('NavigationItem path subtitle', () => {
     expect(rowA.textContent).toContain('reports/q3/data.csv');
     expect(rowB.textContent).toContain('exports/legacy/data.csv');
   });
+
+  test('file and folder rows render sidebar-aligned icons and extension badges', async () => {
+    const { NavigationItem } = await import('./CommandPalette');
+    render(
+      <>
+        <NavigationItem
+          entry={{ kind: 'file' as const, path: 'notes/readme', name: 'readme' }}
+          onSelect={() => {}}
+        />
+        <NavigationItem
+          entry={{
+            kind: 'file' as const,
+            path: 'docs/component',
+            name: 'component',
+            docExt: '.mdx',
+          }}
+          onSelect={() => {}}
+        />
+        <NavigationItem
+          entry={{
+            kind: 'file' as const,
+            path: 'assets/photo.png',
+            name: 'photo.png',
+            bodyIndexed: false,
+          }}
+          onSelect={() => {}}
+        />
+        <NavigationItem
+          entry={{
+            kind: 'file' as const,
+            path: 'media/demo.mp4',
+            name: 'demo.mp4',
+            bodyIndexed: false,
+          }}
+          onSelect={() => {}}
+        />
+        <NavigationItem
+          entry={{
+            kind: 'file' as const,
+            path: 'audio/theme.mp3',
+            name: 'theme.mp3',
+            bodyIndexed: false,
+          }}
+          onSelect={() => {}}
+        />
+        <NavigationItem
+          entry={{
+            kind: 'file' as const,
+            path: 'src/index.ts',
+            name: 'index.ts',
+            bodyIndexed: false,
+          }}
+          onSelect={() => {}}
+        />
+        <NavigationItem
+          entry={{
+            kind: 'file' as const,
+            path: 'recents/screenshot.png',
+            name: 'screenshot.png',
+          }}
+          onSelect={() => {}}
+        />
+        <NavigationItem
+          entry={{ kind: 'folder' as const, path: 'docs', name: 'docs' }}
+          onSelect={() => {}}
+        />
+      </>,
+    );
+
+    const markdownRow = screen.getByTestId('command-palette-nav-file-notes/readme');
+    expect(markdownRow.querySelector('[data-testid="file-entry-icon-markdown"]')).not.toBeNull();
+    expect(markdownRow.querySelector('[data-testid="file-entry-extension-badge"]')).toBeNull();
+
+    const mdxRow = screen.getByTestId('command-palette-nav-file-docs/component');
+    expect(mdxRow.querySelector('[data-testid="file-entry-icon-markdown"]')).not.toBeNull();
+    expect(mdxRow.textContent).toContain('MDX');
+
+    const pngRow = screen.getByTestId('command-palette-nav-file-assets/photo.png');
+    expect(pngRow.querySelector('[data-testid="file-entry-icon-image"]')).not.toBeNull();
+    expect(pngRow.textContent).toContain('PNG');
+
+    const videoRow = screen.getByTestId('command-palette-nav-file-media/demo.mp4');
+    expect(videoRow.querySelector('[data-testid="file-entry-icon-video"]')).not.toBeNull();
+    expect(videoRow.textContent).toContain('MP4');
+
+    const audioRow = screen.getByTestId('command-palette-nav-file-audio/theme.mp3');
+    expect(audioRow.querySelector('[data-testid="file-entry-icon-audio"]')).not.toBeNull();
+    expect(audioRow.textContent).toContain('MP3');
+
+    const genericFileRow = screen.getByTestId('command-palette-nav-file-src/index.ts');
+    expect(genericFileRow.querySelector('[data-testid="file-entry-icon-file"]')).not.toBeNull();
+    expect(genericFileRow.querySelector('[data-testid="file-entry-icon-image"]')).toBeNull();
+    expect(genericFileRow.textContent).toContain('TS');
+
+    const recentPngRow = screen.getByTestId('command-palette-nav-file-recents/screenshot.png');
+    expect(recentPngRow.querySelector('[data-testid="file-entry-icon-image"]')).not.toBeNull();
+    expect(recentPngRow.querySelector('[data-testid="file-entry-icon-markdown"]')).toBeNull();
+
+    const folderRow = screen.getByTestId('command-palette-nav-folder-docs');
+    expect(folderRow.querySelector('[data-file-entry-icon="folder"]')).not.toBeNull();
+    expect(folderRow.querySelector('[data-testid="file-entry-extension-badge"]')).toBeNull();
+  });
 });
diff --git a/packages/app/src/components/CommandPalette.tsx b/packages/app/src/components/CommandPalette.tsx
index 827e0946a..b2b1b8cee 100644
--- a/packages/app/src/components/CommandPalette.tsx
+++ b/packages/app/src/components/CommandPalette.tsx
@@ -57,6 +57,7 @@ import {
   type TagDocEntry,
 } from '@/components/command-palette-tag-search';
 import { requestDocPanelTab } from '@/components/doc-panel-events';
+import { FileEntryIcon } from '@/components/file-entry-icon';
 import { defaultInitialDir } from '@/components/file-tree-utils';
 import { NewItemDialog } from '@/components/NewItemDialog';
 import { usePageList } from '@/components/PageListContext';
@@ -72,7 +73,6 @@ import {
 } from '@/components/ui/command';
 import { useDocumentContext } from '@/editor/DocumentContext';
 import type { TagSummaryEntry } from '@/editor/extensions/tag-suggestion';
-import { getFileIcon } from '@/editor/registry/file-icons';
 import { useIsEmbedded } from '@/hooks/use-is-embedded';
 import { useSemanticSearchStatus } from '@/hooks/use-semantic-search-status';
 import type { OkDesktopBridge, RecentProjectEntry } from '@/lib/desktop-bridge-types';
@@ -128,10 +128,11 @@ export function NavigationItem({
   onSelect: () => void;
   disabled?: boolean;
 }) {
-  const Icon = getFileIcon(entry);
   const title =
     'title' in entry && entry.title ? entry.title : (entry.path.split('/').pop() ?? entry.path);
   const snippet = 'snippet' in entry ? entry.snippet : undefined;
+  const docExt = 'docExt' in entry ? entry.docExt : undefined;
+  const bodyIndexed = 'bodyIndexed' in entry ? entry.bodyIndexed : undefined;
 
   return (
     <CommandItem
@@ -141,7 +142,13 @@ export function NavigationItem({
       data-testid={`command-palette-nav-${entry.kind}-${entry.path}`}
       className="items-start"
     >
-      <Icon className="mt-0.5" />
+      <FileEntryIcon
+        bodyIndexed={bodyIndexed}
+        className="mt-0.5 size-4"
+        docExt={docExt}
+        kind={entry.kind}
+        path={entry.path}
+      />
       <div className="flex min-w-0 flex-1 flex-col gap-1">
         <span className="truncate font-medium">
           <HighlightedText query={query} text={title} />
@@ -1043,6 +1050,7 @@ export function CommandPalette({ bridge = null, open, onOpenChange }: CommandPal
                   <span>
                     <Trans>New file</Trans>
                   </span>
+                  <CommandShortcut>{formatShortcut('new-item')}</CommandShortcut>
                 </CommandItem>
               ) : null}
               {showCreateFolder ? (
@@ -1058,6 +1066,9 @@ export function CommandPalette({ bridge = null, open, onOpenChange }: CommandPal
                   <span>
                     <Trans>New folder</Trans>
                   </span>
+                  {bridge ? (
+                    <CommandShortcut>{formatShortcut('new-folder')}</CommandShortcut>
+                  ) : null}
                 </CommandItem>
               ) : null}
               {showGraphCommand ? (
diff --git a/packages/app/src/components/ComposerContextChips.dom.test.tsx b/packages/app/src/components/ComposerContextChips.dom.test.tsx
index 75fbfe173..77d6f3509 100644
--- a/packages/app/src/components/ComposerContextChips.dom.test.tsx
+++ b/packages/app/src/components/ComposerContextChips.dom.test.tsx
@@ -37,15 +37,33 @@ describe('ComposerContextChips', () => {
     expect(chip.querySelectorAll('button').length).toBe(1);
   });
 
-  test('the leading icon is type-aware: a folder chip shows a different glyph than a page chip', async () => {
-    await renderChips(['specs/foo', 'notes.md']);
+  test('the leading icon is type-aware across folders, pages, video, and audio', async () => {
+    await renderChips(['specs/foo', 'notes.md', 'clips/demo.mp4', 'audio/theme.mp3']);
     const folderChip = screen.getByTestId('composer-context-chip-file-specs/foo');
     const pageChip = screen.getByTestId('composer-context-chip-file-notes.md');
+    const videoChip = screen.getByTestId('composer-context-chip-file-clips/demo.mp4');
+    const audioChip = screen.getByTestId('composer-context-chip-file-audio/theme.mp3');
+    expect(
+      folderChip.querySelector('button > span:first-child [data-file-entry-icon="folder"]'),
+    ).not.toBeNull();
+    expect(
+      pageChip.querySelector('button > span:first-child [data-testid="file-entry-icon-markdown"]'),
+    ).not.toBeNull();
+    expect(
+      videoChip.querySelector('button > span:first-child [data-testid="file-entry-icon-video"]'),
+    ).not.toBeNull();
+    expect(
+      audioChip.querySelector('button > span:first-child [data-testid="file-entry-icon-audio"]'),
+    ).not.toBeNull();
     const folderIcon = folderChip.querySelector('button svg')?.outerHTML;
     const pageIcon = pageChip.querySelector('button svg')?.outerHTML;
+    const videoIcon = videoChip.querySelector('button svg')?.outerHTML;
+    const audioIcon = audioChip.querySelector('button svg')?.outerHTML;
     expect(folderIcon).toBeDefined();
     expect(pageIcon).toBeDefined();
-    expect(folderIcon).not.toBe(pageIcon);
+    expect(videoIcon).toBeDefined();
+    expect(audioIcon).toBeDefined();
+    expect(new Set([folderIcon, pageIcon, videoIcon, audioIcon]).size).toBe(4);
   });
 
   test('renders nothing when the file set is empty', async () => {
diff --git a/packages/app/src/components/ComposerContextChips.tsx b/packages/app/src/components/ComposerContextChips.tsx
index 071fb3252..3b102c9c9 100644
--- a/packages/app/src/components/ComposerContextChips.tsx
+++ b/packages/app/src/components/ComposerContextChips.tsx
@@ -1,8 +1,8 @@
 import { useLingui } from '@lingui/react/macro';
 import { X } from 'lucide-react';
 import type { ReactNode } from 'react';
+import { FileEntryPathIcon } from '@/components/file-entry-icon';
 import { Button } from '@/components/ui/button';
-import { getFileIcon, mentionPathToDescriptor } from '@/editor/registry/file-icons';
 import { cn } from '@/lib/utils';
 
 /** Last path segment of a workspace-relative path — the compact chip label
@@ -17,7 +17,6 @@ function FileChip({ path, onRemove }: { path: string; onRemove: () => void }) {
   const { t } = useLingui();
   const label = chipBasename(path);
   const removeLabel = t`Remove ${label} from context`;
-  const FileIcon = getFileIcon(mentionPathToDescriptor(path));
   return (
     <span
       data-testid={`composer-context-chip-file-${path}`}
@@ -47,10 +46,9 @@ function FileChip({ path, onRemove }: { path: string; onRemove: () => void }) {
         }}
         className="group/remove relative size-3.5 shrink-0 rounded-sm text-muted-foreground/80 hover:text-foreground"
       >
-        <FileIcon
-          className="absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 opacity-100 transition-opacity duration-150 ease-out group-hover/chip:opacity-0 group-focus-within/chip:opacity-0 motion-reduce:transition-none"
-          aria-hidden
-        />
+        <span className="absolute top-1/2 left-1/2 inline-flex size-3 -translate-x-1/2 -translate-y-1/2 opacity-100 transition-opacity duration-150 ease-out group-hover/chip:opacity-0 group-focus-within/chip:opacity-0 motion-reduce:transition-none">
+          <FileEntryPathIcon path={path} className="size-3" />
+        </span>
         <X
           className="absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity duration-150 ease-out group-hover/chip:opacity-100 group-focus-within/chip:opacity-100 motion-reduce:transition-none"
           aria-hidden
diff --git a/packages/app/src/components/FileTree.tsx b/packages/app/src/components/FileTree.tsx
index 5029e7da8..043700f66 100644
--- a/packages/app/src/components/FileTree.tsx
+++ b/packages/app/src/components/FileTree.tsx
@@ -61,6 +61,10 @@ import {
 } from 'react';
 import { toast } from 'sonner';
 import { DeleteConfirmationDialog } from '@/components/DeleteConfirmationDialog';
+import {
+  MARKDOWN_FILE_ICON_PATH_D,
+  MARKDOWN_FILE_ICON_VIEWBOX,
+} from '@/components/file-entry-icon';
 import {
   collectTreeFolderPathsFromDocuments,
   computeTreeAncestorPaths,
@@ -283,8 +287,7 @@ const AGENT_FILE_NAMES = new Set(['agents', 'agent', 'claude', 'skill']);
 const LINK_DECORATION_ICON_ID = 'ok-file-tree-link-decoration';
 const AGENT_DECORATION_ICON_ID = 'ok-file-tree-agent-decoration';
 const MARKDOWN_FILE_ICON_ID = 'ok-file-tree-markdown';
-const MARKDOWN_FILE_ICON_VIEWBOX = '0 0 32 32';
-const MARKDOWN_FILE_ICON_SYMBOL = `<symbol id="${MARKDOWN_FILE_ICON_ID}" viewBox="${MARKDOWN_FILE_ICON_VIEWBOX}" fill="currentColor"><path d="M26.7075 10.2925L19.7075 3.2925C19.6146 3.19967 19.5042 3.12605 19.3829 3.07586C19.2615 3.02568 19.1314 2.9999 19 3H7C6.46957 3 5.96086 3.21071 5.58579 3.58579C5.21071 3.96086 5 4.46957 5 5V14C5 14.2652 5.10536 14.5196 5.29289 14.7071C5.48043 14.8946 5.73478 15 6 15C6.26522 15 6.51957 14.8946 6.70711 14.7071C6.89464 14.5196 7 14.2652 7 14V5H18V11C18 11.2652 18.1054 11.5196 18.2929 11.7071C18.4804 11.8946 18.7348 12 19 12H25V28C25 28.2652 25.1054 28.5196 25.2929 28.7071C25.4804 28.8946 25.7348 29 26 29C26.2652 29 26.5196 28.8946 26.7071 28.7071C26.8946 28.5196 27 28.2652 27 28V11C27.0001 10.8686 26.9743 10.7385 26.9241 10.6172C26.8739 10.4958 26.8003 10.3854 26.7075 10.2925ZM20 6.41375L23.5863 10H20V6.41375ZM18 18H16C15.7348 18 15.4804 18.1054 15.2929 18.2929C15.1054 18.4804 15 18.7348 15 19V26C15 26.2652 15.1054 26.5196 15.2929 26.7071C15.4804 26.8946 15.7348 27 16 27H18C19.1935 27 20.3381 26.5259 21.182 25.682C22.0259 24.8381 22.5 23.6935 22.5 22.5C22.5 21.3065 22.0259 20.1619 21.182 19.318C20.3381 18.4741 19.1935 18 18 18ZM18 25H17V20H18C18.663 20 19.2989 20.2634 19.7678 20.7322C20.2366 21.2011 20.5 21.837 20.5 22.5C20.5 23.163 20.2366 23.7989 19.7678 24.2678C19.2989 24.7366 18.663 25 18 25ZM13 19V26C13 26.2652 12.8946 26.5196 12.7071 26.7071C12.5196 26.8946 12.2652 27 12 27C11.7348 27 11.4804 26.8946 11.2929 26.7071C11.1054 26.5196 11 26.2652 11 26V22.1725L9.31875 24.5737C9.22652 24.7053 9.10396 24.8126 8.96144 24.8868C8.81892 24.9609 8.66064 24.9996 8.5 24.9996C8.33936 24.9996 8.18108 24.9609 8.03856 24.8868C7.89604 24.8126 7.77348 24.7053 7.68125 24.5737L6 22.1725V26C6 26.2652 5.89464 26.5196 5.70711 26.7071C5.51957 26.8946 5.26522 27 5 27C4.73478 27 4.48043 26.8946 4.29289 26.7071C4.10536 26.5196 4 26.2652 4 26V19C4.00009 18.7874 4.06791 18.5804 4.19363 18.409C4.31935 18.2376 4.49642 18.1107 4.69915 18.0467C4.90188 17.9828 5.11971 17.9851 5.32104 18.0533C5.52236 18.1216 5.6967 18.2522 5.81875 18.4263L8.5 22.2563L11.1812 18.4263C11.3033 18.2522 11.4776 18.1216 11.679 18.0533C11.8803 17.9851 12.0981 17.9828 12.3008 18.0467C12.5036 18.1107 12.6807 18.2376 12.8064 18.409C12.9321 18.5804 12.9999 18.7874 13 19Z"/></symbol>`;
+const MARKDOWN_FILE_ICON_SYMBOL = `<symbol id="${MARKDOWN_FILE_ICON_ID}" viewBox="${MARKDOWN_FILE_ICON_VIEWBOX}" fill="currentColor"><path d="${MARKDOWN_FILE_ICON_PATH_D}"/></symbol>`;
 
 type IconNode = [string, Record<string, string>][];
 
diff --git a/packages/app/src/components/command-palette-search.test.ts b/packages/app/src/components/command-palette-search.test.ts
index 93c555ac0..75e68ec06 100644
--- a/packages/app/src/components/command-palette-search.test.ts
+++ b/packages/app/src/components/command-palette-search.test.ts
@@ -47,8 +47,6 @@ describe('buildWorkspaceEntries', () => {
         path: 'data/example.csv',
         name: 'example.csv',
         bodyIndexed: false,
-        assetExt: 'csv',
-        mediaKind: null,
       },
       { kind: 'folder', path: 'notes', name: 'notes' },
       { kind: 'file', path: 'notes/guide', name: 'guide' },
@@ -57,11 +55,27 @@ describe('buildWorkspaceEntries', () => {
         path: 'packages/app/src/index.ts',
         name: 'index.ts',
         bodyIndexed: false,
-        assetExt: 'ts',
-        mediaKind: 'text',
       },
     ]);
   });
+
+  test('threads page docExt metadata onto markdown page entries', () => {
+    const entries = buildWorkspaceEntries(
+      new Set(['docs/component']),
+      new Set(),
+      new Map(),
+      new Map([
+        ['docs/component', { size: 100, modified: '2026-06-24T00:00:00.000Z', docExt: '.mdx' }],
+      ]),
+    );
+
+    expect(entries[0]).toMatchObject({
+      kind: 'file',
+      path: 'docs/component',
+      name: 'component',
+      docExt: '.mdx',
+    });
+  });
   test('skips a non-markdown file already present in pages', () => {
     const entries = buildWorkspaceEntries(
       new Set(['data/example.csv']),
@@ -315,15 +329,15 @@ describe('fetchWorkspaceSearchEntries', () => {
     });
   });
 
-  test('maps a kind:file server row to a client kind:file entry', async () => {
+  test('maps a kind:file server row to a client kind:file name-only entry', async () => {
     globalThis.fetch = (async () =>
       new Response(
         JSON.stringify({
           results: [
             {
               kind: 'file',
-              path: 'data/example.csv',
-              title: 'data/example.csv',
+              path: 'assets/photo.png',
+              title: 'assets/photo.png',
               score: 7,
             },
           ],
@@ -336,12 +350,11 @@ describe('fetchWorkspaceSearchEntries', () => {
     expect(entries).toEqual([
       {
         kind: 'file',
-        path: 'data/example.csv',
-        name: 'example.csv',
-        title: 'data/example.csv',
+        path: 'assets/photo.png',
+        name: 'photo.png',
+        bodyIndexed: false,
+        title: 'assets/photo.png',
         score: 7,
-        assetExt: 'csv',
-        mediaKind: null,
       },
     ]);
   });
diff --git a/packages/app/src/components/command-palette-search.ts b/packages/app/src/components/command-palette-search.ts
index 272f1434b..38830e5ee 100644
--- a/packages/app/src/components/command-palette-search.ts
+++ b/packages/app/src/components/command-palette-search.ts
@@ -1,8 +1,6 @@
 import {
   createWorkspaceSearchCorpus,
   createWorkspaceSearchDocument,
-  type InlineAssetMediaKind,
-  mediaKindForSidebarAssetExtension,
   searchWorkspaceCorpus,
   type WorkspaceSearchCorpus,
   type WorkspaceSearchDocument,
@@ -16,22 +14,9 @@ export interface WorkspaceEntry {
   path: string;
   name: string;
   title?: string;
+  docExt?: string;
   modifiedTs?: number;
   bodyIndexed?: boolean;
-  assetExt?: string;
-  mediaKind?: InlineAssetMediaKind | null;
-}
-
-function fileIconFields(path: string): {
-  assetExt?: string;
-  mediaKind?: InlineAssetMediaKind | null;
-} {
-  const dot = path.lastIndexOf('.');
-  const slash = path.lastIndexOf('/');
-  if (dot <= slash + 1) return {};
-  const assetExt = path.slice(dot + 1).toLowerCase();
-  if (assetExt === '') return {};
-  return { assetExt, mediaKind: mediaKindForSidebarAssetExtension(assetExt) };
 }
 
 export interface WorkspaceSearchEntry extends WorkspaceEntry {
@@ -85,14 +70,16 @@ export function buildWorkspaceEntries(
 
   for (const path of pages) {
     seenFilePaths.add(path);
-    const modified = pageMeta.get(path)?.modified;
+    const meta = pageMeta.get(path);
+    const modified = meta?.modified;
     const title = pageTitles.get(path);
     entries.push({
       kind: 'file',
       path,
       name: workspaceSearchBasename(path),
-      ...(title ? { title } : {}),
-      ...(modified ? { modifiedTs: Date.parse(modified) } : {}),
+      ...(title && { title }),
+      ...(meta?.docExt && { docExt: meta.docExt }),
+      ...(modified && { modifiedTs: Date.parse(modified) }),
     });
   }
   for (const path of filePaths) {
@@ -103,7 +90,6 @@ export function buildWorkspaceEntries(
       path,
       name: workspaceSearchBasename(path),
       bodyIndexed: false,
-      ...fileIconFields(path),
     });
   }
   for (const path of folderPaths) {
@@ -152,7 +138,7 @@ function workspaceEntriesFingerprint(entries: readonly WorkspaceEntry[]): string
   return entries
     .map(
       (entry) =>
-        `${entry.kind}\u0000${entry.path}\u0000${entry.title ?? ''}\u0000${entry.modifiedTs ?? 0} ${entry.bodyIndexed === false ? '0' : '1'}`,
+        `${entry.kind}\u0000${entry.path}\u0000${entry.title ?? ''}\u0000${entry.docExt ?? ''}\u0000${entry.modifiedTs ?? 0} ${entry.bodyIndexed === false ? '0' : '1'}`,
     )
     .join('\u0001');
 }
@@ -246,15 +232,14 @@ function toWorkspaceSearchEntry(
   }
   const name = workspaceSearchBasename(row.path);
   const kind = row.kind === 'folder' ? 'folder' : 'file';
-  const iconFields = row.kind === 'file' ? fileIconFields(row.path) : {};
   return {
     kind,
     path: row.path,
     name,
+    ...(row.kind === 'file' && { bodyIndexed: false }),
     ...(row.title && { title: row.title }),
     ...(row.snippet && { snippet: row.snippet }),
     ...(typeof row.score === 'number' && { score: row.score }),
-    ...iconFields,
   };
 }
 
diff --git a/packages/app/src/components/file-entry-icon.test.tsx b/packages/app/src/components/file-entry-icon.test.tsx
new file mode 100644
index 000000000..3f226330d
--- /dev/null
+++ b/packages/app/src/components/file-entry-icon.test.tsx
@@ -0,0 +1,34 @@
+import { describe, expect, test } from 'bun:test';
+import { File, Film, ImageIcon, Volume2 } from 'lucide-react';
+import { lucideIconToSvgString } from '@/editor/registry/lucide-svg';
+import {
+  fileEntryPathIconToSvgString,
+  MARKDOWN_FILE_ICON_PATH_D,
+  MARKDOWN_FILE_ICON_VIEWBOX,
+} from './file-entry-icon';
+
+describe('fileEntryPathIconToSvgString', () => {
+  test('uses the media-specific lucide icon for video assets', () => {
+    expect(fileEntryPathIconToSvgString('clips/demo.mp4')).toBe(lucideIconToSvgString(Film));
+  });
+
+  test('uses the media-specific lucide icon for audio assets', () => {
+    expect(fileEntryPathIconToSvgString('audio/theme.mp3')).toBe(lucideIconToSvgString(Volume2));
+  });
+
+  test('keeps the image asset icon mapping', () => {
+    expect(fileEntryPathIconToSvgString('assets/photo.png')).toBe(lucideIconToSvgString(ImageIcon));
+  });
+
+  test('keeps the custom markdown icon mapping', () => {
+    expect(fileEntryPathIconToSvgString('notes.md')).toBe(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="0.75rem" height="0.75rem"' +
+        ` viewBox="${MARKDOWN_FILE_ICON_VIEWBOX}" fill="currentColor" aria-hidden="true">` +
+        `<path d="${MARKDOWN_FILE_ICON_PATH_D}"/></svg>`,
+    );
+  });
+
+  test('keeps generic files on the fallback file icon', () => {
+    expect(fileEntryPathIconToSvgString('data/example.csv')).toBe(lucideIconToSvgString(File));
+  });
+});
diff --git a/packages/app/src/components/file-entry-icon.tsx b/packages/app/src/components/file-entry-icon.tsx
new file mode 100644
index 000000000..095a7f45d
--- /dev/null
+++ b/packages/app/src/components/file-entry-icon.tsx
@@ -0,0 +1,132 @@
+import { mediaKindForSidebarAssetExtension } from '@inkeep/open-knowledge-core';
+import { File, Film, FolderOpen, ImageIcon, Volume2 } from 'lucide-react';
+import type { ComponentProps } from 'react';
+import { getFileExtension } from '@/components/file-tree-rename-validation';
+import { lucideIconToSvgString } from '@/editor/registry/lucide-svg';
+import { cn } from '@/lib/utils.ts';
+
+export const MARKDOWN_FILE_ICON_VIEWBOX = '0 0 32 32';
+export const MARKDOWN_FILE_ICON_PATH_D =
+  'M26.7075 10.2925L19.7075 3.2925C19.6146 3.19967 19.5042 3.12605 19.3829 3.07586C19.2615 3.02568 19.1314 2.9999 19 3H7C6.46957 3 5.96086 3.21071 5.58579 3.58579C5.21071 3.96086 5 4.46957 5 5V14C5 14.2652 5.10536 14.5196 5.29289 14.7071C5.48043 14.8946 5.73478 15 6 15C6.26522 15 6.51957 14.8946 6.70711 14.7071C6.89464 14.5196 7 14.2652 7 14V5H18V11C18 11.2652 18.1054 11.5196 18.2929 11.7071C18.4804 11.8946 18.7348 12 19 12H25V28C25 28.2652 25.1054 28.5196 25.2929 28.7071C25.4804 28.8946 25.7348 29 26 29C26.2652 29 26.5196 28.8946 26.7071 28.7071C26.8946 28.5196 27 28.2652 27 28V11C27.0001 10.8686 26.9743 10.7385 26.9241 10.6172C26.8739 10.4958 26.8003 10.3854 26.7075 10.2925ZM20 6.41375L23.5863 10H20V6.41375ZM18 18H16C15.7348 18 15.4804 18.1054 15.2929 18.2929C15.1054 18.4804 15 18.7348 15 19V26C15 26.2652 15.1054 26.5196 15.2929 26.7071C15.4804 26.8946 15.7348 27 16 27H18C19.1935 27 20.3381 26.5259 21.182 25.682C22.0259 24.8381 22.5 23.6935 22.5 22.5C22.5 21.3065 22.0259 20.1619 21.182 19.318C20.3381 18.4741 19.1935 18 18 18ZM18 25H17V20H18C18.663 20 19.2989 20.2634 19.7678 20.7322C20.2366 21.2011 20.5 21.837 20.5 22.5C20.5 23.163 20.2366 23.7989 19.7678 24.2678C19.2989 24.7366 18.663 25 18 25ZM13 19V26C13 26.2652 12.8946 26.5196 12.7071 26.7071C12.5196 26.8946 12.2652 27 12 27C11.7348 27 11.4804 26.8946 11.2929 26.7071C11.1054 26.5196 11 26.2652 11 26V22.1725L9.31875 24.5737C9.22652 24.7053 9.10396 24.8126 8.96144 24.8868C8.81892 24.9609 8.66064 24.9996 8.5 24.9996C8.33936 24.9996 8.18108 24.9609 8.03856 24.8868C7.89604 24.8126 7.77348 24.7053 7.68125 24.5737L6 22.1725V26C6 26.2652 5.89464 26.5196 5.70711 26.7071C5.51957 26.8946 5.26522 27 5 27C4.73478 27 4.48043 26.8946 4.29289 26.7071C4.10536 26.5196 4 26.2652 4 26V19C4.00009 18.7874 4.06791 18.5804 4.19363 18.409C4.31935 18.2376 4.49642 18.1107 4.69915 18.0467C4.90188 17.9828 5.11971 17.9851 5.32104 18.0533C5.52236 18.1216 5.6967 18.2522 5.81875 18.4263L8.5 22.2563L11.1812 18.4263C11.3033 18.2522 11.4776 18.1216 11.679 18.0533C11.8803 17.9851 12.0981 17.9828 12.3008 18.0467C12.5036 18.1107 12.6807 18.2376 12.8064 18.409C12.9321 18.5804 12.9999 18.7874 13 19Z';
+
+function isMarkdownExt(ext: string): boolean {
+  return ext === '.md' || ext === '.mdx';
+}
+
+function iconSvgForExt(ext: string): string {
+  switch (mediaKindForSidebarAssetExtension(ext)) {
+    case 'image':
+      return lucideIconToSvgString(ImageIcon);
+    case 'video':
+      return lucideIconToSvgString(Film);
+    case 'audio':
+      return lucideIconToSvgString(Volume2);
+    default:
+      return lucideIconToSvgString(File);
+  }
+}
+
+function MarkdownFileIcon({ className, ...props }: ComponentProps<'svg'>) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      fill="currentColor"
+      viewBox={MARKDOWN_FILE_ICON_VIEWBOX}
+      {...props}
+    >
+      <path d={MARKDOWN_FILE_ICON_PATH_D} />
+    </svg>
+  );
+}
+
+function fileEntryIconFieldsForPath(path: string): {
+  kind: 'file' | 'folder';
+  path: string;
+  bodyIndexed?: boolean;
+} {
+  const ext = getFileExtension(path).toLowerCase();
+  if (!ext) return { kind: 'folder', path };
+  if (isMarkdownExt(ext)) return { kind: 'file', path };
+  return { kind: 'file', path, bodyIndexed: false };
+}
+
+export function FileEntryPathIcon({ path, className }: { path: string; className?: string }) {
+  return <FileEntryIcon {...fileEntryIconFieldsForPath(path)} className={className} />;
+}
+
+export function fileEntryPathIconToSvgString(path: string): string {
+  const { kind, bodyIndexed } = fileEntryIconFieldsForPath(path);
+  if (kind === 'folder') return lucideIconToSvgString(FolderOpen);
+
+  const ext = bodyIndexed === false ? getFileExtension(path) : getFileExtension(path) || '.md';
+  const normalizedExt = ext.toLowerCase();
+  if (isMarkdownExt(normalizedExt)) {
+    return (
+      '<svg xmlns="http://www.w3.org/2000/svg" width="0.75rem" height="0.75rem"' +
+      ` viewBox="${MARKDOWN_FILE_ICON_VIEWBOX}" fill="currentColor" aria-hidden="true">` +
+      `<path d="${MARKDOWN_FILE_ICON_PATH_D}"/></svg>`
+    );
+  }
+  return iconSvgForExt(normalizedExt);
+}
+
+export function FileEntryIcon({
+  kind,
+  path,
+  docExt,
+  bodyIndexed,
+  className,
+}: {
+  kind: 'file' | 'folder';
+  path: string;
+  docExt?: string;
+  bodyIndexed?: boolean;
+  className?: string;
+}) {
+  if (kind === 'folder') {
+    return (
+      <FolderOpen
+        aria-hidden="true"
+        className={cn('shrink-0', className)}
+        data-file-entry-icon="folder"
+      />
+    );
+  }
+
+  const ext =
+    bodyIndexed === false ? getFileExtension(path) : (docExt ?? (getFileExtension(path) || '.md'));
+  const normalizedExt = ext.toLowerCase();
+  const mediaKind = mediaKindForSidebarAssetExtension(normalizedExt);
+  const badge = ext && normalizedExt !== '.md' ? ext.slice(1).toUpperCase() : null;
+  const iconClassName = cn(className, mediaKind === 'image' && 'text-rose-500');
+
+  return (
+    <span className="relative inline-flex shrink-0" data-file-entry-icon={normalizedExt || 'file'}>
+      {isMarkdownExt(normalizedExt) ? (
+        <MarkdownFileIcon className={iconClassName} data-testid="file-entry-icon-markdown" />
+      ) : mediaKind === 'image' ? (
+        <ImageIcon
+          aria-hidden="true"
+          className={iconClassName}
+          data-testid="file-entry-icon-image"
+        />
+      ) : mediaKind === 'video' ? (
+        <Film aria-hidden="true" className={iconClassName} data-testid="file-entry-icon-video" />
+      ) : mediaKind === 'audio' ? (
+        <Volume2 aria-hidden="true" className={iconClassName} data-testid="file-entry-icon-audio" />
+      ) : (
+        <File aria-hidden="true" className={iconClassName} data-testid="file-entry-icon-file" />
+      )}
+      {badge ? (
+        <span
+          aria-hidden="true"
+          className="-right-1 -bottom-1 absolute rounded-sm bg-background px-0.5 font-medium text-[0.5rem] text-muted-foreground leading-none"
+          data-testid="file-entry-extension-badge"
+        >
+          {badge}
+        </span>
+      ) : null}
+    </span>
+  );
+}
diff --git a/packages/app/src/editor/ComposerMentionInput.dom.test.tsx b/packages/app/src/editor/ComposerMentionInput.dom.test.tsx
index 866341e08..b0f7d75d8 100644
--- a/packages/app/src/editor/ComposerMentionInput.dom.test.tsx
+++ b/packages/app/src/editor/ComposerMentionInput.dom.test.tsx
@@ -2,8 +2,8 @@ import { afterEach, beforeEach, describe, expect, mock, spyOn, test } from 'bun:
 import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import type { Content, JSONContent } from '@tiptap/core';
 import { Editor } from '@tiptap/core';
-import { FileText, FolderOpen } from 'lucide-react';
 import { createRef } from 'react';
+import { fileEntryPathIconToSvgString } from '@/components/file-entry-icon';
 import { getEditorForDoc, registerEditor, unregisterEditor } from './active-editor';
 import { ComposerMentionInput, type ComposerMentionInputHandle } from './ComposerMentionInput';
 import {
@@ -12,8 +12,6 @@ import {
   isComposerEmpty,
   serializeComposerContent,
 } from './composer-mention/composer-mention';
-import { getFileIcon, mentionPathToDescriptor } from './registry/file-icons';
-import { lucideIconToSvgString } from './registry/lucide-svg';
 
 function makeEditor(content?: Content) {
   return new Editor({ extensions: composerMentionExtensions(), content });
@@ -182,8 +180,7 @@ describe('ComposerMentionInput (component)', () => {
     expect(restIcon?.textContent).not.toContain('@');
     expect(hoverIcon?.textContent).not.toContain('×');
     const restSvg = restIcon?.querySelector('svg');
-    expect(restSvg?.getAttribute('stroke')).toBe('currentColor');
-    expect(restSvg?.getAttribute('fill')).toBe('none');
+    expect(restSvg?.getAttribute('fill')).toBe('currentColor');
     expect(ref.current?.getContent().mentions).toEqual(['notes.md']);
 
     fireEvent.click(removeBtn);
@@ -191,7 +188,7 @@ describe('ComposerMentionInput (component)', () => {
     expect(screen.queryByRole('button', { name: /Remove Notes/i })).toBeNull();
   });
 
-  test('the inline chip resting glyph is the type-aware icon for the path (folder → FolderOpen, page → FileText)', () => {
+  test('the inline chip resting glyph is the type-aware file-entry icon for the path', () => {
     const ref = createRef<ComposerMentionInputHandle>();
     render(
       <ComposerMentionInput
@@ -204,6 +201,8 @@ describe('ComposerMentionInput (component)', () => {
             mentionNode('specs/foo', 'foo'),
             { type: 'text', text: ' ' },
             mentionNode('notes.md', 'Notes'),
+            { type: 'text', text: ' ' },
+            mentionNode('clips/demo.mp4', 'Demo'),
           ) as JSONContent
         }
       />,
@@ -218,20 +217,21 @@ describe('ComposerMentionInput (component)', () => {
       .querySelector('.composer-mention-glyph-icon')
       ?.querySelector('svg')?.outerHTML;
     expect(folderSvg).toBeDefined();
-    expect(folderSvg).toBe(
-      normalizeSvg(lucideIconToSvgString(getFileIcon(mentionPathToDescriptor('specs/foo')))),
-    );
-    expect(folderSvg).toBe(normalizeSvg(lucideIconToSvgString(FolderOpen)));
+    expect(folderSvg).toBe(normalizeSvg(fileEntryPathIconToSvgString('specs/foo')));
 
     const pageBtn = screen.getByRole('button', { name: /Remove Notes from context/i });
     const pageSvg = pageBtn
       .querySelector('.composer-mention-glyph-icon')
       ?.querySelector('svg')?.outerHTML;
     expect(pageSvg).toBeDefined();
-    expect(pageSvg).toBe(
-      normalizeSvg(lucideIconToSvgString(getFileIcon(mentionPathToDescriptor('notes.md')))),
-    );
-    expect(pageSvg).toBe(normalizeSvg(lucideIconToSvgString(FileText)));
+    expect(pageSvg).toBe(normalizeSvg(fileEntryPathIconToSvgString('notes.md')));
+
+    const videoBtn = screen.getByRole('button', { name: /Remove Demo from context/i });
+    const videoSvg = videoBtn
+      .querySelector('.composer-mention-glyph-icon')
+      ?.querySelector('svg')?.outerHTML;
+    expect(videoSvg).toBeDefined();
+    expect(videoSvg).toBe(normalizeSvg(fileEntryPathIconToSvgString('clips/demo.mp4')));
 
     expect(folderSvg).not.toBe(pageSvg);
   });
diff --git a/packages/app/src/editor/composer-mention/ComposerMentionMenu.tsx b/packages/app/src/editor/composer-mention/ComposerMentionMenu.tsx
index bd9fab4d7..6d44fd51c 100644
--- a/packages/app/src/editor/composer-mention/ComposerMentionMenu.tsx
+++ b/packages/app/src/editor/composer-mention/ComposerMentionMenu.tsx
@@ -1,6 +1,7 @@
 import { useLingui } from '@lingui/react/macro';
 import { useEffect, useId, useRef } from 'react';
-import { getFileIcon, mentionPathToDescriptor } from '../registry/file-icons';
+import { FileEntryPathIcon } from '@/components/file-entry-icon';
+import { mentionPathToDescriptor } from '../registry/file-icons';
 import type { MentionItem } from './composer-mention';
 
 function mentionItemKind(path: string): 'folder' | 'page' | 'asset' {
@@ -8,10 +9,6 @@ function mentionItemKind(path: string): 'folder' | 'page' | 'asset' {
   return kind === 'folder' || kind === 'asset' ? kind : 'page';
 }
 
-function mentionItemIcon(path: string) {
-  return getFileIcon(mentionPathToDescriptor(path));
-}
-
 interface ComposerMentionMenuProps {
   items: MentionItem[];
   query: string;
@@ -84,7 +81,6 @@ export function ComposerMentionMenu({
             const active = index === selectedIndex;
             const kind = mentionItemKind(item.path);
             const isFolder = kind === 'folder';
-            const Icon = mentionItemIcon(item.path);
             const displayPath = isFolder ? `${item.path}/` : item.path;
             return (
               <button
@@ -104,7 +100,10 @@ export function ComposerMentionMenu({
                   onSelect(item);
                 }}
               >
-                <Icon className="mt-0.5 size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+                <FileEntryPathIcon
+                  path={item.path}
+                  className="mt-0.5 size-4 shrink-0 text-muted-foreground"
+                />
                 <span className="flex min-w-0 flex-1 flex-col gap-0.5">
                   <span className="flex items-baseline gap-1.5">
                     <span className="truncate text-sm font-medium">{item.title}</span>
diff --git a/packages/app/src/editor/composer-mention/composer-mention.ts b/packages/app/src/editor/composer-mention/composer-mention.ts
index 5724f1594..fa5bf881e 100644
--- a/packages/app/src/editor/composer-mention/composer-mention.ts
+++ b/packages/app/src/editor/composer-mention/composer-mention.ts
@@ -7,6 +7,7 @@ import { PluginKey } from '@tiptap/pm/state';
 import { ReactRenderer } from '@tiptap/react';
 import Suggestion, { type SuggestionKeyDownProps, type SuggestionProps } from '@tiptap/suggestion';
 import { X } from 'lucide-react';
+import { fileEntryPathIconToSvgString } from '@/components/file-entry-icon';
 import { docNameToRelativePath } from '@/lib/workspace-paths';
 import {
   createSuggestionPopup,
@@ -14,7 +15,6 @@ import {
   type SuggestionPositionState,
 } from '../extensions/suggestion-floating-ui';
 import { fetchPages, filterPages, type PageItem } from '../extensions/wiki-link-suggestion';
-import { getFileIcon, mentionPathToDescriptor } from '../registry/file-icons';
 import { lucideIconToSvgString } from '../registry/lucide-svg';
 import { ComposerMentionMenu } from './ComposerMentionMenu';
 
@@ -132,7 +132,7 @@ const ComposerMention = Node.create({
       const fileIcon = document.createElement('span');
       fileIcon.className = 'composer-mention-glyph composer-mention-glyph-icon';
       fileIcon.setAttribute('aria-hidden', 'true');
-      fileIcon.innerHTML = lucideIconToSvgString(getFileIcon(mentionPathToDescriptor(path)));
+      fileIcon.innerHTML = fileEntryPathIconToSvgString(path);
       remove.appendChild(fileIcon);
 
       const xIcon = document.createElement('span');
diff --git a/packages/app/src/editor/link-path-suggestions.tsx b/packages/app/src/editor/link-path-suggestions.tsx
index 60993a6b8..155b0a5b4 100644
--- a/packages/app/src/editor/link-path-suggestions.tsx
+++ b/packages/app/src/editor/link-path-suggestions.tsx
@@ -1,6 +1,5 @@
 import { autoUpdate, computePosition, flip, offset, shift, size } from '@floating-ui/dom';
 import { useLingui } from '@lingui/react/macro';
-import { FileText, FolderOpen, Paperclip } from 'lucide-react';
 import {
   type ComponentProps,
   type KeyboardEvent,
@@ -12,6 +11,7 @@ import {
   useState,
 } from 'react';
 import { createPortal } from 'react-dom';
+import { FileEntryIcon } from '@/components/file-entry-icon';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { cn } from '@/lib/utils';
@@ -39,14 +39,21 @@ export function preventLinkPathSuggestionDialogDismiss(event: {
   }
 }
 
-function suggestionIcon(kind: LinkPathSuggestionKind) {
-  switch (kind) {
+function suggestionIcon(suggestion: LinkPathSuggestion) {
+  switch (suggestion.kind) {
     case 'page':
-      return <FileText className="size-3.5 shrink-0" aria-hidden="true" />;
+      return <FileEntryIcon className="size-3.5" docExt=".md" kind="file" path={suggestion.path} />;
     case 'folder':
-      return <FolderOpen className="size-3.5 shrink-0" aria-hidden="true" />;
+      return <FileEntryIcon className="size-3.5" kind="folder" path={suggestion.path} />;
     case 'asset':
-      return <Paperclip className="size-3.5 shrink-0" aria-hidden="true" />;
+      return (
+        <FileEntryIcon
+          bodyIndexed={false}
+          className="size-3.5"
+          kind="file"
+          path={suggestion.path}
+        />
+      );
   }
 }
 
@@ -281,7 +288,7 @@ export function LinkPathSuggestionInput({
               onMouseDown={(event) => event.preventDefault()}
               onClick={() => selectSuggestion(suggestion)}
             >
-              {suggestionIcon(suggestion.kind)}
+              {suggestionIcon(suggestion)}
               <span className="min-w-0 flex-1 truncate">/{suggestion.path}</span>
               <span className="shrink-0 text-muted-foreground text-xs">{kindLabel}</span>
             </Button>
diff --git a/packages/app/src/editor/registry/lucide-svg.test.ts b/packages/app/src/editor/registry/lucide-svg.test.ts
index 0ac4bec09..ccd25d4d6 100644
--- a/packages/app/src/editor/registry/lucide-svg.test.ts
+++ b/packages/app/src/editor/registry/lucide-svg.test.ts
@@ -1,5 +1,15 @@
 import { describe, expect, test } from 'bun:test';
-import { FileText, Film, FolderOpen, Image, type LucideIcon, Volume2, X } from 'lucide-react';
+import {
+  File,
+  FileText,
+  Film,
+  FolderOpen,
+  Image,
+  ImageIcon,
+  type LucideIcon,
+  Volume2,
+  X,
+} from 'lucide-react';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { lucideIconToSvgString } from './lucide-svg.ts';
@@ -17,6 +27,8 @@ const CURATED: ReadonlyArray<[string, LucideIcon]> = [
   ['FolderOpen', FolderOpen],
   ['FileText', FileText],
   ['Image', Image],
+  ['ImageIcon', ImageIcon],
+  ['File', File],
   ['Film', Film],
   ['Volume2', Volume2],
   ['X', X],
diff --git a/packages/app/src/editor/registry/lucide-svg.ts b/packages/app/src/editor/registry/lucide-svg.ts
index 81098368b..17eec90ac 100644
--- a/packages/app/src/editor/registry/lucide-svg.ts
+++ b/packages/app/src/editor/registry/lucide-svg.ts
@@ -1,4 +1,14 @@
-import { FileText, Film, FolderOpen, Image, type LucideIcon, Volume2, X } from 'lucide-react';
+import {
+  File,
+  FileText,
+  Film,
+  FolderOpen,
+  Image,
+  ImageIcon,
+  type LucideIcon,
+  Volume2,
+  X,
+} from 'lucide-react';
 
 const ICON_BODIES = new Map<LucideIcon, string>([
   [
@@ -13,6 +23,14 @@ const ICON_BODIES = new Map<LucideIcon, string>([
     Image,
     '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
   ],
+  [
+    ImageIcon,
+    '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
+  ],
+  [
+    File,
+    '<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/>',
+  ],
   [
     Film,
     '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 3v18"/><path d="M3 7.5h4"/><path d="M3 12h18"/><path d="M3 16.5h4"/><path d="M17 3v18"/><path d="M17 7.5h4"/><path d="M17 16.5h4"/>',
diff --git a/packages/app/src/lib/keyboard-shortcuts.test.ts b/packages/app/src/lib/keyboard-shortcuts.test.ts
index 45f1ee6ff..b58458a93 100644
--- a/packages/app/src/lib/keyboard-shortcuts.test.ts
+++ b/packages/app/src/lib/keyboard-shortcuts.test.ts
@@ -19,6 +19,8 @@ describe('keyboard shortcut registry', () => {
     expect(formatShortcut('command-palette', 'windowsLinux')).toBe('Ctrl K');
     expect(formatShortcut('new-item', 'mac')).toBe('⌘ N');
     expect(formatShortcut('new-item', 'windowsLinux')).toBe('Ctrl N');
+    expect(formatShortcut('new-folder', 'mac')).toBe('⇧⌘ N');
+    expect(formatShortcut('new-folder', 'windowsLinux')).toBe('Ctrl Shift N');
     expect(formatShortcut('edit-with-ai', 'mac')).toBe('⇧⌘ I');
   });
 
@@ -125,6 +127,23 @@ describe('keyboard shortcut registry', () => {
     ).toBe(false);
   });
 
+  test('new folder shortcut is desktop-only and not handled by renderer matching', () => {
+    expect(
+      matchesKeyboardShortcut(
+        { metaKey: true, ctrlKey: false, altKey: false, shiftKey: true, key: 'N', code: 'KeyN' },
+        'new-folder',
+        'mac',
+      ),
+    ).toBe(false);
+    expect(
+      matchesKeyboardShortcut(
+        { metaKey: false, ctrlKey: true, altKey: false, shiftKey: true, key: 'N', code: 'KeyN' },
+        'new-folder',
+        'windowsLinux',
+      ),
+    ).toBe(false);
+  });
+
   test('formats the terminal-panel shortcut as Cmd/Ctrl + J', () => {
     expect(formatShortcut('toggle-terminal-panel', 'mac')).toBe('⌘ J');
     expect(formatShortcut('toggle-terminal-panel', 'windowsLinux')).toBe('Ctrl J');
diff --git a/packages/app/src/lib/keyboard-shortcuts.ts b/packages/app/src/lib/keyboard-shortcuts.ts
index ea28b6673..fac472d5d 100644
--- a/packages/app/src/lib/keyboard-shortcuts.ts
+++ b/packages/app/src/lib/keyboard-shortcuts.ts
@@ -124,6 +124,14 @@ const KEYBOARD_SHORTCUT_DEFINITIONS = [
       },
     ],
   },
+  {
+    id: 'new-folder',
+    category: 'general',
+    title: msg`New folder`,
+    description: msg`Create a folder from the current document or folder context.`,
+    scope: msg`OK Desktop`,
+    bindings: [{ mac: '⇧⌘ N', windowsLinux: 'Ctrl Shift N' }],
+  },
   {
     id: 'toggle-files-sidebar',
     category: 'general',
diff --git a/packages/app/src/locales/en/messages.json b/packages/app/src/locales/en/messages.json
index 5dcacb0ee..8abb08089 100644
--- a/packages/app/src/locales/en/messages.json
+++ b/packages/app/src/locales/en/messages.json
@@ -140,6 +140,7 @@
     "3__SjS": ["breadcrumb"],
     "3a_Bd7": ["Open source doc: ", ["mirrorSrc"]],
     "3aeN7X": ["All files"],
+    "3cOo2C": ["Create a folder from the current document or folder context."],
     "3h5zMp": ["Something went wrong loading the settings panel."],
     "3iyGWF": ["Open recent project"],
     "3jod3l": ["Connect GitHub"],
diff --git a/packages/app/src/locales/en/messages.po b/packages/app/src/locales/en/messages.po
index d96cb760f..f21adb553 100644
--- a/packages/app/src/locales/en/messages.po
+++ b/packages/app/src/locales/en/messages.po
@@ -1702,6 +1702,10 @@ msgstr "Create a document from {label}"
 msgid "Create a file from the current document or folder context."
 msgstr "Create a file from the current document or folder context."
 
+#: src/lib/keyboard-shortcuts.ts
+msgid "Create a folder from the current document or folder context."
+msgstr "Create a folder from the current document or folder context."
+
 #: src/lib/keyboard-shortcuts.ts
 msgid "Create a new list item from the current list item."
 msgstr "Create a new list item from the current list item."
@@ -3598,6 +3602,7 @@ msgstr "New file from template \"{displayTitle}\" ({fileName}) in the project ro
 #: src/components/FileSidebar.tsx
 #: src/components/FileTree.tsx
 #: src/components/NewItemDialog.tsx
+#: src/lib/keyboard-shortcuts.ts
 msgid "New folder"
 msgstr "New folder"
 
diff --git a/packages/app/src/locales/pseudo/messages.json b/packages/app/src/locales/pseudo/messages.json
index 0a8928fe8..1c966489b 100644
--- a/packages/app/src/locales/pseudo/messages.json
+++ b/packages/app/src/locales/pseudo/messages.json
@@ -140,6 +140,7 @@
     "3__SjS": ["ƀŕēàďćŕũḿƀ"],
     "3a_Bd7": ["Ōƥēń śōũŕćē ďōć: ", ["mirrorSrc"]],
     "3aeN7X": ["Àĺĺ ƒĩĺēś"],
+    "3cOo2C": ["Ćŕēàţē à ƒōĺďēŕ ƒŕōḿ ţĥē ćũŕŕēńţ ďōćũḿēńţ ōŕ ƒōĺďēŕ ćōńţēxţ."],
     "3h5zMp": ["Śōḿēţĥĩńĝ ŵēńţ ŵŕōńĝ ĺōàďĩńĝ ţĥē śēţţĩńĝś ƥàńēĺ."],
     "3iyGWF": ["Ōƥēń ŕēćēńţ ƥŕōĴēćţ"],
     "3jod3l": ["Ćōńńēćţ ĜĩţĤũƀ"],
diff --git a/packages/app/src/locales/pseudo/messages.po b/packages/app/src/locales/pseudo/messages.po
index 46b71ecd5..cd9ce039b 100644
--- a/packages/app/src/locales/pseudo/messages.po
+++ b/packages/app/src/locales/pseudo/messages.po
@@ -1697,6 +1697,10 @@ msgstr ""
 msgid "Create a file from the current document or folder context."
 msgstr ""
 
+#: src/lib/keyboard-shortcuts.ts
+msgid "Create a folder from the current document or folder context."
+msgstr ""
+
 #: src/lib/keyboard-shortcuts.ts
 msgid "Create a new list item from the current list item."
 msgstr ""
@@ -3593,6 +3597,7 @@ msgstr ""
 #: src/components/FileSidebar.tsx
 #: src/components/FileTree.tsx
 #: src/components/NewItemDialog.tsx
+#: src/lib/keyboard-shortcuts.ts
 msgid "New folder"
 msgstr ""