feat(note_bars): view type switcher

apps/client/src/widgets/note_bars/CollectionProperties.tsx

@@ -0,0 +1,29 @@
+import FNote from "../../entities/fnote";
+import { ViewTypeOptions } from "../collections/interface";
+import Dropdown from "../react/Dropdown";
+import { FormListItem } from "../react/FormList";
+import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";
+
+export default function CollectionProperties({ note }: { note: FNote }) {
+    return (
+        <ViewTypeSwitcher note={note} />
+    );
+}
+
+function ViewTypeSwitcher({ note }: { note: FNote }) {
+    const [ viewType, setViewType ] = useViewType(note);
+
+    return (
+        <Dropdown
+            text={VIEW_TYPE_MAPPINGS[viewType as ViewTypeOptions ?? "grid"]}
+        >
+            {Object.entries(VIEW_TYPE_MAPPINGS).map(([ key, label ]) => (
+                <FormListItem
+                    key={key}
+                    onClick={() => setViewType(key)}
+                    checked={viewType === key}
+                >{label}</FormListItem>
+            ))}
+        </Dropdown>
+    );
+}