starred/karakeep

Fork

You've already forked karakeep

mirror of https://github.com/karakeep-app/karakeep.git synced 2026-04-24 23:46:06 +03:00

Code Issues 569 Projects Releases 5 Packages Wiki Activity

[PR #1519] [MERGED] feat(mobile): Add PDF viewing and external opening support #1853

New issue

Closed

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

kerem commented

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

Owner

Copy link

📋 Pull Request Information

Original PR: https://github.com/karakeep-app/karakeep/pull/1519
Author: @codelove77
Created: 6/2/2025
Status: ✅ Merged
Merged: 6/8/2025
Merged by: @MohamedBassem

Base: main ← Head: mobile-pdf-viewing

📝 Commits (6)

7ab0bbe feat(mobile): add react-native-pdf dependency
c3812a2 feat(mobile): add PDF viewer component with authentication support
05ef56e feat(mobile): integrate PDF viewing in bookmark detail view
d3fe7e7 Merge branch 'main' into mobile-pdf-viewing
171ac52 revert the open externally button
9c92e4e use react query for downloading the pdf

📊 Changes

4 files changed (+226 additions, -33 deletions)

View changed files

📝 apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx (+20 -2)
➕ apps/mobile/components/bookmarks/PDFViewer.tsx (+135 -0)
📝 apps/mobile/package.json (+1 -0)
📝 pnpm-lock.yaml (+70 -31)

📄 Description

Closes #597

Description

This PR adds comprehensive PDF support to the Karakeep mobile app, addressing the user's request for better PDF accessibility on mobile devices. Users can now view PDFs directly within the app and open them in their preferred external PDF reader.

Changes

🎯 Core Features

In-app PDF viewing: PDFs now render directly within the bookmark detail view using react-native-pdf
External PDF opening: Added a globe button to open PDFs in the system's default PDF viewer
Authentication support: PDF viewer properly handles authentication headers for secure assets
Platform-specific handling: Optimized for both iOS (openDocument) and Android (actionViewIntent)

🎨 User Experience

Loading indicators while PDFs download
User-friendly error messages for network issues or authentication failures
Automatic cleanup of temporary files after 60 seconds
Proper filename preservation when opening externally
Dark mode header styling fixed for better visibility

🔧 Technical Implementation

Added react-native-pdf dependency for PDF rendering
Created dedicated PDFViewer component with proper error handling and memory management
Integrated seamlessly with existing asset display logic
Follows established codebase patterns for resource management

Screenshots

Screenshots will be added after PR creation

Testing

Tested PDF viewing on iOS simulator
Tested PDF viewing on Android emulator
Verified external opening works on both platforms
Tested error handling (network failures, auth issues)
Verified temporary file cleanup
Tested with various PDF sizes and types
Dark mode functionality verified

Implementation Notes

The implementation follows existing patterns in the codebase for asset handling
Memory management is handled through proper cleanup in useEffect
The feature gracefully degrades if PDF viewer is not available on the device
External opening respects the original filename when available

Checklist

Code follows project style guidelines
Self-review completed
No console.log statements left in code
TypeScript types are properly defined
Changes work on both iOS and Android
No breaking changes to existing functionality

_{🔄 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/1519 **Author:** [@codelove77](https://github.com/codelove77) **Created:** 6/2/2025 **Status:** ✅ Merged **Merged:** 6/8/2025 **Merged by:** [@MohamedBassem](https://github.com/MohamedBassem) **Base:** `main` ← **Head:** `mobile-pdf-viewing` --- ### 📝 Commits (6) - [`7ab0bbe`](https://github.com/karakeep-app/karakeep/commit/7ab0bbef3494923e558ec26b5f837cdcb4c5d821) feat(mobile): add react-native-pdf dependency - [`c3812a2`](https://github.com/karakeep-app/karakeep/commit/c3812a2e124edf914f8e93384be04e3dc1e8bdcf) feat(mobile): add PDF viewer component with authentication support - [`05ef56e`](https://github.com/karakeep-app/karakeep/commit/05ef56ea4ab13131b6039d4dfb8647c0352901ca) feat(mobile): integrate PDF viewing in bookmark detail view - [`d3fe7e7`](https://github.com/karakeep-app/karakeep/commit/d3fe7e7e7fb463be33e09a6898f3a9b72cb1af33) Merge branch 'main' into mobile-pdf-viewing - [`171ac52`](https://github.com/karakeep-app/karakeep/commit/171ac5288c9a5e000371fd38ba224d1df0feadec) revert the open externally button - [`9c92e4e`](https://github.com/karakeep-app/karakeep/commit/9c92e4e646f174e215451e4033ced6e1176d3fc1) use react query for downloading the pdf ### 📊 Changes **4 files changed** (+226 additions, -33 deletions) <details> <summary>View changed files</summary> 📝 `apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx` (+20 -2) ➕ `apps/mobile/components/bookmarks/PDFViewer.tsx` (+135 -0) 📝 `apps/mobile/package.json` (+1 -0) 📝 `pnpm-lock.yaml` (+70 -31) </details> ### 📄 Description Closes #597 ### Description This PR adds comprehensive PDF support to the Karakeep mobile app, addressing the user's request for better PDF accessibility on mobile devices. Users can now view PDFs directly within the app and open them in their preferred external PDF reader. ### Changes #### 🎯 Core Features - **In-app PDF viewing**: PDFs now render directly within the bookmark detail view using `react-native-pdf` - **External PDF opening**: Added a globe button to open PDFs in the system's default PDF viewer - **Authentication support**: PDF viewer properly handles authentication headers for secure assets - **Platform-specific handling**: Optimized for both iOS (`openDocument`) and Android (`actionViewIntent`) #### 🎨 User Experience - Loading indicators while PDFs download - User-friendly error messages for network issues or authentication failures - Automatic cleanup of temporary files after 60 seconds - Proper filename preservation when opening externally - Dark mode header styling fixed for better visibility #### 🔧 Technical Implementation - Added `react-native-pdf` dependency for PDF rendering - Created dedicated `PDFViewer` component with proper error handling and memory management - Integrated seamlessly with existing asset display logic - Follows established codebase patterns for resource management ### Screenshots _Screenshots will be added after PR creation_ ### Testing - [x] Tested PDF viewing on iOS simulator - [x] Tested PDF viewing on Android emulator - [x] Verified external opening works on both platforms - [x] Tested error handling (network failures, auth issues) - [x] Verified temporary file cleanup - [x] Tested with various PDF sizes and types - [x] Dark mode functionality verified ### Implementation Notes - The implementation follows existing patterns in the codebase for asset handling - Memory management is handled through proper cleanup in useEffect - The feature gracefully degrades if PDF viewer is not available on the device - External opening respects the original filename when available ### Checklist - [x] Code follows project style guidelines - [x] Self-review completed - [x] No console.log statements left in code - [x] TypeScript types are properly defined - [x] Changes work on both iOS and Android - [x] No breaking changes to existing functionality --- <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:28 +03:00

closed this issue
added the
pull-request
label

No Branch/Tag specified

main

refactor/use-npm-singlefile

onetab

claude/issue-2596-20260321-1401

claude/fix-docs-button-responsive-V3aBQ

claude/review-import-backpressure-D4ArJ

claude/fix-archived-bookmarks-mobile-P9OJW

claude/issue-1189-20260211-1601

claude/fix-nested-smart-lists-3uFkt

claude/issue-2298-20251223-1704

feat/import-v3

claude/add-cli-search-subcommand-6kIe0

claude/add-bookmark-indexing-timestamps-96bPj

claude/auto-disable-failing-feeds-fkDhP

claude/add-tag-search-aliases-HzESD

feat/docker-compose-dev

claude/add-attachedby-tags-endpoint-01WYfemMGHJJjXsPYLvUJAno

claude/fix-crawler-memory-leaks-NE7Ct

bookmark-debugger

claude/issue-2352-20260106-1120

claude/issue-1977-20260102-2348

claude/add-banner-rendering-JeLUk

claude/add-descendant-qualifier-cUm26

claude/skip-metadata-refresh-archives-CAo4Y

claude/fix-archive-pending-banner-pAyGM

claude/add-embeddings-support-h2swV

claude/nested-manage-lists-QVV85

claude/privacy-type-system-MG1bT

claude/add-action-menu-icons-6hNKw

claude/issue-2299-20251223-1711

claude/bookmark-indexing-progress-QwZSI

claude/migrate-bookmark-attachments-3O2te

claude/add-2025-wrapped-feature-tIUIh

claude/improve-ai-settings-design-639tq

claude/add-youtube-metascraper-plugin-0lWC7

claude/add-problem-reporting-gSSEV

claude/add-mobile-list-menus-spcS7

claude/shadcn-bookmark-cards-WWHzP

claude/add-extensions-link-HTeXc

claude/add-onboarding-screens-hsYMO

claude/fix-settings-switch-overflow-nlzM4

claude/clamp-bookmark-titles-diAEz

claude/port-stats-mobile-expo-MuXAn

claude/whats-new-base-version-vrv8C

claude/fix-settings-auth-checks-jgyD8

claude/add-server-version-display-3sGa2

claude/fix-tag-editor-scrolling-rzdbG

claude/add-company-pricing-card-y5mHY

claude/audit-optimize-transactions-xpDVc

codex/ensure-consistent-ui-experience-across-app-pages

claude/plan-opentelemetry-integration-01Jx183mz1Ev8h8JoYj97Auw

libsql

db-indicies

claude/export-import-lists-01UuCWwdaqduAd35NppvjnMD

claude/configurable-worker-timeout-0198GQh6YrrRzqG62xnogyrz

claude/check-import-quota-01CPdxTpHp18Ba62bYcBTVbA

claude/scraper-worker-thread-01FEHen6MGrQHmdBstJSuiyA

claude/customize-dialog-styling-01CVjEv2KgyZJSpCg3mqkvR7

claude/add-asset-cache-headers-0175WhNcqwiwurrmjj52jnLT

claude/add-db-search-plugin-017Xxd4Jq3MfjWT788vgfbaq

benchmarks-2

claude/add-filtered-deletion-01DTxWNcg3hhqdNpeNLa3s6L

claude/actionbutton-loading-spinner-015DY5ZTvgPgFAXTZz3UGaYv

claude/add-broken-links-qualifier-01S31X1LsKiYb9gE1dXTKvi3

claude/docker-release-tag-trigger-01UmzFXEumhK2jdmRGtMcueo

claude/spread-feed-fetch-scheduling-01EihUtmZSyqeE1HfRMessxW

restate-idempotency

claude/align-android-ios-colors-01GJfkhEyZVBReohVioPa8ok

claude/improve-mobile-app-colors-0155LzHfkd5HyJr6YyZMsus5

codex/add-autocomplete-for-search-query-language

claude/add-bookmark-backups-016L2A8Z94n7tDgDdMPdFuAd

claude/restrict-binary-user-permissions-01FSGyy2RXGZvE26YbAejzGi

effect-ts

claude/prepare-trpc-npm-publish-0193EjfwpxSNVNcLXqXjs6Ln

shared-list-sidebar

claude/lazy-load-tiktoken-017UTNpJPTcMMQvNEBa1aFwo

codex/fix-asset-pre-processing-worker-abort-signals

add-groupid

claude/add-bookmark-list-button-01VF7uXYNLsVDzqdozWMXP5M

claude/extract-shared-ui-components-01DSVfaCr6WRqAyx1vJTZk9r

claude/migrate-shadcn-sidebar-01DKjpg9MD5PJ2potemSnbvW

claude/add-collaborators-rate-limits-01VjXyRWWPUkGQKa8d8D8qKj

claude/modernize-dark-mode-01FRfE81PAY5C44pFu1cYocf

claude/add-signed-url-bookmark-01PjYT1ZhvLK2FPJNTAhJsWf

restate-group-id

claude/add-highlights-page-012vhHpn8fVNp3gf7gBeW14s

claude/disable-shared-bookmark-features-01B9fiGUdu6NyWaxSQFsQBxP

claude/mobile-bookmark-grid-layouts-018cGBBMhPJVq6PJVRBpqT2r

claude/add-mobile-bookmark-summary-01494LYoh4sJW5Fj4GPm62Vj

claude/add-mobile-tags-screen-01WRADt4ZzvXVew1Y9vqF8SV

claude/add-highlight-notes-01LpanRLS4a2YMnT1qB5GTqX

claude/add-search-bar-014k2ngaqjwYRVSvqmbuECqr

claude/hide-collaborator-emails-01TQrkkMupC7CR9BTuDkireg

claude/list-invitation-approval-0129V89M1riXW6JqmoF74VfM

claude/add-bookmark-archive-sort-018VbGPGvtmsGgXFEERoAX7B

claude/add-mobile-smart-lists-01251tYo9u1SywE6XFezAv9e

claude/bookmark-drag-drop-01DmWq286ogHpDGHKcXjKr3z

claude/add-rss-import-01DH1Q2axcDeq8nQJR5MWjPJ

claude/mobile-inapp-browser-auth-01KiT6bwyntRPQ1X4oTtAveC

claude/offline-mode-react-query-01D1rE2bdBEPw2teGqunr5Gd

claude/add-singlefile-extension-support-01BEB9QQZABzwfZDvR9Bz5b2

claude/custom-list-slugs-01VxcfkNUXZ97FNpNVURopMq

claude/issue-2148-20251118-1133

claude/add-groupid-queue-fairness-011CV1r8Wb46HuGAg5o95i3m

claude/hide-viewer-shared-lists-01Fst6NBvdxrXXnDhUmjsNDP

claude/collaborative-lists-013AvDvMqkoszDVcSoCYgBcM

claude/implement-feature-01LT5XzGsbEhZkYXNEjEwdui

claude/fix-bookmark-loading-state-01AgF4H2drxwuTCJDB2Xgiu4

claude/admin-user-edit-013tbiRmb1KX2fhSYqmGKCu8

claude/expose-all-api-01YTruEW72WQYMtq4iZoaPkA

claude/add-doc-link-main-016NYLxShpKuH6R8XCBgeZtc

claude/fix-issue-2133-019JLvdSRAUbU4FtjQztcM6S

claude/explore-effect-ts-integration-01F7xb1dWwP1ma4LnLbFGfDD

claude/optimize-dockerfile-build-011CV5gDnPZbdbbVSPDofC4e

claude/add-custom-headers-guide-011CV249t16aWDRb1mCrzQdC

claude/mobile-app-signup-011CUxPtCXgU6U3T8GShTR2Q

claude/crawler-worker-fetch-browser-011CUvcRc24XEr9DTWDW6MX8

claude/fix-issue-784-011CUvubQrcZHG9S3KjpCKbK

codex/add-user-settings-for-inference-language-and-screenshots

claude/fix-mobile-signin-server-address-011CUnaUWwY2Fhq5Xbwhgr8H

better-auth-2

claude/issue-2028-20251012-1429

claude/issue-1010-20251012-1154

codex/update-feed-refresh-job-idempotency-key

restate

import-v2

fix-public-lists

recurse-delete-list

abort-dangling-processing

tag-pagination

ratelimit-plugin

claude/issue-1937-20250914-0912

codex/implement-title-search-query-qualifier

copilot/add-edit-button-for-notes

cookie-path

ai-tag-cleanup

codex/add-allowlist-and-blocklist-env-variables

mobile-retheme

expo-next-upgrade

opencode/issue1788-20250727215611

fix-trailing-slash-deduplication

edit-bookmark-dialog

bookmark-embeddings

rag

nextjs-15

bookmark-hover-bar

sapling-pr-archive-MohamedBassem

track-bookmark-assets

json-cli

admin-settings

mobile-dark-mode

android/v1.9.2-0

ios/v1.9.1-1

android/v1.9.1-0

ios/v1.9.1-0

ios/v1.9.0-2

ios/v1.9.0-1

android/v1.9.0-1

extension/v1.2.9

cli/v0.31.0

sdk/v0.31.0

mcp/v0.31.0

android/v1.9.0-0

ios/v1.9.0-0

v0.31.0

android/v1.8.5-0

cli/v0.30.0

sdk/v0.30.0

ios/v1.8.4-0

android/v1.8.4-0

v0.30.0

cli/v0.29.1

v0.29.3

v0.29.2

v0.29.1

sdk/v0.29.0

cli/v0.29.0

mcp/v0.29.0

ios/v1.8.3-0

android/v1.8.3-0

extension/v1.2.8

v0.29.0

android/v1.8.2-2

android/v1.8.2-1

ios/v1.8.2-0

android/v1.8.2-0

extension/v1.2.7

android/v1.8.1-0

ios/v1.8.1-0

v0.28.0

cli/v0.27.1

cli/v0.27.0

v0.27.1

sdk/v0.27.0

v0.27.0

android/v1.8.0-1

ios/v1.8.0-1

mcp/v0.26.0

sdk/v0.26.0

v0.26.0

cli/v0.25.0

ios/v1.7.0-1

mcp/v0.25.0

v0.25.0

extension/v1.2.6

ios/v1.7.0-0

android/v1.7.0-0

v0.24.1

v0.24.0

mcp/v0.23.10

mcp/v0.23.9

mcp/v0.23.8

extension/v1.2.5

mcp/v0.23.7

mcp/v0.23.6

mcp/v0.23.5

mcp/v0.23.4

sdk/v0.23.2

cli/v0.23.0

extension/v1.2.4

android/v1.6.9-1

ios/v1.6.9-1

v0.23.2

v0.23.1

sdk/v0.23.0

v0.23.0

ios/v1.6.9-0

sdk/v0.22.0

v0.22.0

android/v1.6.8-0

ios/v1.6.8-0

sdk/v0.21.2

sdk/v0.21.1

sdk/v0.21.0

v0.21.0

cli/v0.20.0

v0.20.0

ios/v1.6.7-4

android/v1.6.7-4

ios/v1.6.7-3

android/v1.6.7-3

android/v1.6.7-2

ios/v1.6.7-2

android/v1.6.7-1

ios/v1.6.7-1

ios/v1.6.7-0

android/v1.6.7-0

v0.19.0

android/v1.6.6-0

android/v1.6.5-0

ios/v1.6.5-0

ios/v1.6.4-0

android/v1.6.4-0

v0.18.0

v0.17.1

v0.17.0

ios/v1.6.3-0

android/v1.6.3-0

extension/v1.2.3

ios/v1.6.2-1

android/v1.6.2-1

ios/v1.6.2-0

android/v1.6.2-0

v0.16.0

ios/v1.6.1-3

android/v1.6.1-3

ios/v1.6.1-2

android/v1.6.1-2

android/v1.6.1-1

ios/v1.6.1-1

android/v1.6.1-0

ios/v1.6.1-0

extension/v1.2.2

android/v1.6.0-1

ios/v1.6.0-1

ios/v1.6.0

android/v1.6.0

cli/v0.13.7

cli/v0.13.6

v0.15.0

cli/v0.13.5

extension/v1.2.1

v0.14.0

cli/v0.13.3

cli/v0.13.2

cli/v0.13.1

cli/v0.13.0

v0.13.1

v0.13.0

mobile-v1.5.0

mobile-v1.4.0

v0.12.2

v0.12.1

v0.12.0

v0.11.1

v0.11.0

v0.10.1

v0.10.0

v0.9.0

v0.8.0

v0.7.0

v0.6.0

v0.5.0

v0.4.1

v.0.4.0

v.0.3.1

v0.3.0

v0.2.2

v0.2.1

v0.2.0

v0.1.0

Labels

Clear labels

Mirrored from GitHub Pull Request

question

status/approved

status/icebox

status/pending_clarification

No labels

status/pending_clarification

status/untriaged

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

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

Reference in a new issue

Repository

starred/karakeep

Title

Body

No description provided.

Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?

Rows
Columns