feat(FN-4659): add room title switcher dropdown

Adds a room title switcher dropdown to the chat view, with corresponding styles and a new rooms test file.

Fusion-Task-Id: FN-4659
This commit is contained in:
Fusion
2026-05-15 14:52:56 -07:00
committed by gsxdsm
parent 73d8cb92af
commit e50a4b5ad6
4 changed files with 223 additions and 1 deletions

View File

@@ -392,6 +392,85 @@
max-width: 100%;
}
.chat-room-switcher-menu {
position: relative;
min-width: 0;
}
.chat-room-switcher-trigger {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
padding: 0;
font: inherit;
line-height: normal;
cursor: pointer;
}
.chat-room-switcher-trigger:hover {
color: var(--text);
background: var(--card-hover);
}
.chat-room-switcher-trigger:focus-visible {
outline: none;
box-shadow: var(--focus-ring-strong);
}
.chat-room-switcher-trigger > svg {
color: var(--text-muted);
flex-shrink: 0;
}
.chat-room-switcher-dropdown {
position: absolute;
top: calc(100% + var(--space-xs));
left: 0;
min-width: calc(var(--space-xl) * 6);
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-xs);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-lg);
z-index: 4;
max-height: calc(var(--space-xl) * 10);
overflow-y: auto;
}
.chat-room-switcher-option {
width: 100%;
display: flex;
align-items: center;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
cursor: pointer;
text-align: left;
padding: var(--space-sm) var(--space-md);
line-height: normal;
}
.chat-room-switcher-option:hover {
background: var(--card-hover);
}
.chat-room-switcher-option:focus-visible {
outline: none;
box-shadow: var(--focus-ring-strong);
}
.chat-room-switcher-option--active {
background: color-mix(in srgb, var(--todo) 12%, transparent);
}
.chat-mobile-session-trigger {
width: 100%;
max-width: 100%;
@@ -1634,6 +1713,13 @@
width: 100%;
}
.chat-room-switcher-dropdown {
left: 0;
right: auto;
min-width: calc(var(--space-xl) * 5);
max-width: min(calc(var(--space-xl) * 10), calc(100vw - var(--space-2xl)));
}
.chat-thread-header-identity .chat-thread-header-title,
.chat-thread-header-identity .chat-model-tag {
overflow: hidden;