channel.unread)}
user={user()!}
selectedServer={() => params.server}
onCreateOrJoinServer={() =>
openModal({ type: "create_or_join_server", client: client() })
}
menuGenerator={props.menuGenerator}
/>
}>
);
```
- [ ] **Step 3: Check in dev server — server icon column should be narrow (65px), channel list should be 240px, message area fills the rest**
Expected: Three visually distinct columns. The message area is clearly the widest.
- [ ] **Step 4: Commit**
```bash
git add packages/client/src/interface/Sidebar.tsx
git commit -m "fix: explicit 65px server list and 240px channel sidebar widths"
git push origin main
```
---
## Task 5: Set up Forgejo CI — build and deploy
**Files:**
- Create: `.forgejo/workflows/deploy.yml`
This workflow runs on every push to `main`, builds the client, and rsyncs the output to the VPS directory that Caddy serves at `mithraic.space/app`.
- [ ] **Step 1: Add an SSH deploy key to Forgejo**
On the VPS, generate a deploy key (if one doesn't exist):
```bash
ssh-keygen -t ed25519 -C "sanctum-web-deploy" -f ~/.ssh/sanctum_web_deploy -N ""
cat ~/.ssh/sanctum_web_deploy.pub >> ~/.ssh/authorized_keys
cat ~/.ssh/sanctum_web_deploy # copy this — it's the private key for the secret
```
In Forgejo → `sanctum-web` repo → Settings → Secrets, add:
- `DEPLOY_KEY` = the private key content from above
- `DEPLOY_HOST` = your VPS IP or hostname
- `DEPLOY_USER` = the SSH user on the VPS (e.g. `root` or `deploy`)
- `DEPLOY_PATH` = the path Caddy serves for mithraic.space/app (e.g. `/var/www/sanctum-web`)
- [ ] **Step 2: Create the workflow file**
```bash
mkdir -p .forgejo/workflows
```
Create `.forgejo/workflows/deploy.yml`:
```yaml
name: Build & Deploy
on:
push:
branches: [main]
jobs:
deploy:
runs-on: docker
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
- name: Install pnpm
run: npm install -g pnpm@10
- name: Install dependencies
run: pnpm install
- name: Build
run: pnpm --filter client build
- name: Deploy to VPS
env:
DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}
DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
DEPLOY_USER: ${{ secrets.DEPLOY_USER }}
DEPLOY_PATH: ${{ secrets.DEPLOY_PATH }}
run: |
mkdir -p ~/.ssh
echo "$DEPLOY_KEY" > ~/.ssh/deploy_key
chmod 600 ~/.ssh/deploy_key
ssh-keyscan -H "$DEPLOY_HOST" >> ~/.ssh/known_hosts
rsync -avz --delete \
-e "ssh -i ~/.ssh/deploy_key" \
packages/client/dist/ \
"$DEPLOY_USER@$DEPLOY_HOST:$DEPLOY_PATH/"
```
- [ ] **Step 3: Commit and push — watch the Actions tab on Forgejo**
```bash
git add .forgejo/workflows/deploy.yml
git commit -m "ci: build and deploy to VPS on push to main"
git push origin main
```
Expected: Forgejo Actions picks up the workflow, builds successfully, and rsyncs `dist/` to the VPS. Visit `mithraic.space/app` — the new layout should be live.
---
## Task 6: Verify the live deployment
- [ ] **Step 1: Open `mithraic.space/app` in a browser**
Check:
- Server icon column is narrow on the left
- Channel list is a fixed-width column next to it
- Message area fills the remaining screen width
- No horizontal overflow or clipped panels
- [ ] **Step 2: Open Sanctum desktop app**
Since it loads `mithraic.space/app`, it should automatically show the new layout. Verify the same proportions hold in the desktop window.
- [ ] **Step 3: Test on a narrow browser window (900px wide)**
Expected: The layout still shows the message area without horizontal scrollbar. If the member list appears (in a text channel), it can collapse or overlap at this width — that's acceptable for v1.
- [ ] **Step 4: Tag the first release**
```bash
git tag v1.0.0
git push origin v1.0.0
```