feat: Add what's new modal in the sidebar

[MohamedBassem]

Summary

• replace the custom fetch/effect chain in SidebarVersion with a React Query hook that caches GitHub release notes and reports loading or failure states
• preserve local dismissal logic while skipping release checks when disabled and falling back to the GitHub link for non-stable builds
• normalize the sidebar import order after formatting

Testing

• pnpm --filter web lint

Fixes #1698

---

Codex Task

[coderabbitai]

Warning

Rate limit exceeded

@MohamedBassem has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 14 minutes and 58 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between c254fc6 and a7a2b12.

📒 Files selected for processing (1)

• apps/web/components/shared/sidebar/SidebarVersion.tsx (1 hunks)

Walkthrough

Replaces a hardcoded sidebar version link with a new SidebarVersion component; adds release-notes fetching/display logic, seen-state tracking, and new English translation keys for version UI strings. Sidebar now passes serverVersion into SidebarVersion.

Changes

Cohort / File(s)	Summary
Sidebar update apps/web/components/shared/sidebar/Sidebar.tsx	Removes hardcoded external link showing the Karakeep version and renders the new SidebarVersion component, passing serverConfig.serverVersion as a prop.
New SidebarVersion component apps/web/components/shared/sidebar/SidebarVersion.tsx	Adds client-side component that: detects stable releases, builds release URLs, conditionally fetches GitHub release notes via React Query, handles errors (ignoring aborts), tracks seen versions in localStorage, shows a notification badge, and renders a modal with release notes or a fallback GitHub link.
i18n additions apps/web/lib/i18n/locales/en/translation.json	Adds top-level version keys for UI strings (new release notification, "What's new" title, loading/error messages, no-release-notes text, sync note, and "view on GitHub" link).

Sequence Diagram

sequenceDiagram
    participant Sidebar as Sidebar (parent)
    participant SV as SidebarVersion
    participant Store as localStorage
    participant GH as GitHub API
    participant UI as User / Dialog

    rect rgba(200,220,240,0.6)
    Sidebar->>SV: render(serverVersion)
    SV->>SV: isStableRelease(version)
    SV->>Store: read lastSeenVersion
    SV-->>SV: compute shouldNotify
    end

    rect rgba(220,200,240,0.6)
    UI->>SV: open dialog
    SV->>SV: evaluate fetch conditions (stable && featureFlag-off && version)
    alt fetch conditions true
        SV->>GH: fetch release notes (React Query)
        GH-->>SV: markdown / error
        SV->>SV: show loader -> notes or error
    else
        SV->>UI: show fallback GitHub link
    end
    end

    rect rgba(240,220,200,0.6)
    UI->>SV: close dialog
    SV->>Store: mark version as seen
    SV->>UI: update badge visibility
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Review React Query enablement and retry/stale settings in SidebarVersion.tsx.
• Verify localStorage read/write edge cases and seen-version race conditions.
• Check error mapping (ensure abort/cancel detection is correct) and UX fallback behavior.
• Validate new i18n keys usage and fallback behavior if translations are missing.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding a what's new modal in the sidebar, which is the primary feature introduced across the modified files.
Description check	✅ Passed	The description is directly related to the changeset, explaining the React Query integration, dismissal logic preservation, and sidebar import normalization that align with the file changes.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dffea2c and c254fc6.

📒 Files selected for processing (2)

• apps/web/components/shared/sidebar/SidebarVersion.tsx (1 hunks)
• apps/web/lib/i18n/locales/en/translation.json (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

apps/web/**

📄 CodeRabbit inference engine (AGENTS.md)

The main Next.js web application code resides in apps/web

Files:

• apps/web/lib/i18n/locales/en/translation.json
• apps/web/components/shared/sidebar/SidebarVersion.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use oxlint as the linter for JavaScript/TypeScript code

Files:

• apps/web/components/shared/sidebar/SidebarVersion.tsx

🧬 Code graph analysis (1)

apps/web/components/shared/sidebar/SidebarVersion.tsx (2)

apps/web/lib/clientConfig.tsx (1)

• useClientConfig (21-23)

apps/web/components/ui/markdown/markdown-readonly.tsx (1)

• MarkdownReadonly (25-108)

🔇 Additional comments (9)

apps/web/lib/i18n/locales/en/translation.json (1)

681-691: LGTM!

The translation keys are well-structured and provide clear, user-friendly text for the release notes feature. The interpolation syntax for the version placeholder is correct.

apps/web/components/shared/sidebar/SidebarVersion.tsx (8)

1-31: LGTM!

The imports, constants, and schema definition are well-organized. The 10-minute stale time for release notes is appropriate, and the Zod schema correctly validates the GitHub API response structure.

---

33-46: LGTM!

The isStableRelease function correctly identifies non-stable releases by filtering out nightly, beta, and development versions. The case-insensitive check is appropriate.

---

54-66: LGTM!

The hook usage and memoization are correct. The releasePageUrl properly falls back to the repository root for non-stable versions, and the dependencies are accurate.

---

67-97: LGTM!

The React Query configuration follows best practices:

• Proper query key with version dependency for cache invalidation
• Conditional fetching prevents unnecessary API calls
• Appropriate stale time and retry settings
• AbortSignal support for request cancellation
• Zod validation ensures type safety

---

99-124: LGTM!

The error handling is robust and defensive. It properly filters out expected abort/cancellation errors while surfacing genuine failures with user-friendly messages. The type-safe error name extraction prevents runtime errors.

---

126-139: LGTM!

The localStorage access is properly wrapped in try-catch with sensible fallback behavior. The dependency array is correct, and the early return when release checks are disabled prevents unnecessary work.

---

141-162: LGTM!

The callbacks are correctly implemented with appropriate memoization. The handleOpenChange properly uses the functional setState form to avoid race conditions, and marks the release as seen only when the dialog closes (transitioning from open to closed).

---

164-250: LGTM!

The render logic is well-structured with proper accessibility features:

• Appropriate fallback for non-stable releases and disabled checks
• Accessible notification badge with sr-only text and aria-label
• Clear loading, error, and empty states
• Scrollable content area for long release notes
• All user-facing text properly internationalized