Redesign header: merge app tabs, add search center, remove header from tasks.html
This commit is contained in:
parent
d30d11ab9b
commit
db06e42289
3 changed files with 289 additions and 61 deletions
|
|
@ -261,12 +261,136 @@ body {
|
|||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.header-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
margin: 0 var(--space-lg);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
/* ============================================ */
|
||||
/* HEADER APP TABS */
|
||||
/* ============================================ */
|
||||
.header-app-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
margin-left: var(--space-md);
|
||||
}
|
||||
|
||||
.app-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all var(--transition-fast);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.app-tab:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.app-tab.active {
|
||||
background: var(--accent-light);
|
||||
color: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.app-tab svg {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.app-tab.active svg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ============================================ */
|
||||
/* HEADER SEARCH */
|
||||
/* ============================================ */
|
||||
.header-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: 8px 14px;
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-full);
|
||||
width: 100%;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.header-search:focus-within {
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 3px var(--accent-light);
|
||||
}
|
||||
|
||||
.header-search svg {
|
||||
color: var(--text-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-search .search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.header-search .search-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.search-shortcut {
|
||||
padding: 2px 6px;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* ============================================ */
|
||||
/* NOTIFICATION BADGE */
|
||||
/* ============================================ */
|
||||
.icon-button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
background: var(--error-color);
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -49,43 +49,131 @@
|
|||
|
||||
<!-- Floating header -->
|
||||
<header class="float-header" role="banner">
|
||||
<!-- Left: General Bots logo -->
|
||||
<!-- Left: Logo + App Tabs -->
|
||||
<div class="header-left">
|
||||
<button
|
||||
class="logo-wrapper"
|
||||
onclick="window.location.reload()"
|
||||
title="General Bots - Reload"
|
||||
aria-label="General Bots - Reload application"
|
||||
onclick="window.location.href='/#chat'"
|
||||
title="General Bots"
|
||||
aria-label="General Bots - Home"
|
||||
>
|
||||
<div
|
||||
class="logo-icon"
|
||||
role="img"
|
||||
aria-label="General Bots logo"
|
||||
></div>
|
||||
<span class="logo-text">General Bots</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Right: Theme selector, Apps menu and user avatar -->
|
||||
<div class="header-right">
|
||||
<!-- Theme dropdown selector -->
|
||||
<div
|
||||
id="themeSelectorContainer"
|
||||
aria-label="Theme selector"
|
||||
></div>
|
||||
<!-- Main App Tabs -->
|
||||
<nav class="header-app-tabs">
|
||||
<a
|
||||
class="app-tab active"
|
||||
href="#chat"
|
||||
hx-get="/suite/chat/chat.html"
|
||||
hx-target="#main-content"
|
||||
hx-push-url="/#chat"
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Chat</span>
|
||||
</a>
|
||||
<a
|
||||
class="app-tab"
|
||||
href="#mail"
|
||||
hx-get="/suite/mail/mail.html"
|
||||
hx-target="#main-content"
|
||||
hx-push-url="/#mail"
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
|
||||
/>
|
||||
<polyline points="22,6 12,13 2,6" />
|
||||
</svg>
|
||||
<span>Email</span>
|
||||
</a>
|
||||
<a
|
||||
class="app-tab"
|
||||
href="#calendar"
|
||||
hx-get="/suite/calendar/calendar.html"
|
||||
hx-target="#main-content"
|
||||
hx-push-url="/#calendar"
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<rect
|
||||
x="3"
|
||||
y="4"
|
||||
width="18"
|
||||
height="18"
|
||||
rx="2"
|
||||
ry="2"
|
||||
/>
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
</svg>
|
||||
<span>Calendar</span>
|
||||
</a>
|
||||
<a
|
||||
class="app-tab"
|
||||
href="#tasks"
|
||||
hx-get="/suite/tasks/tasks.html"
|
||||
hx-target="#main-content"
|
||||
hx-push-url="/#tasks"
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M9 11l3 3L22 4" />
|
||||
<path
|
||||
d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"
|
||||
/>
|
||||
</svg>
|
||||
<span>Tasks</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Apps menu button -->
|
||||
<!-- Apps menu button (launcher for all apps) -->
|
||||
<button
|
||||
class="icon-button apps-button"
|
||||
id="appsButton"
|
||||
title="Applications"
|
||||
title="All Applications"
|
||||
aria-label="Open applications menu"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
|
|
@ -101,6 +189,63 @@
|
|||
<circle cx="19" cy="19" r="2"></circle>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Center: Search -->
|
||||
<div class="header-center">
|
||||
<div class="header-search">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<path d="m21 21-4.35-4.35" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
placeholder="Search..."
|
||||
id="globalSearch"
|
||||
/>
|
||||
<kbd class="search-shortcut">⌘K</kbd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Notifications + User -->
|
||||
<div class="header-right">
|
||||
<button class="icon-button" title="Notifications">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
|
||||
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
||||
</svg>
|
||||
<span class="notification-badge">3</span>
|
||||
</button>
|
||||
<button class="icon-button" title="Settings">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path
|
||||
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Apps dropdown menu -->
|
||||
<nav
|
||||
|
|
@ -109,7 +254,7 @@
|
|||
role="menu"
|
||||
aria-label="Applications"
|
||||
>
|
||||
<div class="apps-dropdown-title">Applications</div>
|
||||
<div class="apps-dropdown-title">All Applications</div>
|
||||
<div class="app-grid" role="group">
|
||||
<!-- Chat -->
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -3,48 +3,7 @@
|
|||
Automated Intelligent Task Management Interface
|
||||
============================================================================= -->
|
||||
|
||||
<link rel="stylesheet" href="/themes/sentient/sentient.css" />
|
||||
<link rel="stylesheet" href="/suite/tasks/tasks.css" />
|
||||
|
||||
<div class="tasks-app sentient-theme">
|
||||
<!-- Top Header Bar -->
|
||||
<header class="tasks-topbar">
|
||||
<div class="topbar-left">
|
||||
<div class="topbar-logo">
|
||||
<div class="topbar-logo-icon">⚡</div>
|
||||
<span>Sentient</span>
|
||||
</div>
|
||||
<nav class="topbar-nav">
|
||||
<button class="topbar-nav-item active">Dashboard</button>
|
||||
<button class="topbar-nav-item">Analytics</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="topbar-center">
|
||||
<div class="topbar-search">
|
||||
<span class="topbar-search-icon">🔍</span>
|
||||
<input
|
||||
type="text"
|
||||
class="topbar-search-input"
|
||||
placeholder="Search tasks, intents, logs..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topbar-right">
|
||||
<button class="topbar-icon-btn" title="Notifications">
|
||||
🔔
|
||||
<span class="notification-dot"></span>
|
||||
</button>
|
||||
<button class="topbar-icon-btn" title="Settings">⚙️</button>
|
||||
<div class="topbar-profile">
|
||||
<div class="topbar-avatar">JD</div>
|
||||
<span class="topbar-profile-name">John Doe</span>
|
||||
<span class="topbar-profile-arrow">▼</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="tasks-app">
|
||||
<!-- Main Content Area -->
|
||||
<main class="tasks-main">
|
||||
<!-- Task List Panel (Left) -->
|
||||
|
|
@ -546,4 +505,4 @@
|
|||
</main>
|
||||
</div>
|
||||
|
||||
<script src="/suite/tasks/tasks-sentient.js"></script>
|
||||
<script src="/suite/tasks/tasks.js"></script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue