From b979a3b0976ebfbdb18b036d9b22c4cf846283cd Mon Sep 17 00:00:00 2001
From: Bastian Wagner <bastian.wagner@softconcis.de>
Date: Mon, 15 Jun 2026 13:58:40 +0200
Subject: [PATCH] floating chat

---
 listify-client/src/app/app.html               |   4 +-
 listify-client/src/app/app.scss               |  17 --
 .../assistant/assistant-chat.component.html   | 147 ++++++++++--------
 .../assistant/assistant-chat.component.scss   |  64 ++++++--
 .../app/assistant/assistant-chat.component.ts |   9 ++
 .../src/app/lists/lists.component.ts          |   2 +-
 6 files changed, 151 insertions(+), 92 deletions(-)

diff --git a/listify-client/src/app/app.html b/listify-client/src/app/app.html
index 127d37c..123b1ba 100644
--- a/listify-client/src/app/app.html
+++ b/listify-client/src/app/app.html
@@ -104,12 +104,12 @@
         <main class="app-main">
           <router-outlet />
         </main>
-
-        <app-assistant-chat class="assistant-sidebar" />
       </div>
     </mat-sidenav-content>
   </mat-sidenav-container>
 
+  <app-assistant-chat />
+
   <nav class="bottom-nav" aria-label="Mobile Hauptnavigation">
     <a
       class="bottom-nav-link"
diff --git a/listify-client/src/app/app.scss b/listify-client/src/app/app.scss
index 206e76f..9fd93fd 100644
--- a/listify-client/src/app/app.scss
+++ b/listify-client/src/app/app.scss
@@ -125,10 +125,6 @@
   min-height: calc(100dvh - 56px);
 }
 
-.assistant-sidebar {
-  min-width: 0;
-}
-
 .shell .app-main {
   padding-bottom: calc(76px + env(safe-area-inset-bottom));
 }
@@ -232,16 +228,3 @@
     display: none;
   }
 }
