From af133c9e9cfd8bb4d050be7ac4b43cd7046ffde6 Mon Sep 17 00:00:00 2001
From: Dominik Halfkann <dominik.halfkann@mailbox.org>
Date: Thu, 9 Apr 2026 20:43:43 +0200
Subject: [PATCH 1/9] docs: add design spec for collapsible side panels

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../2026-04-09-collapsible-panels-design.md   | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-04-09-collapsible-panels-design.md

diff --git a/docs/superpowers/specs/2026-04-09-collapsible-panels-design.md b/docs/superpowers/specs/2026-04-09-collapsible-panels-design.md
new file mode 100644
index 0000000..a04f214
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-09-collapsible-panels-design.md
@@ -0,0 +1,78 @@
+# Collapsible Side Panels
+
+## Kontext
+
+Die Arbeits-View hat zwei Seitenpanels: den Navigator (links, 360–400px) und den Tagesplan-Kalender (rechts, 260px). Beide sind aktuell fest sichtbar und nehmen viel Platz ein. Der Kalender hat bereits eine rudimentäre Collapse-Funktion (schmaler 8px-Streifen mit einzelnem Chevron), die aber optisch nicht hochwertig ist.
+
+Ziel: Beide Panels sollen sich elegant ein- und ausklappen lassen — mit einheitlichem Pattern, inspiriert von Sunsama. Default ist ausgeklappt.
+
+## Design
+
+### Verhalten
+
+- **Ausgeklappt (Default):** Panel ist voll sichtbar. Im Header sitzt ein subtiler Toggle-Button (rechts im linken Panel, links im rechten Panel).
+- **Eingeklappt:** Panel verschwindet komplett. Ein kleiner, unauffälliger Button erscheint in der entsprechenden Ecke des Workbench-Bereichs (oben links für Navigator, oben rechts für Kalender).
+- **Unabhängig:** Beide Panels werden separat gesteuert. Jede Kombination ist möglich.
+- **Persistenz:** Zustand wird in localStorage gespeichert, überlebt Page-Reloads.
+
+### Icons (Lucide)
+
+| Zustand | Links (Navigator) | Rechts (Kalender) |
+|---------|-------------------|-------------------|
+| Ausgeklappt → Einklappen | `PanelLeftClose` | `PanelRightClose` |
+| Eingeklappt → Aufklappen | `PanelLeftOpen` | `PanelRightOpen` |
+
+### Toggle-Button Styling
+
+- **Im Header (ausgeklappt):** Ghost-Button, `text-muted`, hover → `text-body` + `bg-surface`. Kein Border, kein Background im Ruhezustand. Subtil und unauffällig.
+- **Im Workbench (eingeklappt):** Leicht sichtbarer Button mit `bg-surface`-Background und `border-subtle` Border. Rundet sich ein (border-radius). Hover → etwas prominenter. Positioniert sich absolut in der Ecke, überlagert den Workbench-Content nicht störend.
+- Beide Varianten: `focus-visible:outline-2 focus-visible:outline-[var(--color-focus-ring)]`, `transition-colors duration-100`.
+
+### Animation
+
+- 150ms `transition` auf `width` (oder `max-width`) + `opacity` des Panels.
+- Panel gleitet raus, Workbench expandiert flüssig nach.
+- `@media (prefers-reduced-motion: reduce)` → keine Transition.
+
+### localStorage Keys
+
+- Navigator: `orbit.navigator.sidebarCollapsed` (neuer Key, existierender `orbit.navigator.collapsed` bleibt für Sections)
+- Kalender: `orbit.dayCalendar.collapsed` (bestehender Key wird weiterverwendet)
+
+## Betroffene Dateien
+
+### `src/app/shared/view-arbeit/view-arbeit.ts` + `.html`
+- Neuen `sidebarCollapsed` Signal hinzufügen mit localStorage-Init
+- `toggleSidebar()` Methode
+- Template: `@if`-Bedingung um `<aside>`, Toggle-Button im Workbench-Bereich wenn eingeklappt
+- Lucide-Imports: `LucidePanelLeftClose`, `LucidePanelLeftOpen`
+
+### `src/app/shared/navigator/navigator.ts` + `.html`
+- Toggle-Button im Navigator-Header hinzufügen (ruft Parent-Methode auf via Output)
+- Oder: Toggle-Button direkt in `view-arbeit.html` im `<aside>`-Header platzieren (einfacher, da state in ViewArbeit lebt)
+
+### `src/app/calendar/day-calendar-panel/day-calendar-panel.ts`
+- Bestehende Collapse-Logik refactorn: schmaler 8px-Streifen entfernt
+- Stattdessen: Panel verschwindet komplett wenn collapsed
+- Toggle-Button im Header wie Navigator (mit `PanelRightClose`)
+- `hostClass` computed anpassen: collapsed → `hidden` oder `w-0 overflow-hidden`
+- Aufklapp-Button wird von `view-arbeit.html` gerendert (nicht vom Panel selbst)
+
+### `src/app/shared/view-arbeit/view-arbeit.html`
+- Aufklapp-Buttons für beide Panels im Workbench-Bereich rendern, positioniert absolut oben links/rechts
+- Kalender-`@if` anpassen: nicht mehr `settingsService.dayCalendarEnabled()` allein, sondern auch collapse-state berücksichtigen (enabled = Feature an, collapsed = nur visuell versteckt)
+
+## Abgrenzung
+
+- Kein Keyboard-Shortcut in diesem Schritt
+- Kein Overlay/Drawer-Modus
+- Kein Resize per Drag
+
+## Verifikation
+
+1. `ng test --no-watch` — alle Tests müssen grün sein
+2. `npx ng build` — Build muss durchlaufen
+3. Manuell: Sidebar ein-/ausklappen, Kalender ein-/ausklappen, alle 4 Kombinationen testen
+4. Manuell: Page Reload → Zustand bleibt erhalten
+5. Manuell: Dark Mode prüfen
+6. Manuell: `prefers-reduced-motion` prüfen (Animation deaktiviert)

From 304f8f591da3bd392b8b946010a37bb725eea614 Mon Sep 17 00:00:00 2001
From: Dominik Halfkann <dominik.halfkann@mailbox.org>
Date: Thu, 9 Apr 2026 20:46:46 +0200
Subject: [PATCH 2/9] docs: add implementation plan for collapsible side panels

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../plans/2026-04-09-collapsible-panels.md    | 742 ++++++++++++++++++
 1 file changed, 742 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-04-09-collapsible-panels.md

