Settings placeholder

src/games/storywriter/assets/menu-sidebar.module.css

@@ -100,3 +100,21 @@
     color: var(--text);
     border-radius: 4px;
 }
+
+.settingsButton {
+    margin-top: auto;
+    padding: 6px 8px;
+    font-size: 13px;
+    color: var(--text-muted);
+    background: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    text-align: left;
+    border-radius: 4px;
+
+    &:hover {
+        color: var(--text);
+        background: var(--bg-hover);
+    }
+}

src/games/storywriter/assets/settings-modal.module.css

@@ -0,0 +1,63 @@
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.modal {
+    background: var(--bg);
+    border-radius: 8px;
+    width: 90%;
+    max-width: 500px;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border);
+}
+
+.title {
+    font-size: 18px;
+    font-weight: bold;
+    color: var(--text);
+    margin: 0;
+}
+
+.closeButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    font-size: 20px;
+    color: var(--text-muted);
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:hover {
+        color: var(--text);
+        background: var(--bg-hover);
+    }
+}
+
+.content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+}

src/games/storywriter/components/menu-sidebar.tsx

@@ -1,6 +1,8 @@
 import clsx from "clsx";
 import { Sidebar } from "./sidebar";
+import { SettingsModal } from "./settings-modal";
 import { useAppState } from "../contexts/state";
+import { useBool } from "@common/hooks/useBool";
 import type { Story } from "../contexts/state";
 import styles from '../assets/menu-sidebar.module.css';
 import { useState } from "preact/hooks";
@@ -78,6 +80,7 @@ const StoryItem = ({ story, active, onSelect, onRename, onDelete }: StoryItemPro
 
 export const MenuSidebar = () => {
     const { stories, currentStory, dispatch } = useAppState();
+    const isSettingsOpen = useBool(false);
 
     const handleCreate = () => {
         dispatch({ type: 'CREATE_STORY', title: 'New Story' });
@@ -117,7 +120,13 @@ export const MenuSidebar = () => {
                         />
                     ))}
                 </div>
+                <button class={styles.settingsButton} onClick={isSettingsOpen.toggle}>
+                    ⚙ Settings
+                </button>
             </div>
+            {isSettingsOpen.value && (
+                <SettingsModal onClose={isSettingsOpen.toggle} />
+            )}
         </Sidebar>
     );
 };

src/games/storywriter/components/settings-modal.tsx

@@ -0,0 +1,23 @@
+import styles from '../assets/settings-modal.module.css';
+
+interface Props {
+    onClose: () => void;
+}
+
+export const SettingsModal = ({ onClose }: Props) => {
+    return (
+        <div class={styles.overlay} onClick={onClose}>
+            <div class={styles.modal} onClick={(e) => e.stopPropagation()}>
+                <div class={styles.header}>
+                    <h2 class={styles.title}>Settings</h2>
+                    <button class={styles.closeButton} onClick={onClose}>
+                        ×
+                    </button>
+                </div>
+                <div class={styles.content}>
+                    <p>Settings plceholder</p>
+                </div>
+            </div>
+        </div>
+    );
+};

src/games/storywriter/components/sidebar.tsx

@@ -1,11 +1,11 @@
 import clsx from "clsx";
-import type { JSX } from "preact";
+import type { ComponentChildren } from "preact";
 import { useBool } from "@common/hooks/useBool";
 import styles from '../assets/sidebar.module.css';
 
 interface Props {
     side: 'left' | 'right';
-    children?: JSX.Element | JSX.Element[];
+    children?: ComponentChildren;
 }
 
 export const Sidebar = ({ side, children }: Props) => {