feat(ui): allow copying nightly app versions from sidebar by zachyale · Pull Request #472 · grimmory-tools/grimmory

zachyale · 2026-04-11T03:32:39Z

Description

Add support for highlighting non-release version text and copying it on click (improves UX for testing specific nightlies)

Linked Issue: Fixes #470

Changes

make non-release app versions in the sidebar clickable
keep release versions as external links

Summary by CodeRabbit

New Features

The version number in the menu is now clickable and can be copied to your clipboard with a single click.
Added visual feedback (underline and highlight) when hovering over the version number.
Displays confirmation messages to confirm successful copying or alert you if the action fails.

coderabbitai · 2026-04-11T03:32:53Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c153a5e7-9107-4818-b79f-b88282bfd90a

📥 Commits

Reviewing files that changed from the base of the PR and between 35dca81 and 2b82093.

📒 Files selected for processing (4)

frontend/src/app/shared/layout/layout-menu/app.menu.component.html
frontend/src/app/shared/layout/layout-menu/app.menu.component.scss
frontend/src/app/shared/layout/layout-menu/app.menu.component.ts
frontend/src/i18n/en/layout.json

📜 Recent review details

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: Test Suite / Backend Tests
GitHub Check: Test Suite / Frontend Tests
GitHub Check: Analyze (java-kotlin)
GitHub Check: Analyze (javascript-typescript)

🧰 Additional context used

📓 Path-based instructions (4)

frontend/src/**/*.{ts,tsx,html,scss}

📄 CodeRabbit inference engine (AGENTS.md)

Use 2-space indentation in TypeScript, HTML, and SCSS files

Files:

frontend/src/app/shared/layout/layout-menu/app.menu.component.html
frontend/src/app/shared/layout/layout-menu/app.menu.component.scss
frontend/src/app/shared/layout/layout-menu/app.menu.component.ts

frontend/src/i18n/**

📄 CodeRabbit inference engine (AGENTS.md)

Put user-facing strings in Transloco files under frontend/src/i18n/

Files:

frontend/src/i18n/en/layout.json

frontend/src/app/**/*.component.ts

📄 CodeRabbit inference engine (AGENTS.md)

Keep Angular code on standalone components. Do not add NgModules

Files:

frontend/src/app/shared/layout/layout-menu/app.menu.component.ts

frontend/src/app/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

frontend/src/app/**/*.{ts,tsx}: Prefer inject() over constructor injection
Follow frontend/eslint.config.js: component selectors use app-*, directive selectors use app*, and any is disallowed

Files:

frontend/src/app/shared/layout/layout-menu/app.menu.component.ts

🧠 Learnings (3)

📚 Learning: 2026-03-31T14:12:39.521Z

Learnt from: alexhb1
Repo: grimmory-tools/grimmory PR: 307
File: frontend/src/i18n/hr/layout.json:3-3
Timestamp: 2026-03-31T14:12:39.521Z
Learning: In `frontend/src/i18n/hr/layout.json` (Croatian locale), newly added i18n keys may intentionally use English placeholder values (e.g., `toggleNavigation`, `adjustSidebarWidth`, `closeNavigation`). Do not flag these as missing Croatian translations — this is a deliberate placeholder approach by the team.

Applied to files:

frontend/src/i18n/en/layout.json

📚 Learning: 2026-04-05T21:16:01.715Z

Learnt from: balazs-szucs
Repo: grimmory-tools/grimmory PR: 385
File: frontend/src/app/app.component.ts:55-56
Timestamp: 2026-04-05T21:16:01.715Z
Learning: When reviewing code in the Grimmory frontend (Angular), prefer modern Angular patterns. Specifically: (1) Prefer `DestroyRef` with `takeUntilDestroyed(destroyRef)` for teardown in Angular v16+ instead of manually tracking `Subscription` arrays and calling `unsubscribe()` in `ngOnDestroy()`. (2) Prefer `inject()` for dependency injection over constructor injection where appropriate. (3) Prefer Angular signals (e.g., `signal`, `computed`) over `BehaviorSubject`/`Observable` for state where signals/computed values fit the use case. Flag older patterns when they can be replaced with these modern equivalents without changing behavior.

Applied to files:

frontend/src/app/shared/layout/layout-menu/app.menu.component.ts

📚 Learning: 2026-04-07T09:28:09.587Z

Learnt from: balazs-szucs
Repo: grimmory-tools/grimmory PR: 393
File: frontend/src/app/features/readers/pdf-reader/pdf-reader.component.ts:255-263
Timestamp: 2026-04-07T09:28:09.587Z
Learning: In this Angular frontend (under frontend/src/app/), flag manual resource management/cleanup patterns when there is an Angular v16+ automatic alternative. Examples to prefer: (1) Instead of manually pairing document/window event listeners with stored cleanup functions (e.g., add/removeEventListener with mouseMoveCleanup/documentClickCleanup/keydownCleanup/touchCleanup fields), register teardown via DestroyRef.onDestroy(cleanupFn) (or equivalent Angular v16+ teardown mechanism). (2) Instead of storing Subscriptions in fields and explicitly unsubscribing in ngOnDestroy (e.g., annotationSaveSubscription/annotationCacheSubscription), use takeUntilDestroyed(destroyRef) (piped into the observable) or other Angular v16+ primitives. (3) If teardown is lifecycle-coupled and can be automated via DestroyRef/takeUntilDestroyed/signals (or other Angular v16+ mechanisms), prefer the automated approach over manual ngOnDestroy cleanup. Raise a review finding for the manual pattern and recommend the aut...

Applied to files:

frontend/src/app/shared/layout/layout-menu/app.menu.component.ts

🔇 Additional comments (5)

frontend/src/i18n/en/layout.json (1)

