atmosphere explorer
pds.ls
tool
typescript
atproto
restyle scope selector
+27
-17
+27
-17
src/auth/scope-selector.tsx
+27
-17
src/auth/scope-selector.tsx
···
54
54
</button>
55
55
<div class="font-semibold">Select permissions</div>
56
56
</div>
57
-
<div class="flex flex-col gap-y-2 px-1">
57
+
<div class="flex flex-col px-1">
58
58
<For each={GRANULAR_SCOPES}>
59
-
{(scope) => (
60
-
<div
61
-
class="flex items-center gap-2"
62
-
classList={{ "opacity-50": scope.id === "blob" && isBlobDisabled() }}
63
-
>
64
-
<input
65
-
id={`scope-${scope.id}`}
66
-
type="checkbox"
67
-
checked={selectedScopes().has(scope.id)}
68
-
disabled={scope.id === "blob" && isBlobDisabled()}
69
-
onChange={() => toggleScope(scope.id)}
70
-
/>
71
-
<label for={`scope-${scope.id}`} class="flex grow items-center gap-2 select-none">
59
+
{(scope) => {
60
+
const isSelected = () => selectedScopes().has(scope.id);
61
+
const isDisabled = () => scope.id === "blob" && isBlobDisabled();
62
+
63
+
return (
64
+
<button
65
+
onclick={() => !isDisabled() && toggleScope(scope.id)}
66
+
disabled={isDisabled()}
67
+
class="group flex items-center gap-3 py-2"
68
+
classList={{ "opacity-50": isDisabled() }}
69
+
>
70
+
<div
71
+
class="flex size-5 items-center justify-center rounded border-2 transition-colors"
72
+
classList={{
73
+
"bg-blue-500 border-transparent group-hover:bg-blue-600 group-active:bg-blue-400":
74
+
isSelected() && !isDisabled(),
75
+
"border-neutral-400 dark:border-neutral-500 group-hover:border-neutral-500 dark:group-hover:border-neutral-400 group-hover:bg-neutral-100 dark:group-hover:bg-neutral-800":
76
+
!isSelected() && !isDisabled(),
77
+
"border-neutral-300 dark:border-neutral-600": isDisabled(),
78
+
}}
79
+
>
80
+
{isSelected() && <span class="iconify lucide--check text-sm text-white"></span>}
81
+
</div>
72
82
<span>{scope.label}</span>
73
-
</label>
74
-
</div>
75
-
)}
83
+
</button>
84
+
);
85
+
}}
76
86
</For>
77
87
</div>
78
88
<button