fix(ui): polish editor layouts and confirm scene delete

Stretch key action buttons, center empty audio/image pickers, and require confirmation before deleting a scene.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/renderer/editor/EditorApp.module.css

@@ -62,8 +62,9 @@
 .editorSidebar {
   height: 100%;
   min-height: 0;
-  display: grid;
-  grid-template-rows: auto 1fr;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
   padding: 12px;
   border-right: 1px solid var(--stroke);
   background: var(--editor-column-bg);
@@ -105,10 +106,25 @@
 .gridTools {
   display: grid;
   gap: 10px;
+  flex: 0 0 auto;
+}
+
+.gridTools > * {
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  box-sizing: border-box;
+}
+
+.gridTools button {
+  width: 100%;
+  box-sizing: border-box;
+  flex: 1;
 }
 
 .spacer14 {
   height: 14px;
+  flex: 0 0 auto;
 }
 
 .spacer18 {
@@ -124,17 +140,28 @@
 .gamePropsButtons > * {
   width: 100%;
   min-width: 0;
+  max-width: 100%;
+  display: flex;
+  box-sizing: border-box;
+}
+
+.gamePropsButtons button {
+  width: 100%;
+  box-sizing: border-box;
+  flex: 1;
 }
 
 .sidebarScroll {
   overflow: auto;
   padding-right: 2px;
   min-height: 0;
+  flex: 1 1 auto;
   align-self: stretch;
 }
 
 .sceneListGrid {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 12px;
   align-content: start;
   justify-items: stretch;
@@ -192,15 +219,19 @@
 .progressModal {
   width: min(520px, calc(100vw - 32px));
   border-radius: 12px;
-  padding: 14px;
+  padding: 16px 16px 20px;
   background: rgba(25, 28, 38, 0.92);
   border: 1px solid rgba(255, 255, 255, 0.12);
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
+  display: grid;
+  gap: 12px;
+  justify-items: center;
 }
 
 .progressTitle {
   font-weight: 700;
-  margin-bottom: 10px;
+  width: 100%;
+  text-align: center;
 }
 
 .progressBar {
@@ -209,6 +240,7 @@
   overflow: hidden;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.1);
+  width: 100%;
 }
 
 .progressFill {
@@ -218,11 +250,13 @@
 }
 
 .progressMeta {
-  margin-top: 10px;
+  margin-top: 0;
   display: flex;
   justify-content: space-between;
+  gap: 12px;
   opacity: 0.9;
   font-size: 12px;
+  width: 100%;
 }
 
 .inspectorTitle {
@@ -610,6 +644,23 @@
   gap: 10px;
 }
 
+.projectPickerForm > * {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.projectPickerForm > *:has(button),
+.projectPickerForm > span {
+  display: flex;
+}
+
+.projectPickerForm button {
+  width: 100%;
+  box-sizing: border-box;
+  flex: 1;
+}
+
 .spacer6 {
   height: 6px;
 }
@@ -918,6 +969,21 @@
     background 0.15s ease;
 }
 
+.audioDropEmpty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 96px;
+  text-align: center;
+  padding: 8px 4px;
+}
+
+.audioDropEmpty > * {
+  max-width: 100%;
+}
+
 .audioDropDragOver {
   border-color: var(--accent);
   background: var(--accent-fill-soft);

app/renderer/editor/EditorApp.tsx

@@ -2380,8 +2380,12 @@ function CampaignInspector({
           <div className={styles.dropHintOverlay}>{t('drop.hintAudio')}</div>
         ) : null}
         {mediaAssets.filter((a) => a.type === 'audio').length === 0 ? (
+          <div className={styles.audioDropEmpty}>
             <div className={[styles.muted, styles.spanSm].join(' ')}>{t('campaign.noFiles')}</div>
+            <Button onClick={onUploadAudio}>{t('campaign.upload')}</Button>
+          </div>
         ) : (
+          <>
             <div className={styles.audioList}>
               {mediaAssets
                 .filter((a) => a.type === 'audio')
@@ -2440,8 +2444,9 @@ function CampaignInspector({
                   </div>
                 ))}
             </div>
-        )}
             <Button onClick={onUploadAudio}>{t('campaign.upload')}</Button>
+          </>
+        )}
       </div>
     </div>
   );
