chroxify · mgiovani · Sep 23, 2025 · Sep 23, 2025
diff --git a/apps/desktop/src/lib/components/shared/command-menu/command.svelte b/apps/desktop/src/lib/components/shared/command-menu/command.svelte
@@ -4,7 +4,7 @@
 	import { getCollections, loadCollection } from '@/api/collection';
 	import { moveNote, openNote } from '@/api/notes';
 	import { activeFile, appTheme, collection } from '@/store';
-	import { formatTimeAgo, shortcutToString } from '@/utils';
+	import { formatTimeAgo, shortcutToString, formatFolderPath } from '@/utils';
 	import * as Command from '@haptic/ui/components/command';
 	import { open as browserOpen } from '@tauri-apps/api/shell';
 	import { Twitter } from 'lucide-svelte';
@@ -169,7 +169,7 @@
 								}}
 							>
 								<Icon name="folder" />
-								{folder.name.slice(1).replaceAll('/', ' > ')}
+								{formatFolderPath(folder.name)}
 							</Command.Item>
 						{/if}
 					{/each}
@@ -194,7 +194,7 @@
 							}}
 						>
 							<Icon name="note" />
-							{note.name.slice(1).replaceAll('/', ' > ')}
+							{formatFolderPath(note.name)}
 						</Command.Item>
 					{/each}
 				{:catch error}

diff --git a/apps/desktop/src/lib/components/shared/editor/toolbar.svelte b/apps/desktop/src/lib/components/shared/editor/toolbar.svelte
@@ -16,6 +16,7 @@
 	} from '@/store';
 	import Button from '@haptic/ui/components/button/button.svelte';
 	import { cn } from '@haptic/ui/lib/utils';
+	import { formatDisplayName, formatActiveFileName } from '@/utils';
 
 	export let hideHistory: boolean = false;
 	export let hideParentDirectories: boolean = false;
@@ -148,7 +149,7 @@
 									'text-foreground font-medium'
 							)}
 						>
