improve UI

dist/index.css

@@ -82,11 +82,17 @@ main {
   --primary-active: hsl(var(--hue), 80%, var(--accent-luma));
   --text-on-color: hsl(0, 0%, var(--accent-text-luma));
   --link: hsl(var(--hue), 100%, var(--accent-luma));
+  --surface: hsla(var(--hue), 80%, 30%, 5%);
+  --surface-hover: hsla(var(--hue), 100%, 5%, 10%);
+  --surface-active: hsla(var(--hue), 100%, 5%, 15%);
 }
 @media (prefers-color-scheme: dark) {
   [color]:not([color=standard]) {
     --accent-luma: var(--accent-luma-dark);
     --accent-text-luma: var(--accent-text-luma-dark);
+    --surface: hsla(var(--hue), 100%, 95%, 5%);
+    --surface-hover: hsla(var(--hue), 100%, 95%, 10%);
+    --surface-active: hsla(var(--hue), 100%, 95%, 15%);
   }
 }
 [color]:not([color=standard]).tile {
@@ -269,7 +275,7 @@ body[showing-chat] #chat-page-wrapper {
   overflow: hidden;
 }
 #chat-page > div > #main {
-  width: calc(100% - var(--ribbon-size));
+  width: calc(100% - var(--ribbon-size) - 1px);
   overflow-x: scroll;
   scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
@@ -314,19 +320,20 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
   align-items: center;
 }
+#chat-page > div > #ribbon {
+  width: calc(var(--ribbon-size) + 1px);
+  border-right: 1px solid var(--border);
+  padding-bottom: var(--safe-area-bottom);
+}
 #chat-page > div > #ribbon > span,
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.ribbon {
-  gap: calc(var(--gap-between-tiles) * 2);
+  gap: var(--gap-between-tiles);
   padding: var(--gap-between-tiles);
 }
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
   justify-content: start;
   justify-content: space-between;
 }
-#chat-page > div > #ribbon {
-  width: var(--ribbon-size);
-  padding-bottom: var(--safe-area-bottom);
-}
 #chat-page > div > #ribbon > span {
   height: 100%;
   flex: 1;
@@ -350,6 +357,7 @@ body[showing-chat] #chat-page-wrapper {
   max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
   min-height: unset;
   height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
+  color: var(--primary);
 }
 #chat-page > div > #ribbon button > .icon,
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button > .icon {
@@ -363,11 +371,6 @@ body[showing-chat] #chat-page-wrapper {
   overflow-x: auto;
   padding: 0px;
 }
-@media (max-width: 1024px) {
-  #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar input {
-    border-left: 1px solid var(--surface-border);
-  }
-}
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
   padding-left: var(--content-padding);
 }

dist/index.js

@@ -1792,7 +1792,7 @@
     return /* @__PURE__ */ createElement(
       "button",
       {
-        class: "ghost ribbon-button",
+        class: "ribbon-button",
         "aria-label": label,
         "toggle:selected": isSelected,
         "on:click": select
@@ -2237,6 +2237,16 @@
   // src/View/ChatPages/boardPage.tsx
   function BoardPage(boardViewModel) {
     boardViewModel.loadData();
+    const mainContent = createProxyState(
+      [boardViewModel.selectedPage],
+      () => {
+        switch (boardViewModel.selectedPage.value) {
+          default: {
+            return /* @__PURE__ */ createElement("div", null);
+          }
+        }
+      }
+    );
     return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
       "button",
       {
@@ -2279,12 +2289,12 @@
     ), /* @__PURE__ */ createElement(
       "button",
       {
-        class: "primary",
+        class: "ghost",
         "aria-label": translations.chatPage.task.createTaskButtonAudioLabel,
         "on:click": boardViewModel.showNewTaskModal
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "add")
-    ))), /* @__PURE__ */ createElement("div", { class: "content" }), BoardSettingsModal(boardViewModel));
+    ))), /* @__PURE__ */ createElement("div", { class: "content", "children:set": mainContent }), BoardSettingsModal(boardViewModel));
   }
 
   // src/View/ChatPages/taskPage.tsx

dist/styles.css

@@ -167,6 +167,9 @@ select:not(.tile *),
 .tile {
   background: var(--surface);
 }
+[selected] {
+  background: var(--background);
+}
 @media (hover: hover) {
   button:hover,
   select:hover,
@@ -179,8 +182,7 @@ select:not(.tile *),
 }
 button:active,
 select:active,
-button.tile.ghost:active,
+button.tile.ghost:active {
-[selected] {
   background: var(--surface-active);
 }
 [selected]:active {

src/View/ChatPages/boardPage.tsx

@@ -70,7 +70,7 @@ export function BoardPage(boardViewModel: BoardViewModel) {
             <span class="icon">filter_alt</span>
           </button>
           <button
-            class="primary"
+            class="ghost"
             aria-label={translations.chatPage.task.createTaskButtonAudioLabel}
             on:click={boardViewModel.showNewTaskModal}
           >

src/View/Components/ribbonButton.tsx

@@ -12,7 +12,7 @@ export function RibbonButton(
 ) {
   return (
     <button
-      class="ghost ribbon-button"
+      class="ribbon-button"
       aria-label={label}
       toggle:selected={isSelected}
       on:click={select}

src/View/chatPage.css

@@ -44,7 +44,7 @@ body[showing-chat] #chat-page-wrapper {
 }
 
 #chat-page > div > #main {
-  width: calc(100% - var(--ribbon-size));
+  width: calc(100% - var(--ribbon-size) - 1px);
 
   overflow-x: scroll;
   scroll-behavior: smooth;
@@ -101,6 +101,12 @@ body[showing-chat] #chat-page-wrapper {
   align-items: center;
 }
 
+#chat-page > div > #ribbon {
+  width: calc(var(--ribbon-size) + 1px);
+  border-right: 1px solid var(--border);
+  padding-bottom: var(--safe-area-bottom);
+}
+
 #chat-page > div > #ribbon > span,
 #chat-page
   > div
@@ -110,7 +116,7 @@ body[showing-chat] #chat-page-wrapper {
   > .pane
   > .toolbar
   > span.ribbon {
-  gap: calc(var(--gap-between-tiles) * 2);
+  gap: var(--gap-between-tiles);
   padding: var(--gap-between-tiles);
 }
 
@@ -119,12 +125,6 @@ body[showing-chat] #chat-page-wrapper {
   justify-content: space-between;
 }
 
-#chat-page > div > #ribbon {
-  width: var(--ribbon-size);
-
-  padding-bottom: var(--safe-area-bottom);
-}
-
 #chat-page > div > #ribbon > span {
   height: 100%;
 
@@ -162,6 +162,8 @@ body[showing-chat] #chat-page-wrapper {
 
   min-height: unset;
   height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
+
+  color: var(--primary);
 }
 
 #chat-page > div > #ribbon button > .icon,
@@ -189,12 +191,6 @@ body[showing-chat] #chat-page-wrapper {
   padding: 0px;
 }
 
-@media (max-width: 1024px) {
-  #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar input {
-    border-left: 1px solid var(--surface-border);
-  }
-}
-
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
   padding-left: var(--content-padding);
 }

src/colors.css

@@ -6,12 +6,20 @@
 
   --text-on-color: hsl(0, 0%, var(--accent-text-luma));
   --link: hsl(var(--hue), 100%, var(--accent-luma));
+
+  --surface: hsla(var(--hue), 80%, 30%, 5%);
+  --surface-hover: hsla(var(--hue), 100%, 5%, 10%);
+  --surface-active: hsla(var(--hue), 100%, 5%, 15%);
 }
 
 @media (prefers-color-scheme: dark) {
   [color]:not([color="standard"]) {
     --accent-luma: var(--accent-luma-dark);
     --accent-text-luma: var(--accent-text-luma-dark);
+
+    --surface: hsla(var(--hue), 100%, 95%, 5%);
+    --surface-hover: hsla(var(--hue), 100%, 95%, 10%);
+    --surface-active: hsla(var(--hue), 100%, 95%, 15%);
   }
 }