Refactor settings

src/games/storywriter/components/app.tsx

@@ -1,8 +1,8 @@
-import { Editor } from "./editor";
-import { ChatSidebar } from "./chat-sidebar";
 import { Title } from "@common/components/Title";
-import { useAppState } from "../contexts/state";
 import styles from '../assets/app.module.css';
+import { useAppState } from "../contexts/state";
+import { ChatSidebar } from "./chat-sidebar";
+import { Editor } from "./editor";
 
 export const App = () => {
     const { currentStory } = useAppState();

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

@@ -1,17 +1,17 @@
-import { useInputState } from "@common/hooks/useInputState";
+import { ContentEditable } from "@common/components/ContentEditable";
 import { highlight } from "@common/highlight";
-import { Sidebar } from "./sidebar";
-import { useAppState, type ChatMessage } from "../contexts/state";
-import { useChapterSummarization } from "../utils/useChapterSummarization";
+import { useInputState } from "@common/hooks/useInputState";
+import clsx from "clsx";
+import { Check, ChevronsRight, Edit2, RefreshCw, Sparkles, Trash2, X } from "lucide-preact";
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import styles from '../assets/chat-sidebar.module.css';
 import sidebarStyles from '../assets/sidebar.module.css';
-import { useState, useRef, useEffect, useMemo, useCallback } from "preact/hooks";
+import { useAppState, type ChatMessage } from "../contexts/state";
 import LLM from "../utils/llm";
 import Prompt from "../utils/prompt";
 import { Tools } from "../utils/tools";
-import { Sparkles, ChevronsRight, Trash2, Edit2, Check, X, RefreshCw } from "lucide-preact";
-import clsx from "clsx";
-import { ContentEditable } from "@common/components/ContentEditable";
+import { useChapterSummarization } from "../utils/useChapterSummarization";
+import { Sidebar } from "./sidebar";
 
 const CONTINUE_PROMPT = "Continue the story naturally.\nUse `edit_text` tool in append mode to add new text to the story.\nWait for the approval after adding.\nNote: added text could be cropped due to limit, do not make any attempts to add it back.";
 

src/games/storywriter/components/editor.tsx

@@ -1,18 +1,18 @@
 import { ContentEditable } from "@common/components/ContentEditable";
 import { highlight } from "@common/highlight";
-import { useAppState, type Tab } from "../contexts/state";
-import styles from '../assets/editor.module.css';
-import { useMemo, useRef, useEffect } from "preact/hooks";
+import { useInputCallback } from "@common/hooks/useInputCallback";
 import clsx from "clsx";
+import { BookMarked, BookOpen, BrainCircuit, Code, FileText, Globe, Layers, List, MapPin, MessageSquare, MessagesSquare, Users, type LucideIcon } from "lucide-preact";
+import { useEffect, useMemo, useRef } from "preact/hooks";
+import styles from '../assets/editor.module.css';
+import { useAppState, type Tab } from "../contexts/state";
+import Prompt from "../utils/prompt";
+import { ChatPanel } from "./chat-sidebar";
+import { ChaptersEditor } from "./editors/chapters";
 import { CharacterEditor } from "./editors/character";
 import { LocationEditor } from "./editors/location";
-import { ChaptersEditor } from "./editors/chapters";
 import { LoreEditor } from "./editors/lore";
 import { Menu } from "./menu";
-import { ChatPanel } from "./chat-sidebar";
-import { useInputCallback } from "@common/hooks/useInputCallback";
-import Prompt from "../utils/prompt";
-import { BookOpen, List, Users, MapPin, BookMarked, FileText, Code, Layers, MessageSquare, Globe, BrainCircuit, MessagesSquare, type LucideIcon } from "lucide-preact";
 
 // Tabs available when a story is selected (regular world)
 const STORY_TABS: { id: Tab; label: string; icon: LucideIcon; right?: boolean }[] = [

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

@@ -1,9 +1,9 @@
-import { useMemo } from "preact/hooks";
 import { ContentEditable } from "@common/components/ContentEditable";
 import { highlight } from "@common/highlight";
+import { useMemo } from "preact/hooks";
+import styles from "../../assets/chapters-editor.module.css";
 import { useAppState } from "../../contexts/state";
 import Chapters from "../../utils/chapters";
-import styles from "../../assets/chapters-editor.module.css";
 
 export const ChaptersEditor = () => {
     const { currentWorld, currentStory, dispatch } = useAppState();

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

@@ -1,7 +1,8 @@
 
+import { ContentEditable } from "@common/components/ContentEditable";
 import { useState } from "preact/hooks";
-import { ContentEditable } from "@common/components/ContentEditable";import { CharacterRole, useAppState, type Character } from "../../contexts/state";
 import styles from '../../assets/character-editor.module.css';
+import { CharacterRole, useAppState, type Character } from "../../contexts/state";
 import LLM from "../../utils/llm";
 
 export const CharacterEditor = () => {

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

@@ -1,7 +1,7 @@
 import { ContentEditable } from "@common/components/ContentEditable";
-import { useAppState, type Location, LocationScale } from "../../contexts/state";
 import { useState } from "preact/hooks";
 import styles from '../../assets/location-editor.module.css';
+import { LocationScale, useAppState, type Location } from "../../contexts/state";
 import LLM from "../../utils/llm";
 
 export const LocationEditor = () => {

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

@@ -1,7 +1,7 @@
 import { ContentEditable } from "@common/components/ContentEditable";
 import { useState } from "preact/hooks";
-import { useAppState, type LoreEntry } from "../../contexts/state";
 import styles from '../../assets/lore-editor.module.css';
+import { useAppState, type LoreEntry } from "../../contexts/state";
 
 export const LoreEditor = () => {
     const { currentWorld, currentStory, dispatch } = useAppState();

src/games/storywriter/components/menu.tsx

@@ -1,13 +1,12 @@
-import clsx from "clsx";
-import { SettingsModal } from "./settings-modal";
-import { useAppState } from "../contexts/state";
 import { useBool } from "@common/hooks/useBool";
 import { useInputState } from "@common/hooks/useInputState";
-import type { World, Story } from "../contexts/state";
-import { isWorld } from "../contexts/state";
-import CharacterCard from "../utils/character-card";
+import clsx from "clsx";
+import { ChevronDown, ChevronRight, Copy, Download, Globe, MessageSquarePlus, MessagesSquare, Pencil, Plus, Settings, Upload, X } from "lucide-preact";
 import styles from '../assets/menu.module.css';
-import { Pencil, X, Plus, Settings, Copy, ChevronRight, ChevronDown, Globe, Download, Upload, MessagesSquare, MessageSquarePlus } from "lucide-preact";
+import type { Story, World } from "../contexts/state";
+import { isWorld, useAppState } from "../contexts/state";
+import CharacterCard from "../utils/character-card";
+import { SettingsModal } from "./settings-modal";
 
 // ─── Inline Rename Input ──────────────────────────────────────────────────────
 

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

@@ -1,11 +1,10 @@
 import clsx from "clsx";
-import { useState } from "preact/hooks";
-
-import styles from "../assets/settings-modal.module.css";
 import { X } from "lucide-preact";
+import { useState } from "preact/hooks";
+import styles from "../assets/settings-modal.module.css";
 import { BannedTokensSettings } from "./settings/banned-tokens";
-import { SystemInstructionSettings } from "./settings/system-instruction";
 import { ConnectionSettings } from "./settings/connection";
+import { SystemInstructionSettings } from "./settings/system-instruction";
 
 interface Props {
     onClose: () => void;

src/games/storywriter/components/settings/banned-tokens.tsx

@@ -1,10 +1,8 @@
-import clsx from "clsx";
-import { useState } from "preact/hooks";
-
 import { useInputState } from "@common/hooks/useInputState";
-import { useAppState } from "../../contexts/state";
-import styles from "../../assets/settings-modal.module.css";
+import clsx from "clsx";
 import { X } from "lucide-preact";
+import styles from "../../assets/settings-modal.module.css";
+import { useAppState } from "../../contexts/state";
 
 interface Props {
     onClose: () => void;

src/games/storywriter/components/settings/connection.tsx

@@ -1,10 +1,9 @@
-import { useMemo, useRef } from "preact/hooks";
-
-import { useInputState } from "@common/hooks/useInputState";
 import { useQuery } from "@common/hooks/useAsyncState";
+import { useInputState } from "@common/hooks/useInputState";
 import { useUpdate } from "@common/hooks/useUpdate";
-import { useAppState } from "../../contexts/state";
+import { useMemo, useRef } from "preact/hooks";
 import styles from "../../assets/settings-modal.module.css";
+import { useAppState } from "../../contexts/state";
 import LLM from "../../utils/llm";
 
 export const ConnectionSettings = () => {

src/games/storywriter/components/settings/system-instruction.tsx

@@ -1,10 +1,9 @@
-import clsx from "clsx";
-
-import { useInputCallback } from "@common/hooks/useInputCallback";
 import { ContentEditable } from "@common/components/ContentEditable";
 import { highlight } from "@common/highlight";
-import { useAppState } from "../../contexts/state";
+import { useInputCallback } from "@common/hooks/useInputCallback";
+import clsx from "clsx";
 import styles from "../../assets/settings-modal.module.css";
+import { useAppState } from "../../contexts/state";
 
 export const SystemInstructionSettings = () => {
     const { systemInstruction, dispatch } = useAppState();

src/games/storywriter/components/sidebar.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
+import { PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from "lucide-preact";
 import type { ComponentChildren } from "preact";
 import styles from '../assets/sidebar.module.css';
-import { PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from "lucide-preact";
 
 interface Props {
     side: 'left' | 'right';

src/games/storywriter/contexts/state.tsx

@@ -1,9 +1,8 @@
+import { useStoredReducer } from "@common/hooks/useStored";
 import { createContext } from "preact";
 import { useContext, useMemo } from "preact/hooks";
-import { useStoredReducer } from "@common/hooks/useStored";
-
-import LLM from "../utils/llm";
 import Chapters from "../utils/chapters";
+import LLM from "../utils/llm";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 

src/games/storywriter/index.tsx

@@ -1,6 +1,6 @@
 import { render } from "preact";
-import { StateContextProvider } from "./contexts/state";
 import { App } from "./components/app";
+import { StateContextProvider } from "./contexts/state";
 
 import './assets/style.css';
 

src/games/storywriter/utils/character-card.ts

@@ -1,4 +1,4 @@
-import type { World, Story } from "../contexts/state";
+import type { Story, World } from "../contexts/state";
 
 // ─── Spec Types ───────────────────────────────────────────────────────────────
 

src/games/storywriter/utils/prompt.ts

@@ -1,6 +1,6 @@
-import LLM from "./llm";
-import Chapters from "./chapters";
 import { type AppState, CharacterRole, type ChatMessage } from "../contexts/state";
+import Chapters from "./chapters";
+import LLM from "./llm";
 import { Tools } from "./tools";
 
 namespace Prompt {