-							{folder}
+							{formatDisplayName(folder)}
 						</Button>
 						{#if i !== ($activeFile?.replace($collection, '').split('/') ?? [])?.length - 1}
 							<Icon name="chevron" class="w-3.5 h-3.5 inline-block" />
@@ -162,7 +163,7 @@
 					scale="sm"
 					class="h-6 text-[13px] w-fit px-1.5 text-foreground transition-all font-medium"
 				>
-					{$activeFile?.replace($collection, '').split('/')?.slice(-1)[0] ?? ''}
+					{formatActiveFileName($activeFile, $collection)}
 				</Button>
 			{/if}
 		</p>

diff --git a/apps/desktop/src/lib/utils.ts b/apps/desktop/src/lib/utils.ts
@@ -304,6 +304,31 @@ export const getNextUntitledName = (files: FileEntry[], prefix: string, extensio
 	return `${prefix} ${maxNumber + 1}${extension}`;
 };
 
+export const formatDisplayName = (filename?: string): string => {
+	if (!filename) return '';
+	return filename.endsWith('.md') ? filename.slice(0, -3) : filename;
+};
+
+export const formatFolderPath = (path?: string): string => {
+	if (!path) return '';
+	return formatDisplayName(path.slice(1).replaceAll('/', ' > '));
+};
+
+export const formatActiveFileName = (activeFile?: string, collection?: string): string => {
+	if (!activeFile) return '';
+	const filename =
+		activeFile
+			.replace(collection || '', '')
+			.split('/')
+			.slice(-1)[0] || '';
+	return formatDisplayName(filename);
+};
+
+export const formatFileNameFromPath = (path?: string): string => {
+	if (!path) return '';
+	return formatDisplayName(path.split('/').pop() || '');
+};
+
 export const sortFileEntry = (a: FileEntry, b: FileEntry): number => {
 	const isDirectory = (file: FileEntry) => file.children != null;
 	if (isDirectory(a) && isDirectory(b)) {

diff --git a/apps/desktop/src/routes/daily/entries.svelte b/apps/desktop/src/routes/daily/entries.svelte
@@ -6,7 +6,7 @@
 	import { activeFile, platform } from '@/store';
 	import { cn } from '@haptic/ui/lib/utils';
 	import { deleteNote, openNote } from '@/api/notes';
-	import { shortcutToString, showInFolder } from '@/utils';
+	import { shortcutToString, showInFolder, formatDisplayName } from '@/utils';
 	import Shortcut from '@/components/shared/shortcut.svelte';
 	import { SHORTCUTS } from '@/constants';
 	import Label from '@haptic/ui/components/label/label.svelte';
@@ -121,7 +121,7 @@
 									options={SHORTCUTS['note:show-in-folder']}
 									callback={() => showInFolder(entry.path)}
 								/>
-								<span class="text-xs truncate">{entry.name}</span>
+								<span class="text-xs truncate">{formatDisplayName(entry.name)}</span>
 							</Button>
 						</div>
 					</ContextMenu.Trigger>

diff --git a/apps/desktop/src/routes/notes/entries.svelte b/apps/desktop/src/routes/notes/entries.svelte
@@ -5,7 +5,7 @@
 	import Shortcut from '@/components/shared/shortcut.svelte';
 	import { SHORTCUTS } from '@/constants';
 	import { activeFile, collection, editor, platform } from '@/store';
-	import { shortcutToString, showInFolder } from '@/utils';
+	import { shortcutToString, showInFolder, formatDisplayName } from '@/utils';
 	import Button from '@haptic/ui/components/button/button.svelte';
 	import * as Collapsible from '@haptic/ui/components/collapsible';
 	import * as ContextMenu from '@haptic/ui/components/context-menu';
@@ -333,7 +333,7 @@
 										class={cn('w-[18px] h-[18px] shrink-0', !folderOpenStates[i] && 'hidden')}
 									/>
 									<span class="text-xs truncate outline-none" autocorrect="off" spellcheck="false"
-										>{entry.name}</span
+										>{formatDisplayName(entry.name)}</span
 									>
 								</div>
 								<!-- TODO: Make this an optional feature -->
@@ -506,7 +506,9 @@
 							options={SHORTCUTS['note:show-in-folder']}
 							callback={() => !isRenaming && showInFolder(entry.path)}
 						/>
-						<span class="text-xs truncate" autocorrect="off" spellcheck="false">{entry.name}</span>
+						<span class="text-xs truncate" autocorrect="off" spellcheck="false"
+							>{formatDisplayName(entry.name)}</span
+						>
 					</Button>
 				</div>
 			</ContextMenu.Trigger>

diff --git a/apps/desktop/src/routes/notes/search-results.svelte b/apps/desktop/src/routes/notes/search-results.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { activeFile, editor, editorSearchActive, editorSearchValue } from '@/store';
 	import { cn } from '@haptic/ui/lib/utils';
+	import { formatFileNameFromPath } from '@/utils';
 	import { openNote } from '@/api/notes';
 	import Label from '@haptic/ui/components/label/label.svelte';
 	import * as Collapsible from '@haptic/ui/components/collapsible';
@@ -98,7 +99,7 @@
 						!openState[path] ? '-rotate-90' : 'rotate-0'
 					)}
 				/>
-				<p class="truncate">{path.split('/').pop()}</p>
+				<p class="truncate">{formatFileNameFromPath(path)}</p>
 			</Collapsible.Trigger>
 			<Collapsible.Content class="mt-0.5 w-full gap-1.5 flex flex-col">
 				{#each groupedResults[path] as result, index}

diff --git a/apps/desktop/src/routes/tasks/task-entries.svelte b/apps/desktop/src/routes/tasks/task-entries.svelte
@@ -4,6 +4,7 @@
 	import * as Collapsible from '@haptic/ui/components/collapsible';
 	import Label from '@haptic/ui/components/label/label.svelte';
 	import { cn } from '@haptic/ui/lib/utils';
+	import { formatFileNameFromPath } from '@/utils';
 	import { invoke } from '@tauri-apps/api/tauri';
 	import { ChevronDown, Loader } from 'lucide-svelte';
 	import markdownit from 'markdown-it';
@@ -132,7 +133,7 @@
 						!openState[path] ? '-rotate-90' : 'rotate-0'
 					)}
 				/>
