make the UI more colorful

dist/index.css

@@ -122,14 +122,19 @@ main {
   color: var(--primary);
 }
 [color]:not([color=standard]).background {
-  --luma: var(--subtle-luma);
+  --luma: var(--background-luma);
-  background: hsl(var(--hue), 90%, var(--luma));
+  --sat: 80%;
+  background: hsl(var(--hue), var(--sat), var(--luma));
 }
 @media (prefers-color-scheme: dark) {
   [color]:not([color=standard]).background {
-    --luma: var(--subtle-luma-dark);
+    --luma: var(--background-luma-dark);
+    --sat: 40%;
   }
 }
+[color=standard].background {
+  background: var(--surface);
+}
 [color]:not([color=standard]).subtle-background {
   --luma: var(--subtle-luma);
   background: hsl(var(--hue), 30%, var(--luma));
@@ -145,6 +150,8 @@ main {
   --accent-luma-dark: 70%;
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
+  --background-luma: 90%;
+  --background-luma-dark: 10%;
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -154,6 +161,8 @@ main {
   --accent-luma-dark: 60%;
   --accent-text-luma: 0%;
   --accent-text-luma-dark: 0%;
+  --background-luma: 85%;
+  --background-luma-dark: 10%;
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -163,6 +172,8 @@ main {
   --accent-luma-dark: 60%;
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 0%;
+  --background-luma: 85%;
+  --background-luma-dark: 9%;
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -170,8 +181,10 @@ main {
   --hue: 180;
   --accent-luma: 40%;
   --accent-luma-dark: 60%;
-  --accent-text-luma: 100%;
+  --accent-text-luma: 0%;
-  --accent-text-luma-dark: 0%;
+  --accent-text-luma-dark: 100%;
+  --background-luma: 85%;
+  --background-luma-dark: 8%;
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -181,6 +194,8 @@ main {
   --accent-luma-dark: 70%;
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
+  --background-luma: 90%;
+  --background-luma-dark: 10%;
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -190,6 +205,8 @@ main {
   --accent-luma-dark: 70%;
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
+  --background-luma: 90%;
+  --background-luma-dark: 12%;
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -281,9 +298,6 @@ body[showing-chat] #chat-page-wrapper {
     max-width: 18rem;
   }
 }
-#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;
@@ -298,9 +312,10 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
   align-items: center;
 }
-#chat-page #ribbon > span,
+#chat-page > div > #ribbon > span,
-#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > 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 {
   justify-content: start;
@@ -308,7 +323,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);
 }
 #chat-page > div > #ribbon > span {
@@ -317,7 +331,6 @@ body[showing-chat] #chat-page-wrapper {
   overflow-y: auto;
   flex-direction: column;
   justify-content: end;
-  padding: var(--gap-between-tiles);
 }
 #chat-page > div > #ribbon button,
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
@@ -331,7 +344,8 @@ body[showing-chat] #chat-page-wrapper {
 }
 #chat-page > div > #ribbon button.ribbon-button,
 #chat-page > div > #main > div > .pane-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));
 }
@@ -344,11 +358,9 @@ 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);
+  border-top: 1px solid var(--border);
-  overflow-y: hidden;
   overflow-x: auto;
   padding: 0px;
-  border-top: 1px solid var(--border);
 }
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
   padding-left: var(--content-padding);

dist/index.js

@@ -1423,6 +1423,8 @@
     color = new State("standard" /* Standard */);
     isSelected;
     isPresentingSettingsModal = new State(false);
+    isPresentingFilterModal = new State(false);
+    isPresentingNewTaskModal = new State(false);
     index = new State(0);
     // view
     select = () => {
@@ -1438,6 +1440,18 @@
       this.saveSettings();
       this.isPresentingSettingsModal.value = false;
     };
+    showFilterModal = () => {
+      this.isPresentingFilterModal.value = true;
+    };
+    hideFilterModal = () => {
+      this.isPresentingFilterModal.value = false;
+    };
+    showNewTaskModal = () => {
+      this.isPresentingNewTaskModal.value = true;
+    };
+    hideNewTaskModal = () => {
+      this.isPresentingNewTaskModal.value = false;
+    };
     updateIndex = () => {
       const index = this.taskPageViewModel.boardIndexManager.getIndex(this);
       this.index.value = index;
@@ -1842,6 +1856,11 @@
         ///
         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",
         boardNameInputLabel: "Board name",
@@ -2159,7 +2178,47 @@
         "on:click": boardViewModel.showSettings
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "settings")
-    )), /* @__PURE__ */ createElement("span", null, "a"), /* @__PURE__ */ createElement("span", null, "b")), /* @__PURE__ */ createElement("div", { class: "content" }), BoardSettingsModal(boardViewModel));
+    )), /* @__PURE__ */ createElement("span", { class: "scroll-h ribbon" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "ghost ribbon-button",
+        "aria-label": translations.chatPage.task.listViewButtonAudioLabel,
+        "on:click": boardViewModel.close
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "view_list")
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "ghost ribbon-button",
+        "aria-label": translations.chatPage.task.kanbanViewButtonAudioLabel,
+        "on:click": boardViewModel.showSettings
+      },
+      /* @__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",
+      {
+        class: "ghost",
+        "aria-label": translations.chatPage.task.filterTasksButtonAudioLabel,
+        "on:click": boardViewModel.showFilterModal
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "filter_alt")
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary",
+        "aria-label": translations.chatPage.task.createTaskButtonAudioLabel,
+        "on:click": boardViewModel.showNewTaskModal
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "add")
+    ))), /* @__PURE__ */ createElement("div", { class: "content" }), BoardSettingsModal(boardViewModel));
   }
 
   // src/View/ChatPages/taskPage.tsx
