chore: simplify and always keep tagline

Author: danielroe

app/components/InstantSearch.vue

@@ -7,37 +7,48 @@ onPrehydrate(el => {
   const settingsSaved = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
   const enabled = settingsSaved.instantSearch
   if (enabled === false) {
-    el.classList.add('hidden')
+    el.querySelector('[data-instant-search-on]')!.className = 'hidden'
+    el.querySelector('[data-instant-search-off]')!.className = ''
   }
 })
 </script>
 
 <template>
-  <p
-    id="instant-search-advisory"
-    class="text-fg-muted text-sm text-pretty"
-    :class="settings.instantSearch ? '' : 'hidden'"
-  >
+  <p id="instant-search-advisory" class="text-fg-muted text-sm text-pretty">
     <span
       class="i-lucide:zap align-middle text-fg relative top-[-0.1em] me-1"
       style="font-size: 0.8em"
       aria-hidden="true"
-    ></span>
-    <i18n-t keypath="search.instant_search_advisory">
-      <template #label>
-        <strong>{{ $t('search.instant_search') }}</strong>
-      </template>
-      <template #settings>
-        <LinkBase to="/settings">{{ $t('settings.title') }}</LinkBase>
-      </template>
-      <template #shortcut>
-        <kbd class="text-xs"
-          ><kbd class="text-fg bg-bg-muted border border-border px-1 py-[2px] rounded-sm">Ctrl</kbd
-          >+<kbd class="text-fg bg-bg-muted border border-border px-1 py-[2px] rounded-sm"
-            >/</kbd
-          ></kbd
-        >
-      </template>
-    </i18n-t>
+    />
+    <span data-instant-search-on :class="settings.instantSearch ? '' : 'hidden'">
+      <i18n-t keypath="search.instant_search_advisory">
+        <template #label>
+          {{ $t('search.instant_search') }}
+        </template>
+        <template #state>
+          <strong>{{ $t('search.instant_search_on') }}</strong>
+        </template>
+        <template #action>
+          <button type="button" class="underline" @click="settings.instantSearch = false">
+            {{ $t('search.instant_search_turn_off') }}
+          </button>
+        </template>
+      </i18n-t>
+    </span>
+    <span data-instant-search-off :class="settings.instantSearch ? 'hidden' : ''">
+      <i18n-t keypath="search.instant_search_advisory">
+        <template #label>
+          {{ $t('search.instant_search') }}
+        </template>
+        <template #state>
+          <strong>{{ $t('search.instant_search_off') }}</strong>
+        </template>
+        <template #action>
+          <button type="button" class="underline" @click="settings.instantSearch = true">
+            {{ $t('search.instant_search_turn_on') }}
+          </button>
+        </template>
+      </i18n-t>
+    </span>
   </p>
 </template>

app/pages/index.vue

@@ -89,7 +89,7 @@ defineOgImageComponent('Default', {
                   no-correct
                   size="large"
                   class="w-full ps-8 pe-24"
-                  :aria-describedby="settings.instantSearch ? 'instant-search-advisory' : undefined"
+                  aria-describedby="instant-search-advisory"
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"
                 />

i18n/locales/en.json

@@ -66,7 +66,11 @@
       "view_org_packages": "View packages by this organization"
     },
     "instant_search": "Instant search",
-    "instant_search_advisory": "{label}: navigate to results as you type. Turn off in {settings} or press {shortcut}."
+    "instant_search_on": "on",
+    "instant_search_off": "off",
+    "instant_search_turn_on": "turn on",
+    "instant_search_turn_off": "turn off",
+    "instant_search_advisory": "{label} {state} — {action}"
   },
   "nav": {
     "main_navigation": "Main",

i18n/schema.json

@@ -202,6 +202,18 @@
         "instant_search": {
           "type": "string"
         },
+        "instant_search_on": {
+          "type": "string"
+        },
+        "instant_search_off": {
+          "type": "string"
+        },
+        "instant_search_turn_on": {
+          "type": "string"
+        },
+        "instant_search_turn_off": {
+          "type": "string"
+        },
         "instant_search_advisory": {
           "type": "string"
         }