From cc4c9f667dbdcbcd16818b6dc2cbe858e060f5df Mon Sep 17 00:00:00 2001
From: Salastil <salastil@cock.li>
Date: Thu, 8 Oct 2026 21:58:57 -0400
Subject: [PATCH] Settings rail: 'You' becomes 'Personal', a rule under each
 heading, About set apart by a rule above (#327)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 src/renderer/src/app.css                          | 15 +++++++++++++--
 .../src/components/settings/SettingsPanel.tsx     |  8 ++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/app.css b/src/renderer/src/app.css
index 6bc00a4..2e7ea1b 100644
--- a/src/renderer/src/app.css
+++ b/src/renderer/src/app.css
@@ -9842,7 +9842,7 @@ video.lightbox-media {
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
-  margin-bottom: var(--spacing-s);
+  margin-bottom: var(--spacing-m);
   padding: 0 var(--spacing-s);
   height: 32px;
   border: 1px solid var(--outline-medium);
@@ -9873,7 +9873,10 @@ video.lightbox-media {
 }
 
 .settings-rail-heading {
-  padding: var(--spacing-xs) var(--spacing-s) 0;
+  /* A rule under each heading, so the sections read as sections. */
+  margin-bottom: var(--spacing-xxs);
+  padding: var(--spacing-xs) var(--spacing-s);
+  border-bottom: 1px solid var(--outline-medium);
   font-size: var(--font-size-xs);
   font-weight: var(--weight-bold);
   letter-spacing: 0.06em;
@@ -10127,3 +10130,11 @@ html[data-reduce-motion] *::after {
   min-height: 0;
   overflow-y: auto;
 }
+
+
+/* About on its own, set off from the rest by a rule above it. */
+.settings-rail-group.apart {
+  margin-top: var(--spacing-s);
+  padding-top: var(--spacing-s);
+  border-top: 1px solid var(--outline-medium);
+}
diff --git a/src/renderer/src/components/settings/SettingsPanel.tsx b/src/renderer/src/components/settings/SettingsPanel.tsx
index a9dd23d..d5f08a7 100644
--- a/src/renderer/src/components/settings/SettingsPanel.tsx
+++ b/src/renderer/src/components/settings/SettingsPanel.tsx
@@ -111,9 +111,9 @@ function GlobalHighlightKeywords(): JSX.Element {
  * regardless.
  */
 const CATEGORIES: { id: string; label: string; group: string; icon?: string; service?: Account['service'] }[] = [
-  // You: the two things that are about you rather than about the app.
-  { id: 'accounts', label: 'Accounts', group: 'You', icon: 'manage_accounts' },
-  { id: 'downloads', label: 'Downloads', group: 'You', icon: 'download' },
+  // Personal: the two things that are about you rather than about the app.
+  { id: 'accounts', label: 'Accounts', group: 'Personal', icon: 'manage_accounts' },
+  { id: 'downloads', label: 'Downloads', group: 'Personal', icon: 'download' },
   // The app itself.
   { id: 'general', label: 'General', group: 'App' },
   { id: 'appearance', label: 'Appearance', group: 'App' },
@@ -333,7 +333,7 @@ export function SettingsPanel({ page = 'settings' }: { page?: 'settings' | 'acco
           )}
         </label>
         {groups.map((group) => (
-          <div key={group} className="settings-rail-group">
+          <div key={group} className={`settings-rail-group${group === 'About' ? ' apart' : ''}`}>
             {group !== 'About' && <div className="settings-rail-heading small muted">{group}</div>}
             {shown
               .filter((c) => c.group === group)