From 7e079bd94fb61a142e8203ba283206e40265fbd9 Mon Sep 17 00:00:00 2001
From: kalu5 <451660550@qq.com>
Date: Sat, 7 Feb 2026 22:29:03 +0800
Subject: [PATCH 1/2] feat: use default cursor for non-link items

---
 app/assets/main.css                           | 12 +++++++++++-
 app/components/ColumnPicker.vue               |  6 +-----
 app/components/DependencyPathPopup.vue        |  2 +-
 app/components/Header/AuthModal.client.vue    |  2 +-
 app/components/Header/ConnectorModal.vue      |  4 +---
 app/components/Org/OperationsQueue.vue        |  2 +-
 app/components/Package/ClaimPackageModal.vue  |  2 +-
 app/components/Package/ListControls.vue       |  2 +-
 app/components/Package/ListToolbar.vue        |  2 +-
 app/components/Package/ManagerSelect.vue      |  2 +-
 app/components/Package/Table.vue              |  7 +++----
 app/components/PaginationControls.vue         |  2 +-
 app/components/Settings/AccentColorPicker.vue |  4 ++--
 app/components/Settings/BgThemePicker.vue     |  2 +-
 app/components/Settings/Toggle.client.vue     |  2 +-
 app/components/Tag/RadioButton.vue            |  2 +-
 app/components/UserCombobox.vue               |  2 +-
 app/components/VersionSelector.vue            |  2 +-
 app/pages/settings.vue                        |  4 ++--
 19 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 2ed934ff8..e1d57bfbd 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -202,7 +202,17 @@ dd {
 
 /* Reset button styles */
 button {
-  cursor: pointer;
+  background: transparent;
+  border: none;
+  font: inherit;
+  padding: 0;
+}
+
+button:focus-visible,
+select:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
 }
 
 /* Selection */
