Skip to content

feat(app): show a grip on the resizable edge of the navigation - #434

Merged
louisdussarps merged 2 commits into
LaWebcapsule:mainfrom
slyk:upstream/resize-grip
Oct 16, 2026
Merged

louisdussarps merged 2 commits into
LaWebcapsule:mainfrom
slyk:upstream/resize-grip

Conversation

@slyk

@slyk slyk commented Oct 15, 2026 •

Copy link
Copy Markdown
Contributor

Change description

Part of discussion #431 (item 2.1).

The navigation panel can be resized, but its handle is invisible until the pointer is exactly over it, so most users never find it. This PR adds a small, always visible grip to that edge.

  • The handle moves into a new panel-resize-handle.vue component. private-view.vue keeps its existing resize logic and only uses the component (the module-nav-resize-handle class is kept for custom CSS).
  • The grip:
    • A 6×48px tab with a column of dots, centred vertically.
    • It sits on the panel border: square on that side, fully rounded on the other.
    • It is outlined in the panel background colour, so it stays visible over the section headers that share its colour.
    • All colours come from theme variables, for light and dark themes.
  • Hover: the grip and the line light up in the primary colour after the same short delay as the existing line, so they do not blink when the pointer just passes by. While dragging they light up at once.
  • The hover line is thinner (2px instead of 4px), since the grip already shows where to drag.
  • The hit area is wider: 12px instead of 4px, 8px inside the panel and 4px over the content.
  • Resizing behaves as before.
  • The component also supports a handle on the left edge of a panel, ready for a resizable sidebar (a later PR from UI improvements (sidebars, primary color, login animation) #431).

Type of change

  • Bug fix (fixes an issue)
  • New feature (adds functionality)

Related issues

Discussion #431

Checklists

Development

  • Lint rules pass locally
  • Application changes have been tested thoroughly
  • Automated tests covering modified code pass

Security

  • Security impact of change has been considered: none, UI only.
  • Code follows company security practices and guidelines

Network

  • Changes to network configurations have been reviewed (not applicable)
  • Any newly exposed public endpoints or data have gone through security review (not applicable)

Code review

  • Pull request has a descriptive title and context useful to a reviewer. Screenshots or screencasts are attached as
    necessary
  • reviewers assigned
  • Pull request linked to task tracker where applicable

The navigation panel can be resized, but its handle is invisible until hovered,
so users do not know it is there. Move the handle into a panel-resize-handle
component that adds a small grip attached to the panel border (square on the
border side, rounded on the other, outlined in the panel background so it
stays visible over the section headers). The hover line is now 2px, and the
grip lights up in the primary color with the same delay as the line. The hit
area is wider (12px: 8px inside the panel, 4px over the content, was 4px);
the resize behaviour is unchanged. The component also supports a
handle on the left edge of a panel, for a resizable sidebar later.

Discussion: LaWebcapsule#431
Signed-off-by: Kyrylo Kuzmytskyi <slykirill@gmail.com>
slyk added a commit to slyk/d9 that referenced this pull request Oct 15, 2026
…e#431-LaWebcapsule#434) (fork only)

Signed-off-by: Kyrylo Kuzmytskyi <slykirill@gmail.com>
@louisdussarps
louisdussarps merged commit 20fc79d into LaWebcapsule:main Oct 16, 2026
6 checks passed
@github-actions github-actions Bot mentioned this pull request Oct 16, 2026
slyk added a commit to slyk/d9 that referenced this pull request Oct 16, 2026
…Webcapsule#433/LaWebcapsule#434 merged, LaWebcapsule#445-LaWebcapsule#447 opened (fork only)

Signed-off-by: Kyrylo Kuzmytskyi <slykirill@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants