improve ribbon

dist/index.css

@@ -107,8 +107,9 @@ main {
   padding: 0px;
   overflow: hidden;
   display: grid;
-  grid-template-columns: var(--control-height) 1fr;
+  --ribbon-size: calc(var(--control-height) + 2 * var(--gap-between-tiles));
-  grid-template-rows: var(--control-height) 1fr;
+  grid-template-columns: var(--ribbon-size) 1fr;
+  grid-template-rows: var(--ribbon-size) 1fr;
   border-top: 1px solid var(--border);
 }
 #chat-page #ribbon {
@@ -140,12 +141,20 @@ main {
   flex-direction: column;
   padding: var(--gap-between-tiles);
 }
+#chat-page #ribbon > span,
+#chat-page #toolbar {
+  padding: var(--gap-between-tiles);
+  gap: var(--gap-between-tiles);
+}
 #chat-page #ribbon {
   justify-content: space-between;
+  justify-content: space-between;
 }
-#chat-page #ribbon button {
+#chat-page #ribbon button,
+#chat-page #toolbar button {
   padding: 0px;
   width: 100%;
+  max-width: var(--control-height);
   height: var(--control-height);
   align-items: center;
   justify-content: center;

dist/index.js

@@ -516,6 +516,9 @@
     // state
     primaryChannel = new State("");
     primaryChannelInput = new State("");
+    selectedPage = new State(
+      1 /* Messages */
+    );
     // guards
     cannotSetPrimaryChannel = createProxyState(
       [this.primaryChannel, this.primaryChannelInput],
@@ -585,6 +588,27 @@
     }
   };
 
+  // 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 /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "ghost",
+        "aria-label": label,
+        "toggle:selected": isSelected,
+        "on:click": select
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, icon)
+    );
+  }
+
   // src/View/translations.ts
   var englishTranslations = {
     general: {
@@ -602,15 +626,7 @@
           "Friday",
           "Saturday"
         ],
-        abbreviated: [
+        abbreviated: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
-          "Sun",
-          "Mon",
-          "Tue",
-          "Wed",
-          "Thu",
-          "Fri",
-          "Sat"
-        ]
       }
     },
     homePage: {
@@ -646,7 +662,15 @@
     },
     chatPage: {
       closeChatAudioLabe: "close chat",
-      chatSettingsAudioLabel: "chat settings"
+      chatSettingsAudioLabel: "chat settings",
+      pages: {
+        settings: "Settings",
+        messages: "Messages",
+        allObjects: "All objects",
+        kanban: "Kanban",
+        calendar: "Calendar",
+        progress: "Progress"
+      }
     }
   };
   var allTranslations = {
@@ -657,14 +681,45 @@
 
   // src/View/chatPage.tsx
   function ChatPage(chatViewModel) {
-    return /* @__PURE__ */ createElement("article", { id: "chat-page" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("article", { id: "chat-page" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
       "button",
       {
+        class: "ghost",
         "aria-label": translations.chatPage.closeChatAudioLabe,
         "on:click": chatViewModel.close
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "close")
-    ), /* @__PURE__ */ createElement("span", null)), /* @__PURE__ */ createElement("div", { id: "toolbar" }), /* @__PURE__ */ createElement("div", { id: "main" })));
+    )), /* @__PURE__ */ createElement("span", null, ChatViewToggleButton(
+      translations.chatPage.pages.calendar,
+      "calendar_month",
+      4 /* Calendar */,
+      chatViewModel
+    ), ChatViewToggleButton(
+      translations.chatPage.pages.progress,
+      "window",
+      5 /* Progress */,
+      chatViewModel
+    ), ChatViewToggleButton(
+      translations.chatPage.pages.kanban,
+      "view_kanban",
+      3 /* Kanban */,
+      chatViewModel
+    ), ChatViewToggleButton(
+      translations.chatPage.pages.allObjects,
+      "deployed_code",
+      2 /* AllObjects */,
+      chatViewModel
+    ), ChatViewToggleButton(
+      translations.chatPage.pages.messages,
+      "forum",
+      1 /* Messages */,
+      chatViewModel
+    ), ChatViewToggleButton(
+      translations.chatPage.pages.settings,
+      "settings",
+      0 /* Settings */,
+      chatViewModel
+    ))), /* @__PURE__ */ createElement("div", { id: "toolbar" }), /* @__PURE__ */ createElement("div", { id: "main" })));
   }
 
   // src/View/chatPageWrapper.tsx

src/View/Components/chatViewToggleButton.tsx

@@ -0,0 +1,30 @@
+import * as React from "bloatless-react";
+
+import ChatViewModel, { ChatPageType } from "../../ViewModel/chatViewModel";
+
+export function ChatViewToggleButton(
+  label: string,
+  icon: string,
+  page: ChatPageType,
+  chatViewModel: ChatViewModel
+) {
+  function select() {
+    chatViewModel.selectedPage.value = page;
+  }
+
+  const isSelected = React.createProxyState(
+    [chatViewModel.selectedPage],
+    () => chatViewModel.selectedPage.value == page
+  );
+
+  return (
+    <button
+      class="ghost"
+      aria-label={label}
+      toggle:selected={isSelected}
+      on:click={select}
+    >
+      <span class="icon">{icon}</span>
+    </button>
+  );
+}

src/View/chatPage.css

@@ -24,8 +24,9 @@
   overflow: hidden;
 
   display: grid;
-  grid-template-columns: var(--control-height) 1fr;
+  --ribbon-size: calc(var(--control-height) + 2 * var(--gap-between-tiles));
-  grid-template-rows: var(--control-height) 1fr;
+  grid-template-columns: var(--ribbon-size) 1fr;
+  grid-template-rows: var(--ribbon-size) 1fr;
 
   border-top: 1px solid var(--border);
 }
