From ff0c89e5a398c693fe8aa3798aa1eb9c577cf7da Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 5 Feb 2026 21:28:50 +0200
Subject: [PATCH] feat(bookmarks): collapse on mobile into single icon (closes
 #5464)

---
 .../src/translations/en/translation.json      |  3 +
 .../widgets/launch_bar/BookmarkButtons.tsx    | 56 ++++++++++++++-----
 2 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 7ffe41d16..9f33fd8c3 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2280,5 +2280,8 @@
     "title_one": "{{count}} tab",
     "title_other": "{{count}} tabs",
     "more_options": "More options"
+  },
+  "bookmark_buttons": {
+    "bookmarks": "Bookmarks"
   }
 }
diff --git a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
index f3b88c7aa..f7ead77bd 100644
--- a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
+++ b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
@@ -1,11 +1,16 @@
-import { useContext, useMemo } from "preact/hooks";
-import { LaunchBarContext, LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
-import { CSSProperties } from "preact";
-import type FNote from "../../entities/fnote";
-import { useChildNotes, useNoteLabelBoolean } from "../react/hooks";
 import "./BookmarkButtons.css";
+
+import { CSSProperties } from "preact";
+import { useContext, useMemo } from "preact/hooks";
+
+import type FNote from "../../entities/fnote";
+import froca from "../../services/froca";
+import { t } from "../../services/i18n";
+import { useChildNotes, useNoteLabelBoolean } from "../react/hooks";
 import NoteLink from "../react/NoteLink";
+import ResponsiveContainer from "../react/ResponseContainer";
 import { CustomNoteLauncher } from "./GenericButtons";
+import { LaunchBarContext, LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
 
 const PARENT_NOTE_ID = "_lbBookmarks";
 
@@ -19,17 +24,42 @@ export default function BookmarkButtons() {
     const childNotes = useChildNotes(PARENT_NOTE_ID);
 
     return (
-        <div style={style}>
-            {childNotes?.map(childNote => <SingleBookmark key={childNote.noteId} note={childNote} />)}
-        </div>
-    )
+        <ResponsiveContainer
+            desktop={
+                <div style={style}>
+                    {childNotes?.map(childNote => <SingleBookmark key={childNote.noteId} note={childNote} />)}
+                </div>
+            }
+            mobile={
+                <LaunchBarDropdownButton
+                    icon="bx bx-bookmark"
+                    title={t("bookmark_buttons.bookmarks")}
+                >
+                    <div className="bookmark-folder-widget">
+                        <ul className="children-notes">
+                            {childNotes?.map(childNote => <SingleBookmark key={childNote.noteId} note={childNote} />)}
+                        </ul>
+                    </div>
+                </LaunchBarDropdownButton>
+            }
+        />
+    );
 }
 
 function SingleBookmark({ note }: { note: FNote }) {
     const [ bookmarkFolder ] = useNoteLabelBoolean(note, "bookmarkFolder");
-    return bookmarkFolder
-        ? <BookmarkFolder note={note} />
-        : <CustomNoteLauncher launcherNote={note} getTargetNoteId={() => note.noteId} />
+    return <ResponsiveContainer
+        desktop={
+            bookmarkFolder
+                ? <BookmarkFolder note={note} />
+                : <CustomNoteLauncher launcherNote={note} getTargetNoteId={() => note.noteId} />
+        }
+        mobile={
+            <li key={note.noteId}>
+                <NoteLink notePath={note.noteId} noPreview showNoteIcon containerClassName="note-link" noTnLink />
+            </li>
+        }
+    />;
 }
 
 function BookmarkFolder({ note }: { note: FNote }) {
@@ -55,5 +85,5 @@ function BookmarkFolder({ note }: { note: FNote }) {
                 </ul>
             </div>
         </LaunchBarDropdownButton>
-    )
+    );
 }