diff --git a/docs/superpowers/plans/2026-04-09-collapsible-panels.md b/docs/superpowers/plans/2026-04-09-collapsible-panels.md
new file mode 100644
index 0000000..70cc45e
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-09-collapsible-panels.md
@@ -0,0 +1,742 @@
+# Collapsible Side Panels Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Make both side panels (Navigator left, Tagesplan right) collapsible with a polished, Sunsama-inspired UX — panels disappear completely when collapsed, subtle toggle buttons in the workbench corners to reopen.
+
+**Architecture:** Collapse state lives in `ViewArbeitComponent` as signals persisted to localStorage. The `<aside>` and calendar panel are conditionally rendered via `@if`. When collapsed, small toggle buttons render inside the workbench wrapper area. Lucide `PanelLeft*`/`PanelRight*` icons indicate the action. The existing calendar collapse (8px strip with single chevron) is replaced entirely.
+
+**Tech Stack:** Angular 21 (signals, zoneless, OnPush), Tailwind CSS 4.1, Lucide Angular icons, Vitest
+
+**Spec:** `docs/superpowers/specs/2026-04-09-collapsible-panels-design.md`
+
+---
+
+## File Map
+
+| File | Action | Responsibility |
+|------|--------|---------------|
+| `src/app/shared/view-arbeit/view-arbeit.ts` | Modify | Add collapse signals, toggle methods, localStorage persistence, Lucide imports |
+| `src/app/shared/view-arbeit/view-arbeit.html` | Modify | Conditional rendering of panels, toggle buttons in workbench area |
+| `src/app/shared/view-arbeit/view-arbeit.spec.ts` | Modify | Tests for collapse/expand behavior and persistence |
+| `src/app/shared/navigator/navigator.html` | Modify | Add collapse button in navigator header |
+| `src/app/shared/navigator/navigator.ts` | Modify | Add output event for collapse, Lucide import |
+| `src/app/calendar/day-calendar-panel/day-calendar-panel.ts` | Modify | Remove internal collapse logic entirely, add output + input for collapse, replace icons |
+| `src/app/calendar/day-calendar-panel/day-calendar-panel.spec.ts` | Modify | Update tests to match new collapse pattern |
+
+---
+
+### Task 1: Add collapse state and toggle methods to ViewArbeitComponent
+
+**Files:**
+- Modify: `src/app/shared/view-arbeit/view-arbeit.ts`
+- Test: `src/app/shared/view-arbeit/view-arbeit.spec.ts`
+
+- [ ] **Step 1: Write failing tests for sidebar collapse**
+
+Add these tests to `view-arbeit.spec.ts`:
+
+```typescript
+it('should have sidebarCollapsed default to false', () => {
+  const fixture = TestBed.createComponent(ViewArbeitComponent);
+  expect(fixture.componentInstance.sidebarCollapsed()).toBe(false);
+});
+
+it('should toggle sidebarCollapsed', () => {
+  const fixture = TestBed.createComponent(ViewArbeitComponent);
+  fixture.componentInstance.toggleSidebar();
+  expect(fixture.componentInstance.sidebarCollapsed()).toBe(true);
+  fixture.componentInstance.toggleSidebar();
+  expect(fixture.componentInstance.sidebarCollapsed()).toBe(false);
+});
+
+it('should persist sidebarCollapsed to localStorage', () => {
+  const fixture = TestBed.createComponent(ViewArbeitComponent);
+  fixture.componentInstance.toggleSidebar();
+  TestBed.flushEffects();
+  expect(localStorage.getItem('orbit.sidebar.collapsed')).toBe('true');
+});
+
+it('should restore sidebarCollapsed from localStorage', async () => {
+  localStorage.setItem('orbit.sidebar.collapsed', 'true');
+  TestBed.resetTestingModule();
+  await TestBed.configureTestingModule({
+    imports: [ViewArbeitComponent],
+    providers: [
+      { provide: WorkspaceService, useValue: mockWorkspaceService },
+      { provide: TodoService, useValue: mockTodoService },
+      { provide: IdeaService, useValue: mockIdeaService },
+      { provide: AiReviewService, useValue: mockAiReviewService },
+      { provide: HttpClient, useValue: { get: () => of([]), post: () => of({}) } },
+    ],
+  }).compileComponents();
+  const fixture = TestBed.createComponent(ViewArbeitComponent);
+  expect(fixture.componentInstance.sidebarCollapsed()).toBe(true);
+});
+```
+
+- [ ] **Step 2: Run tests to verify they fail**
+
+Run: `npx ng test --no-watch`
+Expected: FAIL — `sidebarCollapsed` and `toggleSidebar` don't exist yet.
+
+- [ ] **Step 3: Implement collapse state in ViewArbeitComponent**
+
+In `src/app/shared/view-arbeit/view-arbeit.ts`, add signals and toggle methods:
+
+```typescript
+import { ChangeDetectionStrategy, Component, effect, inject, signal } from '@angular/core';
+import { NavigatorComponent } from '../navigator/navigator';
+import { WorkbenchComponent } from '../workbench/workbench';
+import { DayCalendarPanelComponent } from '../../calendar/day-calendar-panel/day-calendar-panel';
+import { SettingsService } from '../../settings/settings.service';
+import {
+  LucidePanelLeftClose,
+  LucidePanelLeftOpen,
+  LucidePanelRightClose,
+  LucidePanelRightOpen,
+} from '@lucide/angular';
+
+const SIDEBAR_KEY = 'orbit.sidebar.collapsed';
+const CALENDAR_KEY = 'orbit.dayCalendar.collapsed';
+
+@Component({
+  selector: 'app-view-arbeit',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    NavigatorComponent,
+    WorkbenchComponent,
+    DayCalendarPanelComponent,
+    LucidePanelLeftClose,
+    LucidePanelLeftOpen,
+    LucidePanelRightClose,
+    LucidePanelRightOpen,
+  ],
+  templateUrl: './view-arbeit.html',
+  host: { class: 'flex flex-1 h-full overflow-hidden' },
+})
+export class ViewArbeitComponent {
+  readonly settingsService = inject(SettingsService);
+
+  readonly sidebarCollapsed = signal(localStorage.getItem(SIDEBAR_KEY) === 'true');
+  readonly calendarCollapsed = signal(localStorage.getItem(CALENDAR_KEY) === 'true');
+
+  constructor() {
+    effect(() => {
+      localStorage.setItem(SIDEBAR_KEY, String(this.sidebarCollapsed()));
+    });
+    effect(() => {
+      localStorage.setItem(CALENDAR_KEY, String(this.calendarCollapsed()));
+    });
+  }
+
+  toggleSidebar(): void {
+    this.sidebarCollapsed.update((v) => !v);
+  }
+
+  toggleCalendar(): void {
+    this.calendarCollapsed.update((v) => !v);
+  }
+}
+```
+
+- [ ] **Step 4: Run tests to verify they pass**
+
+Run: `npx ng test --no-watch`
+Expected: PASS
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/app/shared/view-arbeit/view-arbeit.ts src/app/shared/view-arbeit/view-arbeit.spec.ts
+git commit -m "feat(view-arbeit): add collapse state signals for sidebar and calendar"
+```
+
+---
+
+### Task 2: Update view-arbeit template with conditional rendering and toggle buttons
+
+**Files:**
+- Modify: `src/app/shared/view-arbeit/view-arbeit.html`
+- Test: `src/app/shared/view-arbeit/view-arbeit.spec.ts`
+
+- [ ] **Step 1: Write failing tests for template behavior**
+
+Add to `view-arbeit.spec.ts`:
+
+```typescript
+it('should hide aside when sidebarCollapsed is true', () => {
+  const fixture = TestBed.createComponent(ViewArbeitComponent);
+  fixture.componentInstance.sidebarCollapsed.set(true);
+  fixture.detectChanges();
+  const aside = fixture.nativeElement.querySelector('aside[aria-label="Navigator"]');
+  expect(aside).toBeNull();
+});
+
+it('should show sidebar open button when collapsed', () => {
+  const fixture = TestBed.createComponent(ViewArbeitComponent);
+  fixture.componentInstance.sidebarCollapsed.set(true);
+  fixture.detectChanges();
+  const btn = fixture.nativeElement.querySelector('[data-testid="sidebar-open"]');
+  expect(btn).toBeTruthy();
+});
+
+it('should show calendar open button when calendar collapsed', () => {
+  const fixture = TestBed.createComponent(ViewArbeitComponent);
+  fixture.componentInstance.calendarCollapsed.set(true);
+  fixture.detectChanges();
+  const btn = fixture.nativeElement.querySelector('[data-testid="calendar-open"]');
+  expect(btn).toBeTruthy();
+});
+```
+
+- [ ] **Step 2: Run tests to verify they fail**
+
+Run: `npx ng test --no-watch`
+Expected: FAIL — aside is always rendered, toggle buttons don't exist.
+
+- [ ] **Step 3: Update the template**
+
+Replace `src/app/shared/view-arbeit/view-arbeit.html` with:
+
+```html
+@if (!sidebarCollapsed()) {
+  <aside
+    class="w-[360px] xl:w-[400px] shrink-0 border-r border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] overflow-hidden flex flex-col transition-[width] duration-150 [@media(prefers-reduced-motion:reduce)]:transition-none"
+    aria-label="Navigator"
+  >
+    <app-navigator (collapseSidebar)="toggleSidebar()" />
+  </aside>
+}
+
+<div class="flex-1 overflow-hidden flex relative">
+  @if (sidebarCollapsed()) {
+    <button
+      type="button"
+      class="absolute top-3 left-3 z-10 p-1.5 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+      (click)="toggleSidebar()"
+      data-testid="sidebar-open"
+      aria-label="Navigator einblenden"
+    >
+      <svg lucidePanelLeftOpen [size]="18" [strokeWidth]="1.75"></svg>
+    </button>
+  }
+
+  @if (settingsService.dayCalendarEnabled() && calendarCollapsed()) {
+    <button
+      type="button"
+      class="absolute top-3 right-3 z-10 p-1.5 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+      (click)="toggleCalendar()"
+      data-testid="calendar-open"
+      aria-label="Tagesplan einblenden"
+    >
+      <svg lucidePanelRightOpen [size]="18" [strokeWidth]="1.75"></svg>
+    </button>
+  }
+
+  <div class="flex-1 overflow-hidden bg-[var(--color-bg-page)]">
+    <app-workbench />
+  </div>
+
+  @if (settingsService.dayCalendarEnabled() && !calendarCollapsed()) {
+    <app-day-calendar-panel (collapseCalendar)="toggleCalendar()" />
+  }
+</div>
+```
+
+- [ ] **Step 4: Run tests to verify they pass**
+
+Run: `npx ng test --no-watch`
+Expected: PASS
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/app/shared/view-arbeit/view-arbeit.html src/app/shared/view-arbeit/view-arbeit.spec.ts
+git commit -m "feat(view-arbeit): conditional panel rendering with toggle buttons"
+```
+
+---
+
+### Task 3: Add collapse button to Navigator header
+
+**Files:**
+- Modify: `src/app/shared/navigator/navigator.ts`
+- Modify: `src/app/shared/navigator/navigator.html`
+
+- [ ] **Step 1: Add output and icon import to NavigatorComponent**
+
+In `src/app/shared/navigator/navigator.ts`:
+
+Add `output` to the Angular import:
+```typescript
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  output,
+  signal,
+} from '@angular/core';
+```
+
+Add `LucidePanelLeftClose` to the Lucide import:
+```typescript
+import { LucideChevronDown, LucidePanelLeftClose } from '@lucide/angular';
+```
+
+Add `LucidePanelLeftClose` to the `imports` array in the component decorator.
+
+Add the output to the class body:
+```typescript
+readonly collapseSidebar = output();
+```
+
+- [ ] **Step 2: Add collapse button to navigator header**
+
+In `src/app/shared/navigator/navigator.html`, modify the header `<div>` (lines 2–9). Replace:
+
+```html
+<div class="px-4 py-3 border-b border-[var(--color-border-subtle)]">
+  <div class="flex items-center justify-between">
+    <span class="font-semibold text-[var(--color-text-heading)] text-sm tracking-wide"
+      >Arbeit</span
+    >
+    <span class="text-xs text-[var(--color-text-muted)]">Dein Command Center</span>
+  </div>
+</div>
+```
+
+With:
+
+```html
+<div class="px-4 py-3 border-b border-[var(--color-border-subtle)]">
+  <div class="flex items-center justify-between">
+    <span class="font-semibold text-[var(--color-text-heading)] text-sm tracking-wide"
+      >Arbeit</span
+    >
+    <div class="flex items-center gap-2">
+      <span class="text-xs text-[var(--color-text-muted)]">Dein Command Center</span>
+      <button
+        type="button"
+        class="p-1 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+        (click)="collapseSidebar.emit()"
+        data-testid="sidebar-collapse"
+        aria-label="Navigator ausblenden"
+      >
+        <svg lucidePanelLeftClose [size]="16" [strokeWidth]="1.75"></svg>
+      </button>
+    </div>
+  </div>
+</div>
+```
+
+- [ ] **Step 3: Run tests**
+
+Run: `npx ng test --no-watch`
+Expected: PASS (existing navigator tests should still pass)
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/app/shared/navigator/navigator.ts src/app/shared/navigator/navigator.html
+git commit -m "feat(navigator): add sidebar collapse button in header"
+```
+
+---
+
+### Task 4: Refactor DayCalendarPanelComponent — remove internal collapse, add output
+
+**Files:**
+- Modify: `src/app/calendar/day-calendar-panel/day-calendar-panel.ts`
+- Modify: `src/app/calendar/day-calendar-panel/day-calendar-panel.spec.ts`
+
+- [ ] **Step 1: Update tests to match new behavior**
+
+Replace `src/app/calendar/day-calendar-panel/day-calendar-panel.spec.ts` with:
+
+```typescript
+import { TestBed } from '@angular/core/testing';
+import { HttpClient } from '@angular/common/http';
+import { of } from 'rxjs';
+import { DayCalendarPanelComponent } from './day-calendar-panel';
+
+function setup() {
+  TestBed.configureTestingModule({
+    imports: [DayCalendarPanelComponent],
+    providers: [
+      {
+        provide: HttpClient,
+        useValue: {
+          get: (url: string) => {
+            if (url.includes('/api/logbuch')) {
+              return of([]);
+            }
+            return of({ date: new Date().toISOString().slice(0, 10), appointments: [] });
+          },
+          post: () => of({}),
+        },
+      },
+    ],
+  });
+  const fixture = TestBed.createComponent(DayCalendarPanelComponent);
+  fixture.detectChanges();
+  return { fixture, el: fixture.nativeElement as HTMLElement };
+}
+
+describe('DayCalendarPanelComponent', () => {
+  afterEach(() => {
+    TestBed.resetTestingModule();
+  });
+
+  it('renders the timeline', () => {
+    const { el } = setup();
+    const timeline = el.querySelector('app-day-timeline');
+    expect(timeline).toBeTruthy();
+  });
+
+  it('renders collapse toggle button', () => {
+    const { el } = setup();
+    const toggle = el.querySelector('[data-testid="collapse-toggle"]');
+    expect(toggle).toBeTruthy();
+  });
+
+  it('renders header with "Tagesplan"', () => {
+    const { el } = setup();
+    expect(el.textContent).toContain('Tagesplan');
+  });
+
+  it('emits collapseCalendar when toggle is clicked', () => {
+    const { fixture, el } = setup();
+    const spy = vi.fn();
+    fixture.componentInstance.collapseCalendar.subscribe(spy);
+    const toggle = el.querySelector<HTMLButtonElement>('[data-testid="collapse-toggle"]');
+    toggle!.click();
+    expect(spy).toHaveBeenCalled();
+  });
+});
+```
+
+- [ ] **Step 2: Run tests to verify they fail**
+
+Run: `npx ng test --no-watch`
+Expected: FAIL — `collapseCalendar` output doesn't exist yet.
+
+- [ ] **Step 3: Refactor DayCalendarPanelComponent**
+
+Replace `src/app/calendar/day-calendar-panel/day-calendar-panel.ts`. Key changes:
+- Remove `collapsed` signal, `STORAGE_KEY`, `hostClass` computed, `toggleCollapse()` method
+- Remove the `@if (collapsed())` branch (the 8px strip)
+- Add `collapseCalendar = output()`
+- Replace `LucideChevronLeft`/`LucideChevronRight` with `LucidePanelRightClose`
+- Set fixed host class (always expanded — parent handles hiding)
+- The collapse toggle button in the header now emits the output instead of toggling internal state
+
+```typescript
+import { ChangeDetectionStrategy, Component, computed, inject, output, signal } from '@angular/core';
+import { LucidePanelRightClose, LucidePlay, LucideSquare } from '@lucide/angular';
+import { DayTimelineComponent } from '../day-timeline/day-timeline';
+import { AppointmentPopupComponent } from '../appointment-popup/appointment-popup';
+import { PomodoroConfigPopupComponent } from '../../pomodoro/pomodoro-config-popup/pomodoro-config-popup';
+import { DayScheduleService } from '../day-schedule.service';
+import { PomodoroService } from '../../pomodoro/pomodoro.service';
+import { SettingsService } from '../../settings/settings.service';
+import { DayAppointment } from '../day-schedule.model';
+
+@Component({
+  selector: 'app-day-calendar-panel',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    LucidePanelRightClose,
+    LucidePlay,
+    LucideSquare,
+    DayTimelineComponent,
+    AppointmentPopupComponent,
+    PomodoroConfigPopupComponent,
+  ],
+  host: {
+    class: 'w-[260px] shrink-0 border-l border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] flex flex-col',
+    '(document:keydown.escape)': 'onEscape()',
+  },
+  template: `
+    <div
+      class="flex items-center justify-between px-4 py-3 border-b border-[var(--color-border-subtle)]"
+    >
+      <span class="font-semibold text-[var(--color-text-heading)] text-sm tracking-wide"
+        >Tagesplan</span
+      >
+      <button
+        type="button"
+        class="p-1 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+        (click)="collapseCalendar.emit()"
+        data-testid="collapse-toggle"
+        aria-label="Tagesplan ausblenden"
+      >
+        <svg lucidePanelRightClose [size]="16" [strokeWidth]="1.75"></svg>
+      </button>
+    </div>
+    @if (settingsService.pomodoroEnabled()) {
+      <div class="shrink-0 p-3 border-b border-[var(--color-border-subtle)]">
+        @if (pomodoro.state() === 'idle') {
+          <button
+            type="button"
+            class="flex items-center justify-center gap-1.5 rounded-lg border px-2 py-2 text-xs font-medium transition-colors cursor-pointer w-full text-center bg-[var(--color-primary-bg)] border-[var(--color-primary-border)] text-[var(--color-primary-text)] hover:bg-[var(--color-primary-bg-hover)]"
+            (click)="showPomodoroConfig.set(true)"
+          >
+            <svg lucidePlay [size]="12" [strokeWidth]="2.5"></svg>
+            Pomodoro starten
+          </button>
+        } @else if (pomodoro.state() === 'running') {
+          <div class="flex items-center justify-between gap-2 mb-2">
+            <div class="flex items-center gap-1.5">
+              <span class="relative flex h-2 w-2">
+                <span
+                  class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-primary-solid)] opacity-75"
+                ></span>
+                <span
+                  class="relative inline-flex rounded-full h-2 w-2 bg-[var(--color-primary-solid)]"
+                ></span>
+              </span>
+              <span class="text-xs font-medium text-[var(--color-primary-text)]"
+                >Fokus läuft</span
+              >
+            </div>
+            <span class="text-xs text-[var(--color-text-muted)] tabular-nums">{{
+              pomodoroRemainingLabel()
+            }}</span>
+          </div>
+          <button
+            type="button"
+            class="flex items-center justify-center gap-1.5 rounded-lg border px-2 py-2 text-xs font-medium transition-colors cursor-pointer w-full text-center bg-[var(--color-bg-surface)] border-[var(--color-border-subtle)] text-[var(--color-text-muted)] hover:border-red-300 hover:text-red-600 hover:bg-red-50"
+            (click)="showCancelConfirm.set(true)"
+          >
+            <svg lucideSquare [size]="12" [strokeWidth]="2.5"></svg>
+            Pomodoro abbrechen
+          </button>
+        }
+      </div>
+    }
+    <div class="flex-1 overflow-y-auto [scrollbar-gutter:stable]">
+      <app-day-timeline
+        [appointments]="service.appointments()"
+        [pomodoroBlock]="pomodoro.timelineBlock()"
+        (appointmentCreate)="onCreateRequest($event)"
+        (appointmentEdit)="onEditRequest($event)"
+        (appointmentUpdate)="onResizeUpdate($event)"
+      />
+    </div>
+
+    @if (popupState() !== null) {
+      <app-appointment-popup
+        [appointment]="popupState()!.appointment"
+        [isNew]="popupState()!.isNew"
+        (save)="onPopupSave($event)"
+        (delete)="onPopupDelete($event)"
+        (cancel)="popupState.set(null)"
+      />
+    }
+
+    @if (showPomodoroConfig() && settingsService.pomodoroEnabled()) {
+      <app-pomodoro-config-popup
+        (started)="showPomodoroConfig.set(false)"
+        (cancel)="showPomodoroConfig.set(false)"
+      />
+    }
+
+    @if (showCancelConfirm()) {
+      <div
+        class="fixed inset-0 bg-black/20 backdrop-blur-sm z-50"
+        (click)="showCancelConfirm.set(false)"
+      ></div>
+      <div class="fixed inset-0 z-50 flex items-center justify-center pointer-events-none">
+        <div
+          class="bg-[var(--color-bg-card)] rounded-xl shadow-lg p-5 w-[280px] pointer-events-auto"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Pomodoro abbrechen"
+        >
+          <h3 class="text-sm font-semibold text-[var(--color-text-heading)] mb-2">
+            Pomodoro abbrechen?
+          </h3>
+          <p class="text-xs text-[var(--color-text-muted)] mb-4">
+            Deine aktuelle Fokuszeit wird beendet.
+          </p>
+          <div class="flex gap-2">
+            <button
+              type="button"
+              class="flex-1 rounded-lg border border-[var(--color-border-subtle)] text-[var(--color-text-body)] py-2 text-sm font-medium hover:bg-[var(--color-bg-surface)] transition-colors"
+              (click)="showCancelConfirm.set(false)"
+            >
+              Weiterarbeiten
+            </button>
+            <button
+              type="button"
+              class="flex-1 rounded-lg bg-red-600 text-white py-2 text-sm font-semibold hover:bg-red-700 transition-colors"
+              (click)="confirmCancel()"
+            >
+              Abbrechen
+            </button>
+          </div>
+        </div>
+      </div>
+    }
+  `,
+})
+export class DayCalendarPanelComponent {
+  readonly service = inject(DayScheduleService);
+  readonly pomodoro = inject(PomodoroService);
+  readonly settingsService = inject(SettingsService);
+
+  readonly collapseCalendar = output();
+  readonly showPomodoroConfig = signal(false);
+  readonly showCancelConfirm = signal(false);
+
+  readonly popupState = signal<{ appointment: Partial<DayAppointment>; isNew: boolean } | null>(
+    null,
+  );
+
+  onCreateRequest(event: { startTime: string; endTime: string }): void {
+    this.popupState.set({
+      appointment: { startTime: event.startTime, endTime: event.endTime },
+      isNew: true,
+    });
+  }
+
+  onEditRequest(apt: DayAppointment): void {
+    this.popupState.set({ appointment: apt, isNew: false });
+  }
+
+  onResizeUpdate(apt: DayAppointment): void {
+    this.service.updateAppointment(apt);
+  }
+
+  onPopupSave(apt: DayAppointment): void {
+    if (this.popupState()?.isNew) {
+      this.service.addAppointment(apt.title, apt.startTime, apt.endTime);
+    } else {
+      this.service.updateAppointment(apt);
+    }
+    this.popupState.set(null);
+  }
+
+  onPopupDelete(id: string): void {
+    this.service.deleteAppointment(id);
+    this.popupState.set(null);
+  }
+
+  readonly pomodoroRemainingLabel = computed(() => {
+    const mins = Math.ceil(this.pomodoro.remainingMinutes());
+    if (mins >= 60) return `${Math.floor(mins / 60)}h ${mins % 60}m`;
+    return `${mins} Min`;
+  });
+
+  confirmCancel(): void {
+    this.pomodoro.cancel();
+    this.showCancelConfirm.set(false);
+  }
+
+  onEscape(): void {
+    if (this.showCancelConfirm()) this.showCancelConfirm.set(false);
+  }
+}
+```
+
+- [ ] **Step 4: Run tests to verify they pass**
+
+Run: `npx ng test --no-watch`
+Expected: PASS
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/app/calendar/day-calendar-panel/day-calendar-panel.ts src/app/calendar/day-calendar-panel/day-calendar-panel.spec.ts
+git commit -m "refactor(day-calendar-panel): remove internal collapse, emit output to parent"
+```
+
+---
+
+### Task 5: Update existing tests for changed template structure
+
+**Files:**
+- Modify: `src/app/shared/view-arbeit/view-arbeit.spec.ts`
+
+- [ ] **Step 1: Fix the "should render navigator aside" test**
+
+The existing test `'should render navigator aside'` checks for `aside[aria-label="Navigator"]`. This still works when sidebar is not collapsed (default). However, test `'should render navigator, workbench, and day-calendar-panel'` checks for `app-day-calendar-panel` which now depends on `settingsService.dayCalendarEnabled()` AND `!calendarCollapsed()`. Add a mock for `SettingsService` if not already present, ensuring `dayCalendarEnabled` returns `signal(true)`.
+
+Check if `SettingsService` is already mocked in the test. If not, add:
+
+```typescript
+import { SettingsService } from '../../settings/settings.service';
+
+const mockSettingsService = {
+  dayCalendarEnabled: signal(true),
+  pomodoroEnabled: signal(false),
+  notizenEnabled: signal(false),
+};
+```
+
+And add to providers:
+```typescript
+{ provide: SettingsService, useValue: mockSettingsService },
+```
+
+- [ ] **Step 2: Run all tests**
+
+Run: `npx ng test --no-watch`
+Expected: PASS
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/app/shared/view-arbeit/view-arbeit.spec.ts
+git commit -m "test(view-arbeit): fix tests for new panel collapse structure"
+```
+
+---
+
+### Task 6: Build verification and cleanup
+
+- [ ] **Step 1: Run full test suite**
+
+Run: `npx ng test --no-watch`
+Expected: All tests PASS
+
+- [ ] **Step 2: Run production build**
+
+Run: `npx ng build`
+Expected: Build succeeds with no errors
+
+- [ ] **Step 3: Run Prettier**
+
+Run: `npx prettier --write "src/app/shared/view-arbeit/**" "src/app/shared/navigator/**" "src/app/calendar/day-calendar-panel/**"`
+
+- [ ] **Step 4: Clean up old localStorage key usage**
+
+The old `orbit.dayCalendar.collapsed` key was read by `DayCalendarPanelComponent` — now it's read by `ViewArbeitComponent`. No migration needed since the key name is the same. Verify by searching for the key:
+
+Run: `grep -r "orbit.dayCalendar.collapsed" src/`
+Expected: Only `view-arbeit.ts` references it.
+
+- [ ] **Step 5: Final commit**
+
+```bash
+git add -A
+git commit -m "style: format collapsible panels code"
+```
+
+---
+
+## Verification Checklist
+
+1. `npx ng test --no-watch` — all green
+2. `npx ng build` — succeeds
+3. Manual: click sidebar collapse button → sidebar disappears, `PanelLeftOpen` button appears top-left
+4. Manual: click `PanelLeftOpen` → sidebar slides back in
+5. Manual: click calendar collapse button → calendar disappears, `PanelRightOpen` button appears top-right
+6. Manual: click `PanelRightOpen` → calendar slides back in
+7. Manual: collapse both → full workbench width, both toggle buttons visible
+8. Manual: reload page → collapse state preserved
+9. Manual: dark mode → buttons use correct token colors
+10. Manual: `prefers-reduced-motion` → no animation

From ba657c12575bbd3416831404eb3e1810ed3faf06 Mon Sep 17 00:00:00 2001
From: Dominik Halfkann <dominik.halfkann@mailbox.org>
Date: Thu, 9 Apr 2026 20:53:43 +0200
Subject: [PATCH 3/9] feat: add collapsible side panels for navigator and
 calendar

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../day-calendar-panel.spec.ts                | 19 +++--
 .../day-calendar-panel/day-calendar-panel.ts  | 60 +++++----------
 src/app/shared/navigator/navigator.html       | 13 +++-
 src/app/shared/navigator/navigator.ts         |  5 +-
 src/app/shared/view-arbeit/view-arbeit.html   | 47 +++++++++---
 .../shared/view-arbeit/view-arbeit.spec.ts    | 75 +++++++++++++++++++
 src/app/shared/view-arbeit/view-arbeit.ts     | 34 ++++++++-
 7 files changed, 187 insertions(+), 66 deletions(-)

diff --git a/src/app/calendar/day-calendar-panel/day-calendar-panel.spec.ts b/src/app/calendar/day-calendar-panel/day-calendar-panel.spec.ts
index 18b2641..aaa53c5 100644
--- a/src/app/calendar/day-calendar-panel/day-calendar-panel.spec.ts
+++ b/src/app/calendar/day-calendar-panel/day-calendar-panel.spec.ts
@@ -29,7 +29,6 @@ function setup() {
 describe('DayCalendarPanelComponent', () => {
   afterEach(() => {
     TestBed.resetTestingModule();
-    localStorage.removeItem('orbit.dayCalendar.collapsed');
   });
 
   it('renders the timeline', () => {
@@ -44,17 +43,17 @@ describe('DayCalendarPanelComponent', () => {
     expect(toggle).toBeTruthy();
   });
 
-  it('hides timeline content when collapsed', () => {
-    const { fixture, el } = setup();
-    const toggle = el.querySelector<HTMLButtonElement>('[data-testid="collapse-toggle"]');
-    toggle!.click();
-    fixture.detectChanges();
-    const timeline = el.querySelector('app-day-timeline');
-    expect(timeline).toBeNull();
-  });
-
   it('renders header with "Tagesplan"', () => {
     const { el } = setup();
     expect(el.textContent).toContain('Tagesplan');
   });
+
+  it('emits collapseCalendar when toggle is clicked', () => {
+    const { fixture, el } = setup();
+    const spy = vi.fn();
+    fixture.componentInstance.collapseCalendar.subscribe(spy);
+    const toggle = el.querySelector<HTMLButtonElement>('[data-testid="collapse-toggle"]');
+    toggle!.click();
+    expect(spy).toHaveBeenCalled();
+  });
 });
diff --git a/src/app/calendar/day-calendar-panel/day-calendar-panel.ts b/src/app/calendar/day-calendar-panel/day-calendar-panel.ts
index d95a46c..62e10cc 100644
--- a/src/app/calendar/day-calendar-panel/day-calendar-panel.ts
+++ b/src/app/calendar/day-calendar-panel/day-calendar-panel.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
-import { LucideChevronLeft, LucideChevronRight, LucidePlay, LucideSquare } from '@lucide/angular';
+import { ChangeDetectionStrategy, Component, computed, inject, output, signal } from '@angular/core';
+import { LucidePanelRightClose, LucidePlay, LucideSquare } from '@lucide/angular';
 import { DayTimelineComponent } from '../day-timeline/day-timeline';
 import { AppointmentPopupComponent } from '../appointment-popup/appointment-popup';
 import { PomodoroConfigPopupComponent } from '../../pomodoro/pomodoro-config-popup/pomodoro-config-popup';
@@ -8,14 +8,11 @@ import { PomodoroService } from '../../pomodoro/pomodoro.service';
 import { SettingsService } from '../../settings/settings.service';
 import { DayAppointment } from '../day-schedule.model';
 
-const STORAGE_KEY = 'orbit.dayCalendar.collapsed';
-
 @Component({
   selector: 'app-day-calendar-panel',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    LucideChevronLeft,
-    LucideChevronRight,
+    LucidePanelRightClose,
     LucidePlay,
     LucideSquare,
     DayTimelineComponent,
@@ -23,35 +20,27 @@ const STORAGE_KEY = 'orbit.dayCalendar.collapsed';
     PomodoroConfigPopupComponent,
   ],
   host: {
-    '[class]': 'hostClass()',
+    class:
+      'w-[260px] shrink-0 border-l border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] flex flex-col',
     '(document:keydown.escape)': 'onEscape()',
   },
   template: `