@@ -67,15 +68,24 @@
   padding: var(--gap-between-tiles);
 }
 
-/* ribbon */
+/* ribbon, toolbar */
+#chat-page #ribbon > span,
+#chat-page #toolbar {
+  padding: var(--gap-between-tiles);
+  gap: var(--gap-between-tiles);
+}
+
 #chat-page #ribbon {
   justify-content: space-between;
+  justify-content: space-between;
 }
 
-#chat-page #ribbon button {
+#chat-page #ribbon button,
+#chat-page #toolbar button {
   padding: 0px;
 
   width: 100%;
+  max-width: var(--control-height);
   height: var(--control-height);
 
   align-items: center;

src/View/chatPage.tsx

@@ -2,7 +2,9 @@ import "./homePage.css";
 
 import * as React from "bloatless-react";
 
-import ChatViewModel from "../ViewModel/chatViewModel";
+import ChatViewModel, { ChatPageType } from "../ViewModel/chatViewModel";
+
+import { ChatViewToggleButton } from "./Components/chatViewToggleButton";
 import { translations } from "./translations";
 
 export function ChatPage(chatViewModel: ChatViewModel) {
@@ -10,13 +12,54 @@ export function ChatPage(chatViewModel: ChatViewModel) {
     <article id="chat-page">
       <div>
         <div id="ribbon">
-          <button
+          <span>
-            aria-label={translations.chatPage.closeChatAudioLabe}
+            <button
-            on:click={chatViewModel.close}
+              class="ghost"
-          >
+              aria-label={translations.chatPage.closeChatAudioLabe}
-            <span class="icon">close</span>
+              on:click={chatViewModel.close}
-          </button>
+            >
-          <span></span>
+              <span class="icon">close</span>
+            </button>
+          </span>
+
+          <span>
+            {ChatViewToggleButton(
+              translations.chatPage.pages.calendar,
+              "calendar_month",
+              ChatPageType.Calendar,
+              chatViewModel
+            )}
+            {ChatViewToggleButton(
+              translations.chatPage.pages.progress,
+              "window",
+              ChatPageType.Progress,
+              chatViewModel
+            )}
+            {ChatViewToggleButton(
+              translations.chatPage.pages.kanban,
+              "view_kanban",
+              ChatPageType.Kanban,
+              chatViewModel
+            )}
+            {ChatViewToggleButton(
+              translations.chatPage.pages.allObjects,
+              "deployed_code",
+              ChatPageType.AllObjects,
+              chatViewModel
+            )}
+            {ChatViewToggleButton(
+              translations.chatPage.pages.messages,
+              "forum",
+              ChatPageType.Messages,
+              chatViewModel
+            )}
+            {ChatViewToggleButton(
+              translations.chatPage.pages.settings,
+              "settings",
+              ChatPageType.Settings,
+              chatViewModel
+            )}
+          </span>
         </div>
         <div id="toolbar"></div>
         <div id="main"></div>

src/View/translations.ts

@@ -15,15 +15,7 @@ const englishTranslations = {
         "Friday",
         "Saturday",
       ],
-      abbreviated: [
+      abbreviated: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-        "Sun",
-        "Mon",
-        "Tue",
-        "Wed",
-        "Thu",
-        "Fri",
-        "Sat",
-      ],
     },
   },
 
@@ -41,8 +33,10 @@ const englishTranslations = {
     manageConnectionsAudioLabel: "manage connections",
 
     mailboxHeadline: "Server Mailbox",
-    mailboxDisabled: "Mailbox disabled. You will miss out on messages sent while you're away",
+    mailboxDisabled:
-    mailboxEnabled: "Mailbox enabled. If you disconnect, the server will keep your messages temporarily",
+      "Mailbox disabled. You will miss out on messages sent while you're away",
+    mailboxEnabled:
+      "Mailbox enabled. If you disconnect, the server will keep your messages temporarily",
 
     outboxHeadline: "Outbox",
     outboxAllItemsSent: "All items sent",
@@ -76,7 +70,16 @@ const englishTranslations = {
   chatPage: {
     closeChatAudioLabe: "close chat",
     chatSettingsAudioLabel: "chat settings",
-  }
+
+    pages: {
+      settings: "Settings",
+      messages: "Messages",
+      allObjects: "All objects",
+      kanban: "Kanban",
+      calendar: "Calendar",
+      progress: "Progress",
+    },
+  },
 };
 
 const allTranslations: { [language: string]: typeof englishTranslations } = {

src/ViewModel/chatViewModel.tsx

@@ -12,6 +12,10 @@ export default class ChatViewModel {
   primaryChannel: React.State<string> = new React.State("");
   primaryChannelInput: React.State<string> = new React.State("");
 
+  selectedPage: React.State<ChatPageType> = new React.State<ChatPageType>(
+    ChatPageType.Messages
+  );
+
   // guards
   cannotSetPrimaryChannel: React.State<boolean> = React.createProxyState(
     [this.primaryChannel, this.primaryChannelInput],
@@ -23,11 +27,11 @@ export default class ChatViewModel {
   // methods
   open = () => {
     this.chatListViewModel.openChat(this);
-  }
+  };
 
   close = () => {
     this.chatListViewModel.closeChat();
-  }
+  };
 
   // init
   constructor(chatListViewModel: ChatListViewModel, chatModel: ChatModel) {
@@ -38,3 +42,13 @@ export default class ChatViewModel {
     this.primaryChannelInput.value = chatModel.info.primaryChannel;
   }
 }
+
+// types
+export enum ChatPageType {
+  Settings,
+  Messages,
+  AllObjects,
+  Kanban,
+  Calendar,
+  Progress,
+}