From 2c6fe93c7fb3d32cec676bfcc5f95b39690c2769 Mon Sep 17 00:00:00 2001
From: dvd233 <111864431+dvd233@users.noreply.github.com>
Date: Sat, 12 Sep 2026 23:21:34 +0800
Subject: [PATCH] fix(ui): sync organization view state with URL

---
 app/pages/org/[org].vue            | 216 +++++++++++++++++++++++++++--
 test/e2e/url-compatibility.spec.ts |  97 +++++++++++++
 2 files changed, 304 insertions(+), 9 deletions(-)

diff --git a/app/pages/org/[org].vue b/app/pages/org/[org].vue
index 47c2fa2fc9..415b896ebd 100644
--- a/app/pages/org/[org].vue
+++ b/app/pages/org/[org].vue
@@ -1,8 +1,77 @@
 <script setup lang="ts">
-import type { FilterChip, SortOption } from '#shared/types/preferences'
+import type {
+  ColumnConfig,
+  ColumnId,
+  DownloadRange,
+  FilterChip,
+  SearchScope,
+  SecurityFilter,
+  SortOption,
+  UpdatedWithin,
+} from '#shared/types/preferences'
+import {
+  DEFAULT_COLUMNS,
+  DOWNLOAD_RANGES,
+  SEARCH_SCOPE_VALUES,
+  SECURITY_FILTER_VALUES,
+  UPDATED_WITHIN_OPTIONS,
+} from '#shared/types/preferences'
 import { normalizeSearchParam } from '#shared/utils/url'
 import { debounce } from 'perfect-debounce'
 
+function useValidatedPermalink<T extends string>(
+  queryKey: string,
+  defaultValue: T,
+  allowedValues: readonly T[],
+) {
+  const permalink = usePermalink<T>(queryKey, defaultValue)
+  const value = computed(
+    () => allowedValues.find(allowedValue => allowedValue === permalink.value) ?? defaultValue,
+  )
+
+  watch(
+    permalink,
+    rawValue => {
+      if (rawValue !== value.value) {
+        permalink.value = value.value
+      }
+    },
+    { immediate: true },
+  )
+
+  return { permalink, value }
+}
+
+function parseColumns(value: unknown): ColumnConfig[] | undefined {
+  if (typeof value !== 'string' || !value) return undefined
+
+  const visibleIds = new Set(value.split(','))
+  const hasKnownColumn = DEFAULT_COLUMNS.some(
+    column => !column.disabled && visibleIds.has(column.id),
+  )
+  if (!hasKnownColumn) return undefined
+
+  return DEFAULT_COLUMNS.map(column => ({
+    ...column,
+    visible: column.id === 'name' || (!column.disabled && visibleIds.has(column.id)),
+  }))
+}
+
+function cloneColumns(columns: readonly ColumnConfig[]): ColumnConfig[] {
+  return columns.map(column => ({ ...column }))
+}
+
+function serializeColumns(columns: readonly ColumnConfig[]): string {
+  const visibleIds = new Set(
+    columns.filter(column => column.visible && !column.disabled).map(column => column.id),
+  )
+  visibleIds.add('name')
+
+  return DEFAULT_COLUMNS.filter(column => visibleIds.has(column.id))
+    .map(column => column.id)
+    .join(',')
+}
+
 definePageMeta({
   name: 'org',
   preserveScrollOnQuery: true,
@@ -39,8 +108,85 @@ const packages = computed(() => results.value?.objects ?? [])
 const packageCount = computed(() => packages.value.length)
 
 // Preferences (persisted to localStorage)
-const { viewMode, paginationMode, pageSize, columns, toggleColumn, resetColumns } =
-  usePackageListPreferences()
+const {
+  viewMode,
+  paginationMode,
+  pageSize,
+  columns: savedColumns,
+  resetColumns: resetSavedColumns,
+} = usePackageListPreferences()
+
+const defaultColumnsParam = serializeColumns(DEFAULT_COLUMNS)
+const columnsPermalink = usePermalink<string>('columns', '')
+const urlColumns = computed(() => parseColumns(columnsPermalink.value))
+const columns = computed(() => urlColumns.value ?? savedColumns.value)
+
+function columnsParamValue(value: readonly ColumnConfig[]): string {
+  const serialized = serializeColumns(value)
+  return serialized === defaultColumnsParam ? '' : serialized
+}
+
+watch(
+  columnsPermalink,
+  rawValue => {
+    const parsedColumns = parseColumns(rawValue)
+    const normalizedValue = parsedColumns ? serializeColumns(parsedColumns) : ''
+    if (rawValue !== normalizedValue) {
+      columnsPermalink.value = normalizedValue
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  savedColumns,
+  value => {
+    if (!urlColumns.value) {
+      columnsPermalink.value = columnsParamValue(value)
+    }
+  },
+  { deep: true },
+)
+
+function updateColumns(nextColumns: ColumnConfig[]) {
+  savedColumns.value = cloneColumns(nextColumns)
+  columnsPermalink.value = columnsParamValue(nextColumns)
+}
+
+function toggleVisibleColumn(columnId: ColumnId) {
+  const nextColumns = cloneColumns(columns.value)
+  const targetColumn = nextColumns.find(column => column.id === columnId)
+  if (targetColumn && !targetColumn.disabled && targetColumn.id !== 'name') {
+    targetColumn.visible = !targetColumn.visible
+  }
+  updateColumns(nextColumns)
+}
+
+function resetVisibleColumns() {
+  resetSavedColumns()
+  columnsPermalink.value = ''
+}
+
+const { permalink: searchScopePermalink, value: searchScope } = useValidatedPermalink(
+  'search',
+  'name' satisfies SearchScope,
+  SEARCH_SCOPE_VALUES,
+)
+const { permalink: downloadRangePermalink, value: downloadRange } = useValidatedPermalink(
+  'downloadRange',
+  'any' satisfies DownloadRange,
+  DOWNLOAD_RANGES.map(range => range.value),
+)
+const { permalink: securityPermalink, value: security } = useValidatedPermalink(
+  'security',
+  'all' satisfies SecurityFilter,
+  SECURITY_FILTER_VALUES,
+)
+const { permalink: updatedWithinPermalink, value: updatedWithin } = useValidatedPermalink(
+  'updatedWithin',
+  'any' satisfies UpdatedWithin,
+  UPDATED_WITHIN_OPTIONS.map(option => option.value),
+)
 
 // Structured filters and sorting
 const {
@@ -61,8 +207,40 @@ const {
 } = useStructuredFilters({
   packages,
   initialSort: (normalizeSearchParam(route.query.sort) as SortOption) ?? DEFAULT_SORT,
+  initialFilters: {
+    searchScope: searchScope.value,
+    downloadRange: downloadRange.value,
+    security: security.value,
+    updatedWithin: updatedWithin.value,
+  },
 })
 
+watch(
+  [searchScope, downloadRange, security, updatedWithin] as const,
+  ([newSearchScope, newDownloadRange, newSecurity, newUpdatedWithin]) => {
+    if (filters.value.searchScope !== newSearchScope) setSearchScope(newSearchScope)
+    if (filters.value.downloadRange !== newDownloadRange) setDownloadRange(newDownloadRange)
+    if (filters.value.security !== newSecurity) setSecurity(newSecurity)
+    if (filters.value.updatedWithin !== newUpdatedWithin) setUpdatedWithin(newUpdatedWithin)
+  },
+  { immediate: true },
+)
+
+watch(
+  [
+    () => filters.value.searchScope,
+    () => filters.value.downloadRange,
+    () => filters.value.security,
+    () => filters.value.updatedWithin,
+  ] as const,
+  ([newSearchScope, newDownloadRange, newSecurity, newUpdatedWithin]) => {
+    searchScopePermalink.value = newSearchScope
+    downloadRangePermalink.value = newDownloadRange
+    securityPermalink.value = newSecurity
+    updatedWithinPermalink.value = newUpdatedWithin
+  },
+)
+
 // Pagination state
 const currentPage = shallowRef(1)
 
@@ -71,6 +249,26 @@ const totalPages = computed(() => {
   return Math.ceil(sortedPackages.value.length / pageSize.value)
 })
 
+function updateSearchScope(value: SearchScope) {
+  searchScopePermalink.value = value
+  setSearchScope(value)
+}
+
+function updateDownloadRange(value: DownloadRange) {
+  downloadRangePermalink.value = value
+  setDownloadRange(value)
+}
+
+function updateSecurity(value: SecurityFilter) {
+  securityPermalink.value = value
+  setSecurity(value)
+}
+
+function updateUpdatedWithin(value: UpdatedWithin) {
+  updatedWithinPermalink.value = value
+  setUpdatedWithin(value)
+}
+
 // Reset to page 1 when filters change
 watch([filters, sortOption], () => {
   currentPage.value = 1
@@ -305,16 +503,16 @@ defineOgImage(
         :filtered-count="filteredCount"
         :available-keywords="availableKeywords"
         :active-filters="activeFilters"
-        @toggle-column="toggleColumn"
-        @reset-columns="resetColumns"
+        @toggle-column="toggleVisibleColumn"
+        @reset-columns="resetVisibleColumns"
         @clear-filter="handleClearFilter"
         @clear-all-filters="clearAllFilters"
         @update:text="setTextFilter"
         @toggle-selection="openSelectionView"
-        @update:search-scope="setSearchScope"
-        @update:download-range="setDownloadRange"
-        @update:security="setSecurity"
-        @update:updated-within="setUpdatedWithin"
+        @update:search-scope="updateSearchScope"
+        @update:download-range="updateDownloadRange"
+        @update:security="updateSecurity"
+        @update:updated-within="updateUpdatedWithin"
         @toggle-keyword="toggleKeyword"
       />
 
diff --git a/test/e2e/url-compatibility.spec.ts b/test/e2e/url-compatibility.spec.ts
index bfb0cd3a26..7cd9a4c644 100644
--- a/test/e2e/url-compatibility.spec.ts
+++ b/test/e2e/url-compatibility.spec.ts
@@ -129,6 +129,103 @@ test.describe('npmjs.com URL Compatibility', () => {
       await expect(page.getByRole('heading', { name: 'Packages' })).toBeVisible()
     })
 
+    test('restores shareable filters and columns from the URL', async ({ page, goto }) => {
+      await goto(
+        '/org/nuxt?q=framework&search=description&downloadRange=10k-100k&security=warnings&updatedWithin=quarter&columns=name,version,maintainers',
+        { waitUntil: 'hydration' },
+      )
+
+      await page.getByRole('button', { name: 'Filters' }).click()
+      await expect(page.getByRole('button', { name: 'Description' })).toHaveAttribute(
+        'aria-pressed',
+        'true',
+      )
+      await expect(page.getByRole('textbox', { name: 'Search' })).toHaveValue('framework')
+      await expect(page.getByRole('radio', { name: '10K - 100K' })).toBeChecked()
+      await expect(page.getByRole('radio', { name: 'With warnings' })).toBeChecked()
+      await expect(page.getByRole('radio', { name: 'Past 3 months' })).toBeChecked()
+
+      await page.getByRole('button', { name: 'Table view' }).click()
+      await page.getByRole('button', { name: 'Columns' }).click()
+      await expect(page.getByRole('checkbox', { name: 'Version' })).toBeChecked()
+      await expect(page.getByRole('checkbox', { name: 'Description' })).not.toBeChecked()
+      await expect(page.getByRole('checkbox', { name: 'Maintainers' })).toBeChecked()
+    })
+
+    test('writes organization filters and columns to the URL', async ({ page, goto }) => {
+      await goto('/org/nuxt', { waitUntil: 'hydration' })
+
+      await page.getByRole('button', { name: 'Filters' }).click()
+      await page.getByRole('button', { name: 'Description' }).click()
+      await page.getByRole('textbox', { name: 'Search' }).fill('grammar')
+      await page.getByText('10K - 100K', { exact: true }).click()
+      await page.getByText('Past 3 months', { exact: true }).click()
+
+      await expect
+        .poll(() => {
+          const query = new URL(page.url()).searchParams
+          return {
+            q: query.get('q'),
+            search: query.get('search'),
+            downloadRange: query.get('downloadRange'),
+            updatedWithin: query.get('updatedWithin'),
+          }
+        })
+        .toEqual({
+          q: 'grammar',
+          search: 'description',
+          downloadRange: '10k-100k',
+          updatedWithin: 'quarter',
+        })
+
+      await page.getByRole('button', { name: 'Table view' }).click()
+      await page.getByRole('button', { name: 'Columns' }).click()
+      await page.getByRole('checkbox', { name: 'Maintainers' }).check()
+      await page.getByRole('checkbox', { name: 'Description' }).uncheck()
+
+      const expectedColumns = 'name,version,downloads,updated,maintainers'
+      await expect.poll(() => new URL(page.url()).searchParams.get('columns')).toBe(expectedColumns)
+
+      await goto('/org/nuxt', { waitUntil: 'hydration' })
+      await expect.poll(() => new URL(page.url()).searchParams.get('columns')).toBe(expectedColumns)
+      await page.getByRole('button', { name: 'Columns' }).click()
+      await expect(page.getByRole('checkbox', { name: 'Maintainers' })).toBeChecked()
+      await expect(page.getByRole('checkbox', { name: 'Description' })).not.toBeChecked()
+
+      const defaultColumns = 'name,version,description,downloads,updated'
+      await goto(`/org/nuxt?columns=${defaultColumns}`, { waitUntil: 'hydration' })
+      await expect.poll(() => new URL(page.url()).searchParams.get('columns')).toBe(defaultColumns)
+      await page.getByRole('button', { name: 'Columns' }).click()
+      await expect(page.getByRole('checkbox', { name: 'Description' })).toBeChecked()
+      await expect(page.getByRole('checkbox', { name: 'Maintainers' })).not.toBeChecked()
+    })
+
+    test('falls back from invalid organization view parameters', async ({ page, goto }) => {
+      await goto(
+        '/org/nuxt?search=invalid&downloadRange=invalid&security=invalid&updatedWithin=invalid&columns=invalid',
+        { waitUntil: 'hydration' },
+      )
+
+      await expect
+        .poll(() => {
+          const query = new URL(page.url()).searchParams
+          return {
+            search: query.get('search'),
+            downloadRange: query.get('downloadRange'),
+            security: query.get('security'),
+            updatedWithin: query.get('updatedWithin'),
+            columns: query.get('columns'),
+          }
+        })
+        .toEqual({
+          search: null,
+          downloadRange: null,
+          security: null,
+          updatedWithin: null,
+          columns: null,
+        })
+    })
+
     test('/org/nonexistent-org-12345 → 404 handling', async ({ page, goto }) => {
       await goto('/org/nonexistent-org-12345', { waitUntil: 'domcontentloaded' })