feat: add word wrap toggle to code viewer (#2027)

Author: thegreatalxx

app/components/Code/Viewer.vue

@@ -3,6 +3,7 @@ const props = defineProps<{
   html: string
   lines: number
   selectedLines: { start: number; end: number } | null
+  wordWrap?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -113,9 +114,9 @@ watch(
     </div>
 
     <!-- Code content -->
-    <div class="code-content flex-1 overflow-x-auto min-w-0">
+    <div class="code-content flex-1 min-w-0" :class="wordWrap ? 'overflow-x-hidden' : 'overflow-x-auto'">
       <!-- eslint-disable vue/no-v-html -- HTML is generated server-side by Shiki -->
-      <div ref="codeRef" class="code-lines min-w-full w-fit" v-html="html" />
+      <div ref="codeRef" class="code-lines min-w-full w-fit" :class="{ 'word-wrap': wordWrap }" v-html="html" />
       <!-- eslint-enable vue/no-v-html -->
     </div>
   </div>
@@ -155,6 +156,21 @@ watch(
   transition: background-color 0.1s;
 }
 
+.code-content.word-wrap-active :deep(.line),
+.code-content:has(.word-wrap) :deep(.line) {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  max-height: none;
+  overflow: visible;
+}
+
+.code-lines.word-wrap :deep(.line) {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  max-height: none;
+  overflow: visible;
+}
+
 /* Highlighted lines in code content - extend full width with negative margin */
 .code-content :deep(.line.highlighted) {
   @apply bg-yellow-500/20;

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

@@ -267,6 +267,8 @@ const markdownViewModes = [
 
 const markdownViewMode = shallowRef<(typeof markdownViewModes)[number]['key']>('preview')
 
+const wordWrap = shallowRef(false)
+
 const bytesFormatter = useBytesFormatter()
 
 // Keep latestVersion for comparison (to show "(latest)" badge)
@@ -416,6 +418,17 @@ defineOgImageComponent('Default', {
             </nav>
           </div>
           <div class="flex items-center gap-2" v-if="isViewingFile && !isBinaryFile && fileContent">
+            <button
+              type="button"
+              class="px-2 py-1 font-mono text-xs border rounded transition-colors inline-flex items-center gap-1"
+              :class="wordWrap ? 'bg-accent/10 text-accent border-accent/30' : 'text-fg-muted bg-bg-subtle border-border hover:text-fg hover:border-border-hover'"
+              :aria-pressed="wordWrap"
+              :title="$t('code.toggle_word_wrap')"
+              @click="wordWrap = !wordWrap"
+            >
+              <span class="i-lucide:wrap-text w-3 h-3" aria-hidden="true" />
+              {{ $t('code.toggle_word_wrap') }}
+            </button>
             <button
               v-if="selectedLines"
               type="button"
@@ -462,6 +475,7 @@ defineOgImageComponent('Default', {
             :html="fileContent.html"
             :lines="fileContent.lines"
             :selected-lines="selectedLines"
+            :word-wrap="wordWrap"
             @line-click="handleLineClick"
           />
           <div class="sticky bottom-0 bg-bg border-t border-border px-4 py-1">

i18n/locales/en.json

@@ -19,7 +19,10 @@
     "social": "social",
     "chat": "chat",
     "builders_chat": "builders",
-    "keyboard_shortcuts": "keyboard shortcuts"
+    "keyboard_shortcuts": "keyboard shortcuts",
+    "product": "Product",
+    "legal": "Legal",
+    "community": "Community"
   },
   "shortcuts": {
     "section": {
@@ -207,6 +210,8 @@
       "members": "members"
     },
     "scroll_to_top": "Scroll to top",
+    "previous": "Previous",
+    "next": "Next",
     "cancel": "Cancel",
     "save": "Save",
     "edit": "Edit",
@@ -318,7 +323,8 @@
       "docs": "docs",
       "fund": "fund",
       "compare": "compare",
-      "compare_this_package": "compare this package"
+      "compare_this_package": "compare this package",
+      "dependents": "dependents"
     },
     "likes": {
       "like": "Like this package",
@@ -352,6 +358,13 @@
       "title": "Run",
       "locally": "Run locally"
     },
+    "dependents": {
+      "title": "Dependents",
+      "subtitle": "Packages that depend on {name}",
+      "count": "{count} dependent | {count} dependents",
+      "none": "No packages found that depend on {name}",
+      "error": "Failed to load dependents"
+    },
     "readme": {
       "title": "Readme",
       "no_readme": "No README available.",
@@ -454,7 +467,8 @@
       "outdated_minor": "{count} minor version behind (latest: {latest}) | {count} minor versions behind (latest: {latest})",
       "outdated_patch": "Patch update available (latest: {latest})",
       "has_replacement": "This dependency has suggested replacements",
-      "vulnerabilities_count": "{count} vulnerability | {count} vulnerabilities"
+      "vulnerabilities_count": "{count} vulnerability | {count} vulnerabilities",
+      "none": "No dependencies"
     },
     "peer_dependencies": {
       "title": "Peer Dependency ({count}) | Peer Dependencies ({count})",
@@ -564,7 +578,9 @@
     },
     "license": {
       "view_spdx": "View license text on SPDX",
-      "none": "None"
+      "none": "None",
+      "changed_badge": "changed",
+      "changed": "License changed from {latest} in the latest version"
     },
     "vulnerabilities": {
       "tree_found": "{vulns} vulnerability in {packages}/{total} packages | {vulns} vulnerabilities in {packages}/{total} packages",
@@ -840,7 +856,8 @@
     },
     "file_path": "File path",
     "binary_file": "Binary file",
-    "binary_rendering_warning": "File type \"{contentType}\" is not supported for preview."
+    "binary_rendering_warning": "File type \"{contentType}\" is not supported for preview.",
+    "toggle_word_wrap": "Word wrap"
   },
   "badges": {
     "provenance": {