33-35: Good i18n additions for copy-to-clipboard feedback.

Both new keys are correctly localized in Transloco and support {{ version }} interpolation cleanly.

As per coding guidelines "frontend/src/i18n/**: Put user-facing strings in Transloco files under frontend/src/i18n/."

frontend/src/app/shared/layout/layout-menu/app.menu.component.ts (2)

19-19: DI change is consistent with the component’s modern Angular pattern.

MessageService import/injection fits the existing inject()-first style in this component.

As per coding guidelines "frontend/src/app/**/*.{ts,tsx}: Prefer inject() over constructor injection".

Also applies to: 58-58

327-358: copyVersion implementation is robust and UX-aligned.

Nice handling of all paths (missing clipboard API, success, and runtime failure) with localized toast feedback.

frontend/src/app/shared/layout/layout-menu/app.menu.component.html (1)

71-77: Good semantic switch to a button for nightly version copy.

This is an appropriate interactive element for click/keyboard activation and cleanly wires to copyVersion(...).

frontend/src/app/shared/layout/layout-menu/app.menu.component.scss (1)

75-94: Nice interaction styling for the copy trigger.

The button reset, hover treatment, and :focus-visible outline are well-implemented for this UI behavior.

📝 Walkthrough

Walkthrough

This pull request implements clipboard copy functionality for the app menu version display by converting the static version text into an interactive button element that copies the version to the clipboard on click, with toast notifications for success and failure states.

Changes

Cohort / File(s)	Summary
Version Display Interactivity `frontend/src/app/shared/layout/layout-menu/app.menu.component.html`, `frontend/src/app/shared/layout/layout-menu/app.menu.component.scss`, `frontend/src/app/shared/layout/layout-menu/app.menu.component.ts`	Converted static version span to clickable button with clipboard copy handler, added `.version-copy-trigger` styling with hover/focus states, and implemented `copyVersion()` method using the Clipboard API with MessageService integration for user feedback.
Localization `frontend/src/i18n/en/layout.json`	Added `menu.versionCopied` and `menu.versionCopyFailed` translation strings with version interpolation placeholders for clipboard operation feedback.

Sequence Diagram

sequenceDiagram
    participant User
    participant AppMenu as AppMenuComponent
    participant Clipboard as Clipboard API
    participant MessageSvc as MessageService

    User->>AppMenu: Click version button
    AppMenu->>AppMenu: copyVersion(version)
    
    alt Clipboard API unavailable
        AppMenu->>MessageSvc: Show error message
        MessageSvc->>User: Display failure toast
    else Clipboard API available
        AppMenu->>Clipboard: writeText(version)
        
        alt Write successful
            Clipboard-->>AppMenu: Promise resolved
            AppMenu->>MessageSvc: Show success message
            MessageSvc->>User: Display success toast
        else Write failed
            Clipboard-->>AppMenu: Promise rejected
            AppMenu->>MessageSvc: Show error message
            MessageSvc->>User: Display failure toast
        end
    end

Estimated Code Review Effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested Labels

frontend, feature

Poem

🐰 A version once static, now interactive and spry,
Click it, and off to clipboard it will fly!
No more is it trapped in a read-only fate,
The rabbit's made copying easy—how great! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title follows conventional commit format with type 'feat', scope 'ui', and a clear description of the functionality added.
Description check	✅ Passed	The description includes all required sections (Description, Linked Issue, Changes) with clear information about what the PR does and which issue it addresses.
Linked Issues check	✅ Passed	The PR successfully implements all coding requirements from issue `#470`: making non-release versions clickable to copy to clipboard while preserving release version links.
Out of Scope Changes check	✅ Passed	All changes are directly related to the stated objectives—enabling clipboard copy for nightly versions through template, styling, and component logic modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feature/copy-nonrelease-version

✨ Simplify code

Create PR with simplified code
Commit simplified code in branch feature/copy-nonrelease-version

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

…y-tools#472)

feat(ui): allow copying non-release app version from sidebar

2b82093

coderabbitai Bot added feature frontend labels Apr 11, 2026

zachyale merged commit 6e8f889 into develop Apr 11, 2026
14 checks passed

zachyale deleted the feature/copy-nonrelease-version branch April 11, 2026 03:39

zachyale added a commit to zachyale/grimmory that referenced this pull request Apr 17, 2026

feat(ui): allow copying non-release app version from sidebar (grimmor…

10a4ef4

…y-tools#472)

zachyale added a commit to zachyale/grimmory that referenced this pull request Apr 17, 2026

feat(ui): allow copying non-release app version from sidebar (grimmor…

a6186a7

…y-tools#472)

zachyale added a commit that referenced this pull request Apr 17, 2026

feat(ui): allow copying non-release app version from sidebar (#472)

0cf67c2

zachyale added a commit that referenced this pull request Apr 22, 2026

feat(ui): allow copying non-release app version from sidebar (#472)

cefa3ac

dsmouse pushed a commit to dsmouse/grimmory that referenced this pull request May 11, 2026

feat(ui): allow copying non-release app version from sidebar (grimmor…

aaddfc0

…y-tools#472)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(ui): allow copying nightly app versions from sidebar#472

feat(ui): allow copying nightly app versions from sidebar#472
zachyale merged 1 commit into
developfrom
feature/copy-nonrelease-version

zachyale commented Apr 11, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 11, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram

Estimated Code Review Effort

Suggested Labels

Poem

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

zachyale commented Apr 11, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes

Summary by CodeRabbit

New Features

Uh oh!

coderabbitai Bot commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram

Estimated Code Review Effort

Suggested Labels

Poem

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

zachyale commented Apr 11, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 11, 2026 •

edited

Loading