feat: settings sidebar layout + card header style
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -28,9 +28,11 @@ const exporting = ref(false);
|
||||
const restoring = ref(false);
|
||||
const restoreFileInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
// Tab state — persisted across navigation
|
||||
const activeTab = ref(localStorage.getItem("settings_tab") ?? "general");
|
||||
watch(activeTab, (v) => localStorage.setItem("settings_tab", v));
|
||||
// Migrate stored "admin" → "config"; unknown tabs fall back to "general"
|
||||
const VALID_TABS = new Set(["general", "account", "notifications", "integrations", "data", "config", "users", "logs"]);
|
||||
const _stored = localStorage.getItem("settings_tab") ?? "general";
|
||||
const activeTab = ref(VALID_TABS.has(_stored) ? (_stored === "admin" ? "config" : _stored) : "general");
|
||||
watch(activeTab, (v) => localStorage.setItem("settings_tab", v === "admin" ? "config" : v));
|
||||
|
||||
// Chat retention
|
||||
const chatRetentionDays = ref(90);
|
||||
@@ -440,24 +442,32 @@ function hostname(url: string): string {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="settings-page">
|
||||
<h1>Settings</h1>
|
||||
|
||||
<!-- Tab bar -->
|
||||
<div class="settings-tabs" role="tablist">
|
||||
<button
|
||||
v-for="tab in (authStore.isAdmin
|
||||
? ['general', 'account', 'notifications', 'integrations', 'data', 'admin']
|
||||
: ['general', 'account', 'notifications', 'integrations', 'data'])"
|
||||
:key="tab"
|
||||
role="tab"
|
||||
:aria-selected="activeTab === tab"
|
||||
:class="['tab-btn', { active: activeTab === tab }]"
|
||||
@click="activeTab = tab"
|
||||
>
|
||||
{{ tab.charAt(0).toUpperCase() + tab.slice(1) }}
|
||||
</button>
|
||||
</div>
|
||||
<main class="settings-root">
|
||||
<aside class="settings-sidebar" role="navigation" aria-label="Settings navigation">
|
||||
<div class="sidebar-group">
|
||||
<div class="sidebar-group-label">User</div>
|
||||
<button
|
||||
v-for="tab in ['general', 'account', 'notifications', 'integrations', 'data']"
|
||||
:key="tab"
|
||||
:class="['sidebar-item', { active: activeTab === tab }]"
|
||||
@click="activeTab = tab"
|
||||
>
|
||||
{{ tab.charAt(0).toUpperCase() + tab.slice(1) }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="authStore.isAdmin" class="sidebar-group">
|
||||
<div class="sidebar-group-label">Admin</div>
|
||||
<button
|
||||
v-for="tab in ['config', 'users', 'logs']"
|
||||
:key="tab"
|
||||
:class="['sidebar-item', { active: activeTab === tab }]"
|
||||
@click="activeTab = tab"
|
||||
>
|
||||
{{ tab.charAt(0).toUpperCase() + tab.slice(1) }}
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="settings-content">
|
||||
|
||||
<!-- ── General ── -->
|
||||
<div v-show="activeTab === 'general'" class="settings-grid">
|
||||
@@ -831,7 +841,7 @@ function hostname(url: string): string {
|
||||
</div>
|
||||
|
||||
<!-- ── Admin ── -->
|
||||
<div v-if="authStore.isAdmin" v-show="activeTab === 'admin'" class="settings-grid">
|
||||
<div v-if="authStore.isAdmin" v-show="activeTab === 'config'" class="settings-grid">
|
||||
|
||||
<section class="settings-section full-width">
|
||||
<h2>Application URL</h2>
|
||||
@@ -916,51 +926,73 @@ function hostname(url: string): string {
|
||||
|
||||
</div>
|
||||
|
||||
</div><!-- end .settings-content -->
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.settings-page {
|
||||
/* Settings root layout */
|
||||
.settings-root {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
max-width: 1100px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.settings-page h1 {
|
||||
margin: 0 0 1.25rem;
|
||||
align-items: flex-start;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Tab bar */
|
||||
.settings-tabs {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
/* Sidebar */
|
||||
.settings-sidebar {
|
||||
width: 175px;
|
||||
flex-shrink: 0;
|
||||
position: sticky;
|
||||
top: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.tab-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
background: none;
|
||||
.sidebar-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.sidebar-group-label {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--color-text-muted);
|
||||
padding: 0.25rem 0.75rem 0.2rem;
|
||||
}
|
||||
.sidebar-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -2px;
|
||||
border-left: 2px solid transparent;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-secondary);
|
||||
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
|
||||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||||
white-space: nowrap;
|
||||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||||
transition: color 0.15s, background 0.15s, border-color 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.tab-btn:hover {
|
||||
.sidebar-item:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
.tab-btn.active {
|
||||
.sidebar-item.active {
|
||||
color: var(--color-primary);
|
||||
border-bottom-color: var(--color-primary);
|
||||
background: rgba(99, 102, 241, 0.08);
|
||||
border-left-color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Content panel */
|
||||
.settings-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Two-column grid — small sections pair up, full-width sections span both */
|
||||
.settings-grid {
|
||||
display: grid;
|
||||
@@ -978,8 +1010,12 @@ function hostname(url: string): string {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.settings-section h2 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.05rem;
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.section-desc {
|
||||
margin: 0 0 1rem;
|
||||
@@ -1310,24 +1346,54 @@ function hostname(url: string): string {
|
||||
margin: 0.25rem 0 0;
|
||||
}
|
||||
|
||||
/* Responsive — collapse to 1 column on narrow screens */
|
||||
@media (max-width: 640px) {
|
||||
@media (max-width: 768px) {
|
||||
.settings-root {
|
||||
flex-direction: column;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.settings-sidebar {
|
||||
width: 100%;
|
||||
position: static;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.sidebar-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.sidebar-group-label {
|
||||
width: 100%;
|
||||
}
|
||||
.sidebar-item {
|
||||
width: auto;
|
||||
border-left: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
|
||||
font-size: 0.82rem;
|
||||
padding: 0.35rem 0.7rem;
|
||||
}
|
||||
.sidebar-item.active {
|
||||
border-bottom-color: var(--color-primary);
|
||||
background: rgba(99, 102, 241, 0.08);
|
||||
}
|
||||
.settings-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.settings-section.full-width {
|
||||
grid-column: 1;
|
||||
grid-column: auto;
|
||||
}
|
||||
.settings-page {
|
||||
padding: 0 1rem;
|
||||
margin: 1rem auto;
|
||||
.assistant-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.settings-tabs {
|
||||
gap: 0;
|
||||
.smtp-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.tab-btn {
|
||||
padding: 0.45rem 0.7rem;
|
||||
font-size: 0.82rem;
|
||||
.caldav-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user