+15
-15
src/components/navbar.tsx
+15
-15
src/components/navbar.tsx
···
22
22
});
23
23
24
24
return (
25
25
-
<nav class="flex w-full flex-col px-2 text-sm wrap-anywhere">
25
25
+
<nav class="flex w-full flex-col px-2 wrap-anywhere">
26
26
<div class="relative flex items-center justify-between gap-1">
27
27
-
<div class="flex min-h-[1.25rem] basis-full items-center gap-2">
27
27
+
<div class="flex min-h-[1.5rem] basis-full items-center gap-2">
28
28
<Tooltip text="PDS">
29
29
-
<span class="iconify lucide--hard-drive shrink-0 text-base"></span>
29
29
+
<span class="iconify lucide--hard-drive shrink-0"></span>
30
30
</Tooltip>
31
31
<Show when={pds()}>
32
32
<Show when={props.params.repo} fallback={<span>{pds()}</span>}>
···
43
43
<Show when={props.params.repo}>
44
44
<MenuProvider>
45
45
<DropdownMenu
46
46
-
icon="lucide--copy text-base"
47
47
-
buttonClass="rounded p-0.5"
46
46
+
icon="lucide--copy"
47
47
+
buttonClass="rounded p-1"
48
48
menuClass="top-6 p-2 text-xs"
49
49
>
50
50
<Show when={pds()}>
···
61
61
</div>
62
62
<div class="flex flex-col flex-wrap">
63
63
<Show when={props.params.repo}>
64
64
-
<div class="relative mt-1 flex items-center justify-between gap-1">
64
64
+
<div class="relative flex items-center justify-between gap-1">
65
65
<div class="flex basis-full items-center gap-2">
66
66
<Tooltip text="Repository">
67
67
-
<span class="iconify lucide--book-user text-base"></span>
67
67
+
<span class="iconify lucide--book-user"></span>
68
68
</Tooltip>
69
69
{props.params.collection || location.pathname.includes("/labels") ?
70
70
<A
···
78
78
</div>
79
79
<Tooltip text={showHandle() ? "Show DID" : "Show handle"}>
80
80
<button
81
81
-
class="flex items-center rounded p-0.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
81
81
+
class="flex items-center rounded p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
82
82
onclick={() => {
83
83
localStorage.showHandle = !showHandle();
84
84
setShowHandle(!showHandle());
85
85
}}
86
86
>
87
87
<span
88
88
-
class={`iconify shrink-0 text-base transition-transform duration-400 ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`}
88
88
+
class={`iconify shrink-0 transition-transform duration-400 ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`}
89
89
></span>
90
90
</button>
91
91
</Tooltip>
···
97
97
(props.params.repo in labelerCache || location.pathname.endsWith("/labels"))
98
98
}
99
99
>
100
100
-
<div class="mt-1 flex items-center gap-2">
101
101
-
<span class="iconify lucide--tag text-base"></span>
100
100
+
<div class="flex items-center gap-2">
101
101
+
<span class="iconify lucide--tag"></span>
102
102
<A
103
103
end
104
104
href={`/at://${props.params.repo}/labels`}
···
109
109
</div>
110
110
</Show>
111
111
<Show when={props.params.collection}>
112
112
-
<div class="mt-1 flex items-center gap-2">
112
112
+
<div class="flex items-center gap-2">
113
113
<Tooltip text="Collection">
114
114
-
<span class="iconify lucide--folder-open text-base"></span>
114
114
+
<span class="iconify lucide--folder-open"></span>
115
115
</Tooltip>
116
116
<Show when={props.params.rkey} fallback={<span>{props.params.collection}</span>}>
117
117
<A
···
125
125
</div>
126
126
</Show>
127
127
<Show when={props.params.rkey}>
128
128
-
<div class="mt-1 flex items-center gap-2">
128
128
+
<div class="flex items-center gap-2">
129
129
<Tooltip text="Record">
130
130
-
<span class="iconify lucide--file-json text-base"></span>
130
130
+
<span class="iconify lucide--file-json"></span>
131
131
</Tooltip>
132
132
<span>{props.params.rkey}</span>
133
133
</div>