aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-27 02:34:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: render settings in main pane instead of as overlay

Browse Source 
- Move Settings component from overlay to main pane
- Update Settings styling for inline display
- Conditionally render Settings or ContentPanel in main pane
- Remove overlay-specific styles and simplify layout
This commit is contained in:
Gigi
2025-10-05 02:40:38 +01:00
parent 7e5196d73d
commit 89e089ad25
3 changed files with 42 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Bookmarks.tsx
View File

@@ -176,7 +176,15 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
onOpenSettings={() => setShowSettings(true)}
/>
</div>
<div className="pane main">
<div className="pane main">
{showSettings ? (
<Settings
settings={settings}
onSave={handleSaveSettings}
onClose={() => setShowSettings(false)}
isSaving={isSavingSettings}
/>
) : (
<ContentPanel
loading={readerLoading}
title={readerContent?.title}
@@ -188,7 +196,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
onHighlightClick={setSelectedHighlightId}
selectedHighlightId={selectedHighlightId}
/>
</div>
)}
</div>
<div className="pane highlights">
<HighlightsPanel
highlights={highlights}
@@ -204,14 +213,6 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
/>
</div>
</div>
{showSettings && (
<Settings
settings={settings}
onSave={handleSaveSettings}
onClose={() => setShowSettings(false)}
isSaving={isSavingSettings}
/>
)}
</>
)
}

46
src/components/Settings.tsx
View File

@@ -23,20 +23,19 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
}
return (
<div className="settings-overlay">
<div className="settings-panel">
<div className="settings-header">
<h2>Settings</h2>
<IconButton
icon={faTimes}
onClick={onClose}
title="Close settings"
ariaLabel="Close settings"
variant="ghost"
/>
</div>
<div className="settings-view">
<div className="settings-header">
<h2>Settings</h2>
<IconButton
icon={faTimes}
onClick={onClose}
title="Close settings"
ariaLabel="Close settings"
variant="ghost"
/>
</div>
<div className="settings-content">
<div className="settings-content">
<div className="setting-group">
<label htmlFor="collapseOnArticleOpen" className="checkbox-label">
<input
@@ -102,18 +101,17 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
<span>Start with highlights panel collapsed</span>
</label>
</div>
</div>
</div>
<div className="settings-footer">
<button
className="btn-primary"
onClick={handleSave}
disabled={isSaving}
>
<FontAwesomeIcon icon={faSave} />
{isSaving ? 'Saving...' : 'Save Settings'}
</button>
</div>
<div className="settings-footer">
<button
className="btn-primary"
onClick={handleSave}
disabled={isSaving}
>
<FontAwesomeIcon icon={faSave} />
{isSaving ? 'Saving...' : 'Save Settings'}
</button>
</div>
</div>
)