-
-@media (min-width: 1041px) {
-  .shell-workspace {
-    grid-template-columns: minmax(0, 1fr) 360px;
-    align-items: start;
-  }
-
-  .assistant-sidebar {
-    position: sticky;
-    top: 64px;
-    min-height: calc(100dvh - 64px);
-  }
-}
diff --git a/listify-client/src/app/assistant/assistant-chat.component.html b/listify-client/src/app/assistant/assistant-chat.component.html
index 6e4d034..f935693 100644
--- a/listify-client/src/app/assistant/assistant-chat.component.html
+++ b/listify-client/src/app/assistant/assistant-chat.component.html
@@ -1,70 +1,95 @@
-<section class="assistant-shell" aria-label="Listify-Assistent">
-  <header class="assistant-header">
-    <div>
-      <h2>Assistent</h2>
-      <p>{{ onlineStatus.online() ? 'Listen planen und erstellen' : 'Nur online verfuegbar' }}</p>
-    </div>
-    <mat-icon aria-hidden="true">{{ onlineStatus.online() ? 'auto_awesome' : 'cloud_off' }}</mat-icon>
-  </header>
+<div class="assistant-floating">
+  @if (open()) {
+    <section class="assistant-shell" aria-label="Listify-Assistent">
+      <header class="assistant-header">
+        <div>
+          <h2>Assistent</h2>
+          <p>{{ onlineStatus.online() ? 'Listen planen und erstellen' : 'Nur online verfuegbar' }}</p>
+        </div>
+        <button
+          mat-icon-button
+          type="button"
+          aria-label="Assistent schliessen"
+          (click)="close()"
+        >
+          <mat-icon aria-hidden="true">close</mat-icon>
+        </button>
+      </header>
 
-  <div class="message-list" aria-live="polite">
-    @for (message of messages(); track $index) {
-      <article class="message" [class.user-message]="message.role === 'user'">
-        <div
-          class="message-content"
-          [innerHTML]="formatMessage(message.content)"
-        ></div>
+      <div class="message-list" aria-live="polite">
+        @for (message of messages(); track $index) {
+          <article class="message" [class.user-message]="message.role === 'user'">
+            <div
+              class="message-content"
+              [innerHTML]="formatMessage(message.content)"
+            ></div>
 
-        @if (message.actions?.length) {
-          <div class="action-list">
-            @for (action of message.actions; track action.type + action.listId) {
-              <a mat-stroked-button [routerLink]="['/lists', action.listId]">
-                <mat-icon aria-hidden="true">open_in_new</mat-icon>
-                {{ actionLabel(action) }}
-              </a>
+            @if (message.actions?.length) {
+              <div class="action-list">
+                @for (action of message.actions; track action.type + action.listId) {
+                  <a mat-stroked-button [routerLink]="['/lists', action.listId]">
+                    <mat-icon aria-hidden="true">open_in_new</mat-icon>
+                    {{ actionLabel(action) }}
+                  </a>
+                }
+              </div>
             }
+          </article>
+        }
+
+        @if (sending()) {
+          <div class="assistant-loading">
+            <mat-progress-spinner mode="indeterminate" diameter="22" />
+            <span>Antwort wird erstellt</span>
           </div>
         }
-      </article>
-    }
-
-    @if (sending()) {
-      <div class="assistant-loading">
-        <mat-progress-spinner mode="indeterminate" diameter="22" />
-        <span>Antwort wird erstellt</span>
       </div>
-    }
-  </div>
 
-  @if (errorMessage()) {
-    <p class="assistant-error">
-      <mat-icon aria-hidden="true">error</mat-icon>
-      {{ errorMessage() }}
-    </p>
+      @if (errorMessage()) {
+        <p class="assistant-error">
+          <mat-icon aria-hidden="true">error</mat-icon>
+          {{ errorMessage() }}
+        </p>
+      }
+
+      <div class="composer">
+        <mat-form-field appearance="outline">
+          <mat-label>Nachricht</mat-label>
+          <textarea
+            matInput
+            rows="3"
+            [value]="draft()"
+            [disabled]="!onlineStatus.online()"
+            (input)="draft.set($any($event.target).value)"
+            (keydown.enter)="handleEnter($event)"
+          ></textarea>
+        </mat-form-field>
+
+        <button
+          mat-flat-button
+          type="button"
+          [disabled]="!canSend()"
+          (click)="send()"
+          aria-label="Nachricht senden"
+        >
+          <mat-icon aria-hidden="true">send</mat-icon>
+          Senden
+        </button>
+      </div>
+    </section>
   }
 
-  <div class="composer">
-    <mat-form-field appearance="outline">
-      <mat-label>Nachricht</mat-label>
-      <textarea
-        matInput
-        rows="3"
-        [value]="draft()"
-        [disabled]="!onlineStatus.online()"
-        (input)="draft.set($any($event.target).value)"
-        (keydown.enter)="handleEnter($event)"
-      ></textarea>
-    </mat-form-field>
-
-    <button
-      mat-flat-button
-      type="button"
-      [disabled]="!canSend()"
-      (click)="send()"
-      aria-label="Nachricht senden"
-    >
-      <mat-icon aria-hidden="true">send</mat-icon>
-      Senden
-    </button>
-  </div>
-</section>
+  <button
+    mat-fab
+    type="button"
+    class="assistant-launcher"
+    [class.offline]="!onlineStatus.online()"
+    [attr.aria-expanded]="open()"
+    [attr.aria-label]="open() ? 'Assistent schliessen' : 'Assistent oeffnen'"
+    (click)="toggleOpen()"
+  >
+    <mat-icon aria-hidden="true">
+      {{ open() ? 'close' : (onlineStatus.online() ? 'auto_awesome' : 'cloud_off') }}
+    </mat-icon>
+  </button>
+</div>
diff --git a/listify-client/src/app/assistant/assistant-chat.component.scss b/listify-client/src/app/assistant/assistant-chat.component.scss
index 044ec6d..d7185cd 100644
--- a/listify-client/src/app/assistant/assistant-chat.component.scss
+++ b/listify-client/src/app/assistant/assistant-chat.component.scss
@@ -1,18 +1,32 @@
 :host {
-  display: block;
-  min-width: 0;
+  display: contents;
+}
+
+.assistant-floating {
+  position: fixed;
+  right: 1rem;
+  bottom: calc(76px + env(safe-area-inset-bottom));
+  z-index: 35;
+  display: grid;
+  justify-items: end;
+  gap: 0.75rem;
+  pointer-events: none;
 }
 
 .assistant-shell {
   display: grid;
   grid-template-rows: auto minmax(220px, 1fr) auto auto;
   gap: 0.75rem;
-  width: 100%;
-  min-height: 420px;
-  max-height: calc(100dvh - 88px);
+  width: min(360px, calc(100vw - 2rem));
+  height: min(640px, calc(100dvh - 166px));
+  min-height: 360px;
   padding: 0.85rem;
-  border-left: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 72%, transparent);
-  background: color-mix(in srgb, var(--mat-sys-surface) 94%, transparent);
+  border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 72%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--mat-sys-surface) 96%, transparent);
+  box-shadow: 0 18px 48px color-mix(in srgb, var(--mat-sys-shadow) 20%, transparent);
+  pointer-events: auto;
+  backdrop-filter: blur(14px);
 }
 
 .assistant-header {
@@ -44,6 +58,10 @@
   color: var(--mat-sys-primary);
 }
 
