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