atmosphere explorer pds.ls
tool typescript atproto
434
fork

Configure Feed

Select the types of activity you want to include in your feed.

restyle plc log filter

Juliet a3c97a4b f0d45997

+48 -32
+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()}>