tangled
alpha
login
or
join now
retr0.id
/
pdsls
forked from
pds.ls/pdsls
1
fork
atom
atproto explorer
1
fork
atom
overview
issues
pulls
pipelines
new switch handle/did button
juli.ee
4 months ago
db02e547
a10f177b
verified
This commit was signed with the committer's
known signature
.
juli.ee
SSH Key Fingerprint:
SHA256:mBrT4x0JdzLpbVR95g1hjI1aaErfC02kmLRkPXwsYCk=
+17
-19
1 changed file
expand all
collapse all
unified
split
src
components
navbar.tsx
+17
-19
src/components/navbar.tsx
···
70
70
<Show when={props.params.repo}>
71
71
{/* Repository Level */}
72
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
73
-
<div class="flex basis-full items-center gap-1.5">
74
74
-
<Tooltip text="Repository">
75
75
-
<span class="iconify lucide--book-user text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>
73
73
+
<div class="-ml-0.5 flex basis-full items-center gap-1 sm:-ml-1 sm:gap-0.5">
74
74
+
<Tooltip text={showHandle() ? "Show DID" : "Show handle"}>
75
75
+
<button
76
76
+
type="button"
77
77
+
class="relative flex items-center rounded p-0.5 text-neutral-500 transition-all duration-200 hover:bg-neutral-200/70 hover:text-neutral-700 active:bg-neutral-300/70 sm:p-1 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>
76
89
</Tooltip>
77
90
{props.params.collection || location.pathname.includes("/labels") ?
78
91
<A
···
87
100
</span>
88
101
}
89
102
</div>
90
90
-
<div class="flex items-center gap-0.5">
91
91
-
<CopyButton content={`at://${props.params.repo}`} />
92
92
-
<Tooltip text={showHandle() ? "Show DID" : "Show handle"}>
93
93
-
<button
94
94
-
class="flex items-center rounded p-0.5 text-base transition-all duration-200 hover:bg-neutral-200/70 active:bg-neutral-300/70 sm:p-1 dark:hover:bg-neutral-700/70 dark:active:bg-neutral-600/70"
95
95
-
onclick={() => {
96
96
-
localStorage.showHandle = !showHandle();
97
97
-
setShowHandle(!showHandle());
98
98
-
}}
99
99
-
>
100
100
-
<span
101
101
-
class={`iconify shrink-0 transition-transform duration-300 ease-in-out ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`}
102
102
-
></span>
103
103
-
</button>
104
104
-
</Tooltip>
105
105
-
</div>
103
103
+
<CopyButton content={props.params.repo} />
106
104
</div>
107
105
</Show>
108
106