giers10/textDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor settings panel layout and add export database functionality

Browse Source
This commit is contained in:
Victor Giers
2026-03-13 21:57:29 +01:00
parent a7d5b58dbf
commit d5bfefefd1
1 changed files with 136 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
src/App.tsx
View File

@@ -2269,117 +2269,144 @@ export default function App() {
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
</div> </div>
<div className="settings-panel__section-title">Interface</div> <div className="settings-panel__body">
<div className="settings-panel__section"> <div className="settings-panel__section-title">Interface</div>
<label className="settings-panel__label" htmlFor="theme-select"> <div className="settings-panel__section">
Theme <label className="settings-panel__label" htmlFor="theme-select">
</label> Theme
<select </label>
id="theme-select" <select
className="settings-panel__select" id="theme-select"
value={theme} className="settings-panel__select"
onChange={(event) => value={theme}
setTheme(event.target.value as "dark" | "light") onChange={(event) =>
} setTheme(event.target.value as "dark" | "light")
> }
<option value="dark">Dark</option> >
<option value="light">Bright</option> <option value="dark">Dark</option>
</select> <option value="light">Bright</option>
</div> </select>
<div className="settings-panel__section settings-panel__section--row">
<label className="settings-panel__label" htmlFor="line-numbers-toggle">
Line numbers
</label>
<input
id="line-numbers-toggle"
type="checkbox"
checked={showLineNumbers}
onChange={(event) => setShowLineNumbers(event.target.checked)}
/>
</div>
<div className="settings-panel__section settings-panel__section--row">
<label className="settings-panel__label" htmlFor="split-view-toggle">
Split view
</label>
<input
id="split-view-toggle"
type="checkbox"
checked={splitView}
onChange={(event) => setSplitView(event.target.checked)}
/>
</div>
<div className="settings-panel__section">
<label className="settings-panel__label" htmlFor="text-size">
Text size
</label>
<div className="settings-panel__slider-row">
<input
id="text-size"
className="settings-panel__range"
type="range"
min={12}
max={18}
step={1}
value={textSize}
onChange={(event) => setTextSize(Number(event.target.value))}
/>
<div className="settings-panel__value">{textSize}px</div>
</div> </div>
</div> <div className="settings-panel__section settings-panel__section--row">
<div className="settings-panel__section-title">Ollama</div> <label className="settings-panel__label" htmlFor="line-numbers-toggle">
<div className="settings-panel__section"> Line numbers
<label className="settings-panel__label" htmlFor="ollama-url"> </label>
URL <input
</label> id="line-numbers-toggle"
<input type="checkbox"
id="ollama-url" checked={showLineNumbers}
className="settings-panel__input" onChange={(event) => setShowLineNumbers(event.target.checked)}
type="text" />
value={ollamaUrl} </div>
onChange={(event) => setOllamaUrl(event.target.value)} <div className="settings-panel__section settings-panel__section--row">
placeholder={DEFAULT_OLLAMA_URL} <label className="settings-panel__label" htmlFor="split-view-toggle">
/> Split view
</div> </label>
<div className="settings-panel__section"> <input
<label className="settings-panel__label" htmlFor="ollama-model"> id="split-view-toggle"
Model type="checkbox"
</label> checked={splitView}
<select onChange={(event) => setSplitView(event.target.checked)}
id="ollama-model" />
className="settings-panel__select" </div>
value={ollamaModel} <div className="settings-panel__section">
onChange={(event) => setOllamaModel(event.target.value)} <label className="settings-panel__label" htmlFor="text-size">
disabled={ollamaLoading} Text size
> </label>
{ollamaModels.length > 0 ? ( <div className="settings-panel__slider-row">
ollamaModels.map((model) => ( <input
<option key={model} value={model}> id="text-size"
{model} className="settings-panel__range"
type="range"
min={12}
max={18}
step={1}
value={textSize}
onChange={(event) => setTextSize(Number(event.target.value))}
/>
<div className="settings-panel__value">{textSize}px</div>
</div>
</div>
<div className="settings-panel__section-title">Ollama</div>
<div className="settings-panel__section">
<label className="settings-panel__label" htmlFor="ollama-url">
URL
</label>
<input
id="ollama-url"
className="settings-panel__input"
type="text"
value={ollamaUrl}
onChange={(event) => setOllamaUrl(event.target.value)}
placeholder={DEFAULT_OLLAMA_URL}
/>
</div>
<div className="settings-panel__section">
<label className="settings-panel__label" htmlFor="ollama-model">
Model
</label>
<select
id="ollama-model"
className="settings-panel__select"
value={ollamaModel}
onChange={(event) => setOllamaModel(event.target.value)}
disabled={ollamaLoading}
>
{ollamaModels.length > 0 ? (
ollamaModels.map((model) => (
<option key={model} value={model}>
{model}
</option>
))
) : ollamaModel ? (
<option value={ollamaModel}>{ollamaModel}</option>
) : (
<option value="">
{ollamaLoading ? "Loading models…" : "No models found"}
</option> </option>
)) )}
) : ollamaModel ? ( </select>
<option value={ollamaModel}>{ollamaModel}</option> {ollamaError ? (
) : ( <div className="settings-panel__hint">{ollamaError}</div>
<option value=""> ) : null}
{ollamaLoading ? "Loading models…" : "No models found"} </div>
</option> <div className="settings-panel__section">
)} <label className="settings-panel__label" htmlFor="ollama-prompt">
</select> Prompt
{ollamaError ? ( </label>
<div className="settings-panel__hint">{ollamaError}</div> <textarea
) : null} id="ollama-prompt"
</div> className="settings-panel__textarea"
<div className="settings-panel__section"> value={ollamaPrompt}
<label className="settings-panel__label" htmlFor="ollama-prompt"> onChange={(event) => setOllamaPrompt(event.target.value)}
Prompt rows={6}
</label> />
<textarea </div>
id="ollama-prompt" <div className="settings-panel__section-title">Export</div>
className="settings-panel__textarea" <div className="settings-panel__section">
value={ollamaPrompt} <button
onChange={(event) => setOllamaPrompt(event.target.value)} className="button"
rows={6} onClick={() => {
/> handleExportDatabase().catch((error) => {
console.error("Failed to export database", error);
});
}}
disabled={dbExporting}
type="button"
>
{dbExporting ? "Exporting…" : "Export DB"}
</button>
<div className="settings-panel__hint">
Save a backup copy of the current SQLite database.
</div>
{dbExportStatus ? (
<div
className={`settings-panel__status settings-panel__status--${dbExportStatus.tone}`}
>
{dbExportStatus.message}
</div>
) : null}
</div>
</div> </div>
</div> </div>
</div> </div>