Skip to content

Commit e0140f8

Browse files
samwillissamwillis
committed
wip
1 parent cddceff commit e0140f8

File tree

9 files changed

+121
-74
lines changed

9 files changed

+121
-74
lines changed

‎packages/db-collections/src/electric.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -424,6 +424,7 @@ export function electricCollectionOptions<
424424
utils: {
425425
awaitTxId,
426426
},
427+
collectionType: `electric` as const,
427428
}
428429
}
429430

‎packages/db-collections/src/local-only.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,7 @@ export function localOnlyCollectionOptions<
211211
utils: {} as LocalOnlyCollectionUtils,
212212
startSync: true,
213213
gcTime: 0,
214+
collectionType: `local-only` as const,
214215
}
215216
}
216217

‎packages/db-collections/src/local-storage.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -432,6 +432,7 @@ export function localStorageCollectionOptions<
432432
clearStorage,
433433
getStorageSize,
434434
},
435+
collectionType: `local-storage` as const,
435436
}
436437
}
437438

‎packages/db-collections/src/query.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,10 @@ export function queryCollectionOptions<
232232
TQueryKey extends QueryKey = QueryKey,
233233
>(
234234
config: QueryCollectionConfig<TItem, TError, TQueryKey>
235-
): CollectionConfig<TItem> & { utils: QueryCollectionUtils } {
235+
): CollectionConfig<TItem> & {
236+
utils: QueryCollectionUtils
237+
collectionType: `query`
238+
} {
236239
const {
237240
queryKey,
238241
queryFn,
@@ -446,5 +449,6 @@ export function queryCollectionOptions<
446449
utils: {
447450
refetch,
448451
},
452+
collectionType: `query` as const,
449453
}
450454
}

‎packages/db-devtools/src/components/CollectionsPanel.tsx‎

Lines changed: 103 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,84 @@ export function CollectionsPanel({
2626
})
2727

2828
// Group collections by type
29-
const standardCollections = createMemo(() =>
30-
sortedCollections().filter((c) => c.type === `collection`)
31-
)
29+
const groupedCollections = createMemo(() => {
30+
const groups: Record<string, Array<CollectionMetadata>> = {
31+
"live-query": [],
32+
electric: [],
33+
query: [],
34+
"local-only": [],
35+
"local-storage": [],
36+
generic: [],
37+
}
3238

33-
const liveCollections = createMemo(() =>
34-
sortedCollections().filter((c) => c.type === `live-query`)
35-
)
39+
sortedCollections().forEach((collection) => {
40+
const type = collection.type
41+
const targetGroup = (groups as any)[type] || groups[`generic`]
42+
targetGroup.push(collection)
43+
})
44+
45+
// Sort collections within each group alphabetically
46+
Object.keys(groups).forEach((key) => {
47+
const group = groups[key]
48+
if (group) {
49+
group.sort((a, b) =>
50+
a.id.toLowerCase().localeCompare(b.id.toLowerCase())
51+
)
52+
}
53+
})
54+
55+
return groups
56+
})
57+
58+
const getGroupDisplayName = (type: string): string => {
59+
switch (type) {
60+
case `live-query`:
61+
return `Live Queries`
62+
case `electric`:
63+
return `Electric Collections`
64+
case `query`:
65+
return `Query Collections`
66+
case `local-only`:
67+
return `Local-Only Collections`
68+
case `local-storage`:
69+
return `Local Storage Collections`
70+
case `generic`:
71+
return `Generic Collections`
72+
default:
73+
return `${type.charAt(0).toUpperCase() + type.slice(1)} Collections`
74+
}
75+
}
76+
77+
const getGroupStats = (type: string): Array<string> => {
78+
switch (type) {
79+
case `live-query`:
80+
return [`Items`, `/`, `GC`, `/`, `Status`]
81+
case `electric`:
82+
return [`Items`, `/`, `Txn`, `/`, `GC`, `/`, `Status`]
83+
case `query`:
84+
return [`Items`, `/`, `Txn`, `/`, `GC`, `/`, `Status`]
85+
case `local-only`:
86+
return [`Items`, `/`, `Txn`, `/`, `GC`, `/`, `Status`]
87+
case `local-storage`:
88+
return [`Items`, `/`, `Txn`, `/`, `GC`, `/`, `Status`]
89+
case `generic`:
90+
return [`Items`, `/`, `Txn`, `/`, `GC`, `/`, `Status`]
91+
default:
92+
return [`Items`, `/`, `Txn`, `/`, `GC`, `/`, `Status`]
93+
}
94+
}
95+
96+
// Get sorted group entries with live-query first, then alphabetical
97+
const sortedGroupEntries = createMemo(() => {
98+
const entries = Object.entries(groupedCollections())
99+
return entries.sort(([a], [b]) => {
100+
// Live-query always comes first
101+
if (a === `live-query`) return -1
102+
if (b === `live-query`) return 1
103+
// Others are sorted alphabetically
104+
return a.localeCompare(b)
105+
})
106+
})
36107

