retr0.id
forked from
pds.ls/pdsls
atproto explorer
restyle account manager
handle.invalid
+1
-2
src/components/account.tsx
+1
-2
src/components/account.tsx
···
69
<>
70
<Modal open={openManager()} onClose={() => setOpenManager(false)}>
71
<div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-16 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
72
-
<div class="mb-2 flex items-center gap-1 px-1 font-semibold">
73
-
<span class="iconify lucide--user-round"></span>
74
<span>Manage accounts</span>
75
</div>
76
<div class="mb-3 max-h-[20rem] overflow-y-auto md:max-h-[25rem]">
···
69
<>
70
<Modal open={openManager()} onClose={() => setOpenManager(false)}>
71
<div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-16 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
72
+
<div class="mb-2 px-1 font-semibold">
73
<span>Manage accounts</span>
74
</div>
75
<div class="mb-3 max-h-[20rem] overflow-y-auto md:max-h-[25rem]">
+20
-12
src/components/login.tsx
+20
-12
src/components/login.tsx
···
12
type Session,
13
} from "@atcute/oauth-browser-client";
14
import { createSignal, Show } from "solid-js";
15
-
import { TextInput } from "./text-input";
16
17
configureOAuth({
18
metadata: {
···
29
30
const login = async (handle: string) => {
31
try {
32
if (!handle) return;
33
let resolved;
34
if (!isHandle(handle)) {
···
58
return (
59
<form class="flex flex-col gap-y-2 px-1" onsubmit={(e) => e.preventDefault()}>
60
<div class="flex items-center gap-1">
61
-
<label for="handle" class="mr-1 flex items-center">
62
-
<span class="iconify lucide--user-round-plus text-lg"></span>
63
</label>
64
-
<TextInput
65
-
id="handle"
66
-
placeholder="user.bsky.social"
67
-
onInput={(e) => setLoginInput(e.currentTarget.value)}
68
-
class="grow"
69
-
/>
70
<button
71
onclick={() => login(loginInput())}
72
-
class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
73
>
74
-
<span class="iconify lucide--log-in text-lg"></span>
75
</button>
76
</div>
77
<Show when={notice()}>
78
-
<div>{notice()}</div>
79
</Show>
80
</form>
81
);
···
12
type Session,
13
} from "@atcute/oauth-browser-client";
14
import { createSignal, Show } from "solid-js";
15
16
configureOAuth({
17
metadata: {
···
28
29
const login = async (handle: string) => {
30
try {
31
+
setNotice("");
32
if (!handle) return;
33
let resolved;
34
if (!isHandle(handle)) {
···
58
return (
59
<form class="flex flex-col gap-y-2 px-1" onsubmit={(e) => e.preventDefault()}>
60
<div class="flex items-center gap-1">
61
+
<label for="handle" class="hidden">
62
+
Add account
63
</label>
64
+
<div class="dark:bg-dark-100 dark:shadow-dark-800 flex grow items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 shadow-xs focus-within:outline-[1px] focus-within:outline-neutral-600 dark:border-neutral-700 dark:focus-within:outline-neutral-400">
65
+
<label
66
+
for="handle"
67
+
class="iconify lucide--user-round-plus text-neutral-500 dark:text-neutral-400"
68
+
></label>
69
+
<input
70
+
type="text"
71
+
spellcheck={false}
72
+
placeholder="user.bsky.social"
73
+
id="handle"
74
+
class="grow py-1 select-none placeholder:text-sm focus:outline-none"
75
+
onInput={(e) => setLoginInput(e.currentTarget.value)}
76
+
/>
77
+
</div>
78
<button
79
onclick={() => login(loginInput())}
80
+
class="flex items-center rounded-lg p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
81
>
82
+
<span class="iconify lucide--log-in"></span>
83
</button>
84
</div>
85
<Show when={notice()}>
86
+
<div class="text-sm">{notice()}</div>
87
</Show>
88
</form>
89
);
+5
-5
src/components/search.tsx
+5
-5
src/components/search.tsx
···
99
<label for="input" class="hidden">
100
PDS URL, AT URI, or handle
101
</label>
102
-
<div class="dark:bg-dark-100 dark:shadow-dark-800 flex items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus-within:outline-[1px] focus-within:outline-neutral-600 dark:border-neutral-700 dark:focus-within:outline-neutral-400">
103
-
<span
104
class="iconify lucide--search text-neutral-500 dark:text-neutral-400"
105
-
onClick={() => searchInput.focus()}
106
-
></span>
107
<input
108
type="text"
109
spellcheck={false}
110
placeholder="PDS URL, AT URI, DID, or handle"
111
ref={searchInput}
112
id="input"
113
-
class="grow select-none placeholder:text-sm focus:outline-none"
114
value={input() ?? ""}
115
onInput={(e) => setInput(e.currentTarget.value)}
116
/>
···
99
<label for="input" class="hidden">
100
PDS URL, AT URI, or handle
101
</label>
102
+
<div class="dark:bg-dark-100 dark:shadow-dark-800 flex items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 shadow-xs focus-within:outline-[1px] focus-within:outline-neutral-600 dark:border-neutral-700 dark:focus-within:outline-neutral-400">
103
+
<label
104
+
for="input"
105
class="iconify lucide--search text-neutral-500 dark:text-neutral-400"
106
+
></label>
107
<input
108
type="text"
109
spellcheck={false}
110
placeholder="PDS URL, AT URI, DID, or handle"
111
ref={searchInput}
112
id="input"
113
+
class="grow py-1 select-none placeholder:text-sm focus:outline-none"
114
value={input() ?? ""}
115
onInput={(e) => setInput(e.currentTarget.value)}
116
/>