Merge pull request #442 from bcorfman/yamlfilename

Added YAML filename persist

Author: bcorfman

src/app/layout.css

@@ -583,6 +583,30 @@ textarea:focus-visible {
   justify-self: center;
 }
 
+.viewbar-yaml-group {
+  position: relative;
+}
+
+.viewbar-yaml-file-label {
+  position: absolute;
+  top: 50%;
+  right: calc(100% + 0.55rem);
+  transform: translateY(-50%);
+  width: 12rem;
+  text-align: right;
+  color: var(--muted);
+  font-size: 0.8rem;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+
+.viewbar-yaml-file-label-hidden {
+  visibility: hidden;
+}
+
 .section-title,
 .panel-title,
 .section-subtitle {

src/editor/ViewbarYamlControls.tsx

@@ -13,6 +13,7 @@ type ViewbarYamlControlsViewProps = {
 
 export function ViewbarYamlControlsView({ project, dispatch }: ViewbarYamlControlsViewProps) {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const yamlFileLabel = getYamlFileSourceLabel();
 
   const openFromPicker = async () => {
     dispatch({ type: 'set-error', error: undefined });
@@ -95,11 +96,14 @@ export function ViewbarYamlControlsView({ project, dispatch }: ViewbarYamlContro
   const saveAs = async () => {
     dispatch({ type: 'set-error', error: undefined });
     try {
-      const result = await exportYamlToDisk(serializeProjectToYaml(project), { startIn: getYamlPickerStartIn() });
+      const result = await exportYamlToDisk(serializeProjectToYaml(project), {
+        suggestedName: yamlFileLabel ?? 'scene.yaml',
+        startIn: getYamlPickerStartIn(),
+      });
       if (result.kind === 'saved') {
         setYamlPickerStartIn(result.handle);
         setYamlFileHandle(result.handle);
-        setYamlFileSourceLabel(getYamlFileSourceLabel() ?? 'scene.yaml');
+        setYamlFileSourceLabel(result.label);
         dispatch({ type: 'mark-saved' });
         dispatch({ type: 'set-status', message: 'Saved YAML', expiresAt: Date.now() + 4000 });
       } else {
@@ -115,7 +119,16 @@ export function ViewbarYamlControlsView({ project, dispatch }: ViewbarYamlContro
 
   return (
     <div className="viewbar-yaml" role="toolbar" aria-label="YAML file actions">
-      <div className="viewbar-group">
+      <div className="viewbar-group viewbar-yaml-group">
+        {yamlFileLabel ? (
+          <span className="viewbar-yaml-file-label" data-testid="yaml-file-label" title={yamlFileLabel}>
+            {yamlFileLabel}
+          </span>
+        ) : (
+          <span className="viewbar-yaml-file-label viewbar-yaml-file-label-hidden" data-testid="yaml-file-label-hidden" aria-hidden="true">
+            scene.yaml
+          </span>
+        )}
         <button className="button" type="button" data-testid="yaml-open-button" onClick={() => void openFromPicker()}>
           Open YAML…
         </button>

src/editor/yamlFileExport.ts

@@ -6,7 +6,7 @@ function getSaveFilePicker(): FilePickerLike | null {
   return typeof picker === 'function' ? (picker as FilePickerLike) : null;
 }
 
-export type YamlExportResult = { kind: 'saved'; handle: any } | { kind: 'downloaded' };
+export type YamlExportResult = { kind: 'saved'; handle: any; label: string } | { kind: 'downloaded' };
 
 export async function exportYamlToDisk(
   yaml: string,
@@ -31,7 +31,8 @@ export async function exportYamlToDisk(
     const writable = await handle.createWritable();
     await writable.write(yaml);
     await writable.close();
-    return { kind: 'saved', handle };
+    const label = typeof handle?.name === 'string' && handle.name.trim().length > 0 ? handle.name : suggestedName;
+    return { kind: 'saved', handle, label };
   }
 
   if (typeof document === 'undefined') throw new Error('Document unavailable for download fallback');

src/editor/yamlPickerState.ts

@@ -1,6 +1,31 @@
 let lastStartInHandle: any | undefined;
 let lastYamlFileHandle: any | undefined;
-let lastYamlFileSourceLabel: string | undefined;
+const YAML_FILE_SOURCE_LABEL_STORAGE_KEY = 'phaserforge:last-yaml-file-label';
+
+function readStoredYamlFileSourceLabel(): string | undefined {
+  if (typeof window === 'undefined' || !('localStorage' in window)) return undefined;
+  try {
+    const stored = window.localStorage.getItem(YAML_FILE_SOURCE_LABEL_STORAGE_KEY);
+    return stored && stored.trim().length > 0 ? stored : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function writeStoredYamlFileSourceLabel(label: string | undefined): void {
+  if (typeof window === 'undefined' || !('localStorage' in window)) return;
+  try {
+    if (label && label.trim().length > 0) {
+      window.localStorage.setItem(YAML_FILE_SOURCE_LABEL_STORAGE_KEY, label);
+      return;
+    }
+    window.localStorage.removeItem(YAML_FILE_SOURCE_LABEL_STORAGE_KEY);
+  } catch {
+    // Ignore storage failures so file actions keep working in restricted environments.
+  }
+}
+
+let lastYamlFileSourceLabel: string | undefined = readStoredYamlFileSourceLabel();
 
 export function getYamlPickerStartIn(): any | undefined {
   return lastStartInHandle;
@@ -24,4 +49,5 @@ export function getYamlFileSourceLabel(): string | undefined {
 
 export function setYamlFileSourceLabel(label: string | undefined): void {
   lastYamlFileSourceLabel = label;
+  writeStoredYamlFileSourceLabel(label);
 }

tests/editor/viewbar-yaml-controls.test.tsx

@@ -132,4 +132,40 @@ describe('ViewbarYamlControls', () => {
       expiresAt: 1_700_000_004_000,
     });
   });
+
+  it('shows the persisted filename label without shifting the save buttons', () => {
+    yamlControlsStore.state.project = sampleProject;
+    yamlPickerState.setLabel('level-01.yaml');
+
+    render(<ViewbarYamlControls />);
+
+    expect(screen.getByTestId('yaml-file-label').textContent).toBe('level-01.yaml');
+    expect(screen.queryByTestId('yaml-file-label-hidden')).toBeNull();
+  });
+
+  it('hides the filename label until a filename exists', () => {
+    yamlControlsStore.state.project = sampleProject;
+
+    render(<ViewbarYamlControls />);
+
+    expect(screen.queryByTestId('yaml-file-label')).toBeNull();
+    expect(screen.getByTestId('yaml-file-label-hidden')).not.toBeNull();
+  });
+
+  it('stores the chosen filename immediately after first save-as so it is visible for later saves', async () => {
+    yamlControlsStore.state.project = sampleProject;
+    const handle = { id: 'save-handle', name: 'first-save.yaml' };
+    yamlIoMocks.exportYamlToDisk.mockResolvedValue({ kind: 'saved', handle, label: 'first-save.yaml' });
+
+    render(<ViewbarYamlControls />);
+    const user = userEvent.setup();
+    await user.click(screen.getByTestId('yaml-save-button'));
+
+    expect(yamlIoMocks.exportYamlToDisk).toHaveBeenCalledWith(
+      serializeProjectToYaml(sampleProject),
+      expect.objectContaining({ suggestedName: 'scene.yaml', startIn: undefined }),
+    );
+    expect(yamlPickerState.setHandle).toHaveBeenCalledWith(handle);
+    expect(yamlPickerState.setLabel).toHaveBeenCalledWith('first-save.yaml');
+  });
 });

tests/editor/yaml-picker-state.test.ts

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+const storage = (() => {
+  const values = new Map<string, string>();
+  return {
+    getItem: vi.fn((key: string) => values.get(key) ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      values.set(key, value);
+    }),
+    removeItem: vi.fn((key: string) => {
+      values.delete(key);
+    }),
+    clear: vi.fn(() => {
+      values.clear();
+    }),
+  };
+})();
+
+const loadModule = async () => import('../../src/editor/yamlPickerState');
+
+describe('yamlPickerState', () => {
+  afterEach(() => {
+    Object.defineProperty(window, 'localStorage', {
+      configurable: true,
+      value: storage,
+    });
+    storage.clear();
+    storage.getItem.mockClear();
+    storage.setItem.mockClear();
+    storage.removeItem.mockClear();
+    storage.clear.mockClear();
+    vi.resetModules();
+  });
+
+  it('persists the YAML filename label in localStorage', async () => {
+    Object.defineProperty(window, 'localStorage', {
+      configurable: true,
+      value: storage,
+    });
+    const state = await loadModule();
+
+    state.setYamlFileSourceLabel('persisted-name.yaml');
+
+    expect(storage.setItem).toHaveBeenCalledWith('phaserforge:last-yaml-file-label', 'persisted-name.yaml');
+  });
+
+  it('restores the YAML filename label from localStorage after reload', async () => {
+    Object.defineProperty(window, 'localStorage', {
+      configurable: true,
+      value: storage,
+    });
+    storage.setItem('phaserforge:last-yaml-file-label', 'restored-name.yaml');
+
+    const state = await loadModule();
+
+    expect(state.getYamlFileSourceLabel()).toBe('restored-name.yaml');
+  });
+});