# T08 — Floating Session Toolbar Template
## Generates: `components/toolbar/collab-toolbar.component.html` + `.scss`

---

## Step 1 — Reference Files (fill in before running)

```
"Read CLAUDE.md.
Read @[REF:MODAL] to understand how we build floating/overlay UI elements.
If we have a floating action button or notification bar anywhere in the
project, read that file too.
Then implement the template described below."
```

**What to look for in your reference:**
- How overlays/floating elements are positioned in this project
- Whether there is a shared wrapper component for floating UI
- Icon component pattern — how icons are rendered (`<gb-icon>`, `<i>`, svg, etc.)
- Tooltip/title pattern — how hover labels work
- Badge/pill component for counts
- Button variant for destructive/danger actions

---

## Step 2 — What This Component Is

A **floating toolbar** that appears at the bottom-center of the screen
during any active collaboration session.

- It is draggable (uses CDK DragDrop — already in TS)
- It floats above all other content (high z-index)
- It is always visible during a session regardless of which page the user is on
- It is mounted once at app root level, not inside any page

---

## Step 3 — Content Specification

The toolbar must display and do the following.
Use your project's components/patterns for each item:

### Visibility
```
Show entire toolbar only when: visible() === true
(Signal from CollabUiState.toolbarVisible)
```

### Session Info Area (left side)
```
- Connection status dot
    green + solid   → isConnected() === true
    amber + pulsing → isReconnecting() === true
    red             → neither
- Session code text  → sessionCode()          e.g. "XK-4291"
- Participant count  → participantCount()      e.g. "4 live"
```

### Mode Buttons (center-left)
```
- Co-Browse button
    active state when: isScreenSharing() === false
    icon: your project's "browse" or "globe" icon
    title/tooltip: "Co-Browse"

- Screen Share button
    active state when: isScreenSharing() === true
    danger/warning state when active (it's a live action)
    click: toggleScreenShare()
    icon: your project's "screen" or "monitor" icon
    title/tooltip: "Screen Share"
```

### Action Buttons (center)
```
- Chat button
    active state when: isChatOpen() === true
    click: uiState.toggleChat()
    icon: your project's "chat" or "message" icon
    badge showing unread count when: chatBadge() > 0
    badge value: chatBadge()

- Annotate button
    active state when: isAnnotating() === true
    click: uiState.toggleAnnotateMode()
    icon: your project's "pen" or "edit" icon

- Participants button
    click: uiState.openDetailPanel()
    icon: your project's "people" or "group" icon
```

### Right Side
```
- Elapsed timer text → elapsed()
    format: "04:51" under 1 hour, "1h 23m" over 1 hour
    styled as monospace/code

- End Session button
    always styled as destructive/danger
    click: endSession()
    icon: your project's "phone-off" or "end-call" icon
    label: "End"
```

---

## Step 4 — Angular Bindings Summary

All of these are already defined in the TS file.
Do not add new properties — only bind to these:

```typescript
// Visibility
visible()             Signal<boolean>

// Session info
sessionCode()         Signal<string | null>
participantCount()    Signal<number>
isConnected()         Signal<boolean>      — from hubService
isReconnecting()      Signal<boolean>      — from hubService

// Button states
isChatOpen()          Signal<boolean>
chatBadge()           Signal<number>
isAnnotating()        Signal<boolean>
isScreenSharing()     Signal<boolean>
elapsed()             Signal<string>

// Actions (methods on component)
toggleScreenShare()
endSession()

// Actions (direct state calls — already injected as public in TS)
uiState.toggleChat()
uiState.toggleAnnotateMode()
uiState.openDetailPanel()
```

---

## Step 5 — SCSS Instruction

```
Generate collab-toolbar.component.scss.

Only write styles that are SPECIFIC to this component and cannot
be handled by your project's design system.

Do NOT rewrite styles for things your design system already handles:
- Button sizes, colors, hover states (use your button variants)
- Typography (use your type tokens)
- Icon sizes (use your icon component's size props)

DO write styles for:
- The floating position: fixed, bottom, horizontal centering
- The drag handle behavior (cursor: grab on session-info area)
- Entry animation: slide up + fade in when visible() becomes true
- Exit: reverse of entry
- The connection status dot (small circle, color + pulse animation)
- The elapsed timer monospace styling
- Z-index (use your project's z-index token if one exists,
  otherwise z-index: 1000)
- The toolbar's background blur/glass effect if it fits your design system
```

---

## Constraints
- Use Angular 20 control flow: `@if`, `@for` — never `*ngIf`, `*ngFor`
- Signal values called as functions: `visible()`, not `visible`
- `cdkDrag` and `cdkDragBoundary="body"` must be on the root toolbar div
- The toolbar host element should have `pointer-events: none` on its
  fixed wrapper so it does not block page content — only the inner
  toolbar div should have `pointer-events: all`