@@ -2653,8 +2658,12 @@ function SceneInspector({
           <div className={styles.dropHintOverlay}>{t('drop.hintAudio')}</div>
         ) : null}
         {mediaAssets.filter((a) => a.type === 'audio').length === 0 ? (
+          <div className={styles.audioDropEmpty}>
             <div className={[styles.muted, styles.spanSm].join(' ')}>{t('campaign.noFiles')}</div>
+            <Button onClick={onUploadMedia}>{t('campaign.upload')}</Button>
+          </div>
         ) : (
+          <>
             <div className={styles.audioList}>
               {mediaAssets
                 .filter((a) => a.type === 'audio')
@@ -2713,8 +2722,9 @@ function SceneInspector({
                   </div>
                 ))}
             </div>
-        )}
             <Button onClick={onUploadMedia}>{t('campaign.upload')}</Button>
+          </>
+        )}
       </div>
       <div className={styles.spacer6} />
       <div className={styles.labelSm}>{t('scene.branching')}</div>
@@ -2754,6 +2764,7 @@ function SceneListCard({
   const thumbUrl = useAssetUrl(scene.previewThumbAssetId);
   const previewUrl = useAssetUrl(scene.previewAssetId);
   const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);
+  const [pendingDelete, setPendingDelete] = useState(false);
 
   useEffect(() => {
     if (!menu) return;
@@ -2909,8 +2920,8 @@ function SceneListCard({
                   role="menuitem"
                   className={styles.sceneCtxDanger}
                   onClick={() => {
-                    onDeleteScene(scene.id);
                     setMenu(null);
+                    setPendingDelete(true);
                   }}
                 >
                   {t('common.delete')}
@@ -2920,6 +2931,49 @@ function SceneListCard({
             document.body,
           )
         : null}
+      {pendingDelete
+        ? createPortal(
+            <>
+              <button
+                type="button"
+                aria-label={t('common.close')}
+                className={styles.modalBackdrop}
+                onClick={() => setPendingDelete(false)}
+              />
+              <div role="dialog" aria-modal="true" className={styles.modalDialog}>
+                <div className={styles.modalHeader}>
+                  <div className={styles.modalTitle}>{t('confirmDeleteScene.title')}</div>
+                  <button
+                    type="button"
+                    aria-label={t('common.close')}
+                    className={styles.modalClose}
+                    onClick={() => setPendingDelete(false)}
+                  >
+                    ×
+                  </button>
+                </div>
+                <div className={styles.fieldGrid}>
+                  <div className={styles.muted}>
+                    {t('confirmDeleteScene.body', { name: scene.title })}
+                  </div>
+                </div>
+                <div className={styles.modalFooter}>
+                  <Button onClick={() => setPendingDelete(false)}>{t('common.cancel')}</Button>
+                  <Button
+                    variant="primary"
+                    onClick={() => {
+                      setPendingDelete(false);
+                      onDeleteScene(scene.id);
+                    }}
+                  >
+                    {t('common.delete')}
+                  </Button>
+                </div>
+              </div>
+            </>,
+            document.body,
+          )
+        : null}
     </div>
   );
 }

app/renderer/editor/MaterialsBrowser.tsx

@@ -114,9 +114,11 @@ export function MaterialsBrowser({
         <div className={matStyles.side}>
           <Input value={query} onChange={setQuery} placeholder={t('materials.search')} />
           {mode === 'editor' && onAdd ? (
+            <div className={matStyles.sideAddBtn}>
               <Button variant="primary" onClick={onAdd}>
                 {t('materials.add')}
               </Button>
+            </div>
           ) : null}
           <div className={matStyles.list}>
             {filtered.map((m) => (

app/renderer/editor/MaterialsModals.module.css

@@ -74,6 +74,24 @@
   overflow: hidden;
 }
 
+.sideAddBtn {
+  width: 100%;
+  flex: 0 0 auto;
+}
+
+.sideAddBtn > * {
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  box-sizing: border-box;
+}
+
+.sideAddBtn button {
+  width: 100%;
+  box-sizing: border-box;
+  flex: 1;
+}
+
 .list {
   display: grid;
   gap: 8px;
@@ -245,6 +263,21 @@
   position: relative;
 }
 
+.imageDropEmpty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 112px;
+  text-align: center;
+  padding: 8px 4px;
+}
+
+.imageDropEmpty > * {
+  max-width: 100%;
+}
+
 .imageDropOver {
   border-color: var(--color-accent, #a78bfa);
 }

app/renderer/editor/MaterialsModals.tsx

@@ -180,8 +180,8 @@ export function MaterialEditModal({
             {previewSrc ? (
               <img className={matStyles.previewThumb} src={previewSrc} alt="" />
             ) : (
+              <div className={matStyles.imageDropEmpty}>
                 <div className={styles.muted}>{t('materials.imageEmpty')}</div>
-            )}
                 <Button
                   disabled={saving}
                   onClick={() => {
@@ -195,6 +195,22 @@ export function MaterialEditModal({
                   {t('materials.chooseImage')}
                 </Button>
               </div>
+            )}
+            {previewSrc ? (
+              <Button
+                disabled={saving}
+                onClick={() => {
+                  void (async () => {
+                    const picked = await onPickImage();
+                    if (!picked) return;
+                    setPreviewFromPathAndUrl(picked.filePath, picked.previewDataUrl);
+                  })();
+                }}
+              >
+                {t('materials.chooseImage')}
+              </Button>
+            ) : null}
+          </div>
           {!hasImage ? <div className={styles.fieldError}>{t('materials.imageRequired')}</div> : null}
         </div>
 

app/renderer/editor/i18n/editorMessages.ts

@@ -349,6 +349,9 @@ export const EDITOR_MESSAGES: Record<EditorLocale, Record<string, string>> = {
     'confirmDelete.body': 'Удалить проект «{name}» безвозвратно? Файл и кэш будут стёрты с диска.',
     'confirmDelete.failedTitle': 'Не удалось удалить',
 
+    'confirmDeleteScene.title': 'Удаление сцены',
+    'confirmDeleteScene.body': 'Удалить сцену «{name}»? Её нельзя будет восстановить.',
+
     'picker.title': 'Проекты',
     'picker.newPlaceholder': 'Название нового проекта…',
     'picker.create': 'Создать проект',
@@ -911,6 +914,9 @@ export const EDITOR_MESSAGES: Record<EditorLocale, Record<string, string>> = {
       'Permanently delete project “{name}”? The file and cache will be removed from disk.',
     'confirmDelete.failedTitle': 'Could not delete',
 
+    'confirmDeleteScene.title': 'Delete scene',
+    'confirmDeleteScene.body': 'Delete scene “{name}”? This cannot be undone.',
+
     'picker.title': 'Projects',
     'picker.newPlaceholder': 'New project name…',
     'picker.create': 'Create project',

app/renderer/npcs/NpcEditModal.tsx

@@ -205,8 +205,8 @@ export function NpcEditModal({
             {previewSrc ? (
               <img className={matStyles.previewThumb} src={previewSrc} alt="" />
             ) : (
+              <div className={matStyles.imageDropEmpty}>
                 <div className={editorStyles.muted}>{t('npcs.avatarEmpty')}</div>
-            )}
                 <Button
                   onClick={() => {
                     void (async () => {
@@ -219,6 +219,21 @@ export function NpcEditModal({
                   {t('npcs.chooseAvatar')}
                 </Button>
               </div>
+            )}
+            {previewSrc ? (
+              <Button
+                onClick={() => {
+                  void (async () => {
+                    const picked = await onPickImage();
+                    if (!picked) return;
+                    setPreviewFromPathAndUrl(picked.filePath, picked.previewDataUrl);
+                  })();
+                }}
+              >
+                {t('npcs.chooseAvatar')}
+              </Button>
+            ) : null}
+          </div>
           {!hasImage ? <div className={editorStyles.fieldError}>{t('npcs.avatarRequired')}</div> : null}
         </div>
 

app/renderer/sceneEditor/SceneEditorApp.module.css

@@ -366,11 +366,20 @@
 .clearSceneBtn {
   width: 100%;
   box-sizing: border-box;
+  flex: 0 0 auto;
+}
+
+.clearSceneBtn > * {
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  box-sizing: border-box;
 }
 
 .clearSceneBtn button {
   width: 100%;
   box-sizing: border-box;
+  flex: 1;
 }
 
 .sceneToken {