[PR #2527] feat(mobile): auto-hiding reader toolbar with customizable actions #2143

Open
opened 2026-03-02 12:00:44 +03:00 by kerem · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/karakeep-app/karakeep/pull/2527
Author: @esimkowitz
Created: 2/27/2026
Status: 🔄 Open

Base: mainHead: mobile-reader-action-bar


📝 Commits (10+)

  • 497d21f feat(mobile): add auto-hiding reader toolbar with customizable actions and overflow menu
  • 673187b Update apps/mobile/components/bookmarks/BottomActions.tsx
  • 89a25db fix comment
  • 967b83a fix(mobile): address PR review findings for reader toolbar
  • a524c6e remove margin around text view
  • ed05ade fix bottom inset
  • 265a034 fix reading progress bar regression, add small gap
  • fe82262 Add redesigned reading progress pill, blur effect for iOS 18 and lower
  • 0754a4f small review fixes
  • 8076d3d fix icon colors in dark mode

📊 Changes

14 files changed (+1172 additions, -113 deletions)

View changed files

📝 apps/mobile/app/dashboard/(tabs)/(settings)/index.tsx (+13 -0)
📝 apps/mobile/app/dashboard/_layout.tsx (+12 -1)
📝 apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx (+90 -13)
apps/mobile/app/dashboard/settings/toolbar-settings.tsx (+233 -0)
📝 apps/mobile/components/bookmarks/BookmarkHtmlHighlighterDom.tsx (+16 -3)
📝 apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx (+202 -27)
📝 apps/mobile/components/bookmarks/BookmarkLinkView.tsx (+32 -3)
📝 apps/mobile/components/bookmarks/BookmarkTextView.tsx (+16 -2)
📝 apps/mobile/components/bookmarks/BottomActions.tsx (+394 -52)
apps/mobile/lib/ios.ts (+4 -0)
📝 apps/mobile/lib/settings.ts (+51 -0)
apps/mobile/lib/useScrollDirection.ts (+42 -0)
📝 apps/mobile/package.json (+3 -0)
📝 pnpm-lock.yaml (+64 -12)

📄 Description

Resolves #2261
Resolves #2262
Resolves #2263

Summary

Auto-hiding reader bars (#2263)

When scrolling down in the bookmark reader, the top navigation bar and bottom toolbar now automatically hide to maximize reading space. Scrolling back up reveals them again. This applies to all reader view types (browser, reader, archive, and text).

  • New useScrollDirection hook detects scroll direction and toggles bar visibility
  • Header hides via navigation.setOptions({ headerShown }), footer animates out via react-native-reanimated translateY
  • Progress bar in reader view hides alongside the bars
  • Scroll offset callbacks threaded through all bookmark view components (BookmarkLinkView, BookmarkTextView, and all link preview variants)

Note — Android / iOS ≤ 18: On these platforms, only the bottom toolbar hides on scroll; the top navigation bar and reading progress bar remain visible. This is intentional. The opaque navigation header on older platforms participates in layout flow — toggling headerShown triggers a layout reflow that causes the absolutely-positioned footer to re-measure via onLayout, producing a visible flicker in the toolbar icons during the animation. On iOS 26, the header is transparent (headerTransparent: true) and doesn't affect layout, so both bars can safely toggle together.

Customizable bottom toolbar (#2261)

The bottom action bar is now fully customizable. Users can choose which actions appear directly on the toolbar (up to 6) and which go into an overflow menu accessible via an ellipsis button.

  • New actions: favourite (with gold fill toggle), archive, and share (supports links, text clipboard copy, image/PDF file sharing)
  • Overflow menu: native MenuView with SF Symbol icons, plus an "Edit Toolbar..." shortcut at the bottom
  • Toolbar settings page: accessible from Settings > Toolbar Buttons or from the overflow menu. Drag-to-reorder within each section, +/- buttons to move actions between visible and overflow. Reset to Defaults button.
  • Defaults: lists, tags, info, favourite, share, browser visible on the bar; archive and delete in the overflow menu

Redesigned "Continue reading" banner

Shortened from "Continue where you left off" to "Continue reading", made the banner a pill shape where the whole banner is a touch target. Renders as Liquid Glass on iOS 26. Uses expo-blur to apply a blur effect on iOS <26.

iOS 26 polish

  • Glass pill toolbar container via expo-glass-effect when available on iOS 26
  • Transparent headers with edge-to-edge content
  • Content insets for scrollable views to avoid header/footer overlap

Test plan

  • Scroll down in reader view — header and toolbar hide; scroll up — they reappear
  • Tap ellipsis — overflow actions appear with SF Symbol icons + "Edit Toolbar..."
  • Settings > Toolbar Buttons — drag to reorder, use +/- to move between visible and overflow
  • Remove all visible actions — only ellipsis shows on toolbar
  • Reset to Defaults restores original layout
  • Favourite/archive/share work from both toolbar and overflow menu
  • iOS 26: glass pill styling, transparent header, no extra padding below pill
  • Pre-iOS 26 / Android: solid header background, standard toolbar layout, only bottom toolbar auto-hides
  • Android: overflow menu items are flat (no nested submenu)
  • Share action: test that sharing works on Android and iOS for all supported bookmark types

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/karakeep-app/karakeep/pull/2527 **Author:** [@esimkowitz](https://github.com/esimkowitz) **Created:** 2/27/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `mobile-reader-action-bar` --- ### 📝 Commits (10+) - [`497d21f`](https://github.com/karakeep-app/karakeep/commit/497d21f49b81629000db9ce24e629f808e4c85bc) feat(mobile): add auto-hiding reader toolbar with customizable actions and overflow menu - [`673187b`](https://github.com/karakeep-app/karakeep/commit/673187b9ad41059df3189221c8caf4dfb73c0aa6) Update apps/mobile/components/bookmarks/BottomActions.tsx - [`89a25db`](https://github.com/karakeep-app/karakeep/commit/89a25db148a2c6065d9a198c2f8ae92420aa0b6e) fix comment - [`967b83a`](https://github.com/karakeep-app/karakeep/commit/967b83a1fdad3251dc4450f65f6797063f81c0fe) fix(mobile): address PR review findings for reader toolbar - [`a524c6e`](https://github.com/karakeep-app/karakeep/commit/a524c6eb12ee65f0f78ba31a4d79b79af66ce795) remove margin around text view - [`ed05ade`](https://github.com/karakeep-app/karakeep/commit/ed05adeb0b875b84ff06f8d187feef4ac5e942f9) fix bottom inset - [`265a034`](https://github.com/karakeep-app/karakeep/commit/265a034b7f7babb7cd1dfb99b5868b448e65854c) fix reading progress bar regression, add small gap - [`fe82262`](https://github.com/karakeep-app/karakeep/commit/fe822621103607e0e68f1caddd50f0630d97bc1e) Add redesigned reading progress pill, blur effect for iOS 18 and lower - [`0754a4f`](https://github.com/karakeep-app/karakeep/commit/0754a4f7f7bc0532fd85bf7bd6f109d0b3cacfa1) small review fixes - [`8076d3d`](https://github.com/karakeep-app/karakeep/commit/8076d3d39c7c72227cdafb25eedf76421de8f629) fix icon colors in dark mode ### 📊 Changes **14 files changed** (+1172 additions, -113 deletions) <details> <summary>View changed files</summary> 📝 `apps/mobile/app/dashboard/(tabs)/(settings)/index.tsx` (+13 -0) 📝 `apps/mobile/app/dashboard/_layout.tsx` (+12 -1) 📝 `apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx` (+90 -13) ➕ `apps/mobile/app/dashboard/settings/toolbar-settings.tsx` (+233 -0) 📝 `apps/mobile/components/bookmarks/BookmarkHtmlHighlighterDom.tsx` (+16 -3) 📝 `apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx` (+202 -27) 📝 `apps/mobile/components/bookmarks/BookmarkLinkView.tsx` (+32 -3) 📝 `apps/mobile/components/bookmarks/BookmarkTextView.tsx` (+16 -2) 📝 `apps/mobile/components/bookmarks/BottomActions.tsx` (+394 -52) ➕ `apps/mobile/lib/ios.ts` (+4 -0) 📝 `apps/mobile/lib/settings.ts` (+51 -0) ➕ `apps/mobile/lib/useScrollDirection.ts` (+42 -0) 📝 `apps/mobile/package.json` (+3 -0) 📝 `pnpm-lock.yaml` (+64 -12) </details> ### 📄 Description Resolves #2261 Resolves #2262 Resolves #2263 ## Summary ### Auto-hiding reader bars (#2263) When scrolling down in the bookmark reader, the top navigation bar and bottom toolbar now automatically hide to maximize reading space. Scrolling back up reveals them again. This applies to all reader view types (browser, reader, archive, and text). - New `useScrollDirection` hook detects scroll direction and toggles bar visibility - Header hides via `navigation.setOptions({ headerShown })`, footer animates out via `react-native-reanimated` translateY - Progress bar in reader view hides alongside the bars - Scroll offset callbacks threaded through all bookmark view components (`BookmarkLinkView`, `BookmarkTextView`, and all link preview variants) > **Note — Android / iOS ≤ 18:** On these platforms, only the bottom toolbar hides on scroll; the top navigation bar and reading progress bar remain visible. This is intentional. The opaque navigation header on older platforms participates in layout flow — toggling `headerShown` triggers a layout reflow that causes the absolutely-positioned footer to re-measure via `onLayout`, producing a visible flicker in the toolbar icons during the animation. On iOS 26, the header is transparent (`headerTransparent: true`) and doesn't affect layout, so both bars can safely toggle together. ### Customizable bottom toolbar (#2261) The bottom action bar is now fully customizable. Users can choose which actions appear directly on the toolbar (up to 6) and which go into an overflow menu accessible via an ellipsis button. - **New actions**: favourite (with gold fill toggle), archive, and share (supports links, text clipboard copy, image/PDF file sharing) - **Overflow menu**: native `MenuView` with SF Symbol icons, plus an "Edit Toolbar..." shortcut at the bottom - **Toolbar settings page**: accessible from Settings > Toolbar Buttons or from the overflow menu. Drag-to-reorder within each section, +/- buttons to move actions between visible and overflow. Reset to Defaults button. - **Defaults**: lists, tags, info, favourite, share, browser visible on the bar; archive and delete in the overflow menu ### Redesigned "Continue reading" banner Shortened from "Continue where you left off" to "Continue reading", made the banner a pill shape where the whole banner is a touch target. Renders as Liquid Glass on iOS 26. Uses `expo-blur` to apply a blur effect on iOS <26. ### iOS 26 polish - Glass pill toolbar container via `expo-glass-effect` when available on iOS 26 - Transparent headers with edge-to-edge content - Content insets for scrollable views to avoid header/footer overlap ## Test plan - [x] Scroll down in reader view — header and toolbar hide; scroll up — they reappear - [x] Tap ellipsis — overflow actions appear with SF Symbol icons + "Edit Toolbar..." - [x] Settings > Toolbar Buttons — drag to reorder, use +/- to move between visible and overflow - [x] Remove all visible actions — only ellipsis shows on toolbar - [x] Reset to Defaults restores original layout - [x] Favourite/archive/share work from both toolbar and overflow menu - [x] iOS 26: glass pill styling, transparent header, no extra padding below pill - [x] Pre-iOS 26 / Android: solid header background, standard toolbar layout, only bottom toolbar auto-hides - [x] Android: overflow menu items are flat (no nested submenu) - [ ] Share action: test that sharing works on Android and iOS for all supported bookmark types --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/karakeep#2143
No description provided.