feat(frontend): material navigation rail

[pmig]

No description provided.

[cursor]

PR Summary

Medium Risk
Large layout/navigation refactor affects every authenticated route and scroll behavior; drag-and-drop interaction changes on the file table warrant manual QA on desktop and mobile.

Overview
Replaces the old mat-nav-list sidenav with an M3-style navigation rail: collapsible width on desktop (menu toggle), full-width labeled items on handset overlay, ripples, filled vs outlined icons, and animated content margin so the main area tracks rail width. The shell uses a grey surface-container frame, a restyled top bar, and a rounded inset content card for routed views.

Scrolling is reworked so list pages (dashboard, links, trash) use a full-height flex column with sticky table headers inside an overflow-auto region; breadcrumbs/toolbars stay fixed. App, nav, and those pages get matching host / layout classes. Global table row hover/selection and sticky header backgrounds move to styles.css; per-page CSS files are trimmed (dashboard keeps drag-drop target styles only).

Dashboard drag-and-drop tweaks: pointer-events disabled on the sticky header and dragged rows while dragging; drag preview z-index raised. Theme sets body background to surface-container and drops the old sidenav width override. Public link viewer content is wrapped in a surface card. Adds @fontsource/material-icons-outlined.

^{Reviewed by Cursor Bugbot for commit 0d9b053. Bugbot is set up for automated code reviews on this repo. Configure here.}

[Copilot]

Pull request overview

Introduces a Material 3–styled navigation rail (collapsed/expanded, responsive handset behavior) and aligns the app’s global/layout styling to match the new navigation surface.

Changes:

• Add Material Icons Outlined font package and global CSS support for switching between filled/outlined icon sets.
• Rework NavComponent into a custom M3 navigation rail + updated top app bar, with new SCSS styling and scroll-condensing behavior.
• Adjust routed page layouts (breadcrumbs/spacing) and global background surface token to fit the new shell framing.

Reviewed changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Locks the newly added outlined icon font dependency.
package.json	Adds @fontsource/material-icons-outlined dependency.
frontend/src/styles.css	Imports outlined icon font and defines .material-icons-outlined styling.
frontend/src/material-theme.scss	Switches global background to --mat-sys-surface-container to match new navigation surface.
frontend/src/app/trash/trash.component.html	Adjusts page spacing/wrapping to fit new content card layout.
frontend/src/app/nav/nav.component.ts	Implements rail state/signals, handset behavior, and OnPush change detection.
frontend/src/app/nav/nav.component.scss	Adds full M3 navigation rail/topbar/shell styling and transitions.
frontend/src/app/nav/nav.component.html	Replaces list-based sidenav with custom rail markup, ripple indicator, and framed content outlet.
frontend/src/app/links/links-list/links-list.component.html	Adjusts page spacing/wrapping to fit new content card layout.
frontend/src/app/dashboard/dashboard.component.html	Adds top spacing to align with new shell framing.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 16 out of 17 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[kosmoz]

Maybe check briefly if there is a better way than this

[pmig]

sadly not

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.

^{Reviewed by Cursor Bugbot for commit 060aba0. Configure here.}