# Redesign the app shell, sidebar, and library directory · screen/col

[View on GitCafe](https://git.cafe/screen/col/commit/357f8e1b0400527fa84228fd2498f2a4f63e528b)

Repository: [screen/col](https://git.cafe/screen/col)

Visibility: public

Requested revision: 357f8e1b0400527fa84228fd2498f2a4f63e528b

Requested commit: 357f8e1b0400527fa84228fd2498f2a4f63e528b

Commit: 357f8e1b0400527fa84228fd2498f2a4f63e528b

Tree: b2c9fc9e2a5beb7e59d7103544a9bc99c35004c1

Author: Luneri

Committer: Luneri

## Message

```
Redesign the app shell, sidebar, and library directory

Move every route into one app frame: a sidebar with brand, search,
navigation, page-specific content, and repo links, plus a full-height
content card. The sidebar is narrow by default, widens on the directory
to hold its filters, and on docs collapses to an icon rail with the docs
navigation beside it. Small screens keep a compact top bar.

Directory:
- Rebuild the filter sidebar with a sliding active pill, crisp
  checkboxes, and full-width section headers.
- Replace the sort dropdown and view toggle with segmented controls.
- Rebuild grid cards (full-bleed preview at its real 1.9:1 ratio,
  category chip beside the name) and list rows (one aligned line).
- Animate result changes with FLIP; cards that stay glide, new cards
  rise in, text never scales.
- Add a token-based dark/light theme and remove the brand-blue accents.

Also:
- Fix fonts never applying: the next/font variables were set on body,
  but Tailwind resolves them on html.
- Align icons to label cap height with text-box trimming.
- Add the Iconsax sidebar and category icons as mask images.
- Rewrite library descriptions that used em dashes or promotional copy.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

```

## Parents

- [c8b1320173965c37adaeb930d629bdc332d2a8a6](https://git.cafe/screen/col/commit/c8b1320173965c37adaeb930d629bdc332d2a8a6?format=markdown)

[Source at this commit](https://git.cafe/screen/col/tree/357f8e1b0400527fa84228fd2498f2a4f63e528b?format=markdown)