Collapse archived sessions by default

src/client/src/components/SessionList.ts

@@ -18,6 +18,7 @@ export class SessionList extends LitElement {
   @property({ attribute: false }) onSelect?: (session: SessionInfo) => void;
   @property({ attribute: false }) onStart?: () => void;
   @state() private openMenuSessionId: string | undefined;
+  @state() private archivedExpanded = false;
   private readonly onDocumentClick = (event: MouseEvent) => {
     if (event.composedPath().includes(this)) return;
     this.openMenuSessionId = undefined;
@@ -37,6 +38,7 @@ export class SessionList extends LitElement {
 
   protected override updated(changed: PropertyValues<this>): void {
     if (changed.has("sessions") && this.openMenuSessionId !== undefined && !this.sessions.some((session) => session.id === this.openMenuSessionId)) this.openMenuSessionId = undefined;
+    if (changed.has("sessions") && !this.sessions.some((session) => session.archived === true)) this.archivedExpanded = false;
   }
 
   override render() {
@@ -47,8 +49,8 @@ export class SessionList extends LitElement {
         <h2>Sessions <button ?disabled=${!this.canStart} @click=${() => this.onStart?.()}>+</button></h2>
         ${active.map((session) => this.renderSession(session))}
         ${archived.length > 0 ? html`
-          <h2 class="subheading">Archived</h2>
-          ${archived.map((session) => this.renderSession(session))}
+          <h2 class="subheading"><button class="section-toggle" aria-expanded=${String(this.archivedExpanded)} @click=${() => { this.toggleArchived(); }}><span>${this.archivedExpanded ? "▾" : "▸"} Archived</span><small>${archived.length}</small></button></h2>
+          ${this.archivedExpanded ? archived.map((session) => this.renderSession(session)) : null}
         ` : null}
       </section>
     `;
@@ -78,6 +80,11 @@ export class SessionList extends LitElement {
     this.openMenuSessionId = this.openMenuSessionId === sessionId ? undefined : sessionId;
   }
 
+  private toggleArchived() {
+    this.archivedExpanded = !this.archivedExpanded;
+    if (!this.archivedExpanded) this.openMenuSessionId = undefined;
+  }
+
   private renderStatus(session: SessionInfo) {
     if (session.archived === true) return "read-only · ";
     const status = this.statuses[session.id];

src/client/src/components/shared.ts

@@ -91,6 +91,8 @@ export const listStyles = css`
   button { border: 1px solid #30363d; border-radius: 8px; background: #161b22; color: #e6edf3; padding: 7px 9px; cursor: pointer; }
   section > button { display: block; width: 100%; text-align: left; margin: 6px 0; }
   .subheading { margin-top: 14px; }
+  .section-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: transparent; color: inherit; padding: 0; font: inherit; text-transform: inherit; }
+  .section-toggle small { display: inline; color: inherit; font-size: inherit; }
   .session-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin: 6px 0; }
   .session-row.selected .session-main { border-color: #58a6ff; background: #0d2847; }
   .session-row.archived .session-main { color: #8b949e; }