move record on pds icon to toolbar

src/components/navbar.tsx

···
           </div>
         </Show>
         <Show when={props.params.rkey}>
-          <div class="mt-1 flex items-center justify-between">
-            <div class="flex items-center gap-2">
-              <Tooltip text="Record">
-                <button onclick={() => addToClipboard(props.params.rkey)}>
-                  <div class="i-lucide-braces text-lg" />
-                </button>
-              </Tooltip>
-              <div class="flex gap-1">
-                <span>{props.params.rkey}</span>
-                <Show when={validRecord()}>
-                  <Tooltip text="Valid record">
-                    <div class="i-lucide-lock-keyhole" />
-                  </Tooltip>
-                </Show>
-                <Show when={validRecord() === false}>
-                  <Tooltip text="Invalid record">
-                    <div class="i-lucide-lock-keyhole-open text-red-500 dark:text-red-400" />
-                  </Tooltip>
-                </Show>
-                <Show when={validRecord() === undefined}>
-                  <Tooltip text="Validating">
-                    <div class="i-lucide-loader-circle animate-spin" />
-                  </Tooltip>
-                </Show>
-                <Show when={validSchema()}>
-                  <Tooltip text="Valid schema">
-                    <div class="i-lucide-file-check" />
-                  </Tooltip>
-                </Show>
-                <Show when={validSchema() === false}>
-                  <Tooltip text="Invalid schema">
-                    <div class="i-lucide-file-x text-red-500 dark:text-red-400" />
-                  </Tooltip>
-                </Show>
-              </div>
-            </div>
-            <Tooltip text="Record on PDS">
-              <a
-                href={`https://${pds()}/xrpc/com.atproto.repo.getRecord?repo=${props.params.repo}&collection=${props.params.collection}&rkey=${props.params.rkey}`}
-                target="_blank"
-              >
-                <div class="i-lucide-external-link text-lg" />
-              </a>
+          <div class="mt-1 flex items-center gap-2">
+            <Tooltip text="Record">
+              <button onclick={() => addToClipboard(props.params.rkey)}>
+                <div class="i-lucide-braces text-lg" />
+              </button>
             </Tooltip>
+            <div class="flex gap-1">
+              <span>{props.params.rkey}</span>
+              <Show when={validRecord()}>
+                <Tooltip text="Valid record">
+                  <div class="i-lucide-lock-keyhole" />
+                </Tooltip>
+              </Show>
+              <Show when={validRecord() === false}>
+                <Tooltip text="Invalid record">
+                  <div class="i-lucide-lock-keyhole-open text-red-500 dark:text-red-400" />
+                </Tooltip>
+              </Show>
+              <Show when={validRecord() === undefined}>
+                <Tooltip text="Validating">
+                  <div class="i-lucide-loader-circle animate-spin" />
+                </Tooltip>
+              </Show>
+              <Show when={validSchema()}>
+                <Tooltip text="Valid schema">
+                  <div class="i-lucide-file-check" />
+                </Tooltip>
+              </Show>
+              <Show when={validSchema() === false}>
+                <Tooltip text="Invalid schema">
+                  <div class="i-lucide-file-x text-red-500 dark:text-red-400" />
+                </Tooltip>
+              </Show>
+            </div>
           </div>
         </Show>
       </div>

src/utils/templates.ts

···
   "com.whtwnd.blog.entry": (uri) => ({
     label: "WhiteWind",
     link: `https://whtwnd.com/${uri.repo}/${uri.rkey}`,
+    icon: "i-lucide-wind",
   }),
   "com.shinolabs.pinksea.oekaki": (uri) => ({
     label: "PinkSea",

src/views/record.tsx

···
 import { Backlinks } from "../components/backlinks.jsx";
 import { JSONValue } from "../components/json.jsx";
 import { agent } from "../components/login.jsx";
-import { setCID, setValidRecord, setValidSchema, validRecord } from "../components/navbar.jsx";
+import { pds, setCID, setValidRecord, setValidSchema, validRecord } from "../components/navbar.jsx";
 
 import { didDocCache, getAllBacklinks, LinkData, resolvePDS } from "../utils/api.js";
 import { AtUri, uriTemplates } from "../utils/templates.js";
···
             {(externalLink) => (
               <Tooltip text={`Open on ${externalLink().label}`}>
                 <a target="_blank" href={externalLink()?.link}>
-                  <div class={`${externalLink().icon ?? "i-lucide-external-link"} text-xl`} />
+                  <div class={`${externalLink().icon ?? "i-lucide-app-window"} text-xl`} />
                 </a>
               </Tooltip>
             )}
           </Show>
+          <Tooltip text="Record on PDS">
+            <a
+              href={`https://${pds()}/xrpc/com.atproto.repo.getRecord?repo=${params.repo}&collection=${params.collection}&rkey=${params.rkey}`}
+              target="_blank"
+            >
+              <div class="i-lucide-external-link text-xl" />
+            </a>
+          </Tooltip>
           <Show when={backlinks()}>
             <Tooltip text={showBacklinks() ? "Show record" : "Show backlinks"}>
               <button onclick={() => setShowBacklinks(!showBacklinks())}>