diff --git a/app/components/ColumnPicker.vue b/app/components/ColumnPicker.vue
index e254b77b3..4624c6ca6 100644
--- a/app/components/ColumnPicker.vue
+++ b/app/components/ColumnPicker.vue
@@ -102,11 +102,7 @@ function handleReset() {
               v-for="column in toggleableColumns"
               :key="column.id"
               class="flex gap-2 items-center px-3 py-2 transition-colors duration-200"
-              :class="
-                column.disabled
-                  ? 'opacity-50 cursor-not-allowed'
-                  : 'hover:bg-bg-muted cursor-pointer'
-              "
+              :class="column.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-bg-muted'"
             >
               <input
                 type="checkbox"
diff --git a/app/components/DependencyPathPopup.vue b/app/components/DependencyPathPopup.vue
index 780637286..d4a7b089e 100644
--- a/app/components/DependencyPathPopup.vue
+++ b/app/components/DependencyPathPopup.vue
@@ -68,7 +68,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
     <!-- Path badge button -->
     <button
       type="button"
-      class="path-badge font-mono text-[10px] px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400 cursor-pointer transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
+      class="path-badge font-mono text-[10px] px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400 transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
       :aria-expanded="isOpen"
       @click.stop="togglePopup"
     >
diff --git a/app/components/Header/AuthModal.client.vue b/app/components/Header/AuthModal.client.vue
index d12a8e528..68b02fb77 100644
--- a/app/components/Header/AuthModal.client.vue
+++ b/app/components/Header/AuthModal.client.vue
@@ -85,7 +85,7 @@ watch(handleInput, newHandleInput => {
 
         <details class="text-sm">
           <summary
-            class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200 focus-visible:(outline-2 outline-accent/70)"
+            class="text-fg-subtle hover:text-fg-muted transition-colors duration-200 focus-visible:(outline-2 outline-accent/70)"
           >
             {{ $t('auth.modal.what_is_atmosphere') }}
           </summary>
diff --git a/app/components/Header/ConnectorModal.vue b/app/components/Header/ConnectorModal.vue
index b5b30218c..0519f05a7 100644
--- a/app/components/Header/ConnectorModal.vue
+++ b/app/components/Header/ConnectorModal.vue
@@ -173,9 +173,7 @@ function handleDisconnect() {
         </div>
 
         <details class="text-sm">
-          <summary
-            class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
-          >
+          <summary class="text-fg-subtle hover:text-fg-muted transition-colors duration-200">
             {{ $t('connector.modal.advanced') }}
           </summary>
           <div class="mt-3">
diff --git a/app/components/Org/OperationsQueue.vue b/app/components/Org/OperationsQueue.vue
index 6d3732058..79eb2bd17 100644
--- a/app/components/Org/OperationsQueue.vue
+++ b/app/components/Org/OperationsQueue.vue
@@ -292,7 +292,7 @@ watch(isExecuting, executing => {
     <!-- Completed operations log (collapsed by default) -->
     <details v-if="hasCompletedOperations" class="mt-4 border-t border-border pt-4">
       <summary
-        class="flex items-center gap-2 font-mono text-xs text-fg-muted cursor-pointer hover:text-fg transition-colors duration-200 select-none"
+        class="flex items-center gap-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 select-none"
       >
         <span
           class="i-carbon:chevron-right rtl-flip w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"
diff --git a/app/components/Package/ClaimPackageModal.vue b/app/components/Package/ClaimPackageModal.vue
index bf4771214..536163e30 100644
--- a/app/components/Package/ClaimPackageModal.vue
+++ b/app/components/Package/ClaimPackageModal.vue
@@ -344,7 +344,7 @@ const previewPackageJson = computed(() => {
           <!-- Expandable package.json preview -->
           <details class="border border-border rounded-md overflow-hidden">
             <summary
-              class="px-3 py-2 text-sm text-fg-muted bg-bg-subtle cursor-pointer hover:text-fg transition-colors select-none"
+              class="px-3 py-2 text-sm text-fg-muted bg-bg-subtle hover:text-fg transition-colors select-none"
             >
               {{ $t('claim.modal.preview_json') }}
             </summary>
diff --git a/app/components/Package/ListControls.vue b/app/components/Package/ListControls.vue
index 1b31f318b..d635f52f2 100644
--- a/app/components/Package/ListControls.vue
+++ b/app/components/Package/ListControls.vue
@@ -78,7 +78,7 @@ const showFilteredCount = computed(() => {
         <select
           id="package-sort"
           v-model="sortValue"
-          class="appearance-none bg-bg-subtle border border-border rounded-lg ps-3 pe-8 py-2 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
+          class="appearance-none bg-bg-subtle border border-border rounded-lg ps-3 pe-8 py-2 font-mono text-sm text-fg transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
         >
           <option v-for="option in sortOptions" :key="option.value" :value="option.value">
             {{ option.label }}
diff --git a/app/components/Package/ListToolbar.vue b/app/components/Package/ListToolbar.vue
index 811e42996..4cfce109f 100644
--- a/app/components/Package/ListToolbar.vue
+++ b/app/components/Package/ListToolbar.vue
@@ -160,7 +160,7 @@ function getSortKeyLabelKey(key: SortKey): string {
             <select
               id="sort-select"
               :value="currentSort.key"
-              class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1.5 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover"
+              class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1.5 font-mono text-sm text-fg transition-colors duration-200 hover:border-border-hover"
               @change="handleSortKeyChange"
             >
               <option
diff --git a/app/components/Package/ManagerSelect.vue b/app/components/Package/ManagerSelect.vue
index 34203cd35..eb7eb5ff5 100644
--- a/app/components/Package/ManagerSelect.vue
+++ b/app/components/Package/ManagerSelect.vue
@@ -150,7 +150,7 @@ function handleKeydown(event: KeyboardEvent) {
           :key="pm.id"
           role="option"
           :aria-selected="selectedPM === pm.id"
-          class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs cursor-pointer transition-colors duration-150"
+          class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs transition-colors duration-150"
           :class="[
             selectedPM === pm.id ? 'text-fg' : 'text-fg-subtle',
             highlightedIndex === index ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
diff --git a/app/components/Package/Table.vue b/app/components/Package/Table.vue
index f8068cb15..96561f10c 100644
--- a/app/components/Package/Table.vue
+++ b/app/components/Package/Table.vue
@@ -117,7 +117,7 @@ function getColumnLabelKey(id: ColumnId): string {
             scope="col"
             class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
             :class="{
-              'cursor-pointer hover:text-fg transition-colors duration-200': isSortable('name'),
+              'hover:text-fg transition-colors duration-200': isSortable('name'),
             }"
             :aria-sort="
               isColumnSorted('name')
@@ -167,8 +167,7 @@ function getColumnLabelKey(id: ColumnId): string {
             scope="col"
             class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
             :class="{
-              'cursor-pointer hover:text-fg transition-colors duration-200':
-                isSortable('downloads'),
+              'hover:text-fg transition-colors duration-200': isSortable('downloads'),
             }"
             :aria-sort="
               isColumnSorted('downloads')
@@ -202,7 +201,7 @@ function getColumnLabelKey(id: ColumnId): string {
             scope="col"
             class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
             :class="{
-              'cursor-pointer hover:text-fg transition-colors duration-200': isSortable('updated'),
+              'hover:text-fg transition-colors duration-200': isSortable('updated'),
             }"
             :aria-sort="
               isColumnSorted('updated')
diff --git a/app/components/PaginationControls.vue b/app/components/PaginationControls.vue
index 9ff2df70b..a42c5952c 100644
--- a/app/components/PaginationControls.vue
+++ b/app/components/PaginationControls.vue
@@ -153,7 +153,7 @@ function handlePageSizeChange(event: Event) {
         <select
           id="page-size"
           :value="pageSize"
-          class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover"
+          class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1 font-mono text-sm text-fg transition-colors duration-200 hover:border-border-hover"
           @change="handlePageSizeChange"
         >
           <option v-for="size in PAGE_SIZE_OPTIONS" :key="size" :value="size">
diff --git a/app/components/Settings/AccentColorPicker.vue b/app/components/Settings/AccentColorPicker.vue
index ad650442a..786d1587c 100644
--- a/app/components/Settings/AccentColorPicker.vue
+++ b/app/components/Settings/AccentColorPicker.vue
@@ -23,7 +23,7 @@ onPrehydrate(el => {
     <label
       v-for="color in accentColors"
       :key="color.id"
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
       :style="{ backgroundColor: color.value }"
     >
       <input
@@ -37,7 +37,7 @@ onPrehydrate(el => {
       />
     </label>
     <label
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-fg"
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-fg"
     >
       <input
         type="radio"
diff --git a/app/components/Settings/BgThemePicker.vue b/app/components/Settings/BgThemePicker.vue
index fa7bd90e6..e09e2fdf2 100644
--- a/app/components/Settings/BgThemePicker.vue
+++ b/app/components/Settings/BgThemePicker.vue
@@ -21,7 +21,7 @@ onPrehydrate(el => {
     <label
       v-for="theme in backgroundThemes"
       :key="theme.id"
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
       :style="{ backgroundColor: theme.value }"
     >
       <input
diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 4a5905e1e..9510e735c 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -23,7 +23,7 @@ const checked = defineModel<boolean>({
       {{ label }}
     </span>
     <span
-      class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer group-focus-visible:(outline-accent/70 outline-offset-2 outline-solid)"
+      class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none group-focus-visible:(outline-accent/70 outline-offset-2 outline-solid)"
       :class="
         checked
           ? 'bg-accent border-accent group-hover:bg-accent/80'
diff --git a/app/components/Tag/RadioButton.vue b/app/components/Tag/RadioButton.vue
index 05b58ba64..aa3778cbd 100644
--- a/app/components/Tag/RadioButton.vue
+++ b/app/components/Tag/RadioButton.vue
@@ -36,7 +36,7 @@ const onChange = () => {
       class="peer sr-only"
     />
     <label
-      class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 peer-focus-visible:(outline-2 outline-accent/70 outline-offset-2) border-none cursor-pointer peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none)"
+      class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 peer-focus-visible:(outline-2 outline-accent/70 outline-offset-2) border-none peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none)"
       :htmlFor="internalId"
     >
       <slot />
diff --git a/app/components/UserCombobox.vue b/app/components/UserCombobox.vue
index 21fc35366..b2875d72d 100644
--- a/app/components/UserCombobox.vue
+++ b/app/components/UserCombobox.vue
@@ -185,7 +185,7 @@ const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
           :key="username"
           role="option"
           :aria-selected="highlightedIndex === index"
-          class="px-2 py-1 font-mono text-sm cursor-pointer transition-colors duration-100"
+          class="px-2 py-1 font-mono text-sm transition-colors duration-100"
           :class="
             highlightedIndex === index
               ? 'bg-bg-muted text-fg'
diff --git a/app/components/VersionSelector.vue b/app/components/VersionSelector.vue
index 5e4c2afc4..ee9ccbc8a 100644
--- a/app/components/VersionSelector.vue
+++ b/app/components/VersionSelector.vue
@@ -520,7 +520,7 @@ watch(
               flatItems[focusedIndex]?.groupId === group.id &&
               flatItems[focusedIndex]?.type === 'group'
             "
-            class="flex items-center gap-2 px-3 py-2 text-sm font-mono hover:bg-bg-muted transition-[color,background-color] focus-visible:outline-none cursor-pointer"
+            class="flex items-center gap-2 px-3 py-2 text-sm font-mono hover:bg-bg-muted transition-[color,background-color] focus-visible:outline-none"
             :class="[
               group.primaryVersion.isCurrent ? 'text-fg bg-bg-muted' : 'text-fg-muted',
               flatItems[focusedIndex]?.groupId === group.id &&
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 33e76be99..470ddfb2c 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -79,7 +79,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
               <select
                 id="theme-select"
                 :value="colorMode.preference"
-                class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
+                class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg duration-200 transition-colors hover:border-fg-subtle"
                 @change="
                   colorMode.preference = ($event.target as HTMLSelectElement).value as
                     | 'light'
@@ -162,7 +162,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                 <select
                   id="language-select"
                   :value="locale"
-                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-accent/70 cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
+                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-accent/70 duration-200 transition-colors hover:border-fg-subtle"
                   @change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
                 >
                   <option v-for="loc in locales" :key="loc.code" :value="loc.code" :lang="loc.code">

From 3eadd9463d4472cb0f1fdbd316da744d8c48cb9a Mon Sep 17 00:00:00 2001
From: Jialong Lu <48578099+kalu5@users.noreply.github.com>
Date: Sun, 8 Feb 2026 21:23:07 +0800
Subject: [PATCH 2/2] remove button styles

Removed custom button styles from main.css.
---
 app/assets/main.css | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 37684e86a..0e46a37b8 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -236,21 +236,6 @@ dd {
   margin: 0;
 }
 
-/* Reset button styles */
-button {
-  background: transparent;
-  border: none;
-  font: inherit;
-  padding: 0;
-}
-
-button:focus-visible,
-select:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: 4px;
-}
-
 /* Selection */
 ::selection {
   background-color: var(--fg-muted);