fix(t-paliad-142): sidebar slide-in on every page nav when pinned

The FOUC script in PWAHead.tsx sets `<html class="sidebar-pinned">` pre-paint, which kept body padding correct from frame 1 — but the .sidebar element's own width keyed off `.sidebar.pinned` (set by initSidebar in DOMContentLoaded). That made every navigation paint the rail at collapsed width, then animate width 150ms → pinned width once JS ran. Visible slide-in on Dashboard / Agenda / Projekte / etc. Fix: extend every `.sidebar.pinned` rule with a parallel `:root.sidebar-pinned .sidebar ...` selector so the html-class set pre-paint is sufficient to render the full pinned visual state from frame 1 (width, label opacity, pin/resize/badge visibility, search input). Runtime initSidebar still mirrors `.pinned` onto the element itself for explicit pin/unpin click animation. Same dual-selector pattern already used by `.has-sidebar.sidebar-pinned` / `:root.sidebar-pinned .has-sidebar` for body padding. Mobile unaffected — FOUC script only sets html.sidebar-pinned when window.innerWidth >= 1024, and initSidebar clears it on resize.
Merge: fix /inbox sidebar — call initSidebar() so pin restoration + hover work like every other page
2026-05-06 16:55:30 +02:00 · 2026-05-06 16:50:21 +02:00 · 2026-05-06 16:50:21 +02:00 · 2026-05-06 16:47:36 +02:00 · 2026-05-06 16:29:14 +02:00
2 changed files with 27 additions and 9 deletions
--- a/frontend/src/client/inbox.ts
+++ b/frontend/src/client/inbox.ts
@@ -1,4 +1,5 @@
 import { initI18n, t, getLang, type I18nKey } from "./i18n";
+import { initSidebar } from "./sidebar";

 // /inbox client. Two tabs (pending-mine / mine), action buttons (approve /
 // reject / revoke), and a small inline diff for update / complete / delete
@@ -40,6 +41,7 @@ type Tab = "pending-mine" | "mine";
 let currentTab: Tab = "pending-mine";

 initI18n();
