switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Changeset 0.37.10 (#222)

Browse Source 
Co-authored-by: gobha <jasafpro@gmail.com>
Co-committed-by: gobha <jasafpro@gmail.com>
This commit is contained in:
gobha
2026-03-21 23:39:23 +00:00
committed by xcaliber
parent 37b639c9c8
commit 8d8a118232
52 changed files with 3209 additions and 13811 deletions
Download Patch File Download Diff File Expand all files Collapse all files

608
src/css/sw-chat-surface.css Normal file
View File

@@ -0,0 +1,608 @@
/* ==========================================
Chat Switchboard — Chat Surface CSS
==========================================
v0.37.10: New Preact chat surface layout.
sw-chat-surface__ prefixed, no legacy conflicts.
========================================== */
/* ── Root Layout ──────────────────────────── */
.sw-chat-surface {
display: flex;
width: 100%;
height: 100%;
flex: 1 1 0%;
overflow: hidden;
background: var(--bg, #0e0e10);
}
/* ── Sidebar ──────────────────────────────── */
.sw-chat-surface__sidebar {
width: 260px;
flex-shrink: 0;
display: flex;
flex-direction: column;
background: var(--bg-secondary, #151517);
border-right: 1px solid var(--border, #2a2a2e);
overflow: hidden;
z-index: 20;
}
.sw-chat-surface__sidebar-header {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px 6px;
flex-shrink: 0;
}
.sw-chat-surface__new-chat-btn {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
padding: 8px 12px;
background: var(--accent-dim, rgba(179, 138, 78, 0.1));
border: 1px solid var(--accent, #b38a4e);
border-radius: 8px;
color: var(--accent, #b38a4e);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.sw-chat-surface__collapse-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: none;
border: none;
border-radius: 6px;
color: var(--text-3, #555);
cursor: pointer;
flex-shrink: 0;
transition: color 0.15s, background 0.15s;
}
.sw-chat-surface__collapse-btn:hover {
color: var(--text, #eee);
background: var(--bg, #0e0e10);
}
.sw-chat-surface__new-chat-btn:hover {
background: rgba(179, 138, 78, 0.2);
}
/* ── Search ───────────────────────────────── */
.sw-chat-surface__search-wrap {
position: relative;
padding: 4px 12px 8px;
flex-shrink: 0;
}
.sw-chat-surface__search-icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--text-3, #555);
pointer-events: none;
display: flex;
}
.sw-chat-surface__search {
width: 100%;
padding: 6px 8px 6px 30px;
background: var(--bg, #0e0e10);
border: 1px solid var(--border, #2a2a2e);
border-radius: 6px;
color: var(--text, #eee);
font-size: 12px;
font-family: inherit;
outline: none;
box-sizing: border-box;
}
.sw-chat-surface__search:focus {
border-color: var(--accent, #b38a4e);
}
/* ── Sidebar Body (scrollable) ────────────── */
.sw-chat-surface__sidebar-body {
flex: 1;
overflow-y: auto;
min-height: 0;
padding-bottom: 8px;
}
/* ── Section ──────────────────────────────── */
.sw-chat-surface__section {
margin-top: 4px;
}
.sw-chat-surface__section-header {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 6px 12px;
background: none;
border: none;
color: var(--text-2, #999);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: color 0.15s;
}
.sw-chat-surface__section-header:hover {
color: var(--text, #eee);
}
.sw-chat-surface__chevron {
display: flex;
transition: transform 0.15s;
}
.sw-chat-surface__chevron--open {
transform: rotate(90deg);
}
.sw-chat-surface__section-count {
margin-left: auto;
font-size: 10px;
color: var(--text-3, #555);
font-weight: 400;
}
.sw-chat-surface__section-body {
padding: 0 4px;
}
.sw-chat-surface__empty {
padding: 8px 16px;
font-size: 12px;
color: var(--text-3, #555);
}
/* ── Sidebar Item ─────────────────────────── */
.sw-chat-surface__item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 6px 12px;
background: none;
border: none;
border-radius: 6px;
color: var(--text-2, #999);
font-size: 13px;
cursor: pointer;
text-align: left;
transition: background 0.1s, color 0.1s;
position: relative;
}
.sw-chat-surface__item:hover {
background: var(--bg, #0e0e10);
color: var(--text, #eee);
}
.sw-chat-surface__item--active {
background: var(--accent-dim, rgba(179, 138, 78, 0.1));
color: var(--text, #eee);
}
.sw-chat-surface__item--indent {
padding-left: 28px;
}
.sw-chat-surface__item-icon {
display: flex;
flex-shrink: 0;
color: var(--text-3, #555);
}
.sw-chat-surface__item-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sw-chat-surface__item-menu {
display: none;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: none;
border: none;
border-radius: 4px;
color: var(--text-3, #555);
cursor: pointer;
flex-shrink: 0;
padding: 0;
}
.sw-chat-surface__item:hover .sw-chat-surface__item-menu {
display: flex;
}
.sw-chat-surface__item-menu:hover {
color: var(--text, #eee);
background: var(--bg-secondary, #151517);
}
/* ── Unread Badge ─────────────────────────── */
.sw-chat-surface__unread {
background: var(--accent, #b38a4e);
color: var(--bg, #0e0e10);
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: 10px;
flex-shrink: 0;
}
/* ── Folder ───────────────────────────────── */
.sw-chat-surface__folder {
margin: 2px 0;
}
.sw-chat-surface__folder-header {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
color: var(--text-3, #555);
font-size: 11px;
}
.sw-chat-surface__folder-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
.sw-chat-surface__folder-count {
font-size: 10px;
color: var(--text-3, #555);
}
/* ── Context Menu ─────────────────────────── */
.sw-chat-surface__context-menu {
position: fixed;
z-index: 200;
background: var(--bg-secondary, #151517);
border: 1px solid var(--border, #2a2a2e);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
padding: 4px;
min-width: 160px;
}
.sw-chat-surface__context-menu button {
display: block;
width: 100%;
padding: 6px 12px;
background: none;
border: none;
border-radius: 4px;
color: var(--text, #eee);
font-size: 12px;
cursor: pointer;
text-align: left;
}
.sw-chat-surface__context-menu button:hover {
background: var(--bg, #0e0e10);
}
.sw-chat-surface__ctx-danger {
color: var(--danger, #f44336) !important;
}
/* ── Sidebar Footer ───────────────────────── */
.sw-chat-surface__sidebar-footer {
display: flex;
align-items: center;
padding: 8px 12px;
border-top: 1px solid var(--border, #2a2a2e);
flex-shrink: 0;
position: relative;
}
/* ── Main Area ────────────────────────────── */
.sw-chat-surface__main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
position: relative;
}
/* ── Workspace Header ─────────────────────── */
.sw-chat-surface__workspace-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 10px;
border-bottom: 1px solid var(--border, #2a2a2e);
background: var(--bg-secondary, #151517);
flex-shrink: 0;
min-height: 40px;
}
.sw-chat-surface__workspace-header-left,
.sw-chat-surface__workspace-header-right {
display: flex;
align-items: center;
gap: 6px;
}
.sw-chat-surface__sidebar-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: none;
border: none;
border-radius: 6px;
color: var(--text-3, #555);
cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.sw-chat-surface__sidebar-toggle:hover {
color: var(--text, #eee);
background: var(--bg, #0e0e10);
}
/* ── Tools Button ─────────────────────────── */
.sw-chat-surface__tools-btn {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: none;
border: none;
border-radius: 6px;
color: var(--text-3, #555);
cursor: pointer;
position: relative;
transition: color 0.15s;
}
.sw-chat-surface__tools-btn:hover {
color: var(--text, #eee);
}
.sw-chat-surface__tools-badge {
position: absolute;
top: 2px;
right: 2px;
background: var(--danger, #f44336);
color: #fff;
font-size: 9px;
font-weight: 700;
width: 14px;
height: 14px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* ── Workspace ────────────────────────────── */
.sw-chat-surface__workspace {
flex: 1 1 0%;
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
position: relative;
overflow: hidden;
}
.sw-chat-surface__chat-pane {
flex: 1 1 0%;
min-height: 0;
min-width: 0;
}
/* ── Sidebar Overlay (mobile) ─────────────── */
.sw-chat-surface__sidebar-overlay {
display: none; /* Hidden on desktop */
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 15;
}
/* ── Tools Popup ──────────────────────────── */
.sw-tools-popup {
position: absolute;
top: 44px;
right: 8px;
width: 300px;
max-height: 420px;
background: var(--bg-secondary, #151517);
border: 1px solid var(--border, #2a2a2e);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
z-index: 100;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sw-tools-popup__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px 8px;
border-bottom: 1px solid var(--border, #2a2a2e);
flex-shrink: 0;
}
.sw-tools-popup__title {
font-size: 13px;
font-weight: 600;
color: var(--text, #eee);
}
.sw-tools-popup__badge {
font-size: 10px;
color: var(--danger, #f44336);
background: rgba(244, 67, 54, 0.1);
padding: 2px 8px;
border-radius: 10px;
}
.sw-tools-popup__body {
flex: 1;
overflow-y: auto;
min-height: 0;
padding: 8px;
}
.sw-tools-popup__empty {
padding: 16px;
text-align: center;
color: var(--text-3, #555);
font-size: 12px;
}
.sw-tools-popup__category {
margin-bottom: 4px;
}
.sw-tools-popup__cat-header {
display: flex;
align-items: center;
gap: 6px;
}
.sw-tools-popup__cat-toggle {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
background: none;
border: none;
color: var(--text, #eee);
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 4px 6px;
border-radius: 4px;
text-align: left;
}
.sw-tools-popup__cat-toggle:hover {
background: var(--bg, #0e0e10);
}
.sw-tools-popup__chevron {
font-size: 8px;
transition: transform 0.15s;
display: inline-block;
}
.sw-tools-popup__chevron--open {
transform: rotate(90deg);
}
.sw-tools-popup__cat-count {
color: var(--text-3, #555);
font-weight: 400;
font-size: 10px;
}
.sw-tools-popup__cat-switch {
flex-shrink: 0;
cursor: pointer;
}
.sw-tools-popup__cat-switch input {
accent-color: var(--accent, #b38a4e);
}
.sw-tools-popup__tool {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 4px 6px 4px 22px;
font-size: 12px;
cursor: pointer;
border-radius: 4px;
}
.sw-tools-popup__tool:hover {
background: var(--bg, #0e0e10);
}
.sw-tools-popup__tool input {
margin-top: 2px;
accent-color: var(--accent, #b38a4e);
}
.sw-tools-popup__tool-name {
color: var(--text, #eee);
font-size: 12px;
}
.sw-tools-popup__tool-desc {
color: var(--text-3, #555);
font-size: 11px;
margin-left: auto;
}
/* ── Responsive: Mobile ───────────────────── */
@media (max-width: 768px) {
.sw-chat-surface__sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 280px;
z-index: 20;
}
.sw-chat-surface__sidebar-overlay {
display: block;
}
.sw-chat-surface__collapse-btn {
display: none;
}
}