Handle rename review findings

Author: txchen

src/vue-tui/component.ts

@@ -150,19 +150,16 @@ export function createTmuRoot(options: TmuRootOptions) {
           } else if (key.escape) {
             coordinator.dispatchUi({ type: "dismissRenameDialog" });
           } else if (key.return) {
-            const title = ui.renameDialog.value.trim();
-            if (!title) {
-              coordinator.dispatchUi({ type: "setRenameDialogError", error: "Track Title must not be empty" });
-            } else {
-              try {
-                await coordinator.dispatch({ type: "renameTrack", identity: ui.renameDialog.identity, title });
-                coordinator.dispatchUi({ type: "dismissRenameDialog" });
-              } catch (error) {
-                coordinator.dispatchUi({
-                  type: "setRenameDialogError",
-                  error: error instanceof Error ? error.message : String(error),
-                });
-              }
+            try {
+              await coordinator.dispatch({
+                type: "renameTrack", identity: ui.renameDialog.identity, title: ui.renameDialog.value,
+              });
+              coordinator.dispatchUi({ type: "dismissRenameDialog" });
+            } catch (error) {
+              coordinator.dispatchUi({
+                type: "setRenameDialogError",
+                error: error instanceof Error ? error.message : String(error),
+              });
             }
           } else {
             editRenameDialog(input, key, coordinator);
@@ -742,8 +739,9 @@ function confirmationModal(confirmation: ConfirmationDescriptor, ui: UiState, no
 
 function renameTrackModal(dialog: NonNullable<UiState["renameDialog"]>, noColor: boolean) {
   const beforeCursor = dialog.value.slice(0, dialog.cursor);
-  const atCursor = dialog.value[dialog.cursor] ?? " ";
-  const afterCursor = dialog.value.slice(dialog.cursor + (dialog.cursor < dialog.value.length ? 1 : 0));
+  const nextCursor = nextGraphemeBoundary(dialog.value, dialog.cursor);
+  const atCursor = dialog.value.slice(dialog.cursor, nextCursor) || " ";
+  const afterCursor = dialog.value.slice(nextCursor);
   return h(Box, {
     flexDirection: "column", borderStyle: "round", borderColor: noColor ? undefined : "cyan",
     paddingX: 2, alignSelf: "center", width: "70%",
@@ -1049,22 +1047,41 @@ function editRenameDialog(input: string, key: InputKey, coordinator: AppCoordina
   const dialog = coordinator.uiState.renameDialog;
   if (!dialog) return;
   let { value, cursor } = dialog;
-  if (key.leftArrow) cursor = Math.max(0, cursor - 1);
-  else if (key.rightArrow) cursor = Math.min(value.length, cursor + 1);
+  if (key.leftArrow) cursor = previousGraphemeBoundary(value, cursor);
+  else if (key.rightArrow) cursor = nextGraphemeBoundary(value, cursor);
   else if (key.home) cursor = 0;
   else if (key.end) cursor = value.length;
   else if (key.backspace && cursor > 0) {
-    value = value.slice(0, cursor - 1) + value.slice(cursor);
-    cursor -= 1;
+    const previousCursor = previousGraphemeBoundary(value, cursor);
+    value = value.slice(0, previousCursor) + value.slice(cursor);
+    cursor = previousCursor;
   } else if (key.delete && cursor < value.length) {
-    value = value.slice(0, cursor) + value.slice(cursor + 1);
+    value = value.slice(0, cursor) + value.slice(nextGraphemeBoundary(value, cursor));
   } else if (input.length > 0 && !key.ctrl && !key.meta) {
     value = value.slice(0, cursor) + input + value.slice(cursor);
     cursor += input.length;
   } else return;
   coordinator.dispatchUi({ type: "editRenameDialog", value, cursor });
 }
 
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
+function previousGraphemeBoundary(value: string, cursor: number): number {
+  let previous = 0;
+  for (const segment of graphemeSegmenter.segment(value)) {
+    if (segment.index >= cursor) break;
+    previous = segment.index;
+  }
+  return previous;
+}
+
+function nextGraphemeBoundary(value: string, cursor: number): number {
+  for (const segment of graphemeSegmenter.segment(value)) {
+    if (segment.index > cursor) return segment.index;
+  }
+  return value.length;
+}
+
 function isCtrlC(input: string, key: InputKey): boolean {
   return input === "\x03" || (key.ctrl === true && input === "c");
 }

src/youtube-cache.ts

@@ -16,7 +16,7 @@ const YOUTUBE_CACHE_PROVIDER_LABEL = "YouTube Cache";
 const REQUIRED_METADATA_KEYS = [
   "videoId", "title", "uploader", "cachedAt", "mediaFileName", "container",
 ] as const;
-const OPTIONAL_METADATA_KEYS = ["durationSeconds", "thumbnailUrl", "customTitle"] as const;
+const OPTIONAL_METADATA_KEYS = ["durationSeconds", "thumbnailUrl", "trackTitleOverride"] as const;
 const METADATA_KEYS = new Set<string>([...REQUIRED_METADATA_KEYS, ...OPTIONAL_METADATA_KEYS]);
 const MEDIA_EXTENSIONS = new Set([
   ".aac", ".flac", ".m4a", ".mka", ".mkv", ".mp3", ".mp4", ".ogg", ".opus", ".wav", ".webm",
@@ -39,7 +39,7 @@ export type YouTubeCacheMetadata = {
   mediaFileName: string;
   container: string;
   thumbnailUrl?: string;
-  customTitle?: string;
+  trackTitleOverride?: string;
 };
 
 export type YouTubeCacheEntry = {
@@ -199,9 +199,9 @@ class FileSystemYouTubeCacheProvider implements YouTubeCacheProvider {
   async renameTrack(identity: TrackIdentity, title: string): Promise<Track> {
     const entry = this.findByIdentity(identity);
     if (!entry) throw new Error(`YouTube Cache entry is missing: ${identity.stableId}`);
-    const customTitle = normalizeDisplayValue(title);
-    if (!customTitle) throw new Error("Track Title must not be empty");
-    await writeYouTubeCacheMetadata(this.options, { ...entry.metadata, customTitle });
+    const trackTitleOverride = normalizeDisplayValue(title);
+    if (!trackTitleOverride) throw new Error("Track Title must not be empty");
+    await writeYouTubeCacheMetadata(this.options, { ...entry.metadata, trackTitleOverride });
     this.refresh();
     return this.findByIdentity(identity)!.track;
   }
@@ -352,21 +352,21 @@ function normalizeMetadata(value: unknown): YouTubeCacheMetadata | null {
   if ("durationSeconds" in value && durationSeconds === undefined) return null;
   const thumbnailUrl = normalizeDisplayValue(value.thumbnailUrl);
   if ("thumbnailUrl" in value && !thumbnailUrl) return null;
-  const customTitle = normalizeDisplayValue(value.customTitle);
-  if ("customTitle" in value && !customTitle) return null;
+  const trackTitleOverride = normalizeDisplayValue(value.trackTitleOverride);
+  if ("trackTitleOverride" in value && !trackTitleOverride) return null;
   return {
     videoId, title, uploader,
     ...(durationSeconds !== undefined ? { durationSeconds } : {}),
     cachedAt, mediaFileName, container,
     ...(thumbnailUrl ? { thumbnailUrl } : {}),
-    ...(customTitle ? { customTitle } : {}),
+    ...(trackTitleOverride ? { trackTitleOverride } : {}),
   };
 }
 
 function trackFromMetadata(metadata: YouTubeCacheMetadata): Track {
   return {
     identity: { providerId: YOUTUBE_CACHE_PROVIDER_ID, stableId: metadata.videoId },
-    title: metadata.customTitle ?? metadata.title,
+    title: metadata.trackTitleOverride ?? metadata.title,
     artist: metadata.uploader,
     ...(metadata.durationSeconds !== undefined ? { durationSeconds: metadata.durationSeconds } : {}),
     providerLabel: YOUTUBE_CACHE_PROVIDER_LABEL,

tests/vue-tui.test.ts

@@ -1081,8 +1081,10 @@ describe("TMU top-level surface smoke", () => {
       }],
       listIncompleteEntries: () => [], findByIdentity: () => undefined,
       renameTrack: async (_identity, title) => {
-        if (title === "Cannot Save") throw new Error("cache is read-only");
-        return (track = { ...track, title });
+        const normalizedTitle = title.trim();
+        if (!normalizedTitle) throw new Error("Track Title must not be empty");
+        if (normalizedTitle === "Cannot Save") throw new Error("cache is read-only");
+        return (track = { ...track, title: normalizedTitle });
       },
       deleteCacheEntry: async () => false, cleanupIncompleteEntry: async () => false,
     };
@@ -1112,6 +1114,16 @@ describe("TMU top-level surface smoke", () => {
 
     await terminal.stdin.write("e");
     await terminal.stdin.write("\x7f".repeat("Clear Name".length));
+    await terminal.stdin.write("A🎵B");
+    await terminal.stdin.write("\x1b[H");
+    await terminal.stdin.write("\x1b[C");
+    await terminal.stdin.write("\x1b[C");
+    await terminal.stdin.write("\x7f");
+    await terminal.stdin.write("\r");
+    await waitFor(() => coordinator.appState.queue.entries[0]?.track.title === "AB");
+
+    await terminal.stdin.write("e");
+    await terminal.stdin.write("\x7f".repeat("AB".length));
     await terminal.stdin.write("   ");
     await terminal.stdin.write("\r");
     expect(terminal.lastFrame()).toContain("Error: Track Title must not be empty");
@@ -1120,7 +1132,7 @@ describe("TMU top-level surface smoke", () => {
     await terminal.stdin.write("\r");
     await waitFor(() => terminal.lastFrame()!.includes("Error: cache is read-only"));
     expect(coordinator.uiState.renameDialog?.value).toBe("Cannot Save");
-    expect(coordinator.appState.queue.entries[0]?.track.title).toBe("Clear Name");
+    expect(coordinator.appState.queue.entries[0]?.track.title).toBe("AB");
     await terminal.stdin.write("\x1b");
     expect(coordinator.uiState.renameDialog).toBeNull();
   });

tests/youtube-cache-provider.test.ts

@@ -87,7 +87,7 @@ describe("YouTubeCacheProvider", () => {
       expect(provider.searchTracks("bad download")).toEqual([]);
       expect(JSON.parse(await readFile(join(dir, "rename00001.json"), "utf8"))).toMatchObject({
         title: "Bad Download Name",
-        customTitle: "Clear Track Name",
+        trackTitleOverride: "Clear Track Name",
         mediaFileName: "rename00001.opus",
       });