feat(tui): show a result's file name and folder in columns of their own

The results list held the whole shared path in one column, so a search
was read through its folder: every row began with the same peer prefix
and the file name, the part being searched for, sat off the right edge.
Split the column at the last separator, the file name first with the
larger share of the width and the folder dimmed beside it, so names line
up and read at a glance.

The one scroll offset moves both columns together, and $ runs to the end
of whichever overflows further. The website's mock of the pane follows.

Suggested in #55.

website/src/components/tui/panes.tsx

@@ -5,7 +5,15 @@ import { cn } from '@/lib/utils'
 import { TuiPane } from './chrome'
 import type { ResultRow, SearchRow, TransferRow, TransferStatus } from './data'
 
-const RESULT_COLS = '30px 1fr 74px 92px 78px 74px 42px'
+const RESULT_COLS = '30px 3fr 2fr 74px 92px 78px 74px 42px'
+
+/** A shared path split at its last separator, as the TUI's two columns show it. */
+const splitPath = (path: string): { folder: string; name: string } => {
+  const at = Math.max(path.lastIndexOf('\\'), path.lastIndexOf('/'))
+  return at < 0
+    ? { folder: '', name: path }
+    : { folder: path.slice(0, at), name: path.slice(at + 1) }
+}
 const TRANSFER_COLS = '48px 1fr 96px 168px 74px'
 
 interface SearchesPaneProps {
@@ -134,6 +142,7 @@ export const ResultsPane = ({
     >
       <span>✓</span>
       <span>Filename</span>
+      <span>Folder</span>
       <span>Size</span>
       <span>User</span>
       <span>Bitrate</span>
@@ -143,6 +152,7 @@ export const ResultsPane = ({
     <div className="flex-1 overflow-y-auto">
       {rows.map((row, i) => {
         const { glyph, tone } = resultGlyph(row)
+        const { folder, name } = splitPath(row.name)
         const isSelected = selected === i
         return (
           <button
@@ -167,7 +177,10 @@ export const ResultsPane = ({
                 isSelected ? 'text-[var(--color-paper)]' : 'text-[var(--color-paper-dim)]',
               )}
             >
-              {row.name}
+              {name}
+            </span>
+            <span className="overflow-hidden text-ellipsis whitespace-nowrap text-[var(--color-dust)]">
+              {folder}
             </span>
             <span className="text-right text-[var(--color-tape)]">{row.size}</span>
             <span className="text-[var(--color-signal)]">{row.user}</span>