Full list: Stop double-showing the extension

- Stripped the ext from the name column so `photo.jpg` shows as `photo` + `jpg`, not `photo.jpg` + `jpg`.
- During inline rename, the editor now spans the name + ext grid cells for more typing room.
- Extracted `getDisplayExtension()` from `FullList.svelte` and added `getDisplayName()` in `full-list-utils.ts`, with unit tests for dotfiles, multi-dot names, trailing dots, and directories.

Author: vdavid

apps/desktop/src/lib/file-explorer/views/FullList.svelte

@@ -27,6 +27,8 @@
         buildFileSizeTooltip,
         getDisplaySize,
         hasSizeMismatch,
+        getDisplayExtension,
+        getDisplayName,
     } from './full-list-utils'
     import {
         getRowHeight,
@@ -118,16 +120,6 @@
     // Measures multiple sample dates to find the maximum width needed.
     const dateColumnWidth = $derived(measureDateColumnWidth(formatDateTime))
 
-    /** Extracts display extension from a filename (no dot). Matches Rust sorting logic:
-     * dotfiles without secondary dot → empty, no extension → empty, otherwise last segment. */
-    function getDisplayExtension(name: string, isDirectory: boolean): string {
-        if (isDirectory) return ''
-        if (name.startsWith('.') && !name.slice(1).includes('.')) return ''
-        const dotPos = name.lastIndexOf('.')
-        if (dotPos <= 0 || dotPos === name.length - 1) return ''
-        return name.slice(dotPos + 1)
-    }
-
     // Size display mode (smart/logical/physical)
     const sizeDisplayMode = $derived(getSizeDisplayMode())
 
@@ -467,23 +459,25 @@
                     >
                         <FileIcon {file} {syncIcon} />
                         {#if renameState?.active && renameState.target?.index === globalIndex}
-                            <InlineRenameEditor
-                                value={renameState.currentName}
-                                severity={renameState.validation.severity}
-                                shaking={renameState.shaking}
-                                ariaLabel={`Rename ${renameState.target.originalName}`}
-                                ariaInvalid={renameState.validation.severity === 'error'}
-                                validationMessage={renameState.validation.message}
-                                focusTrigger={renameState.focusTrigger}
-                                onInput={(v: string) => onRenameInput?.(v)}
-                                onSubmit={() => onRenameSubmit?.()}
-                                onCancel={() => onRenameCancel?.()}
-                                onShakeEnd={() => onRenameShakeEnd?.()}
-                            />
+                            <div class="col-rename">
+                                <InlineRenameEditor
+                                    value={renameState.currentName}
+                                    severity={renameState.validation.severity}
+                                    shaking={renameState.shaking}
+                                    ariaLabel={`Rename ${renameState.target.originalName}`}
+                                    ariaInvalid={renameState.validation.severity === 'error'}
+                                    validationMessage={renameState.validation.message}
+                                    focusTrigger={renameState.focusTrigger}
+                                    onInput={(v: string) => onRenameInput?.(v)}
+                                    onSubmit={() => onRenameSubmit?.()}
+                                    onCancel={() => onRenameCancel?.()}
+                                    onShakeEnd={() => onRenameShakeEnd?.()}
+                                />
+                            </div>
                         {:else}
-                            <span class="col-name">{file.name}</span>
+                            <span class="col-name">{getDisplayName(file.name, file.isDirectory)}</span>
+                            <span class="col-ext">{getDisplayExtension(file.name, file.isDirectory)}</span>
                         {/if}
-                        <span class="col-ext">{getDisplayExtension(file.name, file.isDirectory)}</span>
                         <span
                             class="col-size"
                             use:tooltip={file.isDirectory
@@ -631,6 +625,13 @@
         white-space: nowrap;
     }
 
+    /* During rename, span the name + ext columns for more editing room */
+    .col-rename {
+        grid-column: 2 / span 2;
+        min-width: 0;
+        height: 100%;
+    }
+
     .col-ext {
         overflow: hidden;
         text-overflow: ellipsis;

apps/desktop/src/lib/file-explorer/views/full-list-utils.test.ts

@@ -2,7 +2,13 @@
  * Tests for full-list-utils.ts
  */
 import { describe, it, expect, vi } from 'vitest'
-import { getVisibleItemsCount, FULL_LIST_ROW_HEIGHT, getVirtualizationBufferRows } from './full-list-utils'
+import {
+  getVisibleItemsCount,
+  FULL_LIST_ROW_HEIGHT,
+  getVirtualizationBufferRows,
+  getDisplayExtension,
+  getDisplayName,
+} from './full-list-utils'
 
 // Mock the settings store
 vi.mock('$lib/settings/settings-store', () => ({
@@ -48,3 +54,40 @@ describe('getVisibleItemsCount', () => {
     expect(getVisibleItemsCount(410, 40)).toBe(11) // ceil(410 / 40) = 11
   })
 })
+
+describe('getDisplayExtension / getDisplayName', () => {
+  it('splits a plain filename', () => {
+    expect(getDisplayExtension('photo.jpg', false)).toBe('jpg')
+    expect(getDisplayName('photo.jpg', false)).toBe('photo')
+  })
+
+  it('keeps dotfiles intact (no secondary dot)', () => {
+    expect(getDisplayExtension('.bashrc', false)).toBe('')
+    expect(getDisplayName('.bashrc', false)).toBe('.bashrc')
+  })
+
+  it('treats only the last segment of a multi-dot name as the extension', () => {
+    expect(getDisplayExtension('file.tar.gz', false)).toBe('gz')
+    expect(getDisplayName('file.tar.gz', false)).toBe('file.tar')
+  })
+
+  it('returns empty ext for directories and keeps the full name', () => {
+    expect(getDisplayExtension('My Folder.d', true)).toBe('')
+    expect(getDisplayName('My Folder.d', true)).toBe('My Folder.d')
+  })
+
+  it('keeps trailing-dot names intact', () => {
+    expect(getDisplayExtension('foo.', false)).toBe('')
+    expect(getDisplayName('foo.', false)).toBe('foo.')
+  })
+
+  it('handles names with no dot at all', () => {
+    expect(getDisplayExtension('README', false)).toBe('')
+    expect(getDisplayName('README', false)).toBe('README')
+  })
+
+  it('splits a dotfile with a secondary dot', () => {
+    expect(getDisplayExtension('.env.local', false)).toBe('local')
+    expect(getDisplayName('.env.local', false)).toBe('.env')
+  })
+})

apps/desktop/src/lib/file-explorer/views/full-list-utils.ts

@@ -19,6 +19,31 @@ export function getVisibleItemsCount(containerHeight: number, rowHeight: number
   return Math.ceil(containerHeight / rowHeight)
 }
 
+// ============================================================================
+// Name/Extension Split
+// ============================================================================
+
+/**
+ * Extracts the display extension from a filename (no dot). Matches Rust sorting logic:
+ * dotfiles without a secondary dot → empty, no extension → empty, otherwise last segment.
+ */
+export function getDisplayExtension(name: string, isDirectory: boolean): string {
+  if (isDirectory) return ''
+  if (name.startsWith('.') && !name.slice(1).includes('.')) return ''
+  const dotPos = name.lastIndexOf('.')
+  if (dotPos <= 0 || dotPos === name.length - 1) return ''
+  return name.slice(dotPos + 1)
+}
+
+/**
+ * Returns the filename with the display extension (and its separating dot) stripped,
+ * so the name and extension columns don't duplicate the extension.
+ */
+export function getDisplayName(name: string, isDirectory: boolean): string {
+  const ext = getDisplayExtension(name, isDirectory)
+  return ext ? name.slice(0, -(ext.length + 1)) : name
+}
+
 // ============================================================================
 // Date Column Width Measurement
 // ============================================================================