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 <[email protected]>
This commit is contained in:
2026-10-08 21:58:57 -04:00
co-authored by Claude Sonnet 5.5
parent f8936c6734
commit cc4c9f667d
2 changed files with 17 additions and 6 deletions
+13 -2
View File
@@ -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);
}
@@ -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)