add board view toggles

src/View/Components/boardViewToggleButton.tsx

@@ -0,0 +1,25 @@
+import * as React from "bloatless-react";
+
+import BoardViewModel, {
+  BoardPageType,
+} from "../../ViewModel/Pages/boardViewModel";
+
+import { RibbonButton } from "./ribbonButton";
+
+export function BoardViewToggleButton(
+  label: string,
+  icon: string,
+  page: BoardPageType,
+  boardViewModel: BoardViewModel
+) {
+  function select() {
+    boardViewModel.selectedPage.value = page;
+  }
+
+  const isSelected = React.createProxyState(
+    [boardViewModel.selectedPage],
+    () => boardViewModel.selectedPage.value == page
+  );
+
+  return RibbonButton(label, icon, isSelected, select);
+}

src/View/Components/chatViewToggleButton.tsx

@@ -1,6 +1,10 @@
 import * as React from "bloatless-react";
 
-import ChatViewModel, { ChatPageType } from "../../ViewModel/Chat/chatViewModel";
+import ChatViewModel, {
+  ChatPageType,
+} from "../../ViewModel/Chat/chatViewModel";
+
+import { RibbonButton } from "./ribbonButton";
 
 export function ChatViewToggleButton(
   label: string,
@@ -17,14 +21,5 @@ export function ChatViewToggleButton(
     () => chatViewModel.selectedPage.value == page
   );
 
-  return (
-    <button
-      class="ghost ribbon-button"
-      aria-label={label}
-      toggle:selected={isSelected}
-      on:click={select}
-    >
-      <span class="icon">{icon}</span>
-    </button>
-  );
+  return RibbonButton(label, icon, isSelected, select);
 }

src/View/Components/ribbonButton.tsx

@@ -0,0 +1,23 @@
+import * as React from "bloatless-react";
+
+import BoardViewModel, {
+  BoardPageType,
+} from "../../ViewModel/Pages/boardViewModel";
+
+export function RibbonButton(
+  label: string,
+  icon: string,
+  isSelected: React.State<boolean>,
+  select: () => void
+) {
+  return (
+    <button
+      class="ghost ribbon-button"
+      aria-label={label}
+      toggle:selected={isSelected}
+      on:click={select}
+    >
+      <span class="icon">{icon}</span>
+    </button>
+  );
+}