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);
|
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 {
|
.header-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-sm);
|
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 {
|
.logo-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -49,43 +49,131 @@
|
||||||
|
|
||||||
<!-- Floating header -->
|
<!-- Floating header -->
|
||||||
<header class="float-header" role="banner">
|
<header class="float-header" role="banner">
|
||||||
<!-- Left: General Bots logo -->
|
<!-- Left: Logo + App Tabs -->
|
||||||
<div class="header-left">
|
<div class="header-left">
|
||||||
<button
|
<button
|
||||||
class="logo-wrapper"
|
class="logo-wrapper"
|
||||||
onclick="window.location.reload()"
|
onclick="window.location.href='/#chat'"
|
||||||
title="General Bots - Reload"
|
title="General Bots"
|
||||||
aria-label="General Bots - Reload application"
|
aria-label="General Bots - Home"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="logo-icon"
|
class="logo-icon"
|
||||||
role="img"
|
role="img"
|
||||||
aria-label="General Bots logo"
|
aria-label="General Bots logo"
|
||||||
></div>
|
></div>
|
||||||
<span class="logo-text">General Bots</span>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Right: Theme selector, Apps menu and user avatar -->
|
<!-- Main App Tabs -->
|
||||||
<div class="header-right">
|
<nav class="header-app-tabs">
|
||||||
<!-- Theme dropdown selector -->
|
<a
|
||||||
<div
|
class="app-tab active"
|
||||||
id="themeSelectorContainer"
|
href="#chat"
|
||||||
aria-label="Theme selector"
|
hx-get="/suite/chat/chat.html"
|
||||||
></div>
|
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
|
<button
|
||||||
class="icon-button apps-button"
|
class="icon-button apps-button"
|
||||||
id="appsButton"
|
id="appsButton"
|
||||||
title="Applications"
|
title="All Applications"
|
||||||
aria-label="Open applications menu"
|
aria-label="Open applications menu"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
width="24"
|
width="20"
|
||||||
height="24"
|
height="20"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
|
|
@ -101,6 +189,63 @@
|
||||||
<circle cx="19" cy="19" r="2"></circle>
|
<circle cx="19" cy="19" r="2"></circle>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</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 -->
|
<!-- Apps dropdown menu -->
|
||||||
<nav
|
<nav
|
||||||
|
|
@ -109,7 +254,7 @@
|
||||||
role="menu"
|
role="menu"
|
||||||
aria-label="Applications"
|
aria-label="Applications"
|
||||||
>
|
>
|
||||||
<div class="apps-dropdown-title">Applications</div>
|
<div class="apps-dropdown-title">All Applications</div>
|
||||||
<div class="app-grid" role="group">
|
<div class="app-grid" role="group">
|
||||||
<!-- Chat -->
|
<!-- Chat -->
|
||||||
<a
|
<a
|
||||||
|
|
|
||||||
|
|
@ -3,48 +3,7 @@
|
||||||
Automated Intelligent Task Management Interface
|
Automated Intelligent Task Management Interface
|
||||||
============================================================================= -->
|
============================================================================= -->
|
||||||
|
|
||||||
<link rel="stylesheet" href="/themes/sentient/sentient.css" />
|
<div class="tasks-app">
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Main Content Area -->
|
<!-- Main Content Area -->
|
||||||
<main class="tasks-main">
|
<main class="tasks-main">
|
||||||
<!-- Task List Panel (Left) -->
|
<!-- Task List Panel (Left) -->
|
||||||
|
|
@ -546,4 +505,4 @@
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="/suite/tasks/tasks-sentient.js"></script>
|
<script src="/suite/tasks/tasks.js"></script>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue