62 lines
1.7 KiB
Markdown
62 lines
1.7 KiB
Markdown
# 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)
|