@@ -2179,33 +2238,40 @@
         return BoardPage(selectedBoard);
       }
     );
-    const listPaneWrapper = /* @__PURE__ */ createElement("div", { class: "pane-wrapper side" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
+    const listPaneWrapper = /* @__PURE__ */ createElement(
-      "input",
-      {
-        "bind:value": taskPageViewModel.newBoardNameInput,
-        "on:enter": taskPageViewModel.createBoard,
-        placeholder: translations.chatPage.task.newBoardNamePlaceholder
-      }
-    ), /* @__PURE__ */ createElement(
-      "button",
-      {
-        class: "primary",
-        "aria-label": translations.chatPage.task.createBoardButtonAudioLabel,
-        "on:click": taskPageViewModel.createBoard,
-        "toggle:disabled": taskPageViewModel.cannotCreateBoard
-      },
-      /* @__PURE__ */ createElement("span", { class: "icon" }, "add")
-    ))), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement(
       "div",
       {
-        class: "grid gap",
+        class: "pane-wrapper side background",
-        style: "grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))",
+        "set:color": taskPageViewModel.chatViewModel.displayedColor
-        "children:append": [
+      },
-          taskPageViewModel.boardViewModels,
+      /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
-          BoardInfoToEntry
+        "input",
-        ]
+        {
-      }
+          "bind:value": taskPageViewModel.newBoardNameInput,
-    ))));
+          "on:enter": taskPageViewModel.createBoard,
+          placeholder: translations.chatPage.task.newBoardNamePlaceholder
+        }
+      ), /* @__PURE__ */ createElement(
+        "button",
+        {
+          class: "primary",
+          "aria-label": translations.chatPage.task.createBoardButtonAudioLabel,
+          "on:click": taskPageViewModel.createBoard,
+          "toggle:disabled": taskPageViewModel.cannotCreateBoard
+        },
+        /* @__PURE__ */ createElement("span", { class: "icon" }, "add")
+      ))), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement(
+        "div",
+        {
+          class: "grid gap",
+          style: "grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))",
+          "children:append": [
+            taskPageViewModel.boardViewModels,
+            BoardInfoToEntry
+          ]
+        }
+      )))
+    );
     const mainPageWrapper = /* @__PURE__ */ createElement("div", { class: "pane-wrapper", "children:set": paneContent });
     bulkSubscribe([taskPageViewModel.selectedBoardId], () => {
       const selectedBoard = taskPageViewModel.selectedBoardId.value;

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 class="scroll-h ribbon">
-        <span>b</span>
+          <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 > #ribbon > span,
-#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > 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",

src/ViewModel/Pages/boardViewModel.ts

@@ -16,6 +16,8 @@ export default class BoardViewModel {
 
   isSelected: React.State<boolean>;
   isPresentingSettingsModal: React.State<boolean> = new React.State(false);
+  isPresentingFilterModal: React.State<boolean> = new React.State(false);
+  isPresentingNewTaskModal: React.State<boolean> = new React.State(false);
 
   index: React.State<number> = new React.State(0);
 
@@ -37,6 +39,22 @@ export default class BoardViewModel {
     this.isPresentingSettingsModal.value = false;
   };
 
+  showFilterModal = (): void => {
+    this.isPresentingFilterModal.value = true;
+  };
+
+  hideFilterModal = (): void => {
+    this.isPresentingFilterModal.value = false;
+  };
+
+  showNewTaskModal = (): void => {
+    this.isPresentingNewTaskModal.value = true;
+  };
+
+  hideNewTaskModal = (): void => {
+    this.isPresentingNewTaskModal.value = false;
+  };
+
   updateIndex = (): void => {
     const index: number =
       this.taskPageViewModel.boardIndexManager.getIndex(this);

src/colors.css

@@ -60,16 +60,22 @@
 
 /* background */
 [color]:not([color="standard"]).background {
-  --luma: var(--subtle-luma);
+  --luma: var(--background-luma);
-  background: hsl(var(--hue), 90%, var(--luma));
+  --sat: 80%;
+  background: hsl(var(--hue), var(--sat), var(--luma));
 }
 
 @media (prefers-color-scheme: dark) {
   [color]:not([color="standard"]).background {
-    --luma: var(--subtle-luma-dark);
+    --luma: var(--background-luma-dark);
+    --sat: 40%;
   }
 }
 
+[color="standard"].background {
+  background: var(--surface);
+}
+
 /* subtle */
 [color]:not([color="standard"]).subtle-background {
   --luma: var(--subtle-luma);
@@ -92,6 +98,9 @@
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
 
+  --background-luma: 90%;
+  --background-luma-dark: 10%;
+
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -105,6 +114,9 @@
   --accent-text-luma: 0%;
   --accent-text-luma-dark: 0%;
 
+  --background-luma: 85%;
+  --background-luma-dark: 10%;
+
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -118,6 +130,9 @@
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 0%;
 
+  --background-luma: 85%;
+  --background-luma-dark: 9%;
+
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -128,8 +143,11 @@
   --accent-luma: 40%;
   --accent-luma-dark: 60%;
 
-  --accent-text-luma: 100%;
+  --accent-text-luma: 0%;
-  --accent-text-luma-dark: 0%;
+  --accent-text-luma-dark: 100%;
+
+  --background-luma: 85%;
+  --background-luma-dark: 8%;
 
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
@@ -144,6 +162,9 @@
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
 
+  --background-luma: 90%;
+  --background-luma-dark: 10%;
+
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -157,7 +178,9 @@
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
 
-  
+  --background-luma: 90%;
+  --background-luma-dark: 12%;
+
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }