add board view toggles

src/View/ChatPages/boardPage.tsx

@@ -1,7 +1,11 @@
 import * as React from "bloatless-react";
 
+import BoardViewModel, {
+  BoardPageType,
+} from "../../ViewModel/Pages/boardViewModel";
+
 import { BoardSettingsModal } from "../Modals/boardSettingsModal";
-import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
+import { BoardViewToggleButton } from "../Components/boardViewToggleButton";
 import { translations } from "../translations";
 
 export function BoardPage(boardViewModel: BoardViewModel) {
@@ -25,27 +29,24 @@ export function BoardPage(boardViewModel: BoardViewModel) {
           </button>
         </span>
         <span class="scroll-h ribbon">
-          <button
-            class="ghost ribbon-button"
-            aria-label={translations.chatPage.task.listViewButtonAudioLabel}
-            on:click={boardViewModel.close}
-          >
-            <span class="icon">view_list</span>
-          </button>
-          <button
-            class="ghost ribbon-button"
-            aria-label={translations.chatPage.task.kanbanViewButtonAudioLabel}
-            on:click={boardViewModel.showSettings}
-          >
-            <span class="icon">view_kanban</span>
-          </button>
-          <button
-            class="ghost ribbon-button"
-            aria-label={translations.chatPage.task.statusViewButtonAudioLabel}
-            on:click={boardViewModel.showSettings}
-          >
-            <span class="icon">grid_view</span>
-          </button>
+          {BoardViewToggleButton(
+            translations.chatPage.task.listViewButtonAudioLabel,
+            "view_list",
+            BoardPageType.List,
+            boardViewModel
+          )}
+          {BoardViewToggleButton(
+            translations.chatPage.task.kanbanViewButtonAudioLabel,
+            "view_kanban",
+            BoardPageType.Kanban,
+            boardViewModel
+          )}
+          {BoardViewToggleButton(
+            translations.chatPage.task.statusViewButtonAudioLabel,
+            "grid_view",
+            BoardPageType.StatusGrid,
+            boardViewModel
+          )}
         </span>
         <span>
           <button

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>
+  );
+}

src/View/chatPage.css

@@ -184,8 +184,6 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
   height: var(--ribbon-size);
 
-  border-top: 1px solid var(--border);
-
   overflow-x: auto;
 
   padding: 0px;

src/ViewModel/Pages/boardViewModel.ts

@@ -19,6 +19,10 @@ export default class BoardViewModel {
   isPresentingFilterModal: React.State<boolean> = new React.State(false);
   isPresentingNewTaskModal: React.State<boolean> = new React.State(false);
 
+  selectedPage: React.State<BoardPageType> = new React.State<BoardPageType>(
+    BoardPageType.List
+  );
+
   index: React.State<number> = new React.State(0);
 
   // view
@@ -111,3 +115,10 @@ export default class BoardViewModel {
     });
   }
 }
+
+// types
+export enum BoardPageType {
+  List = "list",
+  Kanban = "kanban",
+  StatusGrid = "status-grid",
+}