add bsky profile and did doc redirection

src/App.tsx

···
                 <div>
                   <label for={"record" + index()} class="flex flex-col">
                     <Show when={record.handle.length}>
-                      <span>@{record.handle}</span>
+                      <span class="flex items-center gap-x-1">
+                        @{record.handle}
+                        <a
+                          href={`https://bsky.app/profile/${record.did}`}
+                          target="_blank"
+                          class="flex items-center text-blue-500 hover:underline dark:text-blue-400"
+                        >
+                          <button class="i-tabler-external-link text-sm" />
+                        </a>
+                      </span>
                     </Show>
-                    <span>{record.did}</span>
+                    <span class="flex items-center gap-x-1">
+                      {record.did}
+                      <a
+                        href={
+                          record.did.startsWith("did:plc:") ?
+                            `https://web.plc.directory/did/${record.did}`
+                          : `https://${record.did.replace("did:web:", "")}/.well-known/did.json`
+                        }
+                        target="_blank"
+                        class="flex items-center text-blue-500 hover:underline dark:text-blue-400"
+                      >
+                        <button class="i-tabler-external-link text-sm" />
+                      </a>
+                    </span>
                     <span>{record.status_label}</span>
                   </label>
                 </div>
···
             href="https://bsky.app/profile/did:plc:b3pn34agqqchkaf75v7h43dk"
             target="_blank"
           >
-            <div class="i-fa6-brands-bluesky text-xl" />
+            <button class="i-fa6-brands-bluesky text-xl" />
           </a>
           <a
             title="GitHub"
             href="https://github.com/notjuliet/cleanfollow-bsky"
             target="_blank"
           >
-            <div class="i-bi-github text-xl" />
+            <button class="i-bi-github text-xl" />
           </a>
         </div>
       </div>

src/icons.css

···
   width: 1.2em;
   height: 1.2em;
 }
+
+.i-tabler-external-link {
+  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5'/%3E%3C/svg%3E");
+  -webkit-mask: var(--un-icon) no-repeat;
+  mask: var(--un-icon) no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  background-color: currentColor;
+  color: inherit;
+  width: 1.2em;
+  height: 1.2em;
+}