From 413da96c56e85c166d59c8a652e2fb92f4dc5424 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sat, 8 Mar 2025 00:33:29 +0800
Subject: [PATCH] feat(stage-web): new ui

---
 .../src/pages/settings/models/index.vue       |  2 +-
 .../pages/settings/modules/consciousness.vue  | 88 +++++++++++++++++--
 .../src/pages/settings/modules/index.vue      |  2 +-
 .../src/pages/settings/providers/index.vue    |  2 +-
 .../pages/settings/providers/openrouter.vue   |  2 +-
 .../src/pages/settings/themes/index.vue       |  2 +-
 6 files changed, 86 insertions(+), 12 deletions(-)

diff --git a/apps/stage-web/src/pages/settings/models/index.vue b/apps/stage-web/src/pages/settings/models/index.vue
index 808137511..3f5ac27ae 100644
--- a/apps/stage-web/src/pages/settings/models/index.vue
+++ b/apps/stage-web/src/pages/settings/models/index.vue
@@ -11,7 +11,7 @@ const router = useRouter()
     </button>
     <h1 relative>
       <div absolute left-0 top-0 translate-y="[-80%]">
-        <span text="neutral-300 dark:neutral-800">Settings</span>
+        <span text="neutral-300 dark:neutral-500">Settings</span>
       </div>
       <div text-3xl font-semibold>
         Models
diff --git a/apps/stage-web/src/pages/settings/modules/consciousness.vue b/apps/stage-web/src/pages/settings/modules/consciousness.vue
index 4dec93cf5..e62a858b6 100644
--- a/apps/stage-web/src/pages/settings/modules/consciousness.vue
+++ b/apps/stage-web/src/pages/settings/modules/consciousness.vue
@@ -7,25 +7,99 @@ const router = useRouter()
 <template>
   <div flex="~ row" items-center gap-2>
     <button @click="router.back()">
-      <div i-solar:alt-arrow-left-line-duotone text-2xl />
+      <div i-solar:alt-arrow-left-line-duotone text-xl />
     </button>
     <h1 relative>
       <div absolute left-0 top-0 translate-y="[-80%]">
-        <span text="neutral-300 dark:neutral-800">Modules</span>
+        <span text="neutral-300 dark:neutral-500">Modules</span>
       </div>
       <div text-3xl font-semibold>
         Consciousness
       </div>
     </h1>
   </div>
-  <div>
-    <div>
-      <span>Provider</span>
+  <div bg="neutral-100 dark:[rgba(0,0,0,0.3)]" rounded-xl p-4>
+    <div flex="~ col gap-4">
       <div>
-        <div>
-          <span>OpenAI</span>
+        <h2 text-2xl>
+          Provider
+        </h2>
+        <div text="neutral-400 dark:neutral-400">
+          <span>Select the suitable LLM provider for consciousness</span>
         </div>
       </div>
+      <div max-w-full>
+        <!--
+          fieldset has min-width set to --webkit-min-container, in order to use over flow scroll,
+          we need to set the min-width to 0.
+          See also: https://stackoverflow.com/a/33737340
+        -->
+        <fieldset flex="~ row gap-4" :style="{ 'scrollbar-width': 'none' }" min-w-0 of-x-scroll scroll-smooth>
+          <label
+            bg="neutral-200 dark:neutral-800"
+            flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
+          >
+            <input type="radio" name="provider" value="provider-1">
+            <div flex="~ col" min-h-16 w-full items-center justify-center>
+              Provider 1
+            </div>
+          </label>
+          <label
+            bg="neutral-200 dark:neutral-800"
+            flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
+          >
+            <input type="radio" name="provider" value="provider-1">
+            <div flex="~ col" min-h-16 w-full items-center justify-center>
+              Provider 1
+            </div>
+          </label>
+          <label
+            bg="neutral-200 dark:neutral-800"
+            flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
+          >
+            <input type="radio" name="provider" value="provider-1">
+            <div flex="~ col" min-h-16 w-full items-center justify-center>
+              Provider 1
+            </div>
+          </label>
+          <label
+            bg="neutral-200 dark:neutral-800"
+            flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
+          >
+            <input type="radio" name="provider" value="provider-1">
+            <div flex="~ col" min-h-16 w-full items-center justify-center>
+              Provider 1
+            </div>
+          </label>
+          <label
+            bg="neutral-200 dark:neutral-800"
+            flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
+          >
+            <input type="radio" name="provider" value="provider-1">
+            <div flex="~ col" min-h-16 w-full items-center justify-center>
+              Provider 1
+            </div>
+          </label>
+          <label
+            bg="neutral-200 dark:neutral-800"
+            flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
+          >
+            <input type="radio" name="provider" value="provider-1">
+            <div flex="~ col" min-h-16 w-full items-center justify-center>
+              Provider 1
+            </div>
+          </label>
+          <label
+            bg="neutral-200 dark:neutral-800"
+            flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
+          >
+            <input type="radio" name="provider" value="provider-1">
+            <div flex="~ col" min-h-16 w-full items-center justify-center>
+              Provider 1
+            </div>
+          </label>
+        </fieldset>
+      </div>
     </div>
   </div>
   <div fixed bottom-0 right-0 z--1 text="neutral-100/80 dark:neutral-500/20">