-				<p class="truncate">{path.split('/').pop()}</p>
+				<p class="truncate">{formatFileNameFromPath(path)}</p>
 			</Collapsible.Trigger>
 			<Collapsible.Content class="mt-0.5 w-full gap-1.5 flex flex-col">
 				{#each groupedTasks[path] as result, index (result.context_preview)}

diff --git a/apps/web/src/lib/components/shared/command-menu/command.svelte b/apps/web/src/lib/components/shared/command-menu/command.svelte
@@ -6,7 +6,7 @@
 	import { getCollections, loadCollection } from '@/api/collection';
 	import { moveNote, openNote } from '@/api/notes';
 	import { activeFile, collection } from '@/store';
-	import { formatTimeAgo, shortcutToString } from '@/utils';
+	import { formatTimeAgo, shortcutToString, formatFolderPath } from '@/utils';
 	import * as Command from '@haptic/ui/components/command';
 	import { Loader, Twitter } from 'lucide-svelte';
 	import { setMode, userPrefersMode } from 'mode-watcher';
@@ -266,7 +266,7 @@
 								}}
 							>
 								<Icon name="folder" />
-								{folder.name.slice(1).replaceAll('/', ' > ')}
+								{formatFolderPath(folder.name)}
 							</Command.Item>
 						{/if}
 					{/each}
@@ -291,7 +291,7 @@
 							}}
 						>
 							<Icon name="note" />
-							{note.name.slice(1).replaceAll('/', ' > ')}
+							{formatFolderPath(note.name)}
 						</Command.Item>
 					{/each}
 				{:catch error}

diff --git a/apps/web/src/lib/components/shared/editor/toolbar.svelte b/apps/web/src/lib/components/shared/editor/toolbar.svelte
@@ -16,6 +16,7 @@
 	} from '@/store';
 	import Button from '@haptic/ui/components/button/button.svelte';
 	import { cn } from '@haptic/ui/lib/utils';
+	import { formatDisplayName, formatActiveFileName } from '@/utils';
 
 	export let hideHistory: boolean = false;
 	export let hideParentDirectories: boolean = false;
@@ -148,7 +149,7 @@
 									'text-foreground font-medium'
 							)}
 						>