-    @if (collapsed()) {
+    <div
+      class="flex items-center justify-between px-4 py-3 border-b border-[var(--color-border-subtle)]"
+    >
+      <span class="font-semibold text-[var(--color-text-heading)] text-sm tracking-wide"
+        >Tagesplan</span
+      >
       <button
-        class="h-full w-full flex items-center justify-center text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors"
-        (click)="toggleCollapse()"
+        type="button"
+        class="p-1 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+        (click)="collapseCalendar.emit()"
         data-testid="collapse-toggle"
-        aria-label="Tagesplan einblenden"
+        aria-label="Tagesplan ausblenden"
       >
-        <svg lucideChevronLeft [size]="16"></svg>
+        <svg lucidePanelRightClose [size]="16" [strokeWidth]="1.75"></svg>
       </button>
-    } @else {
-      <div
-        class="flex items-center justify-between px-4 py-3 border-b border-[var(--color-border-subtle)]"
-      >
-        <span class="font-semibold text-[var(--color-text-heading)] text-sm tracking-wide"
-          >Tagesplan</span
-        >
-        <button
-          class="text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] rounded p-0.5 transition-colors"
-          (click)="toggleCollapse()"
-          data-testid="collapse-toggle"
-          aria-label="Tagesplan ausblenden"
-        >
-          <svg lucideChevronRight [size]="16"></svg>
-        </button>
-      </div>
+    </div>
       @if (settingsService.pomodoroEnabled()) {
         <div class="shrink-0 p-3 border-b border-[var(--color-border-subtle)]">
           @if (pomodoro.state() === 'idle') {
@@ -102,7 +91,6 @@ const STORAGE_KEY = 'orbit.dayCalendar.collapsed';
           (appointmentUpdate)="onResizeUpdate($event)"
         />
       </div>
-    }
 
     @if (popupState() !== null) {
       <app-appointment-popup
@@ -165,7 +153,7 @@ export class DayCalendarPanelComponent {
   readonly pomodoro = inject(PomodoroService);
   readonly settingsService = inject(SettingsService);
 
-  readonly collapsed = signal<boolean>(localStorage.getItem(STORAGE_KEY) === 'true');
+  readonly collapseCalendar = output();
   readonly showPomodoroConfig = signal(false);
   readonly showCancelConfirm = signal(false);
 
@@ -173,18 +161,6 @@ export class DayCalendarPanelComponent {
     null,
   );
 
-  readonly hostClass = computed(() =>
-    this.collapsed()
-      ? 'w-8 shrink-0 border-l border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] flex flex-col'
-      : 'w-[260px] shrink-0 border-l border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] flex flex-col transition-[width] duration-150',
-  );
-
-  toggleCollapse(): void {
-    const next = !this.collapsed();
-    this.collapsed.set(next);
-    localStorage.setItem(STORAGE_KEY, String(next));
-  }
-
   onCreateRequest(event: { startTime: string; endTime: string }): void {
     this.popupState.set({
       appointment: { startTime: event.startTime, endTime: event.endTime },
diff --git a/src/app/shared/navigator/navigator.html b/src/app/shared/navigator/navigator.html
index d8882c3..20debf9 100644
--- a/src/app/shared/navigator/navigator.html
+++ b/src/app/shared/navigator/navigator.html
@@ -4,7 +4,18 @@
       <span class="font-semibold text-[var(--color-text-heading)] text-sm tracking-wide"
         >Arbeit</span
       >
-      <span class="text-xs text-[var(--color-text-muted)]">Dein Command Center</span>
+      <div class="flex items-center gap-2">
+        <span class="text-xs text-[var(--color-text-muted)]">Dein Command Center</span>
+        <button
+          type="button"
+          class="p-1 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+          (click)="collapseSidebar.emit()"
+          data-testid="sidebar-collapse"
+          aria-label="Navigator ausblenden"
+        >
+          <svg lucidePanelLeftClose [size]="16" [strokeWidth]="1.75"></svg>
+        </button>
+      </div>
     </div>
   </div>
 
diff --git a/src/app/shared/navigator/navigator.ts b/src/app/shared/navigator/navigator.ts
index 837d86e..4ced11d 100644
--- a/src/app/shared/navigator/navigator.ts
+++ b/src/app/shared/navigator/navigator.ts
@@ -4,6 +4,7 @@ import {
   computed,
   effect,
   inject,
+  output,
   signal,
 } from '@angular/core';
 import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
@@ -22,7 +23,7 @@ import { ReflectionCardComponent } from '../../reflection/reflection-card/reflec
 import { BadgeComponent } from '../badge/badge';
 import { SyncBarComponent } from '../sync-bar/sync-bar';
 import { DataRefreshService } from '../data-refresh.service';
-import { LucideChevronDown } from '@lucide/angular';
+import { LucideChevronDown, LucidePanelLeftClose } from '@lucide/angular';
 
 const STORAGE_KEY = 'orbit.navigator.collapsed';
 
@@ -51,11 +52,13 @@ interface CollapsedState {
     BadgeComponent,
     SyncBarComponent,
     LucideChevronDown,
+    LucidePanelLeftClose,
   ],
   templateUrl: './navigator.html',
   host: { class: 'flex flex-col h-full' },
 })
 export class NavigatorComponent {
+  readonly collapseSidebar = output();
   protected readonly refreshService = inject(DataRefreshService);
   protected readonly data = inject(WorkspaceService);
   protected readonly todoService = inject(TodoService);
diff --git a/src/app/shared/view-arbeit/view-arbeit.html b/src/app/shared/view-arbeit/view-arbeit.html
index f32f788..ac4606d 100644
--- a/src/app/shared/view-arbeit/view-arbeit.html
+++ b/src/app/shared/view-arbeit/view-arbeit.html
@@ -1,15 +1,42 @@
-<aside
-  class="w-[360px] xl:w-[400px] shrink-0 border-r border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] overflow-hidden flex flex-col"
-  aria-label="Navigator"
->
-  <app-navigator />
-</aside>
-
-<div class="flex-1 overflow-hidden flex">
+@if (!sidebarCollapsed()) {
+  <aside
+    class="w-[360px] xl:w-[400px] shrink-0 border-r border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] overflow-hidden flex flex-col"
+    aria-label="Navigator"
+  >
+    <app-navigator (collapseSidebar)="toggleSidebar()" />
+  </aside>
+}
+
+<div class="flex-1 overflow-hidden flex relative">
+  @if (sidebarCollapsed()) {
+    <button
+      type="button"
+      class="absolute top-3 left-3 z-10 p-1.5 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+      (click)="toggleSidebar()"
+      data-testid="sidebar-open"
+      aria-label="Navigator einblenden"
+    >
+      <svg lucidePanelLeftOpen [size]="18" [strokeWidth]="1.75"></svg>
+    </button>
+  }
+
+  @if (settingsService.dayCalendarEnabled() && calendarCollapsed()) {
+    <button
+      type="button"
+      class="absolute top-3 right-3 z-10 p-1.5 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+      (click)="toggleCalendar()"
+      data-testid="calendar-open"
+      aria-label="Tagesplan einblenden"
+    >
+      <svg lucidePanelRightOpen [size]="18" [strokeWidth]="1.75"></svg>
+    </button>
+  }
+
   <div class="flex-1 overflow-hidden bg-[var(--color-bg-page)]">
     <app-workbench />
   </div>
-  @if (settingsService.dayCalendarEnabled()) {
-    <app-day-calendar-panel />
+
+  @if (settingsService.dayCalendarEnabled() && !calendarCollapsed()) {
+    <app-day-calendar-panel (collapseCalendar)="toggleCalendar()" />
   }
 </div>
diff --git a/src/app/shared/view-arbeit/view-arbeit.spec.ts b/src/app/shared/view-arbeit/view-arbeit.spec.ts
index eec5ba9..36e511e 100644
--- a/src/app/shared/view-arbeit/view-arbeit.spec.ts
+++ b/src/app/shared/view-arbeit/view-arbeit.spec.ts
@@ -7,6 +7,7 @@ import { WorkspaceService } from '../workspace.service';
 import { TodoService } from '../../todos/todo.service';
 import { IdeaService } from '../../ideas/idea.service';
 import { AiReviewService } from '../../review/ai-review.service';
+import { SettingsService } from '../../settings/settings.service';
 
 const mockWorkspaceService = {
   tickets: signal([]),
@@ -51,6 +52,12 @@ const mockAiReviewService = {
   triggerReview: () => {},
 };
 
+const mockSettingsService = {
+  dayCalendarEnabled: signal(true),
+  pomodoroEnabled: signal(false),
+  notizenEnabled: signal(false),
+};
+
 describe('ViewArbeitComponent', () => {
   beforeEach(async () => {
     localStorage.clear();
@@ -61,11 +68,16 @@ describe('ViewArbeitComponent', () => {
         { provide: TodoService, useValue: mockTodoService },
         { provide: IdeaService, useValue: mockIdeaService },
         { provide: AiReviewService, useValue: mockAiReviewService },
+        { provide: SettingsService, useValue: mockSettingsService },
         { provide: HttpClient, useValue: { get: () => of([]), post: () => of({}) } },
       ],
     }).compileComponents();
   });
 
+  afterEach(() => {
+    localStorage.clear();
+  });
+
   it('should create', () => {
     const fixture = TestBed.createComponent(ViewArbeitComponent);
     expect(fixture.componentInstance).toBeTruthy();
@@ -92,4 +104,67 @@ describe('ViewArbeitComponent', () => {
     expect(fixture.nativeElement.classList.contains('flex')).toBe(true);
     expect(fixture.nativeElement.classList.contains('h-full')).toBe(true);
   });
+
+  it('sidebarCollapsed defaults to false', () => {
+    const fixture = TestBed.createComponent(ViewArbeitComponent);
+    expect(fixture.componentInstance.sidebarCollapsed()).toBe(false);
+  });
+
+  it('toggleSidebar toggles the signal', () => {
+    const fixture = TestBed.createComponent(ViewArbeitComponent);
+    expect(fixture.componentInstance.sidebarCollapsed()).toBe(false);
+    fixture.componentInstance.toggleSidebar();
+    expect(fixture.componentInstance.sidebarCollapsed()).toBe(true);
+    fixture.componentInstance.toggleSidebar();
+    expect(fixture.componentInstance.sidebarCollapsed()).toBe(false);
+  });
+
+  it('persists sidebarCollapsed to localStorage', () => {
+    const fixture = TestBed.createComponent(ViewArbeitComponent);
+    fixture.componentInstance.toggleSidebar();
+    TestBed.tick();
+    expect(localStorage.getItem('orbit.sidebar.collapsed')).toBe('true');
+  });
+
+  it('restores sidebarCollapsed from localStorage', async () => {
+    localStorage.setItem('orbit.sidebar.collapsed', 'true');
+    TestBed.resetTestingModule();
+    await TestBed.configureTestingModule({
+      imports: [ViewArbeitComponent],
+      providers: [
+        { provide: WorkspaceService, useValue: mockWorkspaceService },
+        { provide: TodoService, useValue: mockTodoService },
+        { provide: IdeaService, useValue: mockIdeaService },
+        { provide: AiReviewService, useValue: mockAiReviewService },
+        { provide: SettingsService, useValue: mockSettingsService },
+        { provide: HttpClient, useValue: { get: () => of([]), post: () => of({}) } },
+      ],
+    }).compileComponents();
+    const fixture = TestBed.createComponent(ViewArbeitComponent);
+    expect(fixture.componentInstance.sidebarCollapsed()).toBe(true);
+  });
+
+  it('hides aside when sidebarCollapsed is true', () => {
+    const fixture = TestBed.createComponent(ViewArbeitComponent);
+    fixture.componentInstance.toggleSidebar();
+    fixture.detectChanges();
+    const aside = fixture.nativeElement.querySelector('aside[aria-label="Navigator"]');
+    expect(aside).toBeNull();
+  });
+
+  it('shows sidebar-open button when sidebar collapsed', () => {
+    const fixture = TestBed.createComponent(ViewArbeitComponent);
+    fixture.componentInstance.toggleSidebar();
+    fixture.detectChanges();
+    const btn = fixture.nativeElement.querySelector('[data-testid="sidebar-open"]');
+    expect(btn).toBeTruthy();
+  });
+
+  it('shows calendar-open button when calendar collapsed', () => {
+    const fixture = TestBed.createComponent(ViewArbeitComponent);
+    fixture.componentInstance.toggleCalendar();
+    fixture.detectChanges();
+    const btn = fixture.nativeElement.querySelector('[data-testid="calendar-open"]');
+    expect(btn).toBeTruthy();
+  });
 });
diff --git a/src/app/shared/view-arbeit/view-arbeit.ts b/src/app/shared/view-arbeit/view-arbeit.ts
index 3d81394..283d364 100644
--- a/src/app/shared/view-arbeit/view-arbeit.ts
+++ b/src/app/shared/view-arbeit/view-arbeit.ts
@@ -1,16 +1,46 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject, signal } from '@angular/core';
 import { NavigatorComponent } from '../navigator/navigator';
 import { WorkbenchComponent } from '../workbench/workbench';
 import { DayCalendarPanelComponent } from '../../calendar/day-calendar-panel/day-calendar-panel';
 import { SettingsService } from '../../settings/settings.service';
+import { LucidePanelLeftOpen, LucidePanelRightOpen } from '@lucide/angular';
+
+const SIDEBAR_KEY = 'orbit.sidebar.collapsed';
+const CALENDAR_KEY = 'orbit.dayCalendar.collapsed';
 
 @Component({
   selector: 'app-view-arbeit',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NavigatorComponent, WorkbenchComponent, DayCalendarPanelComponent],
+  imports: [
+    NavigatorComponent,
+    WorkbenchComponent,
+    DayCalendarPanelComponent,
+    LucidePanelLeftOpen,
+    LucidePanelRightOpen,
+  ],
   templateUrl: './view-arbeit.html',
   host: { class: 'flex flex-1 h-full overflow-hidden' },
 })
 export class ViewArbeitComponent {
   readonly settingsService = inject(SettingsService);
+
+  readonly sidebarCollapsed = signal(localStorage.getItem(SIDEBAR_KEY) === 'true');
+  readonly calendarCollapsed = signal(localStorage.getItem(CALENDAR_KEY) === 'true');
+
+  constructor() {
+    effect(() => {
+      localStorage.setItem(SIDEBAR_KEY, String(this.sidebarCollapsed()));
+    });
+    effect(() => {
+      localStorage.setItem(CALENDAR_KEY, String(this.calendarCollapsed()));
+    });
+  }
+
+  toggleSidebar(): void {
+    this.sidebarCollapsed.update((v) => !v);
+  }
+
+  toggleCalendar(): void {
+    this.calendarCollapsed.update((v) => !v);
+  }
 }

From 75649d930fd933402e789c9ba6f9301a642fb4b9 Mon Sep 17 00:00:00 2001
From: Dominik Halfkann <dominik.halfkann@mailbox.org>
Date: Thu, 9 Apr 2026 21:01:05 +0200
Subject: [PATCH 4/9] =?UTF-8?q?fix:=20spec=20compliance=20=E2=80=94=20loca?=
 =?UTF-8?q?lStorage=20key,=20button=20styling,=20slide=20animation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rename sidebar key to orbit.navigator.sidebarCollapsed
- Add bg-surface + border to workbench corner buttons (resting state)
- Switch from @if to CSS width transitions for smooth slide animation
- Add prefers-reduced-motion guard
- Add overflow-hidden to calendar panel host

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../day-calendar-panel/day-calendar-panel.ts  |  2 +-
 src/app/shared/view-arbeit/view-arbeit.html   | 31 ++++++++++++-------
 .../shared/view-arbeit/view-arbeit.spec.ts    | 10 +++---
 src/app/shared/view-arbeit/view-arbeit.ts     |  2 +-
 4 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/app/calendar/day-calendar-panel/day-calendar-panel.ts b/src/app/calendar/day-calendar-panel/day-calendar-panel.ts
index 62e10cc..2319f11 100644
--- a/src/app/calendar/day-calendar-panel/day-calendar-panel.ts
+++ b/src/app/calendar/day-calendar-panel/day-calendar-panel.ts
@@ -21,7 +21,7 @@ import { DayAppointment } from '../day-schedule.model';
   ],
   host: {
     class:
-      'w-[260px] shrink-0 border-l border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] flex flex-col',
+      'w-[260px] shrink-0 border-l border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] flex flex-col overflow-hidden',
     '(document:keydown.escape)': 'onEscape()',
   },
   template: `
diff --git a/src/app/shared/view-arbeit/view-arbeit.html b/src/app/shared/view-arbeit/view-arbeit.html
index ac4606d..3b42d22 100644
--- a/src/app/shared/view-arbeit/view-arbeit.html
+++ b/src/app/shared/view-arbeit/view-arbeit.html
@@ -1,17 +1,20 @@
-@if (!sidebarCollapsed()) {
-  <aside
-    class="w-[360px] xl:w-[400px] shrink-0 border-r border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] overflow-hidden flex flex-col"
-    aria-label="Navigator"
-  >
+<aside
+  class="shrink-0 border-r border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] overflow-hidden flex flex-col transition-[width,border-width] duration-150 [@media(prefers-reduced-motion:reduce)]:transition-none"
+  [style.width]="sidebarCollapsed() ? '0px' : ''"
+  [style.border-right-width]="sidebarCollapsed() ? '0px' : ''"
+  [attr.aria-hidden]="sidebarCollapsed() || null"
+  aria-label="Navigator"
+>
+  <div class="w-[360px] xl:w-[400px] h-full flex flex-col">
     <app-navigator (collapseSidebar)="toggleSidebar()" />
-  </aside>
-}
+  </div>
+</aside>
 
 <div class="flex-1 overflow-hidden flex relative">
   @if (sidebarCollapsed()) {
     <button
       type="button"
-      class="absolute top-3 left-3 z-10 p-1.5 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+      class="absolute top-3 left-3 z-10 p-1.5 rounded-md bg-[var(--color-bg-surface)] border border-[var(--color-border-subtle)] text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface-hover,var(--color-bg-surface))] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
       (click)="toggleSidebar()"
       data-testid="sidebar-open"
       aria-label="Navigator einblenden"
@@ -23,7 +26,7 @@
   @if (settingsService.dayCalendarEnabled() && calendarCollapsed()) {
     <button
       type="button"
-      class="absolute top-3 right-3 z-10 p-1.5 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+      class="absolute top-3 right-3 z-10 p-1.5 rounded-md bg-[var(--color-bg-surface)] border border-[var(--color-border-subtle)] text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface-hover,var(--color-bg-surface))] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
       (click)="toggleCalendar()"
       data-testid="calendar-open"
       aria-label="Tagesplan einblenden"
@@ -36,7 +39,13 @@
     <app-workbench />
   </div>
 
-  @if (settingsService.dayCalendarEnabled() && !calendarCollapsed()) {
-    <app-day-calendar-panel (collapseCalendar)="toggleCalendar()" />
+  @if (settingsService.dayCalendarEnabled()) {
+    <app-day-calendar-panel
+      [style.width]="calendarCollapsed() ? '0px' : ''"
+      [style.border-left-width]="calendarCollapsed() ? '0px' : ''"
+      [attr.aria-hidden]="calendarCollapsed() || null"
+      class="transition-[width,border-width] duration-150 [@media(prefers-reduced-motion:reduce)]:transition-none"
+      (collapseCalendar)="toggleCalendar()"
+    />
   }
 </div>
diff --git a/src/app/shared/view-arbeit/view-arbeit.spec.ts b/src/app/shared/view-arbeit/view-arbeit.spec.ts
index 36e511e..aadab12 100644
--- a/src/app/shared/view-arbeit/view-arbeit.spec.ts
+++ b/src/app/shared/view-arbeit/view-arbeit.spec.ts
@@ -123,11 +123,11 @@ describe('ViewArbeitComponent', () => {
     const fixture = TestBed.createComponent(ViewArbeitComponent);
     fixture.componentInstance.toggleSidebar();
     TestBed.tick();
-    expect(localStorage.getItem('orbit.sidebar.collapsed')).toBe('true');
+    expect(localStorage.getItem('orbit.navigator.sidebarCollapsed')).toBe('true');
   });
 
   it('restores sidebarCollapsed from localStorage', async () => {
-    localStorage.setItem('orbit.sidebar.collapsed', 'true');
+    localStorage.setItem('orbit.navigator.sidebarCollapsed', 'true');
     TestBed.resetTestingModule();
     await TestBed.configureTestingModule({
       imports: [ViewArbeitComponent],
@@ -144,12 +144,14 @@ describe('ViewArbeitComponent', () => {
     expect(fixture.componentInstance.sidebarCollapsed()).toBe(true);
   });
 
-  it('hides aside when sidebarCollapsed is true', () => {
+  it('collapses aside when sidebarCollapsed is true', () => {
     const fixture = TestBed.createComponent(ViewArbeitComponent);
     fixture.componentInstance.toggleSidebar();
     fixture.detectChanges();
     const aside = fixture.nativeElement.querySelector('aside[aria-label="Navigator"]');
-    expect(aside).toBeNull();
+    expect(aside).toBeTruthy();
+    expect(aside.style.width).toBe('0px');
+    expect(aside.getAttribute('aria-hidden')).toBe('true');
   });
 
   it('shows sidebar-open button when sidebar collapsed', () => {
diff --git a/src/app/shared/view-arbeit/view-arbeit.ts b/src/app/shared/view-arbeit/view-arbeit.ts
index 283d364..42537f9 100644
--- a/src/app/shared/view-arbeit/view-arbeit.ts
+++ b/src/app/shared/view-arbeit/view-arbeit.ts
@@ -5,7 +5,7 @@ import { DayCalendarPanelComponent } from '../../calendar/day-calendar-panel/day
 import { SettingsService } from '../../settings/settings.service';
 import { LucidePanelLeftOpen, LucidePanelRightOpen } from '@lucide/angular';
 
-const SIDEBAR_KEY = 'orbit.sidebar.collapsed';
+const SIDEBAR_KEY = 'orbit.navigator.sidebarCollapsed';
 const CALENDAR_KEY = 'orbit.dayCalendar.collapsed';
 
 @Component({

From 991cfb1dbb07fc022cc8e1204bf7f34dad5b77b7 Mon Sep 17 00:00:00 2001
From: Dominik Halfkann <dominik.halfkann@mailbox.org>
Date: Thu, 9 Apr 2026 21:04:01 +0200
Subject: [PATCH 5/9] =?UTF-8?q?fix:=20code=20quality=20=E2=80=94=20use=20i?=
 =?UTF-8?q?nert,=20fix=20hover=20token,=20add=20calendar=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace aria-hidden with inert for proper keyboard trap prevention
- Remove non-existent --color-bg-surface-hover token
- Use TestBed.flushEffects() instead of TestBed.tick()
- Add calendar persistence and collapse template tests

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/shared/view-arbeit/view-arbeit.html   |  8 +++----
 .../shared/view-arbeit/view-arbeit.spec.ts    | 21 +++++++++++++++++--
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/view-arbeit/view-arbeit.html b/src/app/shared/view-arbeit/view-arbeit.html
index 3b42d22..557009e 100644
--- a/src/app/shared/view-arbeit/view-arbeit.html
+++ b/src/app/shared/view-arbeit/view-arbeit.html
@@ -2,7 +2,7 @@
   class="shrink-0 border-r border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] overflow-hidden flex flex-col transition-[width,border-width] duration-150 [@media(prefers-reduced-motion:reduce)]:transition-none"
   [style.width]="sidebarCollapsed() ? '0px' : ''"
   [style.border-right-width]="sidebarCollapsed() ? '0px' : ''"
-  [attr.aria-hidden]="sidebarCollapsed() || null"
+  [attr.inert]="sidebarCollapsed() || null"
   aria-label="Navigator"
 >
   <div class="w-[360px] xl:w-[400px] h-full flex flex-col">
@@ -14,7 +14,7 @@
   @if (sidebarCollapsed()) {
     <button
       type="button"
-      class="absolute top-3 left-3 z-10 p-1.5 rounded-md bg-[var(--color-bg-surface)] border border-[var(--color-border-subtle)] text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface-hover,var(--color-bg-surface))] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+      class="absolute top-3 left-3 z-10 p-1.5 rounded-md bg-[var(--color-bg-surface)] border border-[var(--color-border-subtle)] text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
       (click)="toggleSidebar()"
       data-testid="sidebar-open"
       aria-label="Navigator einblenden"
@@ -26,7 +26,7 @@
   @if (settingsService.dayCalendarEnabled() && calendarCollapsed()) {
     <button
       type="button"
-      class="absolute top-3 right-3 z-10 p-1.5 rounded-md bg-[var(--color-bg-surface)] border border-[var(--color-border-subtle)] text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface-hover,var(--color-bg-surface))] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+      class="absolute top-3 right-3 z-10 p-1.5 rounded-md bg-[var(--color-bg-surface)] border border-[var(--color-border-subtle)] text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
       (click)="toggleCalendar()"
       data-testid="calendar-open"
       aria-label="Tagesplan einblenden"
@@ -43,7 +43,7 @@
     <app-day-calendar-panel
       [style.width]="calendarCollapsed() ? '0px' : ''"
       [style.border-left-width]="calendarCollapsed() ? '0px' : ''"
-      [attr.aria-hidden]="calendarCollapsed() || null"
+      [attr.inert]="calendarCollapsed() || null"
       class="transition-[width,border-width] duration-150 [@media(prefers-reduced-motion:reduce)]:transition-none"
       (collapseCalendar)="toggleCalendar()"
     />
diff --git a/src/app/shared/view-arbeit/view-arbeit.spec.ts b/src/app/shared/view-arbeit/view-arbeit.spec.ts
index aadab12..7cf24bb 100644
--- a/src/app/shared/view-arbeit/view-arbeit.spec.ts
+++ b/src/app/shared/view-arbeit/view-arbeit.spec.ts
@@ -122,10 +122,17 @@ describe('ViewArbeitComponent', () => {
   it('persists sidebarCollapsed to localStorage', () => {
     const fixture = TestBed.createComponent(ViewArbeitComponent);
     fixture.componentInstance.toggleSidebar();
-    TestBed.tick();
+    TestBed.flushEffects();
     expect(localStorage.getItem('orbit.navigator.sidebarCollapsed')).toBe('true');
   });
 
+  it('persists calendarCollapsed to localStorage', () => {
+    const fixture = TestBed.createComponent(ViewArbeitComponent);
+    fixture.componentInstance.toggleCalendar();
+    TestBed.flushEffects();
+    expect(localStorage.getItem('orbit.dayCalendar.collapsed')).toBe('true');
+  });
+
   it('restores sidebarCollapsed from localStorage', async () => {
     localStorage.setItem('orbit.navigator.sidebarCollapsed', 'true');
     TestBed.resetTestingModule();
@@ -151,7 +158,17 @@ describe('ViewArbeitComponent', () => {
     const aside = fixture.nativeElement.querySelector('aside[aria-label="Navigator"]');
     expect(aside).toBeTruthy();
     expect(aside.style.width).toBe('0px');
-    expect(aside.getAttribute('aria-hidden')).toBe('true');
+    expect(aside.hasAttribute('inert')).toBe(true);
+  });
+
+  it('collapses calendar panel when calendarCollapsed is true', () => {
+    const fixture = TestBed.createComponent(ViewArbeitComponent);
+    fixture.componentInstance.toggleCalendar();
+    fixture.detectChanges();
+    const panel = fixture.nativeElement.querySelector('app-day-calendar-panel');
+    expect(panel).toBeTruthy();
+    expect(panel.style.width).toBe('0px');
+    expect(panel.hasAttribute('inert')).toBe(true);
   });
 
   it('shows sidebar-open button when sidebar collapsed', () => {

From 5c98d0ff10ee097f23d590b68154d7ce920eadc3 Mon Sep 17 00:00:00 2001
From: Dominik Halfkann <dominik.halfkann@mailbox.org>
Date: Thu, 9 Apr 2026 21:18:16 +0200
Subject: [PATCH 6/9] style: format day-calendar-panel with Prettier

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../day-calendar-panel/day-calendar-panel.ts  | 103 +++++++++---------
 1 file changed, 54 insertions(+), 49 deletions(-)

diff --git a/src/app/calendar/day-calendar-panel/day-calendar-panel.ts b/src/app/calendar/day-calendar-panel/day-calendar-panel.ts
index 2319f11..4ace097 100644
--- a/src/app/calendar/day-calendar-panel/day-calendar-panel.ts
+++ b/src/app/calendar/day-calendar-panel/day-calendar-panel.ts
@@ -1,4 +1,11 @@
-import { ChangeDetectionStrategy, Component, computed, inject, output, signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  output,
+  signal,
+} from '@angular/core';
 import { LucidePanelRightClose, LucidePlay, LucideSquare } from '@lucide/angular';
 import { DayTimelineComponent } from '../day-timeline/day-timeline';
 import { AppointmentPopupComponent } from '../appointment-popup/appointment-popup';
@@ -41,56 +48,54 @@ import { DayAppointment } from '../day-schedule.model';
         <svg lucidePanelRightClose [size]="16" [strokeWidth]="1.75"></svg>
       </button>
     </div>
-      @if (settingsService.pomodoroEnabled()) {
-        <div class="shrink-0 p-3 border-b border-[var(--color-border-subtle)]">
-          @if (pomodoro.state() === 'idle') {
-            <button
-              type="button"
-              class="flex items-center justify-center gap-1.5 rounded-lg border px-2 py-2 text-xs font-medium transition-colors cursor-pointer w-full text-center bg-[var(--color-primary-bg)] border-[var(--color-primary-border)] text-[var(--color-primary-text)] hover:bg-[var(--color-primary-bg-hover)]"
-              (click)="showPomodoroConfig.set(true)"
-            >
-              <svg lucidePlay [size]="12" [strokeWidth]="2.5"></svg>
-              Pomodoro starten
-            </button>
-          } @else if (pomodoro.state() === 'running') {
-            <div class="flex items-center justify-between gap-2 mb-2">
-              <div class="flex items-center gap-1.5">
-                <span class="relative flex h-2 w-2">
-                  <span
-                    class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-primary-solid)] opacity-75"
-                  ></span>
-                  <span
-                    class="relative inline-flex rounded-full h-2 w-2 bg-[var(--color-primary-solid)]"
-                  ></span>
-                </span>
-                <span class="text-xs font-medium text-[var(--color-primary-text)]"
-                  >Fokus läuft</span
-                >
-              </div>
-              <span class="text-xs text-[var(--color-text-muted)] tabular-nums">{{
-                pomodoroRemainingLabel()
-              }}</span>
+    @if (settingsService.pomodoroEnabled()) {
+      <div class="shrink-0 p-3 border-b border-[var(--color-border-subtle)]">
+        @if (pomodoro.state() === 'idle') {
+          <button
+            type="button"
+            class="flex items-center justify-center gap-1.5 rounded-lg border px-2 py-2 text-xs font-medium transition-colors cursor-pointer w-full text-center bg-[var(--color-primary-bg)] border-[var(--color-primary-border)] text-[var(--color-primary-text)] hover:bg-[var(--color-primary-bg-hover)]"
+            (click)="showPomodoroConfig.set(true)"
+          >
+            <svg lucidePlay [size]="12" [strokeWidth]="2.5"></svg>
+            Pomodoro starten
+          </button>
+        } @else if (pomodoro.state() === 'running') {
+          <div class="flex items-center justify-between gap-2 mb-2">
+            <div class="flex items-center gap-1.5">
+              <span class="relative flex h-2 w-2">
+                <span
+                  class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-primary-solid)] opacity-75"
+                ></span>
+                <span
+                  class="relative inline-flex rounded-full h-2 w-2 bg-[var(--color-primary-solid)]"
+                ></span>
+              </span>
+              <span class="text-xs font-medium text-[var(--color-primary-text)]">Fokus läuft</span>
             </div>
-            <button
-              type="button"
-              class="flex items-center justify-center gap-1.5 rounded-lg border px-2 py-2 text-xs font-medium transition-colors cursor-pointer w-full text-center bg-[var(--color-bg-surface)] border-[var(--color-border-subtle)] text-[var(--color-text-muted)] hover:border-red-300 hover:text-red-600 hover:bg-red-50"
-              (click)="showCancelConfirm.set(true)"
-            >
-              <svg lucideSquare [size]="12" [strokeWidth]="2.5"></svg>
-              Pomodoro abbrechen
-            </button>
-          }
-        </div>
-      }
-      <div class="flex-1 overflow-y-auto [scrollbar-gutter:stable]">
-        <app-day-timeline
-          [appointments]="service.appointments()"
-          [pomodoroBlock]="pomodoro.timelineBlock()"
-          (appointmentCreate)="onCreateRequest($event)"
-          (appointmentEdit)="onEditRequest($event)"
-          (appointmentUpdate)="onResizeUpdate($event)"
-        />
+            <span class="text-xs text-[var(--color-text-muted)] tabular-nums">{{
+              pomodoroRemainingLabel()
+            }}</span>
+          </div>
+          <button
+            type="button"
+            class="flex items-center justify-center gap-1.5 rounded-lg border px-2 py-2 text-xs font-medium transition-colors cursor-pointer w-full text-center bg-[var(--color-bg-surface)] border-[var(--color-border-subtle)] text-[var(--color-text-muted)] hover:border-red-300 hover:text-red-600 hover:bg-red-50"
+            (click)="showCancelConfirm.set(true)"
+          >
+            <svg lucideSquare [size]="12" [strokeWidth]="2.5"></svg>
+            Pomodoro abbrechen
+          </button>
+        }
       </div>
+    }
+    <div class="flex-1 overflow-y-auto [scrollbar-gutter:stable]">
+      <app-day-timeline
+        [appointments]="service.appointments()"
+        [pomodoroBlock]="pomodoro.timelineBlock()"
+        (appointmentCreate)="onCreateRequest($event)"
+        (appointmentEdit)="onEditRequest($event)"
+        (appointmentUpdate)="onResizeUpdate($event)"
+      />
+    </div>
 
     @if (popupState() !== null) {
       <app-appointment-popup

From 548d7c6f29ac50a0a5d63ea7d0bcead985727e6c Mon Sep 17 00:00:00 2001
From: Dominik Halfkann <dominik.halfkann@mailbox.org>
Date: Thu, 9 Apr 2026 21:36:24 +0200
Subject: [PATCH 7/9] style: format spec and plan docs with Prettier

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../plans/2026-04-09-collapsible-panels.md    | 106 ++++++++++--------
 .../2026-04-09-collapsible-panels-design.md   |  12 +-
 2 files changed, 66 insertions(+), 52 deletions(-)

diff --git a/docs/superpowers/plans/2026-04-09-collapsible-panels.md b/docs/superpowers/plans/2026-04-09-collapsible-panels.md
index 70cc45e..ed80a5a 100644
--- a/docs/superpowers/plans/2026-04-09-collapsible-panels.md
+++ b/docs/superpowers/plans/2026-04-09-collapsible-panels.md
@@ -14,21 +14,22 @@
 
 ## File Map
 
-| File | Action | Responsibility |
-|------|--------|---------------|
-| `src/app/shared/view-arbeit/view-arbeit.ts` | Modify | Add collapse signals, toggle methods, localStorage persistence, Lucide imports |
-| `src/app/shared/view-arbeit/view-arbeit.html` | Modify | Conditional rendering of panels, toggle buttons in workbench area |
-| `src/app/shared/view-arbeit/view-arbeit.spec.ts` | Modify | Tests for collapse/expand behavior and persistence |
-| `src/app/shared/navigator/navigator.html` | Modify | Add collapse button in navigator header |
-| `src/app/shared/navigator/navigator.ts` | Modify | Add output event for collapse, Lucide import |
-| `src/app/calendar/day-calendar-panel/day-calendar-panel.ts` | Modify | Remove internal collapse logic entirely, add output + input for collapse, replace icons |
-| `src/app/calendar/day-calendar-panel/day-calendar-panel.spec.ts` | Modify | Update tests to match new collapse pattern |
+| File                                                             | Action | Responsibility                                                                          |
+| ---------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------- |
+| `src/app/shared/view-arbeit/view-arbeit.ts`                      | Modify | Add collapse signals, toggle methods, localStorage persistence, Lucide imports          |
+| `src/app/shared/view-arbeit/view-arbeit.html`                    | Modify | Conditional rendering of panels, toggle buttons in workbench area                       |
+| `src/app/shared/view-arbeit/view-arbeit.spec.ts`                 | Modify | Tests for collapse/expand behavior and persistence                                      |
+| `src/app/shared/navigator/navigator.html`                        | Modify | Add collapse button in navigator header                                                 |
+| `src/app/shared/navigator/navigator.ts`                          | Modify | Add output event for collapse, Lucide import                                            |
+| `src/app/calendar/day-calendar-panel/day-calendar-panel.ts`      | Modify | Remove internal collapse logic entirely, add output + input for collapse, replace icons |
+| `src/app/calendar/day-calendar-panel/day-calendar-panel.spec.ts` | Modify | Update tests to match new collapse pattern                                              |
 
 ---
 
 ### Task 1: Add collapse state and toggle methods to ViewArbeitComponent
 
 **Files:**
+
 - Modify: `src/app/shared/view-arbeit/view-arbeit.ts`
 - Test: `src/app/shared/view-arbeit/view-arbeit.spec.ts`
 
@@ -157,6 +158,7 @@ git commit -m "feat(view-arbeit): add collapse state signals for sidebar and cal
 ### Task 2: Update view-arbeit template with conditional rendering and toggle buttons
 
 **Files:**
+
 - Modify: `src/app/shared/view-arbeit/view-arbeit.html`
 - Test: `src/app/shared/view-arbeit/view-arbeit.spec.ts`
 
@@ -201,37 +203,35 @@ Replace `src/app/shared/view-arbeit/view-arbeit.html` with:
 
 ```html
 @if (!sidebarCollapsed()) {
-  <aside
-    class="w-[360px] xl:w-[400px] shrink-0 border-r border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] overflow-hidden flex flex-col transition-[width] duration-150 [@media(prefers-reduced-motion:reduce)]:transition-none"
-    aria-label="Navigator"
-  >
-    <app-navigator (collapseSidebar)="toggleSidebar()" />
-  </aside>
+<aside
+  class="w-[360px] xl:w-[400px] shrink-0 border-r border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] overflow-hidden flex flex-col transition-[width] duration-150 [@media(prefers-reduced-motion:reduce)]:transition-none"
+  aria-label="Navigator"
+>
+  <app-navigator (collapseSidebar)="toggleSidebar()" />
+</aside>
 }
 
 <div class="flex-1 overflow-hidden flex relative">
   @if (sidebarCollapsed()) {
-    <button
-      type="button"
-      class="absolute top-3 left-3 z-10 p-1.5 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
-      (click)="toggleSidebar()"
-      data-testid="sidebar-open"
-      aria-label="Navigator einblenden"
-    >
-      <svg lucidePanelLeftOpen [size]="18" [strokeWidth]="1.75"></svg>
-    </button>
-  }
-
-  @if (settingsService.dayCalendarEnabled() && calendarCollapsed()) {
-    <button
-      type="button"
-      class="absolute top-3 right-3 z-10 p-1.5 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
-      (click)="toggleCalendar()"
-      data-testid="calendar-open"
-      aria-label="Tagesplan einblenden"
-    >
-      <svg lucidePanelRightOpen [size]="18" [strokeWidth]="1.75"></svg>
-    </button>
+  <button
+    type="button"
+    class="absolute top-3 left-3 z-10 p-1.5 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+    (click)="toggleSidebar()"
+    data-testid="sidebar-open"
+    aria-label="Navigator einblenden"
+  >
+    <svg lucidePanelLeftOpen [size]="18" [strokeWidth]="1.75"></svg>
+  </button>
+  } @if (settingsService.dayCalendarEnabled() && calendarCollapsed()) {
+  <button
+    type="button"
+    class="absolute top-3 right-3 z-10 p-1.5 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-body)] hover:bg-[var(--color-bg-surface)] transition-colors duration-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+    (click)="toggleCalendar()"
+    data-testid="calendar-open"
+    aria-label="Tagesplan einblenden"
+  >
+    <svg lucidePanelRightOpen [size]="18" [strokeWidth]="1.75"></svg>
+  </button>
   }
 
   <div class="flex-1 overflow-hidden bg-[var(--color-bg-page)]">
@@ -239,7 +239,7 @@ Replace `src/app/shared/view-arbeit/view-arbeit.html` with:
   </div>
 
   @if (settingsService.dayCalendarEnabled() && !calendarCollapsed()) {
-    <app-day-calendar-panel (collapseCalendar)="toggleCalendar()" />
+  <app-day-calendar-panel (collapseCalendar)="toggleCalendar()" />
   }
 </div>
 ```
@@ -261,6 +261,7 @@ git commit -m "feat(view-arbeit): conditional panel rendering with toggle button
 ### Task 3: Add collapse button to Navigator header
 
 **Files:**
+
 - Modify: `src/app/shared/navigator/navigator.ts`
 - Modify: `src/app/shared/navigator/navigator.html`
 
@@ -269,6 +270,7 @@ git commit -m "feat(view-arbeit): conditional panel rendering with toggle button
 In `src/app/shared/navigator/navigator.ts`:
 
 Add `output` to the Angular import:
+
 ```typescript
 import {
   ChangeDetectionStrategy,
@@ -282,6 +284,7 @@ import {
 ```
 
 Add `LucidePanelLeftClose` to the Lucide import:
+
 ```typescript
 import { LucideChevronDown, LucidePanelLeftClose } from '@lucide/angular';
 ```
@@ -289,6 +292,7 @@ import { LucideChevronDown, LucidePanelLeftClose } from '@lucide/angular';
 Add `LucidePanelLeftClose` to the `imports` array in the component decorator.
 
 Add the output to the class body:
+
 ```typescript
 readonly collapseSidebar = output();
 ```
@@ -300,9 +304,7 @@ In `src/app/shared/navigator/navigator.html`, modify the header `<div>` (lines 2
 ```html
 <div class="px-4 py-3 border-b border-[var(--color-border-subtle)]">
   <div class="flex items-center justify-between">
-    <span class="font-semibold text-[var(--color-text-heading)] text-sm tracking-wide"
-      >Arbeit</span
-    >
+    <span class="font-semibold text-[var(--color-text-heading)] text-sm tracking-wide">Arbeit</span>
     <span class="text-xs text-[var(--color-text-muted)]">Dein Command Center</span>
   </div>
 </div>
@@ -313,9 +315,7 @@ With:
 ```html
 <div class="px-4 py-3 border-b border-[var(--color-border-subtle)]">
   <div class="flex items-center justify-between">
-    <span class="font-semibold text-[var(--color-text-heading)] text-sm tracking-wide"
-      >Arbeit</span
-    >
+    <span class="font-semibold text-[var(--color-text-heading)] text-sm tracking-wide">Arbeit</span>
     <div class="flex items-center gap-2">
       <span class="text-xs text-[var(--color-text-muted)]">Dein Command Center</span>
       <button
@@ -349,6 +349,7 @@ git commit -m "feat(navigator): add sidebar collapse button in header"
 ### Task 4: Refactor DayCalendarPanelComponent — remove internal collapse, add output
 
 **Files:**
+
 - Modify: `src/app/calendar/day-calendar-panel/day-calendar-panel.ts`
 - Modify: `src/app/calendar/day-calendar-panel/day-calendar-panel.spec.ts`
 
@@ -426,6 +427,7 @@ Expected: FAIL — `collapseCalendar` output doesn't exist yet.
 - [ ] **Step 3: Refactor DayCalendarPanelComponent**
 
 Replace `src/app/calendar/day-calendar-panel/day-calendar-panel.ts`. Key changes:
+
 - Remove `collapsed` signal, `STORAGE_KEY`, `hostClass` computed, `toggleCollapse()` method
 - Remove the `@if (collapsed())` branch (the 8px strip)
 - Add `collapseCalendar = output()`
@@ -434,7 +436,14 @@ Replace `src/app/calendar/day-calendar-panel/day-calendar-panel.ts`. Key changes
 - The collapse toggle button in the header now emits the output instead of toggling internal state
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, inject, output, signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  output,
+  signal,
+} from '@angular/core';
 import { LucidePanelRightClose, LucidePlay, LucideSquare } from '@lucide/angular';
 import { DayTimelineComponent } from '../day-timeline/day-timeline';
 import { AppointmentPopupComponent } from '../appointment-popup/appointment-popup';
@@ -456,7 +465,8 @@ import { DayAppointment } from '../day-schedule.model';
     PomodoroConfigPopupComponent,
   ],
   host: {
-    class: 'w-[260px] shrink-0 border-l border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] flex flex-col',
+    class:
+      'w-[260px] shrink-0 border-l border-[var(--color-border-subtle)] bg-[var(--color-bg-page)] flex flex-col',
     '(document:keydown.escape)': 'onEscape()',
   },
   template: `
@@ -498,9 +508,7 @@ import { DayAppointment } from '../day-schedule.model';
                   class="relative inline-flex rounded-full h-2 w-2 bg-[var(--color-primary-solid)]"
                 ></span>
               </span>
-              <span class="text-xs font-medium text-[var(--color-primary-text)]"
-                >Fokus läuft</span
-              >
+              <span class="text-xs font-medium text-[var(--color-primary-text)]">Fokus läuft</span>
             </div>
             <span class="text-xs text-[var(--color-text-muted)] tabular-nums">{{
               pomodoroRemainingLabel()
@@ -659,6 +667,7 @@ git commit -m "refactor(day-calendar-panel): remove internal collapse, emit outp
 ### Task 5: Update existing tests for changed template structure
 
 **Files:**
+
 - Modify: `src/app/shared/view-arbeit/view-arbeit.spec.ts`
 
 - [ ] **Step 1: Fix the "should render navigator aside" test**
@@ -678,6 +687,7 @@ const mockSettingsService = {
 ```
 
 And add to providers:
+
 ```typescript
 { provide: SettingsService, useValue: mockSettingsService },
 ```
diff --git a/docs/superpowers/specs/2026-04-09-collapsible-panels-design.md b/docs/superpowers/specs/2026-04-09-collapsible-panels-design.md
index a04f214..bcb6c72 100644
--- a/docs/superpowers/specs/2026-04-09-collapsible-panels-design.md
+++ b/docs/superpowers/specs/2026-04-09-collapsible-panels-design.md
@@ -17,10 +17,10 @@ Ziel: Beide Panels sollen sich elegant ein- und ausklappen lassen — mit einhei
 
 ### Icons (Lucide)
 
-| Zustand | Links (Navigator) | Rechts (Kalender) |
-|---------|-------------------|-------------------|
-| Ausgeklappt → Einklappen | `PanelLeftClose` | `PanelRightClose` |
-| Eingeklappt → Aufklappen | `PanelLeftOpen` | `PanelRightOpen` |
+| Zustand                  | Links (Navigator) | Rechts (Kalender) |
+| ------------------------ | ----------------- | ----------------- |
+| Ausgeklappt → Einklappen | `PanelLeftClose`  | `PanelRightClose` |
+| Eingeklappt → Aufklappen | `PanelLeftOpen`   | `PanelRightOpen`  |
 
 ### Toggle-Button Styling
 
@@ -42,16 +42,19 @@ Ziel: Beide Panels sollen sich elegant ein- und ausklappen lassen — mit einhei
 ## Betroffene Dateien
 
 ### `src/app/shared/view-arbeit/view-arbeit.ts` + `.html`
+
 - Neuen `sidebarCollapsed` Signal hinzufügen mit localStorage-Init
 - `toggleSidebar()` Methode
 - Template: `@if`-Bedingung um `<aside>`, Toggle-Button im Workbench-Bereich wenn eingeklappt
 - Lucide-Imports: `LucidePanelLeftClose`, `LucidePanelLeftOpen`
 
 ### `src/app/shared/navigator/navigator.ts` + `.html`
+
 - Toggle-Button im Navigator-Header hinzufügen (ruft Parent-Methode auf via Output)
 - Oder: Toggle-Button direkt in `view-arbeit.html` im `<aside>`-Header platzieren (einfacher, da state in ViewArbeit lebt)
 
 ### `src/app/calendar/day-calendar-panel/day-calendar-panel.ts`
+
 - Bestehende Collapse-Logik refactorn: schmaler 8px-Streifen entfernt
 - Stattdessen: Panel verschwindet komplett wenn collapsed
 - Toggle-Button im Header wie Navigator (mit `PanelRightClose`)
@@ -59,6 +62,7 @@ Ziel: Beide Panels sollen sich elegant ein- und ausklappen lassen — mit einhei
 - Aufklapp-Button wird von `view-arbeit.html` gerendert (nicht vom Panel selbst)
 
 ### `src/app/shared/view-arbeit/view-arbeit.html`
+
 - Aufklapp-Buttons für beide Panels im Workbench-Bereich rendern, positioniert absolut oben links/rechts
 - Kalender-`@if` anpassen: nicht mehr `settingsService.dayCalendarEnabled()` allein, sondern auch collapse-state berücksichtigen (enabled = Feature an, collapsed = nur visuell versteckt)
 

From 3e30811889ad8f15d216f7ac07644279733eeab8 Mon Sep 17 00:00:00 2001
From: Dominik Halfkann <dominik.halfkann@mailbox.org>
Date: Thu, 9 Apr 2026 22:08:43 +0200
Subject: [PATCH 8/9] style: format all files with Prettier

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .openhands/microagents/branding.md                 |  5 +++--
 .../2026-03-15-jira-user-mention-resolution.md     | 14 ++++++--------
 docs/superpowers/plans/2026-03-29-auto-refresh.md  | 10 ++++------
 .../specs/2026-03-15-pr-needs-re-review-design.md  |  2 +-
 mock-server/jira.js                                | 14 ++++++--------
 src/app/shared/data-refresh.service.spec.ts        | 10 ++++------
 6 files changed, 24 insertions(+), 31 deletions(-)

diff --git a/.openhands/microagents/branding.md b/.openhands/microagents/branding.md
index c6d4fed..6cf67c7 100644
--- a/.openhands/microagents/branding.md
+++ b/.openhands/microagents/branding.md
@@ -1,4 +1,5 @@
 # Instruction for Pull Requests
-Every time you submit a Pull Request, append this exact footer:
----
+
+## Every time you submit a Pull Request, append this exact footer:
+
 🚀 **Autonomously created by Mistral (Model: devstral-latest)**
diff --git a/docs/superpowers/plans/2026-03-15-jira-user-mention-resolution.md b/docs/superpowers/plans/2026-03-15-jira-user-mention-resolution.md
index 87a0635..1979cb5 100644
--- a/docs/superpowers/plans/2026-03-15-jira-user-mention-resolution.md
+++ b/docs/superpowers/plans/2026-03-15-jira-user-mention-resolution.md
@@ -29,14 +29,12 @@ app.get('/rest/api/2/user', (req, res) => {
   const username = req.query.username;
   const user = ALL_USERS.find((u) => u.name === username);
   if (!user) {
-    res
-      .status(404)
-      .json({
-        errorMessages: [
-          `User '${username}' does not exist or you do not have permission to view it.`,
-        ],
-        errors: {},
-      });
+    res.status(404).json({
+      errorMessages: [
+        `User '${username}' does not exist or you do not have permission to view it.`,
+      ],
+      errors: {},
+    });
     return;
   }
   res.json(user);
diff --git a/docs/superpowers/plans/2026-03-29-auto-refresh.md b/docs/superpowers/plans/2026-03-29-auto-refresh.md
index 5eb46be..d5ba7ed 100644
--- a/docs/superpowers/plans/2026-03-29-auto-refresh.md
+++ b/docs/superpowers/plans/2026-03-29-auto-refresh.md
@@ -405,12 +405,10 @@ describe('DataRefreshService — visibility', () => {
     expect(state().lastFetchTime).not.toBeNull();
 
     // Simulate stale data by moving lastFetchTime back
-    (service as any).sources
-      .get('jira')!
-      .state.update((s: DataSourceState) => ({
-        ...s,
-        lastFetchTime: Date.now() - REFRESH_INTERVAL_MS - 1000,
-      }));
+    (service as any).sources.get('jira')!.state.update((s: DataSourceState) => ({
+      ...s,
+      lastFetchTime: Date.now() - REFRESH_INTERVAL_MS - 1000,
+    }));
 
     service.onVisibilityRegained();
     expect(callCount).toBe(1);
diff --git a/docs/superpowers/specs/2026-03-15-pr-needs-re-review-design.md b/docs/superpowers/specs/2026-03-15-pr-needs-re-review-design.md
index ba16760..515811b 100644
--- a/docs/superpowers/specs/2026-03-15-pr-needs-re-review-design.md
+++ b/docs/superpowers/specs/2026-03-15-pr-needs-re-review-design.md
@@ -5,7 +5,7 @@
 
 ## Problem
 
-PRs where the user requested changes (`NEEDS_WORK`) currently show as red in Orbit. But the user does not need to act on them — they are waiting for the author to respond. However, once any activity occurs on the PR after the user's NEEDS_WORK review (new commits, comments, etc.), the user _does_ need to act. The current red badge gives no distinction between these two states.
+PRs where the user requested changes (`NEEDS_WORK`) currently show as red in Orbit. But the user does not need to act on them — they are waiting for the author to respond. However, once any activity occurs on the PR after the user's NEEDS*WORK review (new commits, comments, etc.), the user \_does* need to act. The current red badge gives no distinction between these two states.
 
 ## Goal
 
diff --git a/mock-server/jira.js b/mock-server/jira.js
index ed7f21c..1fd7140 100644
--- a/mock-server/jira.js
+++ b/mock-server/jira.js
@@ -648,14 +648,12 @@ app.get('/rest/api/2/user', (req, res) => {
   const username = req.query.username;
   const user = ALL_USERS.find((u) => u.name === username);
   if (!user) {
-    res
-      .status(404)
-      .json({
-        errorMessages: [
-          `User '${username}' does not exist or you do not have permission to view it.`,
-        ],
-        errors: {},
-      });
+    res.status(404).json({
+      errorMessages: [
+        `User '${username}' does not exist or you do not have permission to view it.`,
+      ],
+      errors: {},
+    });
     return;
   }
   res.json(user);
diff --git a/src/app/shared/data-refresh.service.spec.ts b/src/app/shared/data-refresh.service.spec.ts
index 97c85f3..aa55aa4 100644
--- a/src/app/shared/data-refresh.service.spec.ts
+++ b/src/app/shared/data-refresh.service.spec.ts
@@ -185,12 +185,10 @@ describe('DataRefreshService — visibility', () => {
     const state = service.sourceState('jira');
     expect(state().lastFetchTime).not.toBeNull();
 
-    (service as any).sources
-      .get('jira')!
-      .state.update((s: DataSourceState) => ({
-        ...s,
-        lastFetchTime: Date.now() - REFRESH_INTERVAL_MS - 1000,
-      }));
+    (service as any).sources.get('jira')!.state.update((s: DataSourceState) => ({
+      ...s,
+      lastFetchTime: Date.now() - REFRESH_INTERVAL_MS - 1000,
+    }));
 
     service.onVisibilityRegained();
     expect(callCount).toBe(1);

From fe4b78e326ea866796b836d6f1f666556fd2d196 Mon Sep 17 00:00:00 2001
From: Dominik Halfkann <dominik.halfkann@mailbox.org>
Date: Thu, 9 Apr 2026 22:14:22 +0200
Subject: [PATCH 9/9] fix(smoke-test): create settings.json for CI environment

The server loads settings from ~/.orbit/settings.json, not from env
vars. In CI there is no settings file, causing 503 responses. The
smoke test now writes a temporary settings.json before starting the
server and cleans it up afterwards.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 smoke-test/index.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/smoke-test/index.js b/smoke-test/index.js
index 00e8f4a..2f944f6 100644
--- a/smoke-test/index.js
+++ b/smoke-test/index.js
@@ -1,16 +1,26 @@
 const { spawn } = require('child_process');
+const fs = require('fs');
 const http = require('http');
+const os = require('os');
 const path = require('path');
 
 const ROOT = path.resolve(__dirname, '..');
+const ORBIT_DIR = path.join(os.homedir(), '.orbit');
 const children = [];
 
+let createdSettings = false;
+
 function cleanup() {
   for (const child of children) {
     try {
       child.kill();
     } catch (_) {}
   }
+  if (createdSettings) {
+    try {
+      fs.unlinkSync(path.join(ORBIT_DIR, 'settings.json'));
+    } catch (_) {}
+  }
 }
 
 function fail(err) {
@@ -57,6 +67,26 @@ function get(url) {
 }
 
 async function run() {
+  fs.mkdirSync(ORBIT_DIR, { recursive: true });
+  const settingsPath = path.join(ORBIT_DIR, 'settings.json');
+  const hadSettings = fs.existsSync(settingsPath);
+  if (!hadSettings) {
+    createdSettings = true;
+    fs.writeFileSync(
+      settingsPath,
+      JSON.stringify({
+        connections: {
+          jira: { baseUrl: 'http://localhost:6202', apiKey: 'smoke-test-token' },
+          bitbucket: {
+            baseUrl: 'http://localhost:6203',
+            apiKey: 'smoke-test-token',
+            userSlug: 'dominik.mueller',
+          },
+        },
+      }),
+    );
+  }
+
   const mockServer = spawn('node', ['mock-server/jira.js'], { cwd: ROOT, stdio: 'pipe' });
   children.push(mockServer);
   mockServer.on('exit', (code) => {