# sanctum-web Layout Redesign

**Date:** 2026-04-22  
**Repo:** git.mithraic.cloud/ad3laid3/sanctum-web  
**Base:** stoatchat/for-web (Solid.js + Vite + TypeScript)

---

## Goal

Fork the Stoat web frontend and fix its layout proportions so the app feels native on desktop and works properly as a PWA. The message area should dominate the screen. Nothing in the API, auth, or business logic layer is changed.

---

## Layout

The root shell is rebuilt as a four-column CSS Grid:

```
[server icons 65px] [channels 240px] [messages 1fr] [members 240px]
```

| Panel | Width | Behaviour |
|---|---|---|
| Server icon sidebar | 65px fixed | Icon-only, scrollable, always visible |
| Channel list | 240px default | User-resizable, collapsible |
| Message area | fills remaining space (1fr) | Message list + pinned input at bottom |
| Member list | 240px | Collapsible, hidden by default on narrow viewports |

---

## Scope

**Changed:**
- Root layout shell component — CSS replaced with proper grid
- Global CSS spacing/sizing tokens that cause proportion issues

**Not changed:**
- API client
- WebSocket layer
- Auth flow
- Message rendering components
- Channel/server/member components
- Any business logic

---

## Build & Deployment

- Repo: `git.mithraic.cloud/ad3laid3/sanctum-web`
- CI: Forgejo Actions — `pnpm build` on push to `main`, rsync `dist/` to VPS
- Serves at: `mithraic.space/app` (replaces current for-web output, no Caddy changes)
- Sanctum desktop app picks up the new frontend automatically on next launch

---

## Out of Scope

- Tauri desktop wrapper (separate project, builds on this frontend)
- Feature additions beyond layout fixes
- Mobile/responsive breakpoints beyond basic collapse behaviour
- Rebranding (keep existing Stoat/Revolt dark aesthetic)