feat: Allows easy access to provider configuration for all modules (#673)

Author: Iro96

nix/pnpm-deps-hash.txt

@@ -1 +1 @@
-sha256-jeFlOFr5uFWxv205J6ayNV1UMXHUKeiM7l7RRazaVBo=
+sha256-Jktf4LrG8N3aUr1eRyRUkPEd7q5FgyTbuMfv4vtHKXc=

packages/stage-pages/src/pages/settings/modules/hearing.vue

@@ -247,6 +247,23 @@ onUnmounted(() => {
                 :title="metadata.localizedName || 'Unknown'"
                 :description="metadata.localizedDescription"
               />
+            <RouterLink
+              to="/settings/providers#transcription"
+              border="2px solid"
+              class="bg-white dark:bg-neutral-900/20 border-neutral-100 dark:border-neutral-900 hover:border-primary-500/30 dark:hover:border-primary-400/30"
+              rounded-xl p-4
+              flex="~ col items-center justify-center"
+              min-w-50 w-fit
+              transition="all duration-200 ease-in-out"
+              relative
+            >
+              <div i-solar:add-circle-line-duotone class="text-2xl text-neutral-500 dark:text-neutral-500" />
+              <div
+                class="bg-dotted-neutral-200/80 dark:bg-dotted-neutral-700/50"
+                absolute inset-0 z--1
+                style="background-size: 10px 10px; mask-image: linear-gradient(165deg, white 30%, transparent 50%);"
+              />
+            </RouterLink>
             </fieldset>
             <div v-else>
               <RouterLink

packages/stage-pages/src/pages/settings/modules/speech.vue

@@ -198,6 +198,23 @@ function updateCustomModelName(value: string) {
                 :title="metadata.localizedName || 'Unknown'"
                 :description="metadata.localizedDescription"
               />
+            <RouterLink
+              to="/settings/providers#speech"
+              border="2px solid"
+              class="bg-white dark:bg-neutral-900/20 border-neutral-100 dark:border-neutral-900 hover:border-primary-500/30 dark:hover:border-primary-400/30"
+              rounded-xl p-4
+              flex="~ col items-center justify-center"
+              min-w-50 w-fit
+              transition="all duration-200 ease-in-out"
+              relative
+            >
+              <div i-solar:add-circle-line-duotone class="text-2xl text-neutral-500 dark:text-neutral-500" />
+              <div
+                class="bg-dotted-neutral-200/80 dark:bg-dotted-neutral-700/50"
+                absolute inset-0 z--1
+                style="background-size: 10px 10px; mask-image: linear-gradient(165deg, white 30%, transparent 50%);"
+              />
+            </RouterLink>
             </fieldset>
             <div v-else>
               <RouterLink

packages/stage-pages/src/pages/settings/providers/index.vue

@@ -25,7 +25,7 @@ const {
       </div>
     </div>
     <div flex="~ row items-center gap-2">
-      <div i-solar:chat-square-like-bold-duotone text="neutral-500 dark:neutral-400 4xl" />
+      <div i-solar:chat-square-like-bold-duotone text="neutral-500 dark:neutral-400 4xl" id="chat"/>
       <div>
         <div>
           <span text="neutral-300 dark:neutral-500 sm sm:base">Text generation model providers. e.g. OpenRouter, OpenAI, Ollama.</span>
@@ -56,7 +56,7 @@ const {
       />
     </div>
     <div flex="~ row items-center gap-2" my-5>
-      <div i-solar:user-speak-rounded-bold-duotone text="neutral-500 dark:neutral-400 4xl" />
+      <div i-solar:user-speak-rounded-bold-duotone text="neutral-500 dark:neutral-400 4xl" id="speech"/>
       <div>
         <div>
           <span text="neutral-300 dark:neutral-500 sm sm:base">Speech (text-to-speech) model providers. e.g. ElevenLabs, Azure Speech.</span>
@@ -87,7 +87,7 @@ const {
       />
     </div>
     <div flex="~ row items-center gap-2" my-5>
-      <div i-solar:microphone-3-bold-duotone text="neutral-500 dark:neutral-400 4xl" />
+      <div i-solar:microphone-3-bold-duotone text="neutral-500 dark:neutral-400 4xl" id="transcription"/>
       <div>
         <div>
           <span text="neutral-300 dark:neutral-500 sm sm:base">Transcription (speech-to-text) model providers. e.g. Whisper.cpp, OpenAI, Azure Speech</span>