retr0.id
forked from
pds.ls/pdsls
atproto explorer
fix navbar
verified
This commit was signed with the committer's known signature.
SSH Key Fingerprint:
SHA256:mBrT4x0JdzLpbVR95g1hjI1aaErfC02kmLRkPXwsYCk=
src
components
+57
-47
src/components/navbar.tsx
+57
-47
src/components/navbar.tsx
···
1
import { A, Params, useLocation } from "@solidjs/router";
2
import { createEffect, createSignal, Show } from "solid-js";
0
3
import { didDocCache, labelerCache } from "../utils/api";
4
import { addToClipboard } from "../utils/copy";
5
import Tooltip from "./tooltip";
6
7
export const [pds, setPDS] = createSignal<string>();
8
9
-
const CopyButton = (props: { content: string }) => {
10
return (
11
-
<button
12
-
type="button"
13
-
onclick={(e) => {
14
-
e.preventDefault();
15
-
e.stopPropagation();
16
-
addToClipboard(props.content);
17
-
}}
18
-
class={`-mr-2 hidden items-center rounded px-2 py-1.5 text-neutral-500 transition-all duration-200 group-hover:flex hover:bg-neutral-200/70 hover:text-neutral-600 active:bg-neutral-300/70 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-300 dark:active:bg-neutral-600/70`}
19
-
aria-label="Copy to clipboard"
20
-
>
21
-
<span class="iconify lucide--link"></span>
22
-
</button>
0
0
0
0
23
);
24
};
25
···
39
});
40
41
return (
42
-
<nav class="flex w-full flex-col wrap-anywhere">
43
{/* PDS Level */}
44
<div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">
45
-
<div class="flex min-h-7 basis-full items-center gap-2">
46
<Tooltip text="PDS">
47
<span class="iconify lucide--hard-drive shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>
48
</Tooltip>
···
62
</Show>
63
</div>
64
<Show when={pds()}>
65
-
<CopyButton content={pds()!} />
66
</Show>
67
</div>
68
···
70
<Show when={props.params.repo}>
71
{/* Repository Level */}
72
<div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">
73
-
<div class="-ml-2 flex basis-full items-center">
74
-
<Tooltip text={showHandle() ? "Show DID" : "Show handle"}>
75
-
<button
76
-
type="button"
77
-
class="relative flex items-center rounded px-2 py-1.5 text-neutral-500 transition-all duration-200 hover:bg-neutral-200/70 hover:text-neutral-700 active:bg-neutral-300/70 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-200 dark:active:bg-neutral-600/70"
78
-
onclick={() => {
79
-
localStorage.showHandle = !showHandle();
80
-
setShowHandle(!showHandle());
81
-
}}
82
-
aria-label="Switch DID/Handle"
83
-
>
84
-
<span class="iconify lucide--book-user shrink-0 transition-opacity duration-200 group-hover:opacity-0"></span>
85
-
<span
86
-
class={`iconify absolute shrink-0 opacity-0 transition-all duration-200 group-hover:opacity-100 ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`}
87
-
></span>
88
-
</button>
89
</Tooltip>
90
{props.params.collection || location.pathname.includes("/labels") ?
91
<A
···
100
</span>
101
}
102
</div>
103
-
<CopyButton content={props.params.repo} />
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
104
</div>
105
</Show>
106
···
111
(props.params.repo in labelerCache || location.pathname.endsWith("/labels"))
112
}
113
>
114
-
<div class="group flex items-center justify-between gap-2 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">
115
-
<div class="flex basis-full items-center gap-2">
116
-
<span class="iconify lucide--tag text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>
117
-
<A
118
-
end
119
-
href={`/at://${props.params.repo}/labels`}
120
-
class="py-0.5"
121
-
inactiveClass="text-blue-400 grow font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"
122
-
>
123
-
labels
124
-
</A>
125
-
</div>
126
-
<CopyButton content={`at://${props.params.repo}/labels`} />
127
</div>
128
</Show>
129
···
147
</A>
148
</Show>
149
</div>
150
-
<CopyButton content={`at://${props.params.repo}/${props.params.collection}`} />
0
0
0
151
</div>
152
</Show>
153
···
162
</div>
163
<CopyButton
164
content={`at://${props.params.repo}/${props.params.collection}/${props.params.rkey}`}
0
165
/>
166
</div>
167
</Show>
···
1
import { A, Params, useLocation } from "@solidjs/router";
2
import { createEffect, createSignal, Show } from "solid-js";
3
+
import { isTouchDevice } from "../layout";
4
import { didDocCache, labelerCache } from "../utils/api";
5
import { addToClipboard } from "../utils/copy";
6
import Tooltip from "./tooltip";
7
8
export const [pds, setPDS] = createSignal<string>();
9
10
+
const CopyButton = (props: { content: string; label: string }) => {
11
return (
12
+
<Show when={!isTouchDevice}>
13
+
<Tooltip text={props.label}>
14
+
<button
15
+
type="button"
16
+
onclick={(e) => {
17
+
e.preventDefault();
18
+
e.stopPropagation();
19
+
addToClipboard(props.content);
20
+
}}
21
+
class={`-mr-2 hidden items-center rounded px-2 py-1.5 text-neutral-500 transition-all duration-200 group-hover:flex hover:bg-neutral-200/70 hover:text-neutral-600 active:bg-neutral-300/70 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-300 dark:active:bg-neutral-600/70`}
22
+
aria-label="Copy to clipboard"
23
+
>
24
+
<span class="iconify lucide--link"></span>
25
+
</button>
26
+
</Tooltip>
27
+
</Show>
28
);
29
};
30
···
44
});
45
46
return (
47
+
<nav class="flex w-full flex-col text-sm wrap-anywhere sm:text-base">
48
{/* PDS Level */}
49
<div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">
50
+
<div class="flex min-h-6 basis-full items-center gap-2 sm:min-h-7">
51
<Tooltip text="PDS">
52
<span class="iconify lucide--hard-drive shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>
53
</Tooltip>
···
67
</Show>
68
</div>
69
<Show when={pds()}>
70
+
<CopyButton content={pds()!} label="Copy PDS" />
71
</Show>
72
</div>
73
···
75
<Show when={props.params.repo}>
76
{/* Repository Level */}
77
<div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">
78
+
<div class="flex basis-full items-center gap-2">
79
+
<Tooltip text="Repository">
80
+
<span class="iconify lucide--book-user shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>
0
0
0
0
0
0
0
0
0
0
0
0
0
81
</Tooltip>
82
{props.params.collection || location.pathname.includes("/labels") ?
83
<A
···
92
</span>
93
}
94
</div>
95
+
<div class="flex">
96
+
<Tooltip text={showHandle() ? "Show DID" : "Show handle"}>
97
+
<button
98
+
type="button"
99
+
class={`items-center rounded px-2 py-1 text-neutral-500 transition-all duration-200 hover:bg-neutral-200/70 hover:text-neutral-700 active:bg-neutral-300/70 sm:py-1.5 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-200 dark:active:bg-neutral-600/70 ${isTouchDevice ? "flex" : "hidden group-hover:flex"}`}
100
+
onclick={() => {
101
+
localStorage.showHandle = !showHandle();
102
+
setShowHandle(!showHandle());
103
+
}}
104
+
aria-label="Switch DID/Handle"
105
+
>
106
+
<span
107
+
class={`iconify shrink-0 duration-200 ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`}
108
+
></span>
109
+
</button>
110
+
</Tooltip>
111
+
<CopyButton content={props.params.repo} label="Copy DID" />
112
+
</div>
113
</div>
114
</Show>
115
···
120
(props.params.repo in labelerCache || location.pathname.endsWith("/labels"))
121
}
122
>
123
+
<div class="group flex items-center gap-2 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">
124
+
<span class="iconify lucide--tag text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>
125
+
<A
126
+
end
127
+
href={`/at://${props.params.repo}/labels`}
128
+
class="py-0.5"
129
+
inactiveClass="text-blue-400 grow font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"
130
+
>
131
+
labels
132
+
</A>
0
0
0
133
</div>
134
</Show>
135
···
153
</A>
154
</Show>
155
</div>
156
+
<CopyButton
157
+
content={`at://${props.params.repo}/${props.params.collection}`}
158
+
label="Copy AT URI"
159
+
/>
160
</div>
161
</Show>
162
···
171
</div>
172
<CopyButton
173
content={`at://${props.params.repo}/${props.params.collection}/${props.params.rkey}`}
174
+
label="Copy AT URI"
175
/>
176
</div>
177
</Show>