starred/karakeep

Fork 0

mirror of https://github.com/karakeep-app/karakeep.git synced 2026-04-25 16:06:04 +03:00

[PR #1425] [MERGED] web(UX): new: swipeable tabs when reading on touch devices #1821

New issue

Closed

opened 2026-03-02 11:59:20 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 11:59:20 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/karakeep-app/karakeep/pull/1425
Author: @thiswillbeyourgithub
Created: 5/17/2025
Status: ✅ Merged
Merged: 5/18/2025
Merged by: @MohamedBassem

Base: main ← Head: swipable_tabs_for_bookmark_details

📝 Commits (10+)

171eee0 feat: Implement tabbed layout for bookmark preview content and details
b2d84bb feat: Enable swipe gesture to switch between content and details tabs
c1fca4c feat: add scroll-based tab bar hide/show functionality
9938dc6 fix: adjust tab bar layout to maintain content space when hidden
1c7b6ad fix: bg-muted was stopping midway in the background
3c63bda fix: disable mouse tracking for swipe detection in BookmarkPreview
9b88a55 fix: improve scroll behavior to prevent glitchy tab bar animation
beda988 Update apps/web/components/dashboard/preview/BookmarkPreview.tsx
1420806 Update apps/web/components/dashboard/preview/BookmarkPreview.tsx
87c426c feat: add responsive layout with tabs and swipe for BookmarkPreview

📊 Changes

2 files changed (+85 additions, -37 deletions)

View changed files

📝 apps/web/components/dashboard/preview/BookmarkPreview.tsx (+80 -36)
📝 apps/web/lib/i18n/locales/en/translation.json (+5 -1)

📄 Description

feat: Implement tabbed layout for bookmark preview content and details
feat: Enable swipe gesture to switch between content and details tabs
feat: add scroll-based tab bar hide/show functionality
fix: adjust tab bar layout to maintain content space when hidden
fix: bg-muted was stopping midway in the background
fix: disable mouse tracking for swipe detection in BookmarkPreview
fix: improve scroll behavior to prevent glitchy tab bar animation

Hi,

I knew nothing about react nor typescript just yesterday, and now barely have a grasp, so if you are opposed to LLM based contributions, don't waste more time and close this :).

I made this to solve #1285, or at least do some progress.

Otherwise, this PR is a change to the "reading a bookmark" page. It moves the bookmark details to a separate tab, and needs the dependency react-swipeable to allow switching from reading to details and back via a horizontal swipe.

I also had to remove one bg-muted color that was mentioned in a seemingly unrelated file (sidebar/SidebarLayout.tsx) but was glitching the UI (the color was stopping midway behind the article).

I have been testing this both using pnpm web and after building the docker container entirely and it held up remarkably well. I also used the chrome dev tools to simulate various other touch and non touch devices and couldn't spot any issues.

This was done using aider-chat.

I am a python dev originally, and although I aspire to figure out react and typescript, I have very limited knowledge of the implications of adding the react-swipeable library in particular.

Open to any modifications about this, especially if it makes me a better dev!

_{🔄 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/1425 **Author:** [@thiswillbeyourgithub](https://github.com/thiswillbeyourgithub) **Created:** 5/17/2025 **Status:** ✅ Merged **Merged:** 5/18/2025 **Merged by:** [@MohamedBassem](https://github.com/MohamedBassem) **Base:** `main` ← **Head:** `swipable_tabs_for_bookmark_details` --- ### 📝 Commits (10+) - [`171eee0`](https://github.com/karakeep-app/karakeep/commit/171eee0881ed2b71382fce56a8381ac571f8d809) feat: Implement tabbed layout for bookmark preview content and details - [`b2d84bb`](https://github.com/karakeep-app/karakeep/commit/b2d84bbe6c3c493a6c39660974978076f9bb2b3c) feat: Enable swipe gesture to switch between content and details tabs - [`c1fca4c`](https://github.com/karakeep-app/karakeep/commit/c1fca4c48d10abd155b3aa880318af2aebd9d23f) feat: add scroll-based tab bar hide/show functionality - [`9938dc6`](https://github.com/karakeep-app/karakeep/commit/9938dc6c472ccb8b2f6e02d54db5a34d40ca43f0) fix: adjust tab bar layout to maintain content space when hidden - [`1c7b6ad`](https://github.com/karakeep-app/karakeep/commit/1c7b6ad4d358a8922157ca2457e95526298d96e1) fix: bg-muted was stopping midway in the background - [`3c63bda`](https://github.com/karakeep-app/karakeep/commit/3c63bda47beeaa496fc07a1dbe5de7c3528fcc3f) fix: disable mouse tracking for swipe detection in BookmarkPreview - [`9b88a55`](https://github.com/karakeep-app/karakeep/commit/9b88a553fc82a545343e913075c7b8f189f20224) fix: improve scroll behavior to prevent glitchy tab bar animation - [`beda988`](https://github.com/karakeep-app/karakeep/commit/beda98830d6c8732cee81ca9c2a7b0c0e371c5a4) Update apps/web/components/dashboard/preview/BookmarkPreview.tsx - [`1420806`](https://github.com/karakeep-app/karakeep/commit/1420806ebf4c018fd8ef79870f02f6899f152a53) Update apps/web/components/dashboard/preview/BookmarkPreview.tsx - [`87c426c`](https://github.com/karakeep-app/karakeep/commit/87c426c3625471eaec0f8cfca600cab01402e7ed) feat: add responsive layout with tabs and swipe for BookmarkPreview ### 📊 Changes **2 files changed** (+85 additions, -37 deletions) <details> <summary>View changed files</summary> 📝 `apps/web/components/dashboard/preview/BookmarkPreview.tsx` (+80 -36) 📝 `apps/web/lib/i18n/locales/en/translation.json` (+5 -1) </details> ### 📄 Description - **feat: Implement tabbed layout for bookmark preview content and details** - **feat: Enable swipe gesture to switch between content and details tabs** - **feat: add scroll-based tab bar hide/show functionality** - **fix: adjust tab bar layout to maintain content space when hidden** - **fix: bg-muted was stopping midway in the background** - **fix: disable mouse tracking for swipe detection in BookmarkPreview** - **fix: improve scroll behavior to prevent glitchy tab bar animation** Hi, I knew nothing about react nor typescript just yesterday, and now barely have a grasp, so if you are opposed to LLM based contributions, don't waste more time and close this :). I made this to solve #1285, or at least do some progress. ![image](https://github.com/user-attachments/assets/271760fc-9514-4353-92e4-54a18683ea70) ![image](https://github.com/user-attachments/assets/cb01a01a-a669-40d3-aed1-4d640e0e49a5) Otherwise, this PR is a change to the "reading a bookmark" page. It moves the bookmark details to a separate tab, and needs the dependency react-swipeable to allow switching from reading to details and back via a horizontal swipe. I also had to remove one `bg-muted` color that was mentioned in a seemingly unrelated file (sidebar/SidebarLayout.tsx) but was glitching the UI (the color was stopping midway behind the article). I have been testing this both using `pnpm web` and after building the docker container entirely and it held up remarkably well. I also used the chrome dev tools to simulate various other touch and non touch devices and couldn't spot any issues. This was done using [aider-chat](https://github.com/Aider-AI/aider). I am a python dev originally, and although I aspire to figure out react and typescript, I have very limited knowledge of the implications of adding the `react-swipeable` library in particular. Open to any modifications about this, especially if it makes me a better dev! --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

kerem

2026-03-02 11:59:20 +03:00

closed this issue
added the
pull-request
label

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#1821

No description provided.

Rows
Columns