feat: code preview page add scroll to top button (#1686)

Author: btea

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

@@ -249,6 +249,14 @@ function copyPermalinkUrl() {
   copyPermalink(url.toString())
 }
 
+// Scroll to top of file content
+const contentContainer = useTemplateRef('contentContainer')
+function scrollToTop() {
+  if (contentContainer.value) {
+    contentContainer.value.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+}
+
 // Canonical URL for this code page
 const canonicalUrl = computed(() => `https://npmx.dev${getCodeUrl(route.params)}`)
 
@@ -410,6 +418,7 @@ defineOgImageComponent('Default', {
       <!-- File content / Directory listing - sticky with internal scroll on desktop -->
       <div
         class="flex-1 min-w-0 overflow-x-hidden sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
+        ref="contentContainer"
       >
         <!-- File viewer -->
         <template v-if="isViewingFile && fileContent">
@@ -449,6 +458,14 @@ defineOgImageComponent('Default', {
               </div>
             </div>
             <div class="flex items-center gap-2">
+              <button
+                type="button"
+                class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors items-center inline-flex gap-1"
+                @click="scrollToTop"
+              >
+                <span class="i-lucide:arrow-up w-3 h-3" />
+                {{ $t('code.scroll_to_top') }}
+              </button>
               <button
                 v-if="selectedLines"
                 type="button"

i18n/locales/en.json

@@ -711,7 +711,8 @@
       "preview": "preview",
       "code": "code"
     },
-    "file_path": "File path"
+    "file_path": "File path",
+    "scroll_to_top": "Scroll to top"
   },
   "badges": {
     "provenance": {

i18n/locales/zh-CN.json

@@ -700,7 +700,8 @@
       "preview": "预览",
       "code": "代码"
     },
-    "file_path": "文件路径"
+    "file_path": "文件路径",
+    "scroll_to_top": "滚动到顶部"
   },
   "badges": {
     "provenance": {

i18n/schema.json

@@ -2139,6 +2139,9 @@
         },
         "file_path": {
           "type": "string"
+        },
+        "scroll_to_top": {
+          "type": "string"
         }
       },
       "additionalProperties": false

lunaria/files/en-GB.json

@@ -710,7 +710,8 @@
       "preview": "preview",
       "code": "code"
     },
-    "file_path": "File path"
+    "file_path": "File path",
+    "scroll_to_top": "Scroll to top"
   },
   "badges": {
     "provenance": {

lunaria/files/en-US.json

@@ -710,7 +710,8 @@
       "preview": "preview",
       "code": "code"
     },
-    "file_path": "File path"
+    "file_path": "File path",
+    "scroll_to_top": "Scroll to top"
   },
   "badges": {
     "provenance": {

lunaria/files/zh-CN.json

@@ -699,7 +699,8 @@
       "preview": "预览",
       "code": "代码"
     },
-    "file_path": "文件路径"
+    "file_path": "文件路径",
+    "scroll_to_top": "滚动到顶部"
   },
   "badges": {
     "provenance": {