refactor: render settings in main pane instead of as overlay

- 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

src/components/Bookmarks.tsx

@@ -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}
-        />
-      )}
     </>
   )
 }

src/components/Settings.tsx

@@ -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>
   )

src/index.css

@@ -1422,48 +1422,30 @@ body {
 }
 
 /* Settings Panel */
-.settings-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.7);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.settings-panel {
-  background: #1a1a1a;
-  border: 1px solid #333;
-  border-radius: 8px;
-  width: 90%;
-  max-width: 500px;
-  max-height: 80vh;
-  overflow: hidden;
+.settings-view {
   display: flex;
   flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  padding: 1.5rem;
 }
 
 .settings-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1.5rem;
-  border-bottom: 1px solid #333;
+  margin-bottom: 2rem;
 }
 
 .settings-header h2 {
   margin: 0;
-  font-size: 1.5rem;
+  font-size: 1.75rem;
 }
 
 .settings-content {
-  padding: 1.5rem;
   overflow-y: auto;
   flex: 1;
+  margin-bottom: 2rem;
 }
 
 .setting-group {
@@ -1511,10 +1493,9 @@ body {
 }
 
 .settings-footer {
-  padding: 1.5rem;
-  border-top: 1px solid #333;
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
+  padding-top: 1rem;
 }
 
 .settings-footer .btn-primary {