mirror of
https://github.com/johannesjo/super-productivity.git
synced 2026-07-18 00:46:45 +00:00
c1d14d501c
* feat(layout): experimental vertical action strip on right edge Teleports main-header's action-nav-right to document.body on desktop so it escapes any ancestor containing-block, then pins it as a vertical strip at the viewport's right edge via fixed positioning. Reserves the column with padding-right on .app-container so the right-panel ends to its left. * feat(layout): right-panel spans full viewport height Restructure app shell so right-panel is a direct flex child of .app-container (wrapping main-content via ng-content), letting its .side extend over the full height of the viewport — including the header area — rather than starting below the header. * style(layout): give vertical action strip an elevated surface bg * style(layout): match vertical action strip styling to left side nav * fix(layout): stack play/focus buttons vertically in action strip * style(layout): use solid surface bg for vertical action strip * fix(layout): keep current-task title visible beside the action strip In the teleported vertical action strip the current-task title pill was positioned right:100% of the play button and clipped by the strip's overflow, and the 48px mini-fab overflowed the 48px rail and got side-clipped. Render the title as a position:fixed flyout to the left of the strip (the strip has no transform/filter so it is not a containing block for fixed descendants), aligned to the play button across the web / mac-titlebar / obsidian-header / RTL variants, and drop the play button wrapper's horizontal margin so it fits the rail. * fix(layout): stop tooltip overlay from blocking action strip clicks A tooltip shown 'below' a button in the vertical action strip lands directly over the next button. The tooltip's cdk-overlay-pane wrapper (unlike the inner mat-tooltip-component) had no pointer-events:none, so it intercepted clicks for real users and for Playwright actionability — breaking ~20 focus-mode/break e2e tests. * test(focus-mode): use teleport-robust focus-button locator The action nav is teleported out of <main-header> into a body-level strip, so 'main-header focus-button button' no longer matches. Drop the main-header ancestor; 'focus-button button' is unique either way. * fix(layout): polish vertical action strip (flyout, spacing, bg) - Current-task title is now a hover-reveal flyout: hidden until the play button (or the flyout itself) is hovered. Mobile (< 1080px) unchanged (component still display:none's it there). - Drop the position:fixed + magic top calc; keep the component's own absolute + translateY(-50%) so the flyout is pixel-perfectly centred on the play button regardless of theme/Material density. - Strip now overflow: visible so the flyout can extend past the 48px rail (overflow-x can't be visible while overflow-y is auto). - Re-declare --header-nav-button-gap on the strip: it is scoped to <main-header>'s :host but the strip is teleported to <body>, so the var was undefined => every strip button had gap: 0 (cramped). - Extra margin between the play button and the focus button. - Strip background now matches the left sidenav (--sidenav-bg). * fix(layout): uniform vertical spacing between strip buttons Drop the extra play-button and counters-group bottom margins; one --header-nav-button-gap (var(--s)) now drives the spacing between every button in the strip. Measured: all consecutive gaps = 8px. * feat(layout): make vertical action bar a configurable opt-in Adds misc.isVerticalActionBar (default off). The right-edge vertical action strip was previously an unconditional experiment; it is now an opt-in toggle in Settings > Misc that switches the layout live without reload: - app.component: @if branches the DOM between classic (horizontal header) and vertical (right-panel hoisted to full viewport height); .app-container gets .has-vertical-action-bar to gate CSS. - main-header: one-shot ngAfterViewInit teleport replaced with an effect() that teleports/restores the action nav reactively to the config flag and the desktop/mobile breakpoint. - app/right-panel SCSS: strip padding and full-height right-panel are now scoped to .has-vertical-action-bar; classic layout restored as the default. * fix(layout): even vertical-strip spacing for panel-button wrappers plugin-header-btns, plugin-side-panel-btns, desktop-panel-buttons and user-profile-button are zero-height wrapper custom-elements. As direct flex children of the vertical action strip the column gap landed on the collapsed wrapper instead of the button(s) inside, so their icons were unevenly spaced next to real buttons like the add button. Make each wrapper a centered column flex item that stacks its button(s) with the same gap, and hide truly-empty wrappers so they don't reserve a phantom gap slot. Verified: all 7 visible strip buttons now 8px apart. * fix(right-panel): clip transient content overflow during slide animation .side animates width 0<->* while .side-inner keeps its min-width, so content briefly spills past the (intentionally overflow:visible) .side during open/close. Add an isPanelAnimating host class driven by the @slideRightPanel start/done callbacks and clip :host for that window only (overflow: clip — no scroll container). Mirrors the existing resizing/windowResizing transient-state pattern. Verified: class + clip present only during the ~200ms animation, visible when idle. * refactor(layout): drop dual DOM for vertical action bar Single classic layout for both modes; strip is teleported and offset by --bar-height so the horizontal header keeps owning the title-bar zone (native drag region + WCO + Mac traffic lights). Drops the 40px title-bar-collision padding and the right-panel full-height override. * feat(layout): right-panel side spans full viewport height Move the header into right-panel's projected .content slot and make right-panel host full-height. The panel column now starts at viewport top with the header band only spanning the .content width, similar to Obsidian / Linear / VS Code. * fix(layout): only offset vertical strip below WCO band on Win/Linux Default top inset is now 0 (web, Mac hiddenInset, native-frame Electron all let the strip start at viewport top — none of them have a window- control overlay clashing with the right edge). Push the strip down by --bar-height only on Win/Linux Electron with custom title bar, where the WCO buttons would otherwise sit on top of the strip's first row. * style(electron): use compact 32px WCO band on Win/Linux Shrinks the Windows Controls Overlay height from 44px to 32px so the native min/max/close buttons sit in a slimmer band — matches VS Code / Edge slim title bar conventions and frees more of the header zone for app content. Width stays OS-controlled (~138px); only height is configurable. * style(layout): tighten WCO band to 24px and pull strip up to match Drops WCO_HEIGHT to 24px on Win/Linux and introduces a --wco-height CSS var mirroring it. The vertical action strip now clears the WCO band by exactly --wco-height instead of --bar-height (48px), reclaiming the newly-freed top zone on the right edge. * style(layout): add breathing room above strip below WCO band Strip top inset moves from --wco-height to --wco-height + --s so the first action button isn't flush against the bottom of the window controls overlay on Win/Linux. * fix(styles): scope vertical-action-bar tooltip rule to the experiment The pane-level `pointer-events: none` was needed only because tooltips in the teleported vertical strip can land over the next button. Apply it via a new `body.isVerticalActionBar` body class (toggled from `misc.isVerticalActionBar` in GlobalThemeService, alongside the existing `isObsidianStyleHeader` effect) so unrelated app tooltips keep their default pane behaviour. * refactor(styles): extract vertical-action-bar CSS to its own partial Move the 130-line experimental strip block out of `src/styles.scss` and into `src/styles/components/_vertical-action-bar.scss`. Wired via `_components.scss`. No CSS rules change — pure code organisation. * merge(master): resolve _components.scss conflict in right action bar branch Agent-Logs-Url: https://github.com/super-productivity/super-productivity/sessions/1941dd45-72e1-4a3e-92da-912fcfcb9bed Co-authored-by: johannesjo <1456265+johannesjo@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: johannesjo <1456265+johannesjo@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| assets/icons | ||
| ipc-handlers | ||
| scripts | ||
| shared-with-frontend | ||
| task-widget | ||
| wayland-idle-helper | ||
| backup.ts | ||
| clear-stale-idb-locks.ts | ||
| clipboard-image-handler.ts | ||
| common.const.ts | ||
| CONFIG.ts | ||
| debug.ts | ||
| electronAPI.d.ts | ||
| error-handler-with-frontend-inform.ts | ||
| full-screen-blocker.ts | ||
| gpu-startup-guard.ts | ||
| idle-time-handler.ts | ||
| indicator.test.cjs | ||
| indicator.ts | ||
| ipc-handler-wrapper.ts | ||
| ipc-handler.ts | ||
| jira.ts | ||
| local-file-sync.ts | ||
| local-rest-api.ts | ||
| lockscreen.ts | ||
| main-window.ts | ||
| main.ts | ||
| plugin-node-executor.ts | ||
| plugin-oauth.ts | ||
| preload.ts | ||
| protocol-handler.ts | ||
| proxy-agent.ts | ||
| shared-state.ts | ||
| simple-store.test.cjs | ||
| simple-store.ts | ||
| start-app.ts | ||
| tsconfig.electron.json | ||
| various-shared.ts | ||