fix: disable all autocompletes on inputs

Author: danielroe

app/components/ConnectorModal.vue

@@ -162,8 +162,7 @@ watch(open, isOpen => {
                     type="password"
                     name="connector-token"
                     :placeholder="$t('connector.modal.token_placeholder')"
-                    autocomplete="off"
-                    spellcheck="false"
+                    v-bind="noCorrect"
                     class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                   />
                 </div>

app/components/OrgMembersPanel.vue

@@ -327,7 +327,7 @@ watch(lastExecutionTime, () => {
           type="search"
           name="members-search"
           :placeholder="$t('org.members.filter_placeholder')"
-          autocomplete="off"
+          v-bind="noCorrect"
           class="w-full pl-7 pr-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         />
       </div>
@@ -512,8 +512,7 @@ watch(lastExecutionTime, () => {
             type="text"
             name="new-member-username"
             :placeholder="$t('org.members.username_placeholder')"
-            autocomplete="off"
-            spellcheck="false"
+            v-bind="noCorrect"
             class="w-full px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
           />
           <div class="flex items-center gap-2">

app/components/OrgTeamsPanel.vue

@@ -296,7 +296,7 @@ watch(lastExecutionTime, () => {
           type="search"
           name="teams-search"
           :placeholder="$t('org.teams.filter_placeholder')"
-          autocomplete="off"
+          v-bind="noCorrect"
           class="w-full pl-7 pr-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         />
       </div>
@@ -453,8 +453,7 @@ watch(lastExecutionTime, () => {
                 type="text"
                 :name="`add-user-${teamName}`"
                 :placeholder="$t('org.teams.username_placeholder')"
-                autocomplete="off"
-                spellcheck="false"
+                v-bind="noCorrect"
                 class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
               />
               <button
@@ -510,8 +509,7 @@ watch(lastExecutionTime, () => {
               type="text"
               name="new-team-name"
               :placeholder="$t('org.teams.team_name_placeholder')"
-              autocomplete="off"
-              spellcheck="false"
+              v-bind="noCorrect"
               class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded-r text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
             />
           </div>

app/components/PackageListControls.vue

@@ -66,7 +66,7 @@ const showFilteredCount = computed(() => {
         v-model="filterValue"
         type="search"
         :placeholder="placeholder ?? $t('package.list.filter_placeholder')"
-        autocomplete="off"
+        v-bind="noCorrect"
         class="w-full bg-bg-subtle border border-border rounded-lg pl-10 pr-4 py-2 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:(border-border-hover outline-none)"
       />
     </div>

app/components/PackageMaintainers.vue

@@ -227,8 +227,7 @@ watch(
             type="text"
             name="add-owner-username"
             :placeholder="$t('package.maintainers.username_placeholder')"
-            autocomplete="off"
-            spellcheck="false"
+            v-bind="noCorrect"
             class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
           />
           <button

app/components/UserCombobox.vue

@@ -145,8 +145,7 @@ const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
       type="text"
       :placeholder="placeholder ?? $t('user.combobox.default_placeholder')"
       :disabled="disabled"
-      autocomplete="off"
-      spellcheck="false"
+      v-bind="noCorrect"
       role="combobox"
       aria-autocomplete="list"
       :aria-expanded="isOpen && (filteredSuggestions.length > 0 || showNewUserHint)"

app/pages/index.vue

@@ -66,7 +66,7 @@ defineOgImageComponent('Default')
                 type="search"
                 name="q"
                 :placeholder="$t('search.placeholder')"
-                autocomplete="off"
+                v-bind="noCorrect"
                 autofocus
                 class="w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-all duration-300 focus:(border-accent outline-none)"
                 @input="handleSearch"

app/pages/search.vue

@@ -729,10 +729,7 @@ defineOgImageComponent('Default', {
                   type="search"
                   name="q"
                   :placeholder="$t('search.placeholder')"
-                  autocapitalize="off"
-                  autocomplete="off"
-                  autocorrect="off"
-                  spellcheck="false"
+                  v-bind="noCorrect"
                   class="w-full max-w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-10 py-3 font-mono text-base text-fg placeholder:text-fg-subtle transition-colors duration-300 focus:border-accent focus-visible:outline-none appearance-none"
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"

app/utils/input.ts

@@ -0,0 +1,6 @@
+export const noCorrect = {
+  autocapitalize: 'off',
+  autocomplete: 'off',
+  autocorrect: 'off',
+  spellcheck: 'false',
+} as const