From d00a9f22d9ec06a5baca678add443734512fc5bb Mon Sep 17 00:00:00 2001
From: Glary-Bot <glary-bot@users.noreply.github.com>
Date: Mon, 4 May 2026 16:34:54 +0000
Subject: [PATCH] feat(website): default cloud-nodes sort to most-installed

Adds a 'Most installed' sort option (downloads desc) and uses it as
the default. The packs in the snapshot already carry registry-served
download counts so the index now leads with what the community uses
most. Custom-styled chevron with extra right-padding (pr-12) so the
text never crowds the dropdown indicator.
---
 .../cloud-nodes/PackGridSection.vue           | 19 +++++++++++++++----
 apps/website/src/i18n/translations.ts         |  4 ++++
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/website/src/components/cloud-nodes/PackGridSection.vue b/apps/website/src/components/cloud-nodes/PackGridSection.vue
index 89cebbdcee..e2b4d82268 100644
--- a/apps/website/src/components/cloud-nodes/PackGridSection.vue
+++ b/apps/website/src/components/cloud-nodes/PackGridSection.vue
@@ -10,7 +10,7 @@ import { t } from '../../i18n/translations'
 import SectionLabel from '../common/SectionLabel.vue'
 import PackCard from './PackCard.vue'
 
-type SortMode = 'mostNodes' | 'az' | 'recentlyUpdated'
+type SortMode = 'downloads' | 'mostNodes' | 'az' | 'recentlyUpdated'
 
 const { locale = 'en', packs } = defineProps<{
   locale?: Locale
@@ -18,7 +18,7 @@ const { locale = 'en', packs } = defineProps<{
 }>()
 
 const query = defineModel<string>('query', { default: '' })
-const sortMode = ref<SortMode>('mostNodes')
+const sortMode = ref<SortMode>('downloads')
 
 const filteredPacks = computed(() => {
   const normalizedQuery = query.value.trim().toLowerCase()
@@ -49,7 +49,11 @@ const filteredPacks = computed(() => {
     })
   }
 
-  return matching.sort((a, b) => b.nodes.length - a.nodes.length)
+  if (sortMode.value === 'mostNodes') {
+    return matching.sort((a, b) => b.nodes.length - a.nodes.length)
+  }
+
+  return matching.sort((a, b) => (b.downloads ?? 0) - (a.downloads ?? 0))
 })
 </script>
 
@@ -91,8 +95,15 @@ const filteredPacks = computed(() => {
         <select
           id="cloud-nodes-sort"
           v-model="sortMode"
-          class="bg-transparency-white-t5 border-primary-warm-gray/30 text-primary-comfy-canvas w-full rounded-2xl border py-3 pl-4 pr-10 text-sm md:w-64"
+          class="bg-transparency-white-t5 border-primary-warm-gray/30 text-primary-comfy-canvas w-full appearance-none rounded-2xl border bg-[length:0.65rem_0.65rem] bg-[right_1rem_center] bg-no-repeat py-3 pl-4 pr-12 text-sm md:w-64"
+          :style="{
+            backgroundImage:
+              'url(\'data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 12%22 fill=%22%23a39b8d%22><path d=%22M6 9.2L1.4 4.6 2.8 3.2 6 6.4l3.2-3.2 1.4 1.4z%22/></svg>\')'
+          }"
         >
+          <option value="downloads">
+            {{ t('cloudNodes.sort.downloads', locale) }}
+          </option>
           <option value="mostNodes">
             {{ t('cloudNodes.sort.mostNodes', locale) }}
           </option>
diff --git a/apps/website/src/i18n/translations.ts b/apps/website/src/i18n/translations.ts
index bd6e547133..c38ee408b0 100644
--- a/apps/website/src/i18n/translations.ts
+++ b/apps/website/src/i18n/translations.ts
@@ -756,6 +756,10 @@ const translations = {
     en: 'Search packs or nodes',
     'zh-CN': '搜索节点包或节点名称'
   },
+  'cloudNodes.sort.downloads': {
+    en: 'Most installed',
+    'zh-CN': '按安装量'
+  },
   'cloudNodes.sort.mostNodes': {
     en: 'Most nodes',
     'zh-CN': '按节点数量'