From bed5768bf01939c1a26702be0a780eaea9867061 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 14 Sep 2025 00:14:09 +0300
Subject: [PATCH 1/8] feat: Settings is displayed as page instead of modal

---
 src/App.tsx                      |   7 +-
 src/components/ChatInput.tsx     |   6 +-
 src/components/Header.tsx        | 115 ++++----
 src/components/SettingDialog.tsx | 439 ++++++++++++++++---------------
 src/lang/en.json                 |   1 +
 5 files changed, 298 insertions(+), 270 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9f1c8e6..6782b35 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -43,6 +43,7 @@ const App: FC = () => {
                 <Routes>
                   <Route element={<AppLayout />}>
                     <Route path="/chat/:convId" element={<Chat />} />
+                    <Route path="/settings" element={<SettingDialog />} />
                     <Route path="*" element={<WelcomeScreen />} />
                   </Route>
                 </Routes>
@@ -141,12 +142,6 @@ const AppLayout: FC = () => {
         </main>
         <Footer />
       </div>
-      {showSettings && (
-        <SettingDialog
-          show={showSettings}
-          onClose={() => setShowSettings(false)}
-        />
-      )}
       <Toaster />
     </>
   );
diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index ff01fba..0ae45b0 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -6,7 +6,7 @@ import {
 } from '@heroicons/react/24/solid';
 import { useEffect } from 'react';
 import toast from 'react-hot-toast';
-import { useAppContext } from '../context/app';
+import { useNavigate } from 'react-router';
 import { useChatExtraContext } from '../hooks/useChatExtraContext';
 import { ChatTextareaApi, useChatTextarea } from '../hooks/useChatTextarea';
 import { useVSCodeContext } from '../hooks/useVSCode';
@@ -42,7 +42,7 @@ export function ChatInput({
   onStop: () => void;
   isGenerating: boolean;
 }) {
-  const { setShowSettings } = useAppContext();
+  const navigate = useNavigate();
   const textarea: ChatTextareaApi = useChatTextarea(getPrefilledContent());
   const extraContext = useChatExtraContext();
   useVSCodeContext(textarea, extraContext);
@@ -135,7 +135,7 @@ export function ChatInput({
                 className="btn btn-ghost w-8 h-8 p-0 rounded-full xl:hidden"
                 title="Settings"
                 aria-label="Open settings menu"
-                onClick={() => setShowSettings(true)}
+                onClick={() => navigate('/settings')}
               >
                 <AdjustmentsHorizontalIcon className="h-5 w-5" />
               </button>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 07ba4ab..4ef869d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -16,16 +16,21 @@ export default function Header() {
   const {
     config,
     config: { model },
-    setShowSettings,
     saveConfig,
+    showSettings,
   } = useAppContext();
   const { models } = useInferenceContext();
   const { viewingChat } = useChatContext();
 
   const currConv = useMemo(() => viewingChat?.conv ?? null, [viewingChat]);
   const title = useMemo(
-    () => (currConv ? currConv.name : lang['header.title.noChat']),
-    [currConv]
+    () =>
+      showSettings
+        ? lang['header.title.settings']
+        : currConv
+          ? currConv.name
+          : lang['header.title.noChat'],
+    [currConv, showSettings]
   );
 
   const selectedModel = useMemo(() => {
@@ -47,6 +52,7 @@ export default function Header() {
           aria-label={title}
           role="button"
           onClick={() => {
+            if (showSettings) return;
             if (currConv) navigate(`/chat/${currConv.id}`);
             else navigate('/');
           }}
@@ -64,53 +70,66 @@ export default function Header() {
         </button>
       </section>
 
-      <section className="flex flex-row items-center">
-        {/* model information */}
-        <Dropdown
-          className="ml-2 px-1 xl:px-4 py-0"
-          entity="Model"
-          options={models.map((model) => ({
-            value: model.id,
-            label: model.name,
-          }))}
-          filterable={true}
-          hideChevron={models.length < 2}
-          align="start"
-          currentValue={
-            <span className="max-w-64 sm:max-w-80 truncate text-nowrap font-semibold">
-              {selectedModel}
-            </span>
-          }
-          renderOption={(option) => (
-            <span className="max-w-64 sm:max-w-80 truncate text-nowrap">
-              {option.label}
-            </span>
-          )}
-          isSelected={(option) => model === option.value}
-          onSelect={(option) =>
-            saveConfig({
-              ...config,
-              model: option.value,
-            })
-          }
-        />
+      {showSettings && (
+        <section className="flex items-center max-xl:hidden">
+          <label
+            className="font-medium truncate text-center px-4"
+            aria-label={title}
+          >
+            {title}
+          </label>
+        </section>
+      )}
 
-        {/* spacer */}
-        <div className="grow"></div>
+      {!showSettings && (
+        <section className="flex flex-row items-center">
+          {/* model information */}
+          <Dropdown
+            className="ml-2 px-1 xl:px-4 py-0"
+            entity="Model"
+            options={models.map((model) => ({
+              value: model.id,
+              label: model.name,
+            }))}
+            filterable={true}
+            hideChevron={models.length < 2}
+            align="start"
+            currentValue={
+              <span className="max-w-64 sm:max-w-80 truncate text-nowrap font-semibold">
+                {selectedModel}
+              </span>
+            }
+            renderOption={(option) => (
+              <span className="max-w-64 sm:max-w-80 truncate text-nowrap">
+                {option.label}
+              </span>
+            )}
+            isSelected={(option) => model === option.value}
+            onSelect={(option) =>
+              saveConfig({
+                ...config,
+                model: option.value,
+              })
+            }
+          />
 
-        {/* action buttons (top right) */}
-        <div className="flex items-center">
-          <button
-            className="btn btn-ghost w-8 h-8 p-0 rounded-full max-xl:hidden"
-            title="Settings"
-            aria-label="Open settings menu"
-            onClick={() => setShowSettings(true)}
-          >
-            {/* settings button */}
-            <Cog8ToothIcon className="w-5 h-5" />
-          </button>
-        </div>
-      </section>
+          {/* spacer */}
+          <div className="grow"></div>
+
+          {/* action buttons (top right) */}
+          <div className="flex items-center">
+            <button
+              className="btn btn-ghost w-8 h-8 p-0 rounded-full max-xl:hidden"
+              title="Settings"
+              aria-label="Open settings menu"
+              onClick={() => navigate('/settings')}
+            >
+              {/* settings button */}
+              <Cog8ToothIcon className="w-5 h-5" />
+            </button>
+          </div>
+        </section>
+      )}
     </header>
   );
 }
diff --git a/src/components/SettingDialog.tsx b/src/components/SettingDialog.tsx
index f9e80ea..96159fc 100644
--- a/src/components/SettingDialog.tsx
+++ b/src/components/SettingDialog.tsx
@@ -26,7 +26,15 @@ import {
   TrashIcon,
   TvIcon,
 } from '@heroicons/react/24/outline';
-import React, { FC, ReactElement, useEffect, useMemo, useState } from 'react';
+import React, {
+  FC,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { useNavigate } from 'react-router';
 import {
   CONFIG_DEFAULT,
   INFERENCE_PROVIDERS,
@@ -34,6 +42,7 @@ import {
   THEMES,
 } from '../config';
 import { useAppContext } from '../context/app';
+import { useChatContext } from '../context/chat';
 import { useInferenceContext } from '../context/inference';
 import StorageUtils from '../database';
 import { useDebouncedCallback } from '../hooks/useDebouncedCallback';
@@ -542,16 +551,18 @@ const getSettingTabsConfiguration = (
   },
 ];
 
-export default function SettingDialog({
-  show,
-  onClose,
-}: {
-  show: boolean;
-  onClose: () => void;
-}) {
-  const { config, saveConfig, presets, savePreset, removePreset } =
-    useAppContext();
+export default function SettingDialog() {
+  const navigate = useNavigate();
+  const {
+    config,
+    saveConfig,
+    presets,
+    savePreset,
+    removePreset,
+    setShowSettings,
+  } = useAppContext();
   const { models, fetchModels } = useInferenceContext();
+  const { viewingChat } = useChatContext();
   const [tabIdx, setTabIdx] = useState(0);
 
   // clone the config object to prevent direct mutation
@@ -565,9 +576,18 @@ export default function SettingDialog({
     () => getSettingTabsConfiguration(localConfig, localModels),
     [localConfig, localModels]
   );
+  const currConv = useMemo(() => viewingChat?.conv ?? null, [viewingChat]);
+
+  useEffect(() => setShowSettings(true), [setShowSettings]);
 
   const { showConfirm, showAlert } = useModals();
 
+  const onClose = useCallback(() => {
+    setShowSettings(false);
+    if (currConv) navigate(`/chat/${currConv.id}`);
+    else navigate('/');
+  }, [currConv, navigate, setShowSettings]);
+
   const resetConfig = async () => {
     if (await showConfirm('Are you sure you want to reset all settings?')) {
       setLocalConfig({ ...CONFIG_DEFAULT } as Configuration);
@@ -649,211 +669,204 @@ export default function SettingDialog({
     };
 
   return (
-    <dialog
-      className={classNames({ modal: true, 'modal-open': show })}
-      aria-label="Settings dialog"
-    >
-      <div className="modal-box w-11/12 max-w-4xl max-sm:px-4">
-        <h3 className="text-lg font-bold mb-6 max-sm:mx-2">Settings</h3>
-        <div className="flex flex-col md:flex-row h-[calc(90vh-12rem)]">
-          {/* Left panel, showing sections - Desktop version */}
-          <div
-            className="hidden md:flex flex-col items-stretch pr-4 mr-4 border-r-2 border-base-200"
-            role="complementary"
-            aria-description="Settings sections"
-            tabIndex={0}
-          >
-            {settingTabs.map((tab, idx) => (
-              <button
-                key={idx}
-                className={classNames({
-                  'btn btn-ghost justify-start font-normal w-44 mb-1': true,
-                  'btn-active': tabIdx === idx,
-                })}
-                onClick={() => setTabIdx(idx)}
-                dir="auto"
-              >
-                {tab.title}
-              </button>
-            ))}
-          </div>
-
-          {/* Left panel, showing sections - Mobile version */}
-          {/* This menu is skipped on a11y, otherwise it's repeated the desktop version */}
-          <div
-            className="md:hidden flex flex-row gap-2 mb-4 px-4"
-            aria-disabled={true}
-          >
-            <Dropdown
-              className="bg-base-200 w-full border-1 border-base-content/10 rounded-lg shadow-xs cursor-pointer p-2"
-              entity="tab"
-              options={settingTabs.map((tab, idx) => ({
-                label: tab.title,
-                value: idx,
-              }))}
-              currentValue={settingTabs[tabIdx].title}
-              renderOption={(option) => <span>{option.label}</span>}
-              isSelected={(option) => tabIdx === option.value}
-              onSelect={(option) => setTabIdx(option.value as number)}
-            />
-          </div>
+    <div className="flex flex-col h-full p-4">
+      <div className="grow flex flex-col md:flex-row max-w-210 overflow-y-auto">
+        {/* Left panel, showing sections - Desktop version */}
+        <div
+          className="hidden md:flex flex-col items-stretch pr-4 mr-4 border-r-2 border-base-200"
+          role="complementary"
+          aria-description="Settings sections"
+          tabIndex={0}
+        >
+          {settingTabs.map((tab, idx) => (
+            <button
+              key={idx}
+              className={classNames({
+                'btn btn-ghost justify-start font-normal w-44 mb-1': true,
+                'btn-active': tabIdx === idx,
+              })}
+              onClick={() => setTabIdx(idx)}
+              dir="auto"
+            >
+              {tab.title}
+            </button>
+          ))}
+        </div>
 
-          {/* Right panel, showing setting fields */}
-          <div className="grow overflow-y-auto px-2 sm:px-4">
-            {settingTabs[tabIdx].fields.map((field, idx) => {
-              const key = `${tabIdx}-${idx}`;
-              switch (field.type) {
-                case SettingInputType.SHORT_INPUT:
-                  return (
-                    <SettingsModalShortInput
-                      key={key}
-                      configKey={field.key}
-                      field={field}
-                      value={localConfig[field.key] as string | number}
-                      onChange={onChange(field.key)}
-                    />
-                  );
-                case SettingInputType.RANGE_INPUT:
-                  return (
-                    <SettingsModalRangeInput
-                      key={key}
-                      configKey={field.key}
-                      field={field}
-                      min={field.min as number}
-                      max={field.max as number}
-                      step={field.step as number}
-                      value={localConfig[field.key] as number}
-                      onChange={onChange(field.key)}
-                    />
-                  );
-                case SettingInputType.LONG_INPUT:
-                  return (
-                    <SettingsModalLongInput
-                      key={key}
-                      configKey={field.key}
-                      field={field}
-                      value={String(localConfig[field.key])}
-                      onChange={onChange(field.key)}
-                    />
-                  );
-                case SettingInputType.CHECKBOX:
-                  return (
-                    <SettingsModalCheckbox
-                      key={key}
-                      configKey={field.key}
-                      field={field}
-                      value={!!localConfig[field.key]}
-                      onChange={onChange(field.key)}
-                    />
-                  );
-                case SettingInputType.DROPDOWN:
-                  return (
-                    <SettingsModalDropdown
-                      key={key}
-                      configKey={field.key}
-                      field={field as SettingFieldInput}
-                      options={(field as SettingFieldDropdown).options}
-                      filterable={(field as SettingFieldDropdown).filterable}
-                      value={String(localConfig[field.key])}
-                      onChange={onChange(field.key)}
-                    />
-                  );
-                case SettingInputType.CUSTOM:
-                  switch (field.key) {
-                    case 'import-export':
-                      return (
-                        <ImportExportComponent key={key} onClose={onClose} />
-                      );
-                    case 'preset-manager':
-                      return (
-                        <PresetManager
-                          key={key}
-                          config={localConfig}
-                          onLoadConfig={setLocalConfig}
-                          presets={presets}
-                          onSavePreset={savePreset}
-                          onRemovePreset={removePreset}
-                        />
-                      );
-                    case 'theme-manager':
-                      return <ThemeController key={key} />;
-                    case 'fetch-models':
-                      return (
-                        <button
-                          key={key}
-                          className="btn"
-                          onClick={() =>
-                            fetchModels(localConfig).then((models) =>
-                              setLocalModels(models)
-                            )
-                          }
-                        >
-                          <ArrowPathIcon className={ICON_CLASSNAME} />
-                          Fetch Models
-                        </button>
-                      );
-                    default:
-                      if (field.component === 'delimeter') {
-                        return <DelimeterComponent key={key} />;
-                      }
-
-                      switch (typeof field.component) {
-                        case 'string':
-                        case 'number':
-                        case 'bigint':
-                        case 'boolean':
-                        case 'symbol':
-                          return (
-                            <div key={key} className="mb-2">
-                              {field.component}
-                            </div>
-                          );
-                        default:
-                          return (
-                            <div key={key} className="mb-2">
-                              {React.createElement(field.component, {
-                                value: localConfig[field.key],
-                                onChange: (value: string | boolean) =>
-                                  onChange(field.key as ConfigurationKey)(
-                                    value
-                                  ),
-                              })}
-                            </div>
-                          );
-                      }
-                  }
-                case SettingInputType.SECTION:
-                  return (
-                    <SettingsSectionLabel key={key}>
-                      {field.label}
-                    </SettingsSectionLabel>
-                  );
-                default:
-                  return null;
-              }
-            })}
-
-            <p className="opacity-40 mb-6 text-sm mt-8">
-              App Version: {import.meta.env.PACKAGE_VERSION}
-              <br />
-              Settings are saved in browser's localStorage
-            </p>
-          </div>
+        {/* Left panel, showing sections - Mobile version */}
+        {/* This menu is skipped on a11y, otherwise it's repeated the desktop version */}
+        <div
+          className="md:hidden flex flex-row gap-2 mb-4 px-4"
+          aria-disabled={true}
+        >
+          <Dropdown
+            className="bg-base-200 w-full border-1 border-base-content/10 rounded-lg shadow-xs cursor-pointer p-2"
+            entity="tab"
+            options={settingTabs.map((tab, idx) => ({
+              label: tab.title,
+              value: idx,
+            }))}
+            currentValue={settingTabs[tabIdx].title}
+            renderOption={(option) => <span>{option.label}</span>}
+            isSelected={(option) => tabIdx === option.value}
+            onSelect={(option) => setTabIdx(option.value as number)}
+          />
         </div>
 
-        <div className="modal-action">
-          <button className="btn" onClick={resetConfig}>
-            Reset to default
-          </button>
-          <button className="btn" onClick={onClose}>
-            Close
-          </button>
-          <button className="btn btn-neutral" onClick={handleSave}>
-            Save
-          </button>
+        {/* Right panel, showing setting fields */}
+        <div className="grow overflow-y-auto px-2 sm:px-4">
+          {settingTabs[tabIdx].fields.map((field, idx) => {
+            const key = `${tabIdx}-${idx}`;
+            switch (field.type) {
+              case SettingInputType.SHORT_INPUT:
+                return (
+                  <SettingsModalShortInput
+                    key={key}
+                    configKey={field.key}
+                    field={field}
+                    value={localConfig[field.key] as string | number}
+                    onChange={onChange(field.key)}
+                  />
+                );
+              case SettingInputType.RANGE_INPUT:
+                return (
+                  <SettingsModalRangeInput
+                    key={key}
+                    configKey={field.key}
+                    field={field}
+                    min={field.min as number}
+                    max={field.max as number}
+                    step={field.step as number}
+                    value={localConfig[field.key] as number}
+                    onChange={onChange(field.key)}
+                  />
+                );
+              case SettingInputType.LONG_INPUT:
+                return (
+                  <SettingsModalLongInput
+                    key={key}
+                    configKey={field.key}
+                    field={field}
+                    value={String(localConfig[field.key])}
+                    onChange={onChange(field.key)}
+                  />
+                );
+              case SettingInputType.CHECKBOX:
+                return (
+                  <SettingsModalCheckbox
+                    key={key}
+                    configKey={field.key}
+                    field={field}
+                    value={!!localConfig[field.key]}
+                    onChange={onChange(field.key)}
+                  />
+                );
+              case SettingInputType.DROPDOWN:
+                return (
+                  <SettingsModalDropdown
+                    key={key}
+                    configKey={field.key}
+                    field={field as SettingFieldInput}
+                    options={(field as SettingFieldDropdown).options}
+                    filterable={(field as SettingFieldDropdown).filterable}
+                    value={String(localConfig[field.key])}
+                    onChange={onChange(field.key)}
+                  />
+                );
+              case SettingInputType.CUSTOM:
+                switch (field.key) {
+                  case 'import-export':
+                    return (
+                      <ImportExportComponent key={key} onClose={onClose} />
+                    );
+                  case 'preset-manager':
+                    return (
+                      <PresetManager
+                        key={key}
+                        config={localConfig}
+                        onLoadConfig={setLocalConfig}
+                        presets={presets}
+                        onSavePreset={savePreset}
+                        onRemovePreset={removePreset}
+                      />
+                    );
+                  case 'theme-manager':
+                    return <ThemeController key={key} />;
+                  case 'fetch-models':
+                    return (
+                      <button
+                        key={key}
+                        className="btn"
+                        onClick={() =>
+                          fetchModels(localConfig).then((models) =>
+                            setLocalModels(models)
+                          )
+                        }
+                      >
+                        <ArrowPathIcon className={ICON_CLASSNAME} />
+                        Fetch Models
+                      </button>
+                    );
+                  default:
+                    if (field.component === 'delimeter') {
+                      return <DelimeterComponent key={key} />;
+                    }
+
+                    switch (typeof field.component) {
+                      case 'string':
+                      case 'number':
+                      case 'bigint':
+                      case 'boolean':
+                      case 'symbol':
+                        return (
+                          <div key={key} className="mb-2">
+                            {field.component}
+                          </div>
+                        );
+                      default:
+                        return (
+                          <div key={key} className="mb-2">
+                            {React.createElement(field.component, {
+                              value: localConfig[field.key],
+                              onChange: (value: string | boolean) =>
+                                onChange(field.key as ConfigurationKey)(value),
+                            })}
+                          </div>
+                        );
+                    }
+                }
+              case SettingInputType.SECTION:
+                return (
+                  <SettingsSectionLabel key={key}>
+                    {field.label}
+                  </SettingsSectionLabel>
+                );
+              default:
+                return null;
+            }
+          })}
+
+          <p className="opacity-40 mb-6 text-sm mt-8">
+            App Version: {import.meta.env.PACKAGE_VERSION}
+            <br />
+            Settings are saved in browser's localStorage
+          </p>
         </div>
       </div>
-    </dialog>
+
+      <div className="sticky bottom-0 flex gap-0.5 max-sm:justify-center mt-4">
+        <div className="hidden md:block w-52 h-10" />
+        <button className="btn" onClick={resetConfig}>
+          Reset to default
+        </button>
+        <button className="btn" onClick={onClose}>
+          Close
+        </button>
+        <button className="btn btn-neutral" onClick={handleSave}>
+          Save
+        </button>
+      </div>
+    </div>
   );
 }
 
@@ -872,8 +885,8 @@ const SettingsModalLongInput: React.FC<BaseInputProps & { value: string }> = ({
   onChange,
 }) => {
   return (
-    <label className="form-control mb-3">
-      <div className="label inline text-sm">{field.label || configKey}</div>
+    <label className="form-control flex flex-col justify-center max-w-80 mb-3">
+      <div className="text-sm opacity-60 mb-1">{field.label || configKey}</div>
       <textarea
         className="textarea textarea-bordered h-24"
         placeholder={`Default: ${CONFIG_DEFAULT[configKey] || 'none'}`}
@@ -883,7 +896,7 @@ const SettingsModalLongInput: React.FC<BaseInputProps & { value: string }> = ({
       />
       {field.note && (
         <div
-          className="text-xs opacity-75 max-w-80 mt-1"
+          className="text-xs opacity-75 mt-1"
           dangerouslySetInnerHTML={{ __html: field.note }}
         />
       )}
diff --git a/src/lang/en.json b/src/lang/en.json
index a5ea65f..8714de5 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -1,5 +1,6 @@
 {
   "header.title.noChat": "New Chat",
+  "header.title.settings": "Settings",
   "chatScreen": {
     "welcome": "Hi,",
     "welcomeNote": "how can I help you?"

From d19e492868de0b4de1396d162fa34ed69e58826f Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 14 Sep 2025 00:17:15 +0300
Subject: [PATCH 2/8] chore: Settings - move to pages

---
 src/App.tsx                                      |  4 ++--
 .../SettingDialog.tsx => pages/Settings.tsx}     | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)
 rename src/{components/SettingDialog.tsx => pages/Settings.tsx} (99%)

diff --git a/src/App.tsx b/src/App.tsx
index 6782b35..d841827 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,7 +11,6 @@ import {
 import { Footer } from './components/Footer';
 import Header from './components/Header';
 import { ModalProvider } from './components/ModalProvider';
-import SettingDialog from './components/SettingDialog';
 import Sidebar from './components/Sidebar';
 import { ToastPopup } from './components/ToastPopup';
 import { AppContextProvider, useAppContext } from './context/app';
@@ -24,6 +23,7 @@ import { useDebouncedCallback } from './hooks/useDebouncedCallback';
 import { usePWAUpdatePrompt } from './hooks/usePWAUpdatePrompt';
 import * as lang from './lang/en.json';
 import ChatScreen from './pages/ChatScreen';
+import Settings from './pages/Settings';
 import WelcomeScreen from './pages/WelcomeScreen';
 
 const DEBOUNCE_DELAY = 5000;
@@ -43,7 +43,7 @@ const App: FC = () => {
                 <Routes>
                   <Route element={<AppLayout />}>
                     <Route path="/chat/:convId" element={<Chat />} />
-                    <Route path="/settings" element={<SettingDialog />} />
+                    <Route path="/settings" element={<Settings />} />
                     <Route path="*" element={<WelcomeScreen />} />
                   </Route>
                 </Routes>
diff --git a/src/components/SettingDialog.tsx b/src/pages/Settings.tsx
similarity index 99%
rename from src/components/SettingDialog.tsx
rename to src/pages/Settings.tsx
index 96159fc..207a098 100644
--- a/src/components/SettingDialog.tsx
+++ b/src/pages/Settings.tsx
@@ -35,6 +35,13 @@ import React, {
   useState,
 } from 'react';
 import { useNavigate } from 'react-router';
+import { Dropdown, OpenInNewTab } from '../components/common';
+import { useModals } from '../components/ModalProvider';
+import TextToSpeech, {
+  getSpeechSynthesisVoiceByName,
+  getSpeechSynthesisVoices,
+  IS_SPEECH_SYNTHESIS_SUPPORTED,
+} from '../components/TextToSpeech';
 import {
   CONFIG_DEFAULT,
   INFERENCE_PROVIDERS,
@@ -63,13 +70,6 @@ import {
   isString,
   normalizeUrl,
 } from '../utils';
-import { Dropdown, OpenInNewTab } from './common';
-import { useModals } from './ModalProvider';
-import TextToSpeech, {
-  getSpeechSynthesisVoiceByName,
-  getSpeechSynthesisVoices,
-  IS_SPEECH_SYNTHESIS_SUPPORTED,
-} from './TextToSpeech';
 
 // --- Type Definitions ---
 enum SettingInputType {
@@ -551,7 +551,7 @@ const getSettingTabsConfiguration = (
   },
 ];
 
-export default function SettingDialog() {
+export default function Settings() {
   const navigate = useNavigate();
   const {
     config,

From ea97febdc05b5808afb149dfaac91641cf7382e2 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 14 Sep 2025 00:21:18 +0300
Subject: [PATCH 3/8] refactor: Settings - extract component mapper

---
 src/pages/Settings.tsx | 259 ++++++++++++++++++++---------------------
 1 file changed, 129 insertions(+), 130 deletions(-)

diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 207a098..6857e02 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -668,6 +668,134 @@ export default function Settings() {
       });
     };
 
+  const mapFieldToElement = (field: SettingField, idx: number) => {
+    const key = `${tabIdx}-${idx}`;
+
+    switch (field.type) {
+      case SettingInputType.SHORT_INPUT:
+        return (
+          <SettingsModalShortInput
+            key={key}
+            configKey={field.key}
+            field={field}
+            value={localConfig[field.key] as string | number}
+            onChange={onChange(field.key)}
+          />
+        );
+      case SettingInputType.RANGE_INPUT:
+        return (
+          <SettingsModalRangeInput
+            key={key}
+            configKey={field.key}
+            field={field}
+            min={field.min as number}
+            max={field.max as number}
+            step={field.step as number}
+            value={localConfig[field.key] as number}
+            onChange={onChange(field.key)}
+          />
+        );
+      case SettingInputType.LONG_INPUT:
+        return (
+          <SettingsModalLongInput
+            key={key}
+            configKey={field.key}
+            field={field}
+            value={String(localConfig[field.key])}
+            onChange={onChange(field.key)}
+          />
+        );
+      case SettingInputType.CHECKBOX:
+        return (
+          <SettingsModalCheckbox
+            key={key}
+            configKey={field.key}
+            field={field}
+            value={!!localConfig[field.key]}
+            onChange={onChange(field.key)}
+          />
+        );
+      case SettingInputType.DROPDOWN:
+        return (
+          <SettingsModalDropdown
+            key={key}
+            configKey={field.key}
+            field={field as SettingFieldInput}
+            options={(field as SettingFieldDropdown).options}
+            filterable={(field as SettingFieldDropdown).filterable}
+            value={String(localConfig[field.key])}
+            onChange={onChange(field.key)}
+          />
+        );
+      case SettingInputType.CUSTOM:
+        switch (field.key) {
+          case 'import-export':
+            return <ImportExportComponent key={key} onClose={onClose} />;
+          case 'preset-manager':
+            return (
+              <PresetManager
+                key={key}
+                config={localConfig}
+                onLoadConfig={setLocalConfig}
+                presets={presets}
+                onSavePreset={savePreset}
+                onRemovePreset={removePreset}
+              />
+            );
+          case 'theme-manager':
+            return <ThemeController key={key} />;
+          case 'fetch-models':
+            return (
+              <button
+                key={key}
+                className="btn"
+                onClick={() =>
+                  fetchModels(localConfig).then((models) =>
+                    setLocalModels(models)
+                  )
+                }
+              >
+                <ArrowPathIcon className={ICON_CLASSNAME} />
+                Fetch Models
+              </button>
+            );
+          default:
+            if (field.component === 'delimeter') {
+              return <DelimeterComponent key={key} />;
+            }
+
+            switch (typeof field.component) {
+              case 'string':
+              case 'number':
+              case 'bigint':
+              case 'boolean':
+              case 'symbol':
+                return (
+                  <div key={key} className="mb-2">
+                    {field.component}
+                  </div>
+                );
+              default:
+                return (
+                  <div key={key} className="mb-2">
+                    {React.createElement(field.component, {
+                      value: localConfig[field.key],
+                      onChange: (value: string | boolean) =>
+                        onChange(field.key as ConfigurationKey)(value),
+                    })}
+                  </div>
+                );
+            }
+        }
+      case SettingInputType.SECTION:
+        return (
+          <SettingsSectionLabel key={key}>{field.label}</SettingsSectionLabel>
+        );
+      default:
+        return null;
+    }
+  };
+
   return (
     <div className="flex flex-col h-full p-4">
       <div className="grow flex flex-col md:flex-row max-w-210 overflow-y-auto">
@@ -715,136 +843,7 @@ export default function Settings() {
 
         {/* Right panel, showing setting fields */}
         <div className="grow overflow-y-auto px-2 sm:px-4">
-          {settingTabs[tabIdx].fields.map((field, idx) => {
-            const key = `${tabIdx}-${idx}`;
-            switch (field.type) {
-              case SettingInputType.SHORT_INPUT:
-                return (
-                  <SettingsModalShortInput
-                    key={key}
-                    configKey={field.key}
-                    field={field}
-                    value={localConfig[field.key] as string | number}
-                    onChange={onChange(field.key)}
-                  />
-                );
-              case SettingInputType.RANGE_INPUT:
-                return (
-                  <SettingsModalRangeInput
-                    key={key}
-                    configKey={field.key}
-                    field={field}
-                    min={field.min as number}
-                    max={field.max as number}
-                    step={field.step as number}
-                    value={localConfig[field.key] as number}
-                    onChange={onChange(field.key)}
-                  />
-                );
-              case SettingInputType.LONG_INPUT:
-                return (
-                  <SettingsModalLongInput
-                    key={key}
-                    configKey={field.key}
-                    field={field}
-                    value={String(localConfig[field.key])}
-                    onChange={onChange(field.key)}
-                  />
-                );
-              case SettingInputType.CHECKBOX:
-                return (
-                  <SettingsModalCheckbox
-                    key={key}
-                    configKey={field.key}
-                    field={field}
-                    value={!!localConfig[field.key]}
-                    onChange={onChange(field.key)}
-                  />
-                );
-              case SettingInputType.DROPDOWN:
-                return (
-                  <SettingsModalDropdown
-                    key={key}
-                    configKey={field.key}
-                    field={field as SettingFieldInput}
-                    options={(field as SettingFieldDropdown).options}
-                    filterable={(field as SettingFieldDropdown).filterable}
-                    value={String(localConfig[field.key])}
-                    onChange={onChange(field.key)}
-                  />
-                );
-              case SettingInputType.CUSTOM:
-                switch (field.key) {
-                  case 'import-export':
-                    return (
-                      <ImportExportComponent key={key} onClose={onClose} />
-                    );
-                  case 'preset-manager':
-                    return (
-                      <PresetManager
-                        key={key}
-                        config={localConfig}
-                        onLoadConfig={setLocalConfig}
-                        presets={presets}
-                        onSavePreset={savePreset}
-                        onRemovePreset={removePreset}
-                      />
-                    );
-                  case 'theme-manager':
-                    return <ThemeController key={key} />;
-                  case 'fetch-models':
-                    return (
-                      <button
-                        key={key}
-                        className="btn"
-                        onClick={() =>
-                          fetchModels(localConfig).then((models) =>
-                            setLocalModels(models)
-                          )
-                        }
-                      >
-                        <ArrowPathIcon className={ICON_CLASSNAME} />
-                        Fetch Models
-                      </button>
-                    );
-                  default:
-                    if (field.component === 'delimeter') {
-                      return <DelimeterComponent key={key} />;
-                    }
-
-                    switch (typeof field.component) {
-                      case 'string':
-                      case 'number':
-                      case 'bigint':
-                      case 'boolean':
-                      case 'symbol':
-                        return (
-                          <div key={key} className="mb-2">
-                            {field.component}
-                          </div>
-                        );
-                      default:
-                        return (
-                          <div key={key} className="mb-2">
-                            {React.createElement(field.component, {
-                              value: localConfig[field.key],
-                              onChange: (value: string | boolean) =>
-                                onChange(field.key as ConfigurationKey)(value),
-                            })}
-                          </div>
-                        );
-                    }
-                }
-              case SettingInputType.SECTION:
-                return (
-                  <SettingsSectionLabel key={key}>
-                    {field.label}
-                  </SettingsSectionLabel>
-                );
-              default:
-                return null;
-            }
-          })}
+          {settingTabs[tabIdx].fields.map(mapFieldToElement)}
 
           <p className="opacity-40 mb-6 text-sm mt-8">
             App Version: {import.meta.env.PACKAGE_VERSION}

From ac0075d1d96189abc00443b327ec814e2eea0ed6 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 14 Sep 2025 00:46:07 +0300
Subject: [PATCH 4/8] review: Code review

---
 src/lang/en.json       |  8 +++---
 src/pages/Settings.tsx | 59 ++++++++++++------------------------------
 2 files changed, 21 insertions(+), 46 deletions(-)

diff --git a/src/lang/en.json b/src/lang/en.json
index 8714de5..14920a7 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -144,12 +144,12 @@
         "note": "DRY sampling reduces repetition in generated text even across long contexts. This parameter sets DRY penalty for the last n tokens."
       },
       "custom": {
-        "label": "",
-        "note": ""
+        "label": "Custom JSON config",
+        "note": "For more info, refer to <a class=\"underline\" href=\"https://github.com/ggerganov/llama.cpp/blob/master/tools/server/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">server documentation</a>"
       },
       "pyIntepreterEnabled": {
-        "label": "",
-        "note": ""
+        "label": "Enable Python interpreter",
+        "note": "This feature uses <a class=\"underline\" href=\"https://pyodide.org\" target=\"_blank\" rel=\"noopener noreferrer\">pyodide</a>, downloaded from CDN. To use this feature, ask the LLM to generate Python code inside a Markdown code block. You will see a \"Run\" button on the code block, near the \"Copy\" button."
       },
       "ttsPitch": {
         "label": "Pitch",
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 6857e02..96eda74 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -35,7 +35,7 @@ import React, {
   useState,
 } from 'react';
 import { useNavigate } from 'react-router';
-import { Dropdown, OpenInNewTab } from '../components/common';
+import { Dropdown } from '../components/common';
 import { useModals } from '../components/ModalProvider';
 import TextToSpeech, {
   getSpeechSynthesisVoiceByName,
@@ -482,19 +482,7 @@ const getSettingTabsConfiguration = (
       /* Custom */
       DELIMETER,
       toSection('Custom', <CpuChipIcon className={ICON_CLASSNAME} />),
-      {
-        type: SettingInputType.LONG_INPUT,
-        label: (
-          <>
-            Custom JSON config (For more info, refer to{' '}
-            <OpenInNewTab href="https://github.com/ggerganov/llama.cpp/blob/master/tools/server/README.md">
-              server documentation
-            </OpenInNewTab>
-            )
-          </>
-        ),
-        key: 'custom',
-      },
+      toInput(SettingInputType.LONG_INPUT, 'custom'),
     ],
   },
 
@@ -511,42 +499,29 @@ const getSettingTabsConfiguration = (
         type: SettingInputType.CUSTOM,
         key: 'custom', // dummy key, won't be used
         component: () => (
-          <>
-            <p className="mb-8">
-              Experimental features are not guaranteed to work correctly.
-              <br />
-              <br />
+          <div className="flex flex-col gap-2 mb-8">
+            <p>Experimental features are not guaranteed to work correctly.</p>
+            <p>
               If you encounter any problems, create a{' '}
-              <OpenInNewTab href="https://github.com/ggerganov/llama.cpp/issues/new?template=019-bug-misc.yml">
+              <a
+                className="underline"
+                href="https://github.com/ggerganov/llama.cpp/issues/new?template=019-bug-misc.yml"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 Bug (misc.)
-              </OpenInNewTab>{' '}
+              </a>{' '}
               report on Github. Please also specify <b>webui/experimental</b> on
               the report title and include screenshots.
-              <br />
-              <br />
+            </p>
+            <p>
               Some features may require packages downloaded from CDN, so they
               need internet connection.
             </p>
-          </>
-        ),
-      },
-      {
-        type: SettingInputType.CHECKBOX,
-        label: (
-          <>
-            <b>Enable Python interpreter</b>
-            <br />
-            <small className="text-xs">
-              This feature uses{' '}
-              <OpenInNewTab href="https://pyodide.org">pyodide</OpenInNewTab>,
-              downloaded from CDN. To use this feature, ask the LLM to generate
-              Python code inside a Markdown code block. You will see a "Run"
-              button on the code block, near the "Copy" button.
-            </small>
-          </>
+          </div>
         ),
-        key: 'pyIntepreterEnabled',
       },
+      toInput(SettingInputType.CHECKBOX, 'pyIntepreterEnabled'),
     ],
   },
 ];
@@ -798,7 +773,7 @@ export default function Settings() {
 
   return (
     <div className="flex flex-col h-full p-4">
-      <div className="grow flex flex-col md:flex-row max-w-210 overflow-y-auto">
+      <div className="grow flex flex-col md:flex-row overflow-y-auto">
         {/* Left panel, showing sections - Desktop version */}
         <div
           className="hidden md:flex flex-col items-stretch pr-4 mr-4 border-r-2 border-base-200"

From 8964d6327fe04cb2ed455471477dea042b09e6e2 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sun, 14 Sep 2025 01:14:09 +0300
Subject: [PATCH 5/8] review: Code review

---
 src/pages/Settings.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 96eda74..7d1833f 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -772,8 +772,8 @@ export default function Settings() {
   };
 
   return (
-    <div className="flex flex-col h-full p-4">
-      <div className="grow flex flex-col md:flex-row overflow-y-auto">
+    <div className="flex flex-col h-full py-4 max-xl:px-4">
+      <div className="grow flex flex-col md:flex-row">
         {/* Left panel, showing sections - Desktop version */}
         <div
           className="hidden md:flex flex-col items-stretch pr-4 mr-4 border-r-2 border-base-200"
@@ -817,10 +817,10 @@ export default function Settings() {
         </div>
 
         {/* Right panel, showing setting fields */}
-        <div className="grow overflow-y-auto px-2 sm:px-4">
+        <div className="grow max-h-[calc(100vh-13rem)] sm:max-h-[calc(100vh-10rem)] overflow-y-auto px-2 sm:px-4">
           {settingTabs[tabIdx].fields.map(mapFieldToElement)}
 
-          <p className="opacity-40 mb-6 text-sm mt-8">
+          <p className="opacity-40 text-sm mt-8">
             App Version: {import.meta.env.PACKAGE_VERSION}
             <br />
             Settings are saved in browser's localStorage
@@ -828,8 +828,8 @@ export default function Settings() {
         </div>
       </div>
 
-      <div className="sticky bottom-0 flex gap-0.5 max-sm:justify-center mt-4">
-        <div className="hidden md:block w-52 h-10" />
+      <div className="sticky bottom-4 flex gap-2 max-sm:justify-center mt-4">
+        <div className="hidden md:block w-48 h-10" />
         <button className="btn" onClick={resetConfig}>
           Reset to default
         </button>

From 083860c354a377656b8218a994b03e5f0272e4ad Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Mon, 15 Sep 2025 14:47:15 +0300
Subject: [PATCH 6/8] review: Settings - paddings

---
 src/pages/Settings.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 7d1833f..cea0e5c 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -772,11 +772,11 @@ export default function Settings() {
   };
 
   return (
-    <div className="flex flex-col h-full py-4 max-xl:px-4">
+    <div className="flex flex-col h-full py-4">
       <div className="grow flex flex-col md:flex-row">
         {/* Left panel, showing sections - Desktop version */}
         <div
-          className="hidden md:flex flex-col items-stretch pr-4 mr-4 border-r-2 border-base-200"
+          className="hidden md:flex flex-col items-stretch px-4 border-r-2 border-base-200"
           role="complementary"
           aria-description="Settings sections"
           tabIndex={0}
@@ -817,7 +817,7 @@ export default function Settings() {
         </div>
 
         {/* Right panel, showing setting fields */}
-        <div className="grow max-h-[calc(100vh-13rem)] sm:max-h-[calc(100vh-10rem)] overflow-y-auto px-2 sm:px-4">
+        <div className="grow max-h-[calc(100vh-13rem)] sm:max-h-[calc(100vh-10rem)] overflow-y-auto px-6 sm:px-4">
           {settingTabs[tabIdx].fields.map(mapFieldToElement)}
 
           <p className="opacity-40 text-sm mt-8">

From e4c59757b38098ab16c0077e65178cc102d1c0f8 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Mon, 15 Sep 2025 15:43:51 +0300
Subject: [PATCH 7/8] review: Settings - action buttons block

---
 src/lang/en.json       |  5 +++++
 src/pages/Settings.tsx | 12 ++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/lang/en.json b/src/lang/en.json
index 14920a7..ca14cdf 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -193,6 +193,11 @@
         "label": "Syntax Theme",
         "note": "Choose the color theme for code blocks."
       }
+    },
+    "actionButtons": {
+      "saveBtnLabel": "Save",
+      "cancelBtnLabel": "Close",
+      "resetBtnLabel": "Reset"
     }
   },
   "newVersion": {
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index cea0e5c..fd27433 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -829,15 +829,15 @@ export default function Settings() {
       </div>
 
       <div className="sticky bottom-4 flex gap-2 max-sm:justify-center mt-4">
-        <div className="hidden md:block w-48 h-10" />
-        <button className="btn" onClick={resetConfig}>
-          Reset to default
+        <div className="hidden md:block w-54 h-10" />
+        <button className="btn btn-neutral" onClick={handleSave}>
+          {lang.settings.actionButtons.saveBtnLabel}
         </button>
         <button className="btn" onClick={onClose}>
-          Close
+          {lang.settings.actionButtons.cancelBtnLabel}
         </button>
-        <button className="btn btn-neutral" onClick={handleSave}>
-          Save
+        <button className="btn" onClick={resetConfig}>
+          {lang.settings.actionButtons.resetBtnLabel}
         </button>
       </div>
     </div>

From 38d2ce680af27b1d35ad8c5f9df13002a690ff20 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Mon, 15 Sep 2025 15:44:09 +0300
Subject: [PATCH 8/8] review: Settings - screen size break points

---
 src/pages/Settings.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index fd27433..193398f 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -817,7 +817,7 @@ export default function Settings() {
         </div>
 
         {/* Right panel, showing setting fields */}
-        <div className="grow max-h-[calc(100vh-13rem)] sm:max-h-[calc(100vh-10rem)] overflow-y-auto px-6 sm:px-4">
+        <div className="grow max-h-[calc(100vh-13rem)] md:max-h-[calc(100vh-10rem)] overflow-y-auto px-6 sm:px-4">
           {settingTabs[tabIdx].fields.map(mapFieldToElement)}
 
           <p className="opacity-40 text-sm mt-8">
@@ -828,7 +828,7 @@ export default function Settings() {
         </div>
       </div>
 
-      <div className="sticky bottom-4 flex gap-2 max-sm:justify-center mt-4">
+      <div className="sticky bottom-4 flex gap-2 max-md:justify-center mt-4">
         <div className="hidden md:block w-54 h-10" />
         <button className="btn btn-neutral" onClick={handleSave}>
           {lang.settings.actionButtons.saveBtnLabel}