37108
return (
38109
<div class={styles().collectionsExplorer}>
@@ -45,57 +116,33 @@ export function CollectionsPanel({
45116
</div>
46117
}
47118
>
48-
{/* Standard Collections */}
49-
<Show when={standardCollections().length > 0}>
50-
<div class={styles().collectionGroup}>
51-
<div class={styles().collectionGroupHeader}>
52-
<div>Standard Collections ({standardCollections().length})</div>
53-
<div class={styles().collectionGroupStats}>
54-
<span>Items</span>
55-
<span>/</span>
56-
<span>Txn</span>
57-
<span>/</span>
58-
<span>GC</span>
59-
<span>/</span>
60-
<span>Status</span>
61-
</div>
62-
</div>
63-
<For each={standardCollections()}>
64-
{(collection) => (
65-
<CollectionItem
66-
collection={collection}
67-
isActive={() => collection.id === activeCollectionId()}
68-
onSelect={onSelectCollection}
69-
/>
70-
)}
71-
</For>
72-
</div>
73-
</Show>
74-
75-
{/* Live Collections */}
76-
<Show when={liveCollections().length > 0}>
77-
<div class={styles().collectionGroup}>
78-
<div class={styles().collectionGroupHeader}>
79-
<div>Live Collections ({liveCollections().length})</div>
80-
<div class={styles().collectionGroupStats}>
81-
<span>Items</span>
82-
<span>/</span>
83-
<span>GC</span>
84-
<span>/</span>
85-
<span>Status</span>
119+
<For each={sortedGroupEntries()}>
120+
{([type, collections]) => (
121+
<Show when={collections.length > 0}>
122+
<div class={styles().collectionGroup}>
123+
<div class={styles().collectionGroupHeader}>
124+
<div>
125+
{getGroupDisplayName(type)} ({collections.length})
126+
</div>
127+
<div class={styles().collectionGroupStats}>
128+
<For each={getGroupStats(type)}>
129+
{(stat) => <span>{stat}</span>}
130+
</For>
131+
</div>
132+
</div>
133+
<For each={collections}>
134+
{(collection) => (
135+
<CollectionItem
136+
collection={collection}
137+
isActive={() => collection.id === activeCollectionId()}
138+
onSelect={onSelectCollection}
139+
/>
140+
)}
141+
</For>
86142
</div>
87-
</div>
88-
<For each={liveCollections()}>
89-
{(collection) => (
90-
<CollectionItem
91-
collection={collection}
92-
isActive={() => collection.id === activeCollectionId()}
93-
onSelect={onSelectCollection}
94-
/>
95-
)}
96-
</For>
97-
</div>
98-
</Show>
143+
</Show>
144+
)}
145+
</For>
99146
</Show>
100147
</div>
101148
</div>

‎packages/db-devtools/src/registry.ts‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -237,21 +237,14 @@ class DbDevtoolsRegistryImpl implements DbDevtoolsRegistry {
237237
}, POLLING_INTERVAL_MS)
238238
}
239239

240-
private detectCollectionType = (
241-
collection: any
242-
): `collection` | `live-query` => {
243-
// Check the devtools type marker first
244-
if (collection.config.__devtoolsType) {
245-
return collection.config.__devtoolsType
240+
private detectCollectionType = (collection: any): string => {
241+
// Check the new collection type marker first
242+
if (collection.config.collectionType) {
243+
return collection.config.collectionType
246244
}
247245

248-
// Check if the collection ID suggests it's a live query
249-
if (collection.id.startsWith(`live-query-`)) {
250-
return `live-query`
251-
}
252-
253-
// Default to regular collection
254-
return `collection`
246+
// Default to generic collection
247+
return `generic`
255248
}
256249

257250
private isLiveQuery = (collection: any): boolean => {

‎packages/db-devtools/src/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export interface DbDevtoolsConfig {
4848

4949
export interface CollectionMetadata {
5050
id: string
51-
type: `collection` | `live-query`
51+
type: string
5252
status: CollectionStatus
5353
size: number
5454
hasTransactions: boolean

‎packages/db/src/query/live-query-collection.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -340,7 +340,7 @@ export function liveQueryCollectionOptions<
340340
onDelete: config.onDelete,
341341
startSync: config.startSync,
342342
// Mark as live query for devtools
343-
__devtoolsType: `live-query` as const,
343+
collectionType: `live-query` as const,
344344
}
345345
}
346346

‎packages/db/src/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -331,10 +331,10 @@ export interface CollectionConfig<
331331
*/
332332
compare?: (x: T, y: T) => number
333333
/**
334-
* Internal field used by devtools to identify collection type
334+
* Collection type for devtools grouping and identification
335335
* @internal
336336
*/
337-
__devtoolsType?: `live-query` | `collection`
337+
collectionType?: string
338338
/**
339339
* Optional asynchronous handler function called before an insert operation
340340
* @param params Object containing transaction and collection information

0 commit comments

Comments
 (0)