davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1/**
2 * Manages view mode, columns, and pagination preferences for package lists
3 */
4import type {
5 ColumnConfig,
6 ColumnId,
7 PackageListPreferences,
8 PageSize,
9 PaginationMode,
10 ViewMode,
11} from '#shared/types/preferences'
12import { DEFAULT_COLUMNS, DEFAULT_PREFERENCES } from '#shared/types/preferences'
13
14/**
15 * Composable for managing package list display preferences
16 * Persists to localStorage and provides reactive state
17 *
18 */
19export function usePackageListPreferences() {
20 const {
21 data: preferences,
22 isHydrated,
23 save,
24 reset,
25 } = usePreferencesProvider<PackageListPreferences>(DEFAULT_PREFERENCES)
26
27 // Computed accessors for common properties
28 const viewMode = computed({
29 get: () => preferences.value.viewMode,
30 set: (value: ViewMode) => {
31 preferences.value.viewMode = value
32 save()
33 },
34 })
35
36 const paginationMode = computed({
37 get: () => preferences.value.paginationMode,
38 set: (value: PaginationMode) => {
39 preferences.value.paginationMode = value
40 save()
41 },
42 })
43
44 const pageSize = computed({
45 get: () => preferences.value.pageSize,
46 set: (value: PageSize) => {
47 preferences.value.pageSize = value
48 save()
49 },
50 })
51
52 const columns = computed({
53 get: () => preferences.value.columns,
54 set: (value: ColumnConfig[]) => {
55 preferences.value.columns = value
56 save()
57 },
58 })
59
60 // Get visible columns only
61 const visibleColumns = computed(() => columns.value.filter(col => col.visible))
62
63 // Column visibility helpers
64 function setColumnVisibility(columnId: ColumnId, visible: boolean) {
65 const column = columns.value.find(col => col.id === columnId)
66 if (column) {
67 column.visible = visible
68 save()
69 }
70 }
71
72 function toggleColumn(columnId: ColumnId) {
73 const column = columns.value.find(col => col.id === columnId)
74 if (column) {
75 column.visible = !column.visible
76 save()
77 }
78 }
79
80 function resetColumns() {
81 preferences.value.columns = DEFAULT_COLUMNS.map(col => Object.assign({}, col))
82 save()
83 }
84
85 // Check if column is visible
86 function isColumnVisible(columnId: ColumnId) {
87 return columns.value.find(col => col.id === columnId)?.visible ?? false
88 }
89
90 return {
91 // Raw preferences
92 preferences,
93 isHydrated,
94
95 // Individual properties with setters
96 viewMode,
97 paginationMode,
98 pageSize,
99 columns,
100 visibleColumns,
101
102 // Column helpers
103 setColumnVisibility,
104 toggleColumn,
105 resetColumns,
106 isColumnVisible,
107
108 // Reset all
109 reset,
110 }
111}