From 8f6cfe8a0461466829b2ad8d6fef41ee711126b8 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 31 Jan 2026 19:43:53 +0200
Subject: [PATCH] feat(mobile/tab_switcher): improve display of collections

---
 .../widgets/mobile_widgets/TabSwitcher.css    |  5 ++++
 .../widgets/mobile_widgets/TabSwitcher.tsx    | 25 ++++++++++++++-----
 .../note_bars/CollectionProperties.tsx        |  5 +---
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/widgets/mobile_widgets/TabSwitcher.css b/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
index 37a68c5b15..0bf9c51fd5 100644
--- a/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
+++ b/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
@@ -78,6 +78,7 @@
                     padding: 10px;
                 }
 
+                &.type-book,
                 &.type-contentWidget,
                 &.type-search {
                     display: flex;
@@ -87,6 +88,10 @@
                     color: var(--muted-text-color);
                 }
 
+                .preview-placeholder {
+                    font-size: 500%;
+                }
+
                 p { margin-bottom: 0.2em;}
                 h2 { font-size: 1.20em; }
                 h3 { font-size: 1.15em; }
diff --git a/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx b/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
index c779a58042..45d7ee5754 100644
--- a/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
+++ b/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
@@ -11,6 +11,7 @@ import froca from "../../services/froca";
 import { t } from "../../services/i18n";
 import { NoteContent } from "../collections/legacy/ListOrGridView";
 import { LaunchBarActionButton } from "../launch_bar/launch_bar_widgets";
+import { ICON_MAPPINGS } from "../note_bars/CollectionProperties";
 import ActionButton from "../react/ActionButton";
 import { useActiveNoteContext, useNoteIcon, useTriliumEvents } from "../react/hooks";
 import Icon from "../react/Icon";
@@ -142,17 +143,29 @@ function Tab({ noteContext, containerRef, selectTab, activeNtxId }: {
                 />
             </header>
             <div className={clsx("tab-preview", `type-${note?.type ?? "empty"}`)}>
-                {note && <NoteContent
-                    note={note}
-                    highlightedTokens={undefined}
-                    trim
-                    includeArchivedNotes={false}
-                />}
+                {note?.type === "book"
+                    ? <PreviewPlaceholder icon={ICON_MAPPINGS[note.getLabelValue("viewType") ?? ""] ?? "bx bx-book"} />
+                    : note && <NoteContent
+                        note={note}
+                        highlightedTokens={undefined}
+                        trim
+                        includeArchivedNotes={false}
+                    />}
             </div>
         </div>
     );
 }
 
+function PreviewPlaceholder({ icon}: {
+    icon: string;
+}) {
+    return (
+        <div className="preview-placeholder">
+            <Icon icon={icon} />
+        </div>
+    );
+}
+
 function getWorkspaceTabBackgroundColorHue(noteContext: NoteContext) {
     if (!noteContext.hoistedNoteId) return;
     const hoistedNote = froca.getNoteFromCache(noteContext.hoistedNoteId);
diff --git a/apps/client/src/widgets/note_bars/CollectionProperties.tsx b/apps/client/src/widgets/note_bars/CollectionProperties.tsx
index d466e813cd..5dba675e6d 100644
--- a/apps/client/src/widgets/note_bars/CollectionProperties.tsx
+++ b/apps/client/src/widgets/note_bars/CollectionProperties.tsx
@@ -6,10 +6,7 @@ import { useContext, useRef } from "preact/hooks";
 import { Fragment } from "preact/jsx-runtime";
 
 import FNote from "../../entities/fnote";
-import { getHelpUrlForNote } from "../../services/in_app_help";
-import { openInAppHelpFromUrl } from "../../services/utils";
 import { ViewTypeOptions } from "../collections/interface";
-import ActionButton from "../react/ActionButton";
 import Dropdown from "../react/Dropdown";
 import { FormDropdownDivider, FormDropdownSubmenu, FormListItem, FormListToggleableItem } from "../react/FormList";
 import FormTextBox from "../react/FormTextBox";
@@ -19,7 +16,7 @@ import { ParentComponent } from "../react/react_utils";
 import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, ComboBoxItem, ComboBoxProperty, NumberProperty, SplitButtonProperty } from "../ribbon/collection-properties-config";
 import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";
 
-const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
+export const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
     grid: "bx bxs-grid",
     list: "bx bx-list-ul",
     calendar: "bx bx-calendar",