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 = { + 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 ( @@ -15,13 +26,18 @@ function ViewTypeSwitcher({ note }: { note: FNote }) { return ( +   + {VIEW_TYPE_MAPPINGS[viewType]} + } > {Object.entries(VIEW_TYPE_MAPPINGS).map(([ key, label ]) => ( setViewType(key)} - checked={viewType === key} + selected={viewType === key} + disabled={viewType === key} + icon={ICON_MAPPINGS[key as ViewTypeOptions]} >{label} ))}