atmosphere explorer
pds.ls
tool
typescript
atproto
restyle plc log filter
+48
-32
+48
-32
src/views/repo/logs.tsx
+48
-32
src/views/repo/logs.tsx
···
14
14
15
15
type PlcEvent = "handle" | "rotation_key" | "service" | "verification_method";
16
16
17
+
const plcEventFilters: { event?: PlcEvent; icon: string; label: string }[] = [
18
+
{ icon: "lucide--list-filter", label: "All" },
19
+
{ event: "handle", icon: "lucide--at-sign", label: "Alias" },
20
+
{ event: "service", icon: "lucide--hard-drive", label: "Service" },
21
+
{ event: "verification_method", icon: "lucide--shield-check", label: "Verification" },
22
+
{ event: "rotation_key", icon: "lucide--key-round", label: "Rotation" },
23
+
];
24
+
17
25
export const PlcLogView = (props: { did: string }) => {
18
26
const location = useLocation();
19
27
const [activePlcEvent, setActivePlcEvent] = createSignal<PlcEvent | undefined>();
···
67
75
}
68
76
});
69
77
70
-
const FilterButton = (props: { event: PlcEvent; label: string }) => {
78
+
const FilterButton = (props: { event?: PlcEvent; icon: string; label: string }) => {
71
79
const isActive = () => activePlcEvent() === props.event;
72
80
const toggleFilter = () => setActivePlcEvent(isActive() ? undefined : props.event);
73
81
74
82
return (
75
83
<button
84
+
type="button"
85
+
aria-label={`${props.label} logs`}
86
+
aria-pressed={isActive()}
87
+
class="flex h-7 shrink-0 items-center rounded-md border text-xs font-medium transition-colors sm:w-auto sm:justify-start sm:gap-1 sm:px-2"
76
88
classList={{
77
-
"font-medium rounded-lg px-2 py-1.5 text-xs sm:text-sm transition-colors": true,
78
-
"bg-neutral-700 text-white dark:bg-neutral-300 dark:text-neutral-900": isActive(),
79
-
"bg-neutral-200 text-neutral-700 hover:bg-neutral-300 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600":
89
+
"w-auto justify-start gap-1 px-2": isActive(),
90
+
"w-7 justify-center px-0": !isActive(),
91
+
"border-neutral-300 bg-neutral-50 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200":
92
+
isActive(),
93
+
"border-transparent text-neutral-500 hover:bg-neutral-200 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-700/50 dark:hover:text-neutral-200":
80
94
!isActive(),
81
95
}}
82
96
onclick={toggleFilter}
83
97
>
84
-
{props.label}
98
+
<span class={`iconify ${props.icon}`} />
99
+
<span class={isActive() ? "inline" : "hidden sm:inline"}>{props.label}</span>
85
100
</button>
86
101
);
87
102
};
103
+
104
+
const ValidationStatus = () => (
105
+
<div class="mr-1.5 flex shrink-0 items-center justify-center text-sm">
106
+
<Show when={validLog() === true}>
107
+
<Tooltip text="Valid log">
108
+
<span class="iconify lucide--check text-green-600 dark:text-green-400"></span>
109
+
</Tooltip>
110
+
</Show>
111
+
<Show when={validLog() === false}>
112
+
<Tooltip text="Validation failed">
113
+
<span class="iconify lucide--x text-red-500 dark:text-red-400"></span>
114
+
</Tooltip>
115
+
</Show>
116
+
<Show when={validLog() === undefined}>
117
+
<Tooltip text="Validating...">
118
+
<span class="iconify lucide--loader-circle animate-spin text-neutral-500 dark:text-neutral-400"></span>
119
+
</Tooltip>
120
+
</Show>
121
+
</div>
122
+
);
88
123
89
124
const DiffItem = (props: { diff: DiffEntry }) => {
90
125
const diff = props.diff;
···
261
296
262
297
return (
263
298
<div class="flex w-full flex-col gap-3 wrap-anywhere">
264
-
<div class="flex flex-col gap-2">
265
-
<div class="flex items-center gap-1.5 text-sm font-medium text-neutral-700 dark:text-neutral-300">
266
-
<div class="iconify lucide--filter" />
267
-
<p>Filter by type</p>
268
-
<div class="mr-1.5 ml-auto">
269
-
<Show when={validLog() === true}>
270
-
<Tooltip text="Valid log">
271
-
<span class="iconify lucide--check text-green-600 dark:text-green-400"></span>
272
-
</Tooltip>
273
-
</Show>
274
-
<Show when={validLog() === false}>
275
-
<Tooltip text="Validation failed">
276
-
<span class="iconify lucide--x text-red-500 dark:text-red-400"></span>
277
-
</Tooltip>
278
-
</Show>
279
-
<Show when={validLog() === undefined}>
280
-
<Tooltip text="Validating...">
281
-
<span class="iconify lucide--loader-circle animate-spin"></span>
282
-
</Tooltip>
283
-
</Show>
284
-
</div>
299
+
<div class="flex items-center justify-between gap-2">
300
+
<div class="flex min-w-0 flex-1 items-center gap-1">
301
+
<For each={plcEventFilters}>
302
+
{(filter) => (
303
+
<FilterButton event={filter.event} icon={filter.icon} label={filter.label} />
304
+
)}
305
+
</For>
285
306
</div>
286
-
<div class="flex flex-wrap gap-1">
287
-
<FilterButton event="handle" label="Alias" />
288
-
<FilterButton event="service" label="Service" />
289
-
<FilterButton event="verification_method" label="Verification" />
290
-
<FilterButton event="rotation_key" label="Rotation Key" />
291
-
</div>
307
+
<ValidationStatus />
292
308
</div>
293
309
<div class="flex flex-col gap-3">
294
310
<For each={plcOps()}>