-							{folder}
+							{formatDisplayName(folder)}
 						</Button>
 						{#if i !== ($activeFile?.replace($collection, '').split('/') ?? [])?.length - 1}
 							<Icon name="chevron" class="w-3.5 h-3.5 inline-block" />
@@ -162,7 +163,7 @@
 					scale="sm"
 					class="h-6 text-[13px] w-fit px-1.5 text-foreground transition-all font-medium"
 				>
-					{$activeFile?.replace($collection, '').split('/')?.slice(-1)[0] ?? ''}
+					{formatActiveFileName($activeFile, $collection)}
 				</Button>
 			{/if}
 		</p>

diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
@@ -349,6 +349,31 @@ export const getNextUntitledName = (
 	return `${prefix} ${maxNumber + 1}${extension}`;
 };
 
+export const formatDisplayName = (filename?: string): string => {
+	if (!filename) return '';
+	return filename.endsWith('.md') ? filename.slice(0, -3) : filename;
+};
+
+export const formatFolderPath = (path?: string): string => {
+	if (!path) return '';
+	return formatDisplayName(path.slice(1).replaceAll('/', ' > '));
+};
+
+export const formatActiveFileName = (activeFile?: string, collection?: string): string => {
+	if (!activeFile) return '';
+	const filename =
+		activeFile
+			.replace(collection || '', '')
+			.split('/')
+			.slice(-1)[0] || '';
+	return formatDisplayName(filename);
+};
+
+export const formatFileNameFromPath = (path?: string): string => {
+	if (!path) return '';
+	return formatDisplayName(path.split('/').pop() || '');
+};
+
 interface DeviceInfo {
 	isDesktop: boolean;
 	isMobileOrTablet: boolean;

diff --git a/apps/web/src/routes/daily/entries.svelte b/apps/web/src/routes/daily/entries.svelte
@@ -5,7 +5,7 @@
 	import { SHORTCUTS } from '@/constants';
 	import { activeFile } from '@/store';
 	import type { FileEntry } from '@/types';
-	import { shortcutToString } from '@/utils';
+	import { shortcutToString, formatDisplayName } from '@/utils';
 	import Button from '@haptic/ui/components/button/button.svelte';
 	import * as ContextMenu from '@haptic/ui/components/context-menu';
 	import Label from '@haptic/ui/components/label/label.svelte';
@@ -115,7 +115,7 @@
 									options={SHORTCUTS['note:delete']}
 									callback={() => deleteNote(entry.path)}
 								/>
-								<span class="text-xs truncate">{entry.name}</span>
+								<span class="text-xs truncate">{formatDisplayName(entry.name)}</span>
 							</Button>
 						</div>
 					</ContextMenu.Trigger>

diff --git a/apps/web/src/routes/notes/entries.svelte b/apps/web/src/routes/notes/entries.svelte
@@ -6,7 +6,7 @@
 	import { SHORTCUTS } from '@/constants';
 	import { activeFile, collection, editor } from '@/store';
 	import type { FileEntry } from '@/types';
-	import { shortcutToString } from '@/utils';
+	import { shortcutToString, formatDisplayName } from '@/utils';
 	import Button from '@haptic/ui/components/button/button.svelte';
 	import * as Collapsible from '@haptic/ui/components/collapsible';
 	import * as ContextMenu from '@haptic/ui/components/context-menu';
@@ -329,7 +329,7 @@
 										class={cn('w-[18px] h-[18px] shrink-0', !folderOpenStates[i] && 'hidden')}
 									/>
 									<span class="text-xs truncate outline-none" autocorrect="off" spellcheck="false"
-										>{entry.name}</span
+										>{formatDisplayName(entry.name)}</span
 									>
 								</div>
 								<!-- TODO: Make this an optional feature -->
@@ -487,7 +487,9 @@
 							options={SHORTCUTS['note:delete']}
 							callback={() => !isRenaming && deleteNote(entry.path)}
 						/>
-						<span class="text-xs truncate" autocorrect="off" spellcheck="false">{entry.name}</span>
+						<span class="text-xs truncate" autocorrect="off" spellcheck="false"
+							>{formatDisplayName(entry.name)}</span
+						>
 					</Button>
 				</div>
 			</ContextMenu.Trigger>

diff --git a/apps/web/src/routes/notes/search-results.svelte b/apps/web/src/routes/notes/search-results.svelte
@@ -4,6 +4,7 @@
 	import * as Collapsible from '@haptic/ui/components/collapsible';
 	import Label from '@haptic/ui/components/label/label.svelte';
 	import { cn } from '@haptic/ui/lib/utils';
+	import { formatFileNameFromPath } from '@/utils';
 	import { ChevronDown, Loader } from 'lucide-svelte';
 	import markdownit from 'markdown-it';
 
@@ -96,7 +97,7 @@
 						!openState[path] ? '-rotate-90' : 'rotate-0'
 					)}
 				/>
-				<p class="truncate">{path.split('/').pop()}</p>
+				<p class="truncate">{formatFileNameFromPath(path)}</p>
 			</Collapsible.Trigger>
 			<Collapsible.Content class="mt-0.5 w-full gap-1.5 flex flex-col">
 				{#each groupedResults[path] as result, index}

diff --git a/apps/web/src/routes/tasks/task-entries.svelte b/apps/web/src/routes/tasks/task-entries.svelte
@@ -2,7 +2,7 @@
 	import { openNote } from '@/api/notes';
 	import { activeFile, collection, editor, editorSearchActive, editorSearchValue } from '@/store';
 	import type { SearchResultParams } from '@/types';
-	import { searchEntries } from '@/utils';
+	import { searchEntries, formatFileNameFromPath } from '@/utils';
 	import * as Collapsible from '@haptic/ui/components/collapsible';
 	import Label from '@haptic/ui/components/label/label.svelte';
 	import { cn } from '@haptic/ui/lib/utils';
@@ -128,7 +128,7 @@
 						!openState[path] ? '-rotate-90' : 'rotate-0'
 					)}
 				/>
-				<p class="truncate">{path.split('/').pop()}</p>
+				<p class="truncate">{formatFileNameFromPath(path)}</p>
 			</Collapsible.Trigger>
 			<Collapsible.Content class="mt-0.5 w-full gap-1.5 flex flex-col">
 				{#each groupedTasks[path] as result, index (result.context_preview)}