improve ribbon

dist/index.css

@@ -107,8 +107,9 @@ main {
   padding: 0px;
   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);
 }
 #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: [
-          "Sun",
-          "Mon",
-          "Tue",
-          "Wed",
-          "Thu",
-          "Fri",
-          "Sat"
-        ]
+        abbreviated: ["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