atmosphere explorer
pds.ls
tool
typescript
atproto
collapse nested objects/arrays in record preview
+34
-15
+1
src/components/hover-card/record.tsx
+1
src/components/hover-card/record.tsx
+25
-14
src/components/json.tsx
+25
-14
src/components/json.tsx
···
29
29
hideBlobs?: boolean;
30
30
keyLinks?: boolean;
31
31
path?: string;
32
+
preview?: boolean;
32
33
}
33
34
34
35
const JSONCtx = createContext<JSONContext>();
···
161
162
}) => {
162
163
const ctx = useJSONCtx();
163
164
const location = useLocation();
164
-
const [show, setShow] = createSignal(true);
165
+
const isObject = () => props.value === Object(props.value);
166
+
const isEmpty = () =>
167
+
Array.isArray(props.value) ?
168
+
(props.value as JSONType[]).length === 0
169
+
: Object.keys(props.value as object).length === 0;
170
+
const [show, setShow] = createSignal(!(ctx.preview && isObject() && !isEmpty()));
165
171
const isBlobContext = props.parentIsBlob ?? ctx.parentIsBlob;
166
172
167
173
const labelStr = () => {
···
181
187
}
182
188
});
183
189
184
-
const isObject = () => props.value === Object(props.value);
185
-
const isEmpty = () =>
186
-
Array.isArray(props.value) ?
187
-
(props.value as JSONType[]).length === 0
188
-
: Object.keys(props.value as object).length === 0;
189
190
const summary = () => {
190
191
if (Array.isArray(props.value)) {
191
192
const len = (props.value as JSONType[]).length;
···
245
246
<Show when={!show() && summary()}>
246
247
<button
247
248
type="button"
248
-
class="flex items-center gap-0.5 rounded bg-neutral-200 px-1 text-xs whitespace-nowrap text-neutral-500 hover:bg-neutral-300 hover:text-neutral-700 sm:py-0.5 dark:bg-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-600 dark:hover:text-neutral-200"
249
+
classList={{
250
+
"flex items-center gap-0.5 rounded px-1 text-xs whitespace-nowrap text-neutral-500 sm:py-0.5 dark:text-neutral-400": true,
251
+
"bg-neutral-200 hover:bg-neutral-300 hover:text-neutral-700 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:hover:text-neutral-200":
252
+
!ctx.preview,
253
+
}}
249
254
onclick={() => setShow(true)}
250
255
>
251
-
<span class="iconify lucide--chevron-right"></span>
256
+
<Show when={!ctx.preview}>
257
+
<span class="iconify lucide--chevron-right"></span>
258
+
</Show>
252
259
{summary()}
253
260
</button>
254
261
</Show>
···
269
276
</span>
270
277
</Show>
271
278
<JSONCtx.Provider value={{ ...ctx, parentIsBlob: isBlobContext, path: fullPath() }}>
272
-
<JSONValueInner
273
-
data={props.value}
274
-
isType={props.isType}
275
-
isLink={props.isLink}
276
-
isSize={props.isSize}
277
-
/>
279
+
<Show when={!ctx.preview || show()}>
280
+
<JSONValueInner
281
+
data={props.value}
282
+
isType={props.isType}
283
+
isLink={props.isLink}
284
+
isSize={props.isSize}
285
+
/>
286
+
</Show>
278
287
</JSONCtx.Provider>
279
288
</span>
280
289
</span>
···
464
473
newTab?: boolean;
465
474
hideBlobs?: boolean;
466
475
keyLinks?: boolean;
476
+
preview?: boolean;
467
477
}) => {
468
478
return (
469
479
<JSONCtx.Provider
···
474
484
newTab: props.newTab,
475
485
hideBlobs: props.hideBlobs,
476
486
keyLinks: props.keyLinks,
487
+
preview: props.preview,
477
488
}}
478
489
>
479
490
<JSONValueInner data={props.data} />
+7
-1
src/views/car/explore.tsx
+7
-1
src/views/car/explore.tsx