+.assistant-header button {
+  flex: 0 0 auto;
+}
+
 .message-list {
   display: flex;
   flex-direction: column;
@@ -158,10 +176,34 @@
   justify-self: end;
 }
 
-@media (max-width: 1040px) {
+.assistant-launcher {
+  pointer-events: auto;
+  box-shadow: 0 12px 28px color-mix(in srgb, var(--mat-sys-shadow) 24%, transparent);
+}
+
+.assistant-launcher.offline {
+  --mdc-fab-container-color: var(--mat-sys-error-container);
+  --mat-fab-foreground-color: var(--mat-sys-on-error-container);
+}
+
+@media (min-width: 801px) {
+  .assistant-floating {
+    bottom: 1rem;
+  }
+
   .assistant-shell {
-    max-height: none;
-    border-top: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 72%, transparent);
-    border-left: 0;
+    height: min(640px, calc(100dvh - 6rem));
+  }
+}
+
+@media (max-width: 480px) {
+  .assistant-floating {
+    right: 0.75rem;
+    left: 0.75rem;
+  }
+
+  .assistant-shell {
+    width: 100%;
+    height: min(620px, calc(100dvh - 154px));
   }
 }
diff --git a/listify-client/src/app/assistant/assistant-chat.component.ts b/listify-client/src/app/assistant/assistant-chat.component.ts
index 433dc9b..a9253c4 100644
--- a/listify-client/src/app/assistant/assistant-chat.component.ts
+++ b/listify-client/src/app/assistant/assistant-chat.component.ts
@@ -47,6 +47,7 @@ export class AssistantChatComponent {
   protected readonly draft = signal('');
   protected readonly sending = signal(false);
   protected readonly errorMessage = signal<string | null>(null);
+  protected readonly open = signal(false);
   protected readonly canSend = computed(
     () =>
       this.draft().trim().length > 0 &&
@@ -109,6 +110,14 @@ export class AssistantChatComponent {
       });
   }
 
+  protected toggleOpen(): void {
+    this.open.update((open) => !open);
+  }
+
+  protected close(): void {
+    this.open.set(false);
+  }
+
   private resolveContext(): Observable<AssistantPageContext> {
     const route = this.router.url || '/';
     const path = route.split(/[?#]/)[0] || '/';
diff --git a/listify-client/src/app/lists/lists.component.ts b/listify-client/src/app/lists/lists.component.ts
index c0d6fb9..07d7764 100644
--- a/listify-client/src/app/lists/lists.component.ts
+++ b/listify-client/src/app/lists/lists.component.ts
@@ -63,7 +63,7 @@ export class ListsComponent implements OnInit {
   protected readonly errorMessage = signal<string | null>(null);
   protected readonly searchTerm = signal('');
   protected readonly kindFilter = signal<ListKindFilter>('all');
-  protected readonly statusFilter = signal<ListStatusFilter>('all');
+  protected readonly statusFilter = signal<ListStatusFilter>('open');
   protected readonly sortOption = signal<ListSortOption>('updated-desc');
   protected readonly hasLists = computed(() => this.lists().length > 0);
   protected readonly visibleLists = computed(() => {