+initSidebar();

 document.addEventListener("DOMContentLoaded", () => {
  const url = new URL(window.location.href);
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -714,8 +714,16 @@ main {
    --color-accent-fg: var(--sidebar-text-active);
 }

+/* `:root.sidebar-pinned .sidebar` is the pre-paint companion to
+   `.sidebar.pinned` (t-paliad-142). The FOUC script in PWAHead.tsx sets
+   the html class before paint, so the sidebar element renders at pinned
+   width from frame 1; runtime initSidebar later mirrors `.pinned` onto
+   the element itself for the explicit pin/unpin click animation. Same
+   pattern as the `.has-sidebar.sidebar-pinned` / `:root.sidebar-pinned
+   .has-sidebar` pair below. */
 .sidebar.expanded,
-.sidebar.pinned {
+.sidebar.pinned,
+:root.sidebar-pinned .sidebar {
    width: var(--sidebar-width);
 }

@@ -765,7 +773,8 @@ main {
 }

 .sidebar.expanded .sidebar-pin,
-.sidebar.pinned .sidebar-pin {
+.sidebar.pinned .sidebar-pin,
+:root.sidebar-pinned .sidebar .sidebar-pin {
    opacity: 1;
    pointer-events: auto;
 }
@@ -781,7 +790,8 @@ main {
    display: block;
 }

-.sidebar.pinned .sidebar-pin {
+.sidebar.pinned .sidebar-pin,
+:root.sidebar-pinned .sidebar .sidebar-pin {
    color: var(--sidebar-text-active);
 }

@@ -806,7 +816,8 @@ main {
 }

 .sidebar.expanded .sidebar-resize-handle,
-.sidebar.pinned .sidebar-resize-handle {
+.sidebar.pinned .sidebar-resize-handle,
+:root.sidebar-pinned .sidebar .sidebar-resize-handle {
    opacity: 1;
    pointer-events: auto;
 }
@@ -922,7 +933,8 @@ main {
 }

 .sidebar.expanded .sidebar-label,
-.sidebar.pinned .sidebar-label {
+.sidebar.pinned .sidebar-label,
+:root.sidebar-pinned .sidebar .sidebar-label {
    opacity: 1;
 }

@@ -5250,7 +5262,8 @@ input[type="range"]::-moz-range-thumb {

 .sidebar.expanded .sidebar-group-label,
 .sidebar.pinned .sidebar-group-label,
-.sidebar.mobile-open .sidebar-group-label {
+.sidebar.mobile-open .sidebar-group-label,
+:root.sidebar-pinned .sidebar .sidebar-group-label {
    opacity: 0.75;
 }

@@ -7661,7 +7674,8 @@ label.caldav-toggle-label {

 .sidebar.expanded .sidebar-search-input,
 .sidebar.pinned .sidebar-search-input,
-.sidebar.mobile-open .sidebar-search-input {
+.sidebar.mobile-open .sidebar-search-input,
+:root.sidebar-pinned .sidebar .sidebar-search-input {
    opacity: 1;
    pointer-events: auto;
 }
@@ -7691,7 +7705,8 @@ label.caldav-toggle-label {

 .sidebar.expanded .sidebar-search-kbd,
 .sidebar.pinned .sidebar-search-kbd,
-.sidebar.mobile-open .sidebar-search-kbd {
+.sidebar.mobile-open .sidebar-search-kbd,
+:root.sidebar-pinned .sidebar .sidebar-search-kbd {
    opacity: 1;
 }

@@ -7898,7 +7913,8 @@ label.caldav-toggle-label {
 }

 .sidebar.expanded .sidebar-badge,
-.sidebar.pinned .sidebar-badge {
+.sidebar.pinned .sidebar-badge,
+:root.sidebar-pinned .sidebar .sidebar-badge {
    left: auto;
    right: 1rem;
    top: 50%;
Author	SHA1	Message	Date
m	8b76d0c8fa	fix(t-paliad-142): sidebar slide-in on every page nav when pinned The FOUC script in PWAHead.tsx sets `<html class="sidebar-pinned">` pre-paint, which kept body padding correct from frame 1 — but the .sidebar element's own width keyed off `.sidebar.pinned` (set by initSidebar in DOMContentLoaded). That made every navigation paint the rail at collapsed width, then animate width 150ms → pinned width once JS ran. Visible slide-in on Dashboard / Agenda / Projekte / etc. Fix: extend every `.sidebar.pinned` rule with a parallel `:root.sidebar-pinned .sidebar ...` selector so the html-class set pre-paint is sufficient to render the full pinned visual state from frame 1 (width, label opacity, pin/resize/badge visibility, search input). Runtime initSidebar still mirrors `.pinned` onto the element itself for explicit pin/unpin click animation. Same dual-selector pattern already used by `.has-sidebar.sidebar-pinned` / `:root.sidebar-pinned .has-sidebar` for body padding. Mobile unaffected — FOUC script only sets html.sidebar-pinned when window.innerWidth >= 1024, and initSidebar clears it on resize.	2026-05-06 16:55:30 +02:00
m	16fe5763f3	Merge: fix /inbox sidebar — call initSidebar() so pin restoration + hover work like every other page	2026-05-06 16:50:21 +02:00
m	18faf81f58	fix(t-paliad-138): /inbox missing initSidebar() call — sidebar JS never ran on inbox page (pin restoration, hover-expand, badge polling all dead). One-liner add to inbox.ts	2026-05-06 16:50:21 +02:00
m	aeaba66892	Merge: t-paliad-139 Phase 2+3 — partner-unit derivation schema (migration 055) + DerivationService + Team-tab subsections + derived_peer approval-authority extension	2026-05-06 16:47:36 +02:00
m	2d06cdf20e	Merge: t-paliad-139 Phase 1 — /projects/{id} aggregation bug fix (use projectDescendantPredicate on 3 legacy narrow methods + frontend toggle + attribution chip)	2026-05-06 16:29:14 +02:00