add board view toggles

dist/index.css

@@ -358,7 +358,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;
 }

dist/index.js

@@ -1425,6 +1425,9 @@
     isPresentingSettingsModal = new State(false);
     isPresentingFilterModal = new State(false);
     isPresentingNewTaskModal = new State(false);
+    selectedPage = new State(
+      "list" /* List */
+    );
     index = new State(0);
     // view
     select = () => {
@@ -1730,15 +1733,8 @@
     }
   };
 
-  // src/View/Components/chatViewToggleButton.tsx
+  // src/View/Components/ribbonButton.tsx
-  function ChatViewToggleButton(label, icon, page, chatViewModel) {
+  function RibbonButton(label, icon, isSelected, select) {
-    function select() {
-      chatViewModel.selectedPage.value = page;
-    }
-    const isSelected = createProxyState(
-      [chatViewModel.selectedPage],
-      () => chatViewModel.selectedPage.value == page
-    );
     return /* @__PURE__ */ createElement(
       "button",
       {
@@ -1751,6 +1747,18 @@
     );
   }
 
+  // src/View/Components/chatViewToggleButton.tsx
+  function ChatViewToggleButton(label, icon, page, chatViewModel) {
+    function select() {
+      chatViewModel.selectedPage.value = page;
+    }
+    const isSelected = createProxyState(
+      [chatViewModel.selectedPage],
+      () => chatViewModel.selectedPage.value == page
+    );
+    return RibbonButton(label, icon, isSelected, select);
+  }
+
   // src/View/translations.ts
   var englishTranslations = {
     general: {
@@ -2160,6 +2168,18 @@
     ))), /* @__PURE__ */ createElement("button", { "on:click": boardViewModel.hideSettings }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
   }
 
+  // src/View/Components/boardViewToggleButton.tsx
+  function BoardViewToggleButton(label, icon, page, boardViewModel) {
+    function select() {
+      boardViewModel.selectedPage.value = page;
+    }
+    const isSelected = createProxyState(
+      [boardViewModel.selectedPage],
+      () => boardViewModel.selectedPage.value == page
+    );
+    return RibbonButton(label, icon, isSelected, select);
+  }
+
   // src/View/ChatPages/boardPage.tsx
   function BoardPage(boardViewModel) {
     return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
@@ -2178,30 +2198,21 @@
         "on:click": boardViewModel.showSettings
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "settings")
-    )), /* @__PURE__ */ createElement("span", { class: "scroll-h ribbon" }, /* @__PURE__ */ createElement(
+    )), /* @__PURE__ */ createElement("span", { class: "scroll-h ribbon" }, BoardViewToggleButton(
-      "button",
+      translations.chatPage.task.listViewButtonAudioLabel,
-      {
+      "view_list",
-        class: "ghost ribbon-button",
+      "list" /* List */,
-        "aria-label": translations.chatPage.task.listViewButtonAudioLabel,
+      boardViewModel
-        "on:click": boardViewModel.close
+    ), BoardViewToggleButton(
-      },
+      translations.chatPage.task.kanbanViewButtonAudioLabel,
-      /* @__PURE__ */ createElement("span", { class: "icon" }, "view_list")
+      "view_kanban",
-    ), /* @__PURE__ */ createElement(
+      "kanban" /* Kanban */,
-      "button",
+      boardViewModel
-      {
+    ), BoardViewToggleButton(
-        class: "ghost ribbon-button",
+      translations.chatPage.task.statusViewButtonAudioLabel,
-        "aria-label": translations.chatPage.task.kanbanViewButtonAudioLabel,
+      "grid_view",
-        "on:click": boardViewModel.showSettings
+      "status-grid" /* StatusGrid */,
-      },
+      boardViewModel
-      /* @__PURE__ */ createElement("span", { class: "icon" }, "view_kanban")
-    ), /* @__PURE__ */ createElement(
-      "button",
-      {
-        class: "ghost ribbon-button",
-        "aria-label": translations.chatPage.task.statusViewButtonAudioLabel,
-        "on:click": boardViewModel.showSettings
-      },
-      /* @__PURE__ */ createElement("span", { class: "icon" }, "grid_view")
     )), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
       "button",
       {

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
+          {BoardViewToggleButton(
-            class="ghost ribbon-button"
+            translations.chatPage.task.listViewButtonAudioLabel,
-            aria-label={translations.chatPage.task.listViewButtonAudioLabel}
+            "view_list",
-            on:click={boardViewModel.close}
+            BoardPageType.List,
-          >
+            boardViewModel
-            <span class="icon">view_list</span>
+          )}
-          </button>
+          {BoardViewToggleButton(
-          <button
+            translations.chatPage.task.kanbanViewButtonAudioLabel,
-            class="ghost ribbon-button"
+            "view_kanban",
-            aria-label={translations.chatPage.task.kanbanViewButtonAudioLabel}
+            BoardPageType.Kanban,
-            on:click={boardViewModel.showSettings}
+            boardViewModel
-          >
+          )}
-            <span class="icon">view_kanban</span>
+          {BoardViewToggleButton(
-          </button>
+            translations.chatPage.task.statusViewButtonAudioLabel,
-          <button
+            "grid_view",
-            class="ghost ribbon-button"
+            BoardPageType.StatusGrid,
-            aria-label={translations.chatPage.task.statusViewButtonAudioLabel}
+            boardViewModel
-            on:click={boardViewModel.showSettings}
+          )}
-          >
-            <span class="icon">grid_view</span>
-          </button>
         </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 (
+  return RibbonButton(label, icon, isSelected, select);
-    <button
-      class="ghost ribbon-button"
-      aria-label={label}
-      toggle:selected={isSelected}
-      on:click={select}
-    >
-      <span class="icon">{icon}</span>
-    </button>
-  );
 }

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",
+}