UI fixes

build/server.ts

@@ -59,7 +59,7 @@ Bun.serve<ClientData>({
                 clients.delete(ws);
                 if (clients.size === 0) wsClients.delete(game);
             }
-            console.log(`[css-hot] ${game} disconnected (${wsClients.get(game)!.size} clients)`);
+            console.log(`[css-hot] ${game} disconnected (${wsClients.get(game)?.size ?? 0} clients)`);
         },
         message() { },
     },

src/common/assets/ui.module.css

@@ -99,8 +99,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 28px;
-    height: 28px;
+    width: 36px;
+    height: 36px;
     background: transparent;
     border: 1px solid var(--border);
     border-radius: var(--radius);

src/games/storywriter/assets/character-editor.module.css

@@ -85,10 +85,10 @@
 
 .deleteButton {
     composes: deleteButton from '@common/assets/ui.module.css';
-    width: 32px;
-    height: 32px;
+    height: 36px;
+    min-width: 36px;
     border-radius: 6px;
-    font-size: 20px;
+    font-size: 22px;
 }
 
 .field {

src/games/storywriter/assets/location-editor.module.css

@@ -85,10 +85,10 @@
 
 .deleteButton {
     composes: deleteButton from '@common/assets/ui.module.css';
-    width: 32px;
-    height: 32px;
+    height: 36px;
+    min-width: 36px;
     border-radius: 6px;
-    font-size: 20px;
+    font-size: 22px;
 }
 
 .field {

src/games/storywriter/assets/lore-editor.module.css

@@ -10,6 +10,23 @@
     composes: editorHeader from '@common/assets/ui.module.css';
 }
 
+@media (max-width: 1000px) {
+    .header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+    }
+
+    .addEntry {
+        width: 100%;
+    }
+
+    .titleInput {
+        flex: 1;
+        width: auto;
+    }
+}
+
 .header h2 {
     margin: 0;
     font-size: 24px;
@@ -119,6 +136,30 @@
     font-size: 18px;
 }
 
+.deleteConfirm {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    background: var(--bg-panel);
+    border: 1px solid var(--accent);
+    border-radius: var(--radius);
+    font-size: 13px;
+
+    & span {
+        font-weight: 500;
+        color: var(--accent);
+    }
+}
+
+.confirmButton {
+    composes: confirmButton from '@common/assets/ui.module.css';
+}
+
+.cancelButton {
+    composes: cancelButton from '@common/assets/ui.module.css';
+}
+
 .content {
     min-height: 80px;
 }

src/games/storywriter/components/editors/character.tsx

@@ -5,8 +5,6 @@ import styles from '../../assets/character-editor.module.css';
 import { CharacterRole, useAppState, type Character } from "../../contexts/state";
 import LLM from "../../utils/llm";
 
-// TODO fix delete button size
-
 export const CharacterEditor = ({ visible }: { visible: boolean }) => {
     const { currentWorld, currentStory, mergedCharacters, dispatch, connection, model } = useAppState();
     const [newNickname, setNewNickname] = useState<Record<string, string>>({});

src/games/storywriter/components/editors/location.tsx

@@ -4,8 +4,6 @@ import styles from '../../assets/location-editor.module.css';
 import { LocationScale, useAppState, type Location } from "../../contexts/state";
 import LLM from "../../utils/llm";
 
-// TODO fix delete button size
-
 export const LocationEditor = ({ visible }: { visible: boolean }) => {
     const { currentWorld, currentStory, dispatch, connection, model } = useAppState();
     const [showDeleteConfirm, setShowDeleteConfirm] = useState<string | null>(null);

src/games/storywriter/components/editors/lore.tsx

@@ -3,13 +3,11 @@ import { useState } from "preact/hooks";
 import styles from '../../assets/lore-editor.module.css';
 import { useAppState, type LoreEntry } from "../../contexts/state";
 
-// TODO move adding ui below title on mobile
-// TODO add confirm to delete
-
 export const LoreEditor = ({ visible }: { visible: boolean }) => {
     const { currentWorld, currentStory, dispatch } = useAppState();
     const [editingId, setEditingId] = useState<string | null>(null);
     const [newTitle, setNewTitle] = useState('');
+    const [showDeleteConfirm, setShowDeleteConfirm] = useState<string | null>(null);
 
     if (!currentWorld || !visible) {
         return null;
@@ -157,13 +155,34 @@ export const LoreEditor = ({ visible }: { visible: boolean }) => {
                                 >
                                     ↓
                                 </button>
+                                {showDeleteConfirm === entry.id ? (
+                                    <div class={styles.deleteConfirm}>
+                                        <span>Delete?</span>
+                                        <button
+                                            class={styles.confirmButton}
+                                            onClick={() => {
+                                                handleDeleteEntry(entry.id);
+                                                setShowDeleteConfirm(null);
+                                            }}
+                                        >
+                                            Yes
+                                        </button>
+                                        <button
+                                            class={styles.cancelButton}
+                                            onClick={() => setShowDeleteConfirm(null)}
+                                        >
+                                            No
+                                        </button>
+                                    </div>
+                                ) : (
                                     <button
                                         class={styles.deleteButton}
-                                    onClick={() => handleDeleteEntry(entry.id)}
+                                        onClick={() => setShowDeleteConfirm(entry.id)}
                                         title="Delete"
                                     >
                                         ×
                                     </button>
+                                )}
                             </div>
                         </div>