move record validation icons

src/components/navbar.tsx

···
 export const [pds, setPDS] = createSignal<string>();
 export const [cid, setCID] = createSignal<string>();
 export const [isLabeler, setIsLabeler] = createSignal(false);
-export const [validRecord, setValidRecord] = createSignal<boolean | undefined>(undefined);
-export const [validSchema, setValidSchema] = createSignal<boolean | undefined>(undefined);
 
 const swapIcons: Record<string, string> = {
   "did:plc:vwzwgnygau7ed7b7wt5ux7y2": "lucide--microchip",
···
             <Tooltip text="Record">
               <span class="iconify lucide--file-json text-base"></span>
             </Tooltip>
-            <div class="flex gap-1">
-              <span>{props.params.rkey}</span>
-              <Show when={validRecord()}>
-                <Tooltip text="Valid record">
-                  <span class="iconify lucide--lock-keyhole"></span>
-                </Tooltip>
-              </Show>
-              <Show when={validRecord() === false}>
-                <Tooltip text="Invalid record">
-                  <span class="iconify lucide--lock-keyhole-open text-red-500 dark:text-red-400"></span>
-                </Tooltip>
-              </Show>
-              <Show when={validRecord() === undefined}>
-                <Tooltip text="Validating">
-                  <span class="iconify lucide--loader-circle animate-spin"></span>
-                </Tooltip>
-              </Show>
-              <Show when={validSchema()}>
-                <Tooltip text="Valid schema">
-                  <span class="iconify lucide--file-check"></span>
-                </Tooltip>
-              </Show>
-              <Show when={validSchema() === false}>
-                <Tooltip text="Invalid schema">
-                  <span class="iconify lucide--file-x text-red-500 dark:text-red-400"></span>
-                </Tooltip>
-              </Show>
-            </div>
+            <span>{props.params.rkey}</span>
           </div>
         </Show>
       </div>

src/views/record.tsx

···
 import { JSONValue } from "../components/json.jsx";
 import { agent } from "../components/login.jsx";
 import { Modal } from "../components/modal.jsx";
-import { pds, setCID, setValidRecord, setValidSchema, validRecord } from "../components/navbar.jsx";
+import { pds, setCID } from "../components/navbar.jsx";
 import Tooltip from "../components/tooltip.jsx";
 import { setNotif } from "../layout.jsx";
 import { didDocCache, resolvePDS } from "../utils/api.js";
···
   const [externalLink, setExternalLink] = createSignal<
     { label: string; link: string; icon?: string } | undefined
   >();
+  const [validRecord, setValidRecord] = createSignal<boolean | undefined>(undefined);
+  const [validSchema, setValidSchema] = createSignal<boolean | undefined>(undefined);
   const did = params.repo;
   let rpc: Client;
 
···
             </A>
           </div>
           <div class="flex gap-1">
+            <div class="mr-1 flex gap-3">
+              <Tooltip
+                text={
+                  validRecord() === undefined ? "Validating"
+                  : validRecord() === false ?
+                    "Invalid record"
+                  : "Valid record"
+                }
+              >
+                <span
+                  classList={{
+                    "iconify lucide--lock-keyhole": validRecord() === true,
+                    "iconify lucide--lock-keyhole-open text-red-500 dark:text-red-400":
+                      validRecord() === false,
+                    "iconify lucide--loader-circle animate-spin": validRecord() === undefined,
+                  }}
+                ></span>
+              </Tooltip>
+              <Show when={validSchema() !== undefined}>
+                <Tooltip text={validSchema() ? "Valid schema" : "Invalid schema"}>
+                  <span
+                    class={`iconify ${validSchema() ? "lucide--file-check" : "lucide--file-x text-red-500 dark:text-red-400"}`}
+                  ></span>
+                </Tooltip>
+              </Show>
+            </div>
             <Show when={agent() && agent()?.sub === record()?.uri.split("/")[2]}>
               <RecordEditor create={false} record={record()?.value} refetch={refetch} />
               <Tooltip text="Delete">