make the UI more colorful

src/View/ChatPages/boardPage.tsx

@@ -24,8 +24,45 @@ export function BoardPage(boardViewModel: BoardViewModel) {
             <span class="icon">settings</span>
           </button>
         </span>
-        <span>a</span>
-        <span>b</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>
+        </span>
+        <span>
+          <button
+            class="ghost"
+            aria-label={translations.chatPage.task.filterTasksButtonAudioLabel}
+            on:click={boardViewModel.showFilterModal}
+          >
+            <span class="icon">filter_alt</span>
+          </button>
+          <button
+            class="primary"
+            aria-label={translations.chatPage.task.createTaskButtonAudioLabel}
+            on:click={boardViewModel.showNewTaskModal}
+          >
+            <span class="icon">add</span>
+          </button>
+        </span>
       </div>
       <div class="content"></div>
 

src/View/ChatPages/taskPage.tsx

@@ -38,7 +38,10 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
   );
 
   const listPaneWrapper = (
-    <div class="pane-wrapper side">
+    <div
+      class="pane-wrapper side background"
+      set:color={taskPageViewModel.chatViewModel.displayedColor}
+    >
       <div class="pane">
         <div class="toolbar">
           <div class="flex-row width-input">

src/View/chatPage.css

@@ -83,10 +83,6 @@ body[showing-chat] #chat-page-wrapper {
   }
 }
 
-#chat-page > div > #main > div > .pane-wrapper:not(:last-child) {
-  border-right: 1px solid var(--border);
-}
-
 #chat-page > div > #main > div > .pane-wrapper > .pane > .content {
   flex-direction: column;
   overflow: auto;
@@ -105,9 +101,17 @@ body[showing-chat] #chat-page-wrapper {
   align-items: center;
 }
 
-#chat-page #ribbon > span,
-#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
+#chat-page > div > #ribbon > span,
+#chat-page
+  > div
+  > #main
+  > div
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  > span.ribbon {
   gap: var(--gap-between-tiles);
+  padding: var(--gap-between-tiles);
 }
 
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
@@ -117,7 +121,6 @@ body[showing-chat] #chat-page-wrapper {
 
 #chat-page > div > #ribbon {
   width: var(--ribbon-size);
-  border-right: 1px solid var(--border);
 
   padding-bottom: var(--safe-area-bottom);
 }
@@ -130,8 +133,6 @@ body[showing-chat] #chat-page-wrapper {
 
   flex-direction: column;
   justify-content: end;
-
-  padding: var(--gap-between-tiles);
 }
 
 #chat-page > div > #ribbon button,
@@ -156,7 +157,9 @@ body[showing-chat] #chat-page-wrapper {
   > .pane
   > .toolbar
   button.ribbon-button {
-  width: 100%;
+  width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
+  max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
+
   min-height: unset;
   height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
 }
@@ -180,13 +183,12 @@ body[showing-chat] #chat-page-wrapper {
 
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
   height: var(--ribbon-size);
-  border-bottom: 1px solid var(--border);
 
-  overflow-y: hidden;
+  border-top: 1px solid var(--border);
+
   overflow-x: auto;
 
   padding: 0px;
-  border-top: 1px solid var(--border);
 }
 
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {

src/View/translations.ts

@@ -141,6 +141,13 @@ const englishTranslations = {
       closeBoard: "close board",
       showBoardSettingsButtonAudioLabel: "show board settigns",
 
+      listViewButtonAudioLabel: "list view",
+      kanbanViewButtonAudioLabel: "kanban view",
+      statusViewButtonAudioLabel: "status grid view",
+
+      filterTasksButtonAudioLabel: "filter tasks",
+      createTaskButtonAudioLabel: "create new task",
+
       ///
 
       boardSettingsHeadline: "Board Settings",