From b540111fa459a9acc3eabeac8a63833869914d43 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 11 Dec 2025 18:59:28 +0200
Subject: [PATCH] feat(note_bars): add icons to view type switcher

---
 .../note_bars/CollectionProperties.tsx        | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/note_bars/CollectionProperties.tsx b/apps/client/src/widgets/note_bars/CollectionProperties.tsx
index 8436f3af6..ac16eb1e5 100644
--- a/apps/client/src/widgets/note_bars/CollectionProperties.tsx
+++ b/apps/client/src/widgets/note_bars/CollectionProperties.tsx
@@ -2,8 +2,19 @@ import FNote from "../../entities/fnote";
 import { ViewTypeOptions } from "../collections/interface";
 import Dropdown from "../react/Dropdown";
 import { FormListItem } from "../react/FormList";
+import Icon from "../react/Icon";
 import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";
 
+const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
+    grid: "bx bxs-grid",
+    list: "bx bx-list-ul",
+    calendar: "bx bx-calendar",
+    table: "bx bx-table",
+    geoMap: "bx bx-map-alt",
+    board: "bx bx-columns",
+    presentation: "bx bx-rectangle"
+};
+
 export default function CollectionProperties({ note }: { note: FNote }) {
     return (
         <ViewTypeSwitcher note={note} />
@@ -15,13 +26,18 @@ function ViewTypeSwitcher({ note }: { note: FNote }) {
 
     return (
         <Dropdown
-            text={VIEW_TYPE_MAPPINGS[viewType as ViewTypeOptions ?? "grid"]}
+            text={<>
+                <Icon icon={ICON_MAPPINGS[viewType]} />&nbsp;
+                {VIEW_TYPE_MAPPINGS[viewType]}
+            </>}
         >
             {Object.entries(VIEW_TYPE_MAPPINGS).map(([ key, label ]) => (
                 <FormListItem
                     key={key}
                     onClick={() => setViewType(key)}
-                    checked={viewType === key}
+                    selected={viewType === key}
+                    disabled={viewType === key}
+                    icon={ICON_MAPPINGS[key as ViewTypeOptions]}
                 >{label}</FormListItem>
             ))}
         </Dropdown>