diff --git a/apps/stage-web/src/pages/settings/modules/index.vue b/apps/stage-web/src/pages/settings/modules/index.vue
index 337b16565..88bd215ec 100644
--- a/apps/stage-web/src/pages/settings/modules/index.vue
+++ b/apps/stage-web/src/pages/settings/modules/index.vue
@@ -100,7 +100,7 @@ const modulesList = computed<Module[]>(() => [
     </button>
     <h1 relative>
       <div absolute left-0 top-0 translate-y="[-80%]">
-        <span text="neutral-300 dark:neutral-800">Settings</span>
+        <span text="neutral-300 dark:neutral-500">Settings</span>
       </div>
       <div text-3xl font-semibold>
         Modules
diff --git a/apps/stage-web/src/pages/settings/providers/index.vue b/apps/stage-web/src/pages/settings/providers/index.vue
index 976217f82..2e87a1e64 100644
--- a/apps/stage-web/src/pages/settings/providers/index.vue
+++ b/apps/stage-web/src/pages/settings/providers/index.vue
@@ -118,7 +118,7 @@ const providersList = computed<ModelProvider[]>(() => [
     </button>
     <h1 relative>
       <div absolute left-0 top-0 translate-y="[-80%]">
-        <span text="neutral-300 dark:neutral-800">Settings</span>
+        <span text="neutral-300 dark:neutral-500">Settings</span>
       </div>
       <div text-3xl font-semibold>
         Providers
diff --git a/apps/stage-web/src/pages/settings/providers/openrouter.vue b/apps/stage-web/src/pages/settings/providers/openrouter.vue
index e1e2b42c6..83a3cee7d 100644
--- a/apps/stage-web/src/pages/settings/providers/openrouter.vue
+++ b/apps/stage-web/src/pages/settings/providers/openrouter.vue
@@ -39,7 +39,7 @@ watch([apiKey, baseUrl], () => {
     </button>
     <h1 relative>
       <div absolute left-0 top-0 translate-y="[-80%]">
-        <span text="neutral-300 dark:neutral-800">Provider</span>
+        <span text="neutral-300 dark:neutral-500">Provider</span>
       </div>
       <div text-3xl font-semibold>
         OpenRouter
diff --git a/apps/stage-web/src/pages/settings/themes/index.vue b/apps/stage-web/src/pages/settings/themes/index.vue
index 691d43896..63f083525 100644
--- a/apps/stage-web/src/pages/settings/themes/index.vue
+++ b/apps/stage-web/src/pages/settings/themes/index.vue
@@ -11,7 +11,7 @@ const router = useRouter()
     </button>
     <h1 relative>
       <div absolute left-0 top-0 translate-y="[-80%]">
-        <span text="neutral-300 dark:neutral-800">Settings</span>
+        <span text="neutral-300 dark:neutral-500">Settings</span>
       </div>
       <div text-3xl font-semibold>
         Themes