futur.blue / pdsls
forked from pds.ls/pdsls
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

new copy navbar behavior

Juliet a10f177b 58ec39ff

+95 -67
+2 -2
src/components/dropdown.tsx
··· 24 24 return <MenuContext.Provider value={value}>{props.children}</MenuContext.Provider>; 25 25 }; 26 26 27 - export const CopyMenu = (props: { copyContent: string; label: string; icon?: string }) => { 27 + export const CopyMenu = (props: { content: string; label: string; icon?: string }) => { 28 28 const ctx = useContext(MenuContext); 29 29 30 30 return ( 31 31 <button 32 32 onClick={() => { 33 - addToClipboard(props.copyContent); 33 + addToClipboard(props.content); 34 34 ctx?.setShowMenu(false); 35 35 }} 36 36 class="flex items-center gap-1.5 rounded-lg p-1 whitespace-nowrap hover:bg-neutral-200/50 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
+77 -61
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 { didDocCache, labelerCache } from "../utils/api"; 4 - import { CopyMenu, DropdownMenu, MenuProvider } from "./dropdown"; 4 + import { addToClipboard } from "../utils/copy"; 5 5 import Tooltip from "./tooltip"; 6 6 7 7 export const [pds, setPDS] = createSignal<string>(); 8 + 9 + const CopyButton = (props: { content: string }) => { 10 + return ( 11 + <button 12 + type="button" 13 + onclick={(e) => { 14 + e.preventDefault(); 15 + e.stopPropagation(); 16 + addToClipboard(props.content); 17 + }} 18 + class={`hidden items-center rounded p-0.5 text-base text-neutral-500 transition-all duration-200 group-hover:flex hover:bg-neutral-200/70 hover:text-neutral-600 active:bg-neutral-300/70 sm:p-1 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-300 dark:active:bg-neutral-600/70`} 19 + aria-label="Copy to clipboard" 20 + > 21 + <span class="iconify lucide--link"></span> 22 + </button> 23 + ); 24 + }; 8 25 9 26 export const NavBar = (props: { params: Params }) => { 10 27 const location = useLocation(); ··· 44 61 </Show> 45 62 </Show> 46 63 </div> 47 - <Show when={props.params.repo}> 48 - <MenuProvider> 49 - <DropdownMenu 50 - icon="lucide--copy" 51 - buttonClass="rounded p-0.5 sm:p-1 text-base transition-all duration-200 hover:bg-neutral-200/70 active:bg-neutral-300/70 dark:hover:bg-neutral-700/70 dark:active:bg-neutral-600/70" 52 - menuClass="top-7 p-2 text-xs" 53 - > 54 - <Show when={pds()}> 55 - <CopyMenu copyContent={pds()!} label="Copy PDS" /> 56 - </Show> 57 - <CopyMenu copyContent={props.params.repo} label="Copy DID" /> 58 - <CopyMenu 59 - copyContent={`at://${props.params.repo}${props.params.collection ? `/${props.params.collection}` : ""}${props.params.rkey ? `/${props.params.rkey}` : ""}`} 60 - label="Copy AT URI" 61 - /> 62 - </DropdownMenu> 63 - </MenuProvider> 64 + <Show when={pds()}> 65 + <CopyButton content={pds()!} /> 64 66 </Show> 65 67 </div> 66 68 ··· 85 87 </span> 86 88 } 87 89 </div> 88 - <Tooltip text={showHandle() ? "Show DID" : "Show handle"}> 89 - <button 90 - 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" 91 - onclick={() => { 92 - localStorage.showHandle = !showHandle(); 93 - setShowHandle(!showHandle()); 94 - }} 95 - > 96 - <span 97 - class={`iconify shrink-0 transition-transform duration-300 ease-in-out ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`} 98 - ></span> 99 - </button> 100 - </Tooltip> 90 + <div class="flex items-center gap-0.5"> 91 + <CopyButton content={`at://${props.params.repo}`} /> 92 + <Tooltip text={showHandle() ? "Show DID" : "Show handle"}> 93 + <button 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 + onclick={() => { 96 + localStorage.showHandle = !showHandle(); 97 + setShowHandle(!showHandle()); 98 + }} 99 + > 100 + <span 101 + class={`iconify shrink-0 transition-transform duration-300 ease-in-out ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`} 102 + ></span> 103 + </button> 104 + </Tooltip> 105 + </div> 101 106 </div> 102 107 </Show> 103 108 ··· 108 113 (props.params.repo in labelerCache || location.pathname.endsWith("/labels")) 109 114 } 110 115 > 111 - <div class="group flex items-center gap-1.5 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"> 112 - <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> 113 - <A 114 - end 115 - href={`/at://${props.params.repo}/labels`} 116 - class="py-0.5" 117 - inactiveClass="text-blue-400 grow font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300" 118 - > 119 - labels 120 - </A> 116 + <div class="group flex items-center justify-between gap-1.5 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"> 117 + <div class="flex basis-full items-center gap-1.5"> 118 + <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> 119 + <A 120 + end 121 + href={`/at://${props.params.repo}/labels`} 122 + class="py-0.5" 123 + inactiveClass="text-blue-400 grow font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300" 124 + > 125 + labels 126 + </A> 127 + </div> 128 + <CopyButton content={`at://${props.params.repo}/labels`} /> 121 129 </div> 122 130 </Show> 123 131 124 132 {/* Collection Level */} 125 133 <Show when={props.params.collection}> 126 - <div class="group flex items-center gap-1.5 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"> 127 - <Tooltip text="Collection"> 128 - <span class="iconify lucide--folder-open text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span> 129 - </Tooltip> 130 - <Show 131 - when={props.params.rkey} 132 - fallback={<span class="py-0.5 font-medium">{props.params.collection}</span>} 133 - > 134 - <A 135 - end 136 - href={`/at://${props.params.repo}/${props.params.collection}`} 137 - inactiveClass="text-blue-400 grow py-0.5 font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300" 134 + <div class="group flex items-center justify-between gap-1.5 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"> 135 + <div class="flex basis-full items-center gap-1.5"> 136 + <Tooltip text="Collection"> 137 + <span class="iconify lucide--folder-open text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span> 138 + </Tooltip> 139 + <Show 140 + when={props.params.rkey} 141 + fallback={<span class="py-0.5 font-medium">{props.params.collection}</span>} 138 142 > 139 - {props.params.collection} 140 - </A> 141 - </Show> 143 + <A 144 + end 145 + href={`/at://${props.params.repo}/${props.params.collection}`} 146 + inactiveClass="text-blue-400 grow py-0.5 font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300" 147 + > 148 + {props.params.collection} 149 + </A> 150 + </Show> 151 + </div> 152 + <CopyButton content={`at://${props.params.repo}/${props.params.collection}`} /> 142 153 </div> 143 154 </Show> 144 155 145 156 {/* Record Level */} 146 157 <Show when={props.params.rkey}> 147 - <div class="group flex items-center gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 py-0.5 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"> 148 - <Tooltip text="Record"> 149 - <span class="iconify lucide--file-json text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span> 150 - </Tooltip> 151 - <span class="font-medium">{props.params.rkey}</span> 158 + <div class="group flex items-center justify-between gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 py-0.5 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"> 159 + <div class="flex basis-full items-center gap-1.5"> 160 + <Tooltip text="Record"> 161 + <span class="iconify lucide--file-json text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span> 162 + </Tooltip> 163 + <span class="font-medium">{props.params.rkey}</span> 164 + </div> 165 + <CopyButton 166 + content={`at://${props.params.repo}/${props.params.collection}/${props.params.rkey}`} 167 + /> 152 168 </div> 153 169 </Show> 154 170 </div>
+1 -1
src/views/pds.tsx
··· 139 139 buttonClass="rounded-sm p-1" 140 140 menuClass="top-8 p-2 text-sm" 141 141 > 142 - <CopyMenu copyContent={params.pds} label="Copy PDS" icon="lucide--copy" /> 142 + <CopyMenu content={params.pds} label="Copy PDS" icon="lucide--copy" /> 143 143 <NavMenu 144 144 href={`/firehose?instance=wss://${params.pds}`} 145 145 label="Firehose"
+7 -2
src/views/record.tsx
··· 222 222 menuClass="top-8 p-2 text-sm" 223 223 > 224 224 <CopyMenu 225 - copyContent={JSON.stringify(record()?.value, null, 2)} 225 + content={JSON.stringify(record()?.value, null, 2)} 226 226 label="Copy record" 227 227 icon="lucide--copy" 228 228 /> 229 + <CopyMenu 230 + content={`at://${params.repo}/${params.collection}/${params.rkey}`} 231 + label="Copy AT URI" 232 + icon="lucide--copy" 233 + /> 229 234 <Show when={record()?.cid}> 230 - {(cid) => <CopyMenu copyContent={cid()} label="Copy CID" icon="lucide--copy" />} 235 + {(cid) => <CopyMenu content={cid()} label="Copy CID" icon="lucide--copy" />} 231 236 </Show> 232 237 <Show when={externalLink()}> 233 238 {(externalLink) => (
+8 -1
src/views/repo.tsx
··· 14 14 } from "solid-js"; 15 15 import { createStore } from "solid-js/store"; 16 16 import { Backlinks } from "../components/backlinks.jsx"; 17 - import { ActionMenu, DropdownMenu, MenuProvider, NavMenu } from "../components/dropdown.jsx"; 17 + import { 18 + ActionMenu, 19 + CopyMenu, 20 + DropdownMenu, 21 + MenuProvider, 22 + NavMenu, 23 + } from "../components/dropdown.jsx"; 18 24 import { TextInput } from "../components/text-input.jsx"; 19 25 import Tooltip from "../components/tooltip.jsx"; 20 26 import { ··· 209 215 label="Jetstream" 210 216 icon="lucide--radio-tower" 211 217 /> 218 + <CopyMenu content={params.repo} label="Copy DID" icon="lucide--copy" /> 212 219 <NavMenu 213 220 href={ 214 221 did.startsWith("did:plc") ?