From 6f100cac9720c7654952c4583474401b0fdf0d31 Mon Sep 17 00:00:00 2001 From: Pabloader Date: Wed, 8 Apr 2026 08:05:31 +0000 Subject: [PATCH] Refactor settings --- src/games/storywriter/components/app.tsx | 6 +++--- .../storywriter/components/chat-sidebar.tsx | 16 ++++++++-------- src/games/storywriter/components/editor.tsx | 16 ++++++++-------- .../storywriter/components/editors/chapters.tsx | 4 ++-- .../storywriter/components/editors/character.tsx | 3 ++- .../storywriter/components/editors/location.tsx | 2 +- .../storywriter/components/editors/lore.tsx | 2 +- src/games/storywriter/components/menu.tsx | 13 ++++++------- .../storywriter/components/settings-modal.tsx | 7 +++---- .../components/settings/banned-tokens.tsx | 8 +++----- .../components/settings/connection.tsx | 7 +++---- .../components/settings/system-instruction.tsx | 7 +++---- src/games/storywriter/components/sidebar.tsx | 2 +- src/games/storywriter/contexts/state.tsx | 5 ++--- src/games/storywriter/index.tsx | 2 +- src/games/storywriter/utils/character-card.ts | 2 +- src/games/storywriter/utils/prompt.ts | 4 ++-- 17 files changed, 50 insertions(+), 56 deletions(-) diff --git a/src/games/storywriter/components/app.tsx b/src/games/storywriter/components/app.tsx index 8829f34..65f621a 100644 --- a/src/games/storywriter/components/app.tsx +++ b/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(); diff --git a/src/games/storywriter/components/chat-sidebar.tsx b/src/games/storywriter/components/chat-sidebar.tsx index a6b5efa..6892950 100644 --- a/src/games/storywriter/components/chat-sidebar.tsx +++ b/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."; diff --git a/src/games/storywriter/components/editor.tsx b/src/games/storywriter/components/editor.tsx index 37dc1fb..68cc2e3 100644 --- a/src/games/storywriter/components/editor.tsx +++ b/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 }[] = [ diff --git a/src/games/storywriter/components/editors/chapters.tsx b/src/games/storywriter/components/editors/chapters.tsx index 0b45c09..f4795d2 100644 --- a/src/games/storywriter/components/editors/chapters.tsx +++ b/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(); diff --git a/src/games/storywriter/components/editors/character.tsx b/src/games/storywriter/components/editors/character.tsx index 483e447..2494cf5 100644 --- a/src/games/storywriter/components/editors/character.tsx +++ b/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 = () => { diff --git a/src/games/storywriter/components/editors/location.tsx b/src/games/storywriter/components/editors/location.tsx index 682f0f3..55c419f 100644 --- a/src/games/storywriter/components/editors/location.tsx +++ b/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 = () => { diff --git a/src/games/storywriter/components/editors/lore.tsx b/src/games/storywriter/components/editors/lore.tsx index dc71db3..73ce075 100644 --- a/src/games/storywriter/components/editors/lore.tsx +++ b/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(); diff --git a/src/games/storywriter/components/menu.tsx b/src/games/storywriter/components/menu.tsx index e6f9b4d..3572a88 100644 --- a/src/games/storywriter/components/menu.tsx +++ b/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 ────────────────────────────────────────────────────── diff --git a/src/games/storywriter/components/settings-modal.tsx b/src/games/storywriter/components/settings-modal.tsx index 0ad82d4..2c60e3c 100644 --- a/src/games/storywriter/components/settings-modal.tsx +++ b/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; diff --git a/src/games/storywriter/components/settings/banned-tokens.tsx b/src/games/storywriter/components/settings/banned-tokens.tsx index 274bff1..da4ed30 100644 --- a/src/games/storywriter/components/settings/banned-tokens.tsx +++ b/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; diff --git a/src/games/storywriter/components/settings/connection.tsx b/src/games/storywriter/components/settings/connection.tsx index 2915cc4..f0a3ce5 100644 --- a/src/games/storywriter/components/settings/connection.tsx +++ b/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 = () => { diff --git a/src/games/storywriter/components/settings/system-instruction.tsx b/src/games/storywriter/components/settings/system-instruction.tsx index a94d505..0dc1bf1 100644 --- a/src/games/storywriter/components/settings/system-instruction.tsx +++ b/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(); diff --git a/src/games/storywriter/components/sidebar.tsx b/src/games/storywriter/components/sidebar.tsx index f6f1106..f8eda36 100644 --- a/src/games/storywriter/components/sidebar.tsx +++ b/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'; diff --git a/src/games/storywriter/contexts/state.tsx b/src/games/storywriter/contexts/state.tsx index 518b239..0c889d3 100644 --- a/src/games/storywriter/contexts/state.tsx +++ b/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 ──────────────────────────────────────────────────────────────────── diff --git a/src/games/storywriter/index.tsx b/src/games/storywriter/index.tsx index 8004eb8..fe0e582 100644 --- a/src/games/storywriter/index.tsx +++ b/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'; diff --git a/src/games/storywriter/utils/character-card.ts b/src/games/storywriter/utils/character-card.ts index 8c1e245..37ff1f3 100644 --- a/src/games/storywriter/utils/character-card.ts +++ b/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 ─────────────────────────────────────────────────────────────── diff --git a/src/games/storywriter/utils/prompt.ts b/src/games/storywriter/utils/prompt.ts index aec0476..560c51c 100644 --- a/src/games/storywriter/utils/prompt.ts +++ b/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 {