improve ribbon

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;
-  grid-template-rows: var(--control-height) 1fr;
+  --ribbon-size: calc(var(--control-height) + 2 * var(--gap-between-tiles));
+  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
-            aria-label={translations.chatPage.closeChatAudioLabe}
-            on:click={chatViewModel.close}
-          >
-            <span class="icon">close</span>
-          </button>
-          <span></span>
+          <span>
+            <button
+              class="ghost"
+              aria-label={translations.chatPage.closeChatAudioLabe}
+              on:click={chatViewModel.close}
+            >
+              <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: [
-        "Sun",
-        "Mon",
-        "Tue",
-        "Wed",
-        "Thu",
-        "Fri",
-        "Sat",
-      ],
+      abbreviated: ["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",
-    mailboxEnabled: "Mailbox enabled. If you disconnect, the server will keep your messages temporarily",
+    mailboxDisabled:
+      "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,
+}