vielle.dev
forked from
pds.ls/pdsls
atproto explorer
fix navbar link width
handle.invalid
+61
-64
1 changed file
src
components
+61
-64
src/components/navbar.tsx
+61
-64
src/components/navbar.tsx
···
94
94
</div>
95
95
<div class="flex flex-col flex-wrap">
96
96
<Show when={props.params.repo}>
97
97
-
<div>
98
98
-
<div class="relative mt-1 flex items-center justify-between gap-1">
99
99
-
<div class="flex basis-full items-center gap-2">
100
100
-
<Tooltip text="Repository">
101
101
-
<button onclick={() => addToClipboard(props.params.repo)}>
102
102
-
<div class="i-lucide-at-sign text-lg" />
103
103
-
</button>
104
104
-
</Tooltip>
105
105
-
<div class="flex gap-1">
106
106
-
{props.params.collection || location.pathname.includes("/labels") ?
107
107
-
<A
108
108
-
end
109
109
-
href={`/at://${props.params.repo}`}
110
110
-
inactiveClass="text-blue-400 hover:underline"
111
111
-
>
112
112
-
{showHandle() ? handle() : props.params.repo}
113
113
-
</A>
114
114
-
: <span>{showHandle() ? handle() : props.params.repo}</span>}
115
115
-
<Show when={showHandle()}>
116
116
-
<Tooltip
117
117
-
text={
118
118
-
validHandle() === true ? "Valid handle"
119
119
-
: validHandle() === undefined ?
120
120
-
"Validating"
121
121
-
: "Invalid handle"
122
122
-
}
123
123
-
>
124
124
-
<div
125
125
-
classList={{
126
126
-
"i-lucide-circle-check": validHandle() === true,
127
127
-
"i-lucide-circle-x text-red-500 dark:text-red-400":
128
128
-
validHandle() === false,
129
129
-
"i-lucide-loader-circle animate-spin": validHandle() === undefined,
130
130
-
}}
131
131
-
/>
132
132
-
</Tooltip>
133
133
-
</Show>
134
134
-
</div>
135
135
-
</div>
136
136
-
<Tooltip text={showHandle() ? "Show DID" : "Show Handle"}>
137
137
-
<button
138
138
-
onclick={() => {
139
139
-
localStorage.showHandle = !showHandle();
140
140
-
setShowHandle(!showHandle());
141
141
-
}}
142
142
-
>
143
143
-
<div
144
144
-
class={
145
145
-
`duration-400 shrink-0 text-lg transition-transform ${showHandle() ? "rotate-y-180" : ""} ` +
146
146
-
(swapIcons[props.params.repo] ?? "i-lucide-arrow-left-right")
147
147
-
}
148
148
-
/>
97
97
+
<div class="relative mt-1 flex items-center justify-between gap-1">
98
98
+
<div class="flex basis-full items-center gap-2">
99
99
+
<Tooltip text="Repository">
100
100
+
<button onclick={() => addToClipboard(props.params.repo)}>
101
101
+
<div class="i-lucide-at-sign text-lg" />
149
102
</button>
150
103
</Tooltip>
151
151
-
</div>
152
152
-
<Show when={props.params.repo in labelerCache && !props.params.collection}>
153
153
-
<div class="mt-1 flex items-center gap-2">
154
154
-
<div class="i-lucide-tag text-lg" />
155
155
-
<A
156
156
-
end
157
157
-
href={`/at://${props.params.repo}/labels`}
158
158
-
inactiveClass="text-blue-400 grow hover:underline"
159
159
-
>
160
160
-
labels
161
161
-
</A>
104
104
+
<div class="flex w-full gap-1">
105
105
+
{props.params.collection || location.pathname.includes("/labels") ?
106
106
+
<A
107
107
+
end
108
108
+
href={`/at://${props.params.repo}`}
109
109
+
inactiveClass={`text-blue-400 hover:underline ${!showHandle() ? "w-full" : ""}`}
110
110
+
>
111
111
+
{showHandle() ? handle() : props.params.repo}
112
112
+
</A>
113
113
+
: <span>{showHandle() ? handle() : props.params.repo}</span>}
114
114
+
<Show when={showHandle()}>
115
115
+
<Tooltip
116
116
+
text={
117
117
+
validHandle() === true ? "Valid handle"
118
118
+
: validHandle() === undefined ?
119
119
+
"Validating"
120
120
+
: "Invalid handle"
121
121
+
}
122
122
+
>
123
123
+
<div
124
124
+
classList={{
125
125
+
"i-lucide-circle-check": validHandle() === true,
126
126
+
"i-lucide-circle-x text-red-500 dark:text-red-400": validHandle() === false,
127
127
+
"i-lucide-loader-circle animate-spin": validHandle() === undefined,
128
128
+
}}
129
129
+
/>
130
130
+
</Tooltip>
131
131
+
</Show>
162
132
</div>
163
163
-
</Show>
133
133
+
</div>
134
134
+
<Tooltip text={showHandle() ? "Show DID" : "Show Handle"}>
135
135
+
<button
136
136
+
onclick={() => {
137
137
+
localStorage.showHandle = !showHandle();
138
138
+
setShowHandle(!showHandle());
139
139
+
}}
140
140
+
>
141
141
+
<div
142
142
+
class={
143
143
+
`duration-400 shrink-0 text-lg transition-transform ${showHandle() ? "rotate-y-180" : ""} ` +
144
144
+
(swapIcons[props.params.repo] ?? "i-lucide-arrow-left-right")
145
145
+
}
146
146
+
/>
147
147
+
</button>
148
148
+
</Tooltip>
149
149
+
</div>
150
150
+
</Show>
151
151
+
<Show when={props.params.repo in labelerCache && !props.params.collection}>
152
152
+
<div class="mt-1 flex items-center gap-2">
153
153
+
<div class="i-lucide-tag text-lg" />
154
154
+
<A
155
155
+
end
156
156
+
href={`/at://${props.params.repo}/labels`}
157
157
+
inactiveClass="text-blue-400 grow hover:underline"
158
158
+
>
159
159
+
labels
160
160
+
</A>
164
161
</div>
165
162
</Show>
166
163
<Show when={props.params.collection}>