···

       
15
       
15
       
 
       
        e.stopPropagation();

     

       
16
       
16
       
 
       
        addToClipboard(props.content);

     

       
17
       
17
       
 
       
      }}

     

       
18
       
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`}

     

       
18
       
18
       
+
       
      class={`-mr-2 hidden items-center rounded px-2 py-1.5 text-neutral-500 transition-all duration-200 group-hover:flex hover:bg-neutral-200/70 hover:text-neutral-600 active:bg-neutral-300/70 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-300 dark:active:bg-neutral-600/70`}

     

       
19
       
19
       
 
       
      aria-label="Copy to clipboard"

     

       
20
       
20
       
 
       
    >

     

       
21
       
21
       
 
       
      <span class="iconify lucide--link"></span>

     
···

       
39
       
39
       
 
       
  });

     

       
40
       
40
       
 
       


     

       
41
       
41
       
 
       
  return (

     

       
42
       
42
       
-
       
    <nav class="flex w-full flex-col text-sm wrap-anywhere sm:text-base">

     

       
42
       
42
       
+
       
    <nav class="flex w-full flex-col wrap-anywhere">

     

       
43
       
43
       
 
       
      {/* PDS Level */}

     

       
44
       
44
       
 
       
      <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">

     

       
45
       
45
       
-
       
        <div class="flex min-h-6 basis-full items-center gap-1.5 sm:min-h-7">

     

       
45
       
45
       
+
       
        <div class="flex min-h-7 basis-full items-center gap-2">

     

       
46
       
46
       
 
       
          <Tooltip text="PDS">

     

       
47
       
47
       
 
       
            <span class="iconify lucide--hard-drive shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     

       
48
       
48
       
 
       
          </Tooltip>

     
···

       
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="-ml-1 flex basis-full items-center gap-0.5">

     

       
73
       
73
       
+
       
            <div class="-ml-2 flex basis-full items-center">

     

       
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-1 text-neutral-500 transition-all duration-200 hover:bg-neutral-200/70 hover:text-neutral-700 active:bg-neutral-300/70 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-200 dark:active:bg-neutral-600/70"

     

       
77
       
77
       
+
       
                  class="relative flex items-center rounded px-2 py-1.5 text-neutral-500 transition-all duration-200 hover:bg-neutral-200/70 hover:text-neutral-700 active:bg-neutral-300/70 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());

     
···

       
111
       
111
       
 
       
            (props.params.repo in labelerCache || location.pathname.endsWith("/labels"))

     

       
112
       
112
       
 
       
          }

     

       
113
       
113
       
 
       
        >

     

       
114
       
114
       
-
       
          <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">

     

       
115
       
115
       
-
       
            <div class="flex basis-full items-center gap-1.5">

     

       
114
       
114
       
+
       
          <div class="group flex items-center justify-between gap-2 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">

     

       
115
       
115
       
+
       
            <div class="flex basis-full items-center gap-2">

     

       
116
       
116
       
 
       
              <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>

     

       
117
       
117
       
 
       
              <A

     

       
118
       
118
       
 
       
                end

     
···

       
129
       
129
       
 
       


     

       
130
       
130
       
 
       
        {/* Collection Level */}

     

       
131
       
131
       
 
       
        <Show when={props.params.collection}>

     

       
132
       
132
       
-
       
          <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">

     

       
133
       
133
       
-
       
            <div class="flex basis-full items-center gap-1.5">

     

       
132
       
132
       
+
       
          <div class="group flex items-center justify-between gap-2 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">

     

       
133
       
133
       
+
       
            <div class="flex basis-full items-center gap-2">

     

       
134
       
134
       
 
       
              <Tooltip text="Collection">

     

       
135
       
135
       
 
       
                <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>

     

       
136
       
136
       
 
       
              </Tooltip>

     
···

       
153
       
153
       
 
       


     

       
154
       
154
       
 
       
        {/* Record Level */}

     

       
155
       
155
       
 
       
        <Show when={props.params.rkey}>

     

       
156
       
156
       
-
       
          <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">

     

       
157
       
157
       
-
       
            <div class="flex basis-full items-center gap-1.5">

     

       
156
       
156
       
+
       
          <div class="group flex items-center justify-between gap-2 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">

     

       
157
       
157
       
+
       
            <div class="flex basis-full items-center gap-2">

     

       
158
       
158
       
 
       
              <Tooltip text="Record">

     

       
159
       
159
       
 
       
                <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>

     

       
160
       
160
       
 
       
              </Tooltip>

     

       
161
       
161
       
-
       
              <span class="font-medium">{props.params.rkey}</span>

     

       
161
       
161
       
+
       
              <span class="py-0.5 font-medium">{props.params.rkey}</span>

     

       
162
       
162
       
 
       
            </div>

     

       
163
       
163
       
 
       
            <CopyButton

     

       
164
       
164
       
 
       
              content={`at://${props.params.repo}/${props.params.collection}/${props.params.rkey}`}