add hover card, handle page collection sections

package.json

···
     "@radix-ui/react-avatar": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.7",
     "@radix-ui/react-dropdown-menu": "^2.1.7",
+    "@radix-ui/react-hover-card": "^1.1.11",
     "@radix-ui/react-popover": "^1.1.7",
     "@radix-ui/react-progress": "^1.1.3",
     "@radix-ui/react-separator": "^1.1.3",

pnpm-lock.yaml

···
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.7
         version: 2.1.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-hover-card':
+        specifier: ^1.1.11
+        version: 1.1.11(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@radix-ui/react-popover':
         specifier: ^1.1.7
         version: 1.1.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
···
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-arrow@1.1.4':
+    resolution: {integrity: sha512-qz+fxrqgNxG0dYew5l7qR3c7wdgRu1XVUHGnGYX7rg5HM4p9SWaRmJwfgR3J0SgyUKayLmzQIun+N6rWRgiRKw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-avatar@1.1.4':
     resolution: {integrity: sha512-+kBesLBzwqyDiYCtYFK+6Ktf+N7+Y6QOTUueLGLIbLZ/YeyFW6bsBGDsN+5HxHpM55C90u5fxsg0ErxzXTcwKA==}
     peerDependencies:
···
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dismissable-layer@1.1.7':
+    resolution: {integrity: sha512-j5+WBUdhccJsmH5/H0K6RncjDtoALSEr6jbkaZu+bjw6hOPOhHycr6vEUujl+HBK8kjUfWcoCJXxP6e4lUlMZw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-dropdown-menu@2.1.7':
     resolution: {integrity: sha512-7/1LiuNZuCQE3IzdicGoHdQOHkS2Q08+7p8w6TXZ6ZjgAULaCI85ZY15yPl4o4FVgoKLRT43/rsfNVN8osClQQ==}
     peerDependencies:
···
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-hover-card@1.1.11':
+    resolution: {integrity: sha512-q9h9grUpGZKR3MNhtVCLVnPGmx1YnzBgGR+O40mhSNGsUnkR+LChVH8c7FB0mkS+oudhd8KAkZGTJPJCjdAPIg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-id@1.1.1':
     resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
     peerDependencies:
···
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popper@1.2.4':
+    resolution: {integrity: sha512-3p2Rgm/a1cK0r/UVkx5F/K9v/EplfjAeIFCGOPYPO4lZ0jtg4iSQXt/YGTSLWaf4x7NG6Z4+uKFcylcTZjeqDA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-portal@1.1.5':
     resolution: {integrity: sha512-ps/67ZqsFm+Mb6lSPJpfhRLrVL2i2fntgCmGMqqth4eaGUf+knAuuRtWVJrNjUhExgmdRqftSgzpf0DF0n6yXA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.6':
+    resolution: {integrity: sha512-XmsIl2z1n/TsYFLIdYam2rmFwf9OC/Sh2avkbmVMDuBZIe7hSpM0cYnWPAo7nHOVx8zTuwDZGByfcqLdnzp3Vw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
···
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
+  '@radix-ui/react-arrow@1.1.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   '@radix-ui/react-avatar@1.1.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@radix-ui/react-context': 1.1.2(react@19.0.0)
···
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
+  '@radix-ui/react-dismissable-layer@1.1.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(react@19.0.0)
+      '@radix-ui/react-primitive': 2.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(react@19.0.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   '@radix-ui/react-dropdown-menu@2.1.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
···
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
+  '@radix-ui/react-hover-card@1.1.11(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(react@19.0.0)
+      '@radix-ui/react-context': 1.1.2(react@19.0.0)
+      '@radix-ui/react-dismissable-layer': 1.1.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-popper': 1.2.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-portal': 1.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-presence': 1.1.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-primitive': 2.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   '@radix-ui/react-id@1.1.1(react@19.0.0)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(react@19.0.0)
···
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
+  '@radix-ui/react-popper@1.2.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-arrow': 1.1.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-compose-refs': 1.1.2(react@19.0.0)
+      '@radix-ui/react-context': 1.1.2(react@19.0.0)
+      '@radix-ui/react-primitive': 2.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(react@19.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@19.0.0)
+      '@radix-ui/react-use-rect': 1.1.1(react@19.0.0)
+      '@radix-ui/react-use-size': 1.1.1(react@19.0.0)
+      '@radix-ui/rect': 1.1.1
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   '@radix-ui/react-portal@1.1.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.0.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
+  '@radix-ui/react-portal@1.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@radix-ui/react-use-layout-effect': 1.1.1(react@19.0.0)
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)

src/components/renderJson.tsx

···
       console.log("props.data", props.data);
       return (
         <div style={{ marginLeft: `${20}px` }}>
-          {props.data.$type}:{" "}
+          <span className="text-muted-foreground">{props.data.$type}</span>:{" "}
           <Component
             did={props.did}
             dollar_link={props.data?.ref?.$link || undefined}
···
       {Object.keys(props.data).map((k) => {
         return (
           <div style={{ marginLeft: `${20}px` }}>
-            {k}:{" "}
+            <span className="text-muted-foreground">{k}</span>:{" "}
             <RenderJson
               data={props.data[k]}
               depth={(props.depth ?? 0) + 1}

src/components/ui/hover-card.tsx

···
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

src/routes/at:/$handle.index.tsx

···
 } from "@atcute/oauth-browser-client";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { AtSign } from "lucide-react";
-import { useState, useEffect } from "preact/compat";
+import { useState, useEffect, Fragment } from "preact/compat";
 
 interface RepoData {
   data?: ComAtprotoRepoDescribeRepo.Output;
···
               href={`https://${identity.identity.pds.hostname}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-blue-500 hover:underline"
+              className="text-blue-600 dark:text-blue-400 hover:underline"
             >
               {identity.identity.pds.hostname}
             </a>
···
           <div className="pt-2">
             <h2 className="text-xl font-bold mb-1">Collections</h2>
             <ul className="list-inside space-y-1">
-              {data.collections.map((c) => (
-                <li
-                  key={c}
-                  className="text-blue-500 hover:no-underline border-b hover:border-border border-transparent w-min"
-                >
-                  <Link
-                    to="/at:/$handle/$collection"
-                    params={{
-                      handle: handle, // Use original handle for navigation consistency
-                      collection: c,
-                    }}
-                  >
-                    {c}
-                  </Link>
-                </li>
+              {data.collections.map((c, i) => (
+                <Fragment key={c}>
+                  {c.split(".").slice(0, 2).join(".") !=
+                    (i > 0 &&
+                      data.collections[i - 1]
+                        .split(".")
+                        .slice(0, 2)
+                        .join(".")) && (
+                    <div className="w-min pt-2">
+                      {c.split(".").slice(0, 2).join(".")}{" "}
+                    </div>
+                  )}
+                  <li className="text-blue-600 dark:text-blue-400 hover:no-underline border-b hover:border-border border-transparent w-min">
+                    <Link
+                      className="ml-4"
+                      to="/at:/$handle/$collection"
+                      params={{
+                        handle: handle, // Use original handle for navigation consistency
+                        collection: c,
+                      }}
+                    >
+                      {c}
+                    </Link>
+                  </li>
+                </Fragment>
               ))}
             </ul>
           </div>

src/routes/at:/$handle/$collection.index.lazy.tsx

···
 import { Loader } from "@/components/ui/loader";
 import { useDocumentTitle } from "@/hooks/useDocumentTitle";
 import { QtClient } from "@/providers/qtprovider";
-import { ComAtprotoRepoListRecords } from "@atcute/client/lexicons";
+import { RenderJson } from "@/components/renderJson";
+import {
+  ComAtprotoRepoGetRecord,
+  ComAtprotoRepoListRecords,
+} from "@atcute/client/lexicons";
 import {
   IdentityMetadata,
   resolveFromIdentity,
 } from "@atcute/oauth-browser-client";
 import { createLazyFileRoute, Link } from "@tanstack/react-router";
 import { useEffect, useRef, useState } from "preact/hooks";
+// Import HoverCard components
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
 
 export const Route = createLazyFileRoute("/at:/$handle/$collection/")({
   component: RouteComponent,
···
   error: Error | null;
 }
 
+// State to hold fetched data for the *currently* hovered card
+interface HoveredRecordState {
+  uri: string | null; // Which URI is being hovered/fetched for
+  data: ComAtprotoRepoGetRecord.Output | null;
+  loading: boolean;
+  error: Error | null;
+}
+
 function useCollectionRecords(
   handle: string,
   collection: string,
 ): CollectionRecords {
+  // (Keep the existing useCollectionRecords hook as is)
   const [state, setState] = useState<CollectionRecords>({
     isLoading: false,
     error: null,
···
     useCollectionRecords(handle, collection);
   const loaderRef = useRef<HTMLDivElement>(null);
 
+  // State for the *single* actively fetched/displayed hover card
+  const [hoveredRecordState, setHoveredRecordState] =
+    useState<HoveredRecordState>({
+      uri: null,
+      data: null,
+      loading: false,
+      error: null,
+    });
+  // Ref to prevent fetching multiple times if hover is rapid
+  const fetchTimeoutRef = useRef<number | null>(null);
+
   useDocumentTitle(records ? `${collection} | atp.tools` : "atp.tools");
 
+  // Function to fetch single record data (triggered by HoverCard)
+  const fetchHoverRecordData = async (recordUri: string) => {
+    if (!identity || hoveredRecordState.uri === recordUri) return; // Don't refetch if already fetched/fetching for this URI
+
+    // Clear previous fetch timeout if any
+    if (fetchTimeoutRef.current) {
+      clearTimeout(fetchTimeoutRef.current);
+    }
+
+    // Set loading state for the new URI
+    setHoveredRecordState({
+      uri: recordUri,
+      data: null,
+      loading: true,
+      error: null,
+    });
+
+    // Use a timeout to delay the actual fetch slightly
+    fetchTimeoutRef.current = window.setTimeout(async () => {
+      try {
+        const rpc = new QtClient(identity.pds);
+        const recordParts = recordUri.replace("at://", "").split("/");
+        if (recordParts.length !== 3) throw new Error("Invalid record URI");
+
+        const response = await rpc
+          .getXrpcClient()
+          .get("com.atproto.repo.getRecord", {
+            params: {
+              repo: recordParts[0],
+              collection: recordParts[1],
+              rkey: recordParts[2],
+            },
+          });
+
+        // Update state only if the URI still matches the one we started fetching for
+        setHoveredRecordState(
+          (prev) =>
+            prev.uri === recordUri
+              ? { ...prev, data: response.data, loading: false, error: null }
+              : prev, // Ignore if URI changed during fetch
+        );
+      } catch (err: any) {
+        console.error("Failed to fetch record on hover:", err);
+        // Update state only if the URI still matches
+        setHoveredRecordState(
+          (prev) =>
+            prev.uri === recordUri
+              ? {
+                  ...prev,
+                  data: null,
+                  loading: false,
+                  error:
+                    err instanceof Error
+                      ? err
+                      : new Error("Failed to fetch record"),
+                }
+              : prev, // Ignore if URI changed during fetch
+        );
+      } finally {
+        fetchTimeoutRef.current = null;
+      }
+    }, 150); // ~150ms delay before fetching starts
+  };
+
+  const resetHoverState = () => {
+    // Clear fetch timeout if card closes before fetch starts
+    if (fetchTimeoutRef.current) {
+      clearTimeout(fetchTimeoutRef.current);
+      fetchTimeoutRef.current = null;
+    }
+    // Optionally reset state immediately, or let HoverCard handle closing visual
+    // setHoveredRecordState({ uri: null, data: null, loading: false, error: null });
+  };
+
   useEffect(() => {
+    // (Intersection Observer logic remains the same)
     if (!loaderRef.current) return;
-
     const observer = new IntersectionObserver(
       (entries) => {
         const target = entries[0];
···
       },
       { threshold: 0.1, rootMargin: "50px" },
     );
-
     observer.observe(loaderRef.current);
     return () => observer.disconnect();
   }, [cursor, isLoading, fetchMore]);
···
   }
 
   return (
+    // No relative positioning needed on the parent here
     <div className="flex flex-row justify-center w-full min-h-[calc(100vh-5rem)]">
       <div className="max-w-md lg:max-w-2xl w-[90vw] mx-4 md:mt-16 space-y-2">
+        {/* Header Link and PDS info */}
         <Link
           to="/at:/$handle"
           params={{ handle: identity?.raw ?? "" }}
···
 
         <h2 className="text-2xl">{collection} collections:</h2>
         <div>
-          <ul>
+          <ul className="list-none p-0 m-0">
             {records?.map((r) => (
-              <li key={r.uri} className="text-blue-500">
-                <Link
-                  to="/at:/$handle/$collection/$rkey"
-                  params={{
-                    handle: handle,
-                    collection: collection,
-                    rkey: r.uri.split("/").pop() ?? "",
+              <li key={r.uri} className="py-1">
+                {" "}
+                {/* Remove hover styling/handlers from li */}
+                <HoverCard
+                  openDelay={200} // Standard delay before opening
+                  closeDelay={100} // Standard delay before closing
+                  onOpenChange={(isOpen) => {
+                    if (isOpen) {
+                      fetchHoverRecordData(r.uri);
+                    } else {
+                      resetHoverState();
+                    }
                   }}
                 >
-                  {r.uri.split("/").pop()}
-                </Link>
+                  <HoverCardTrigger asChild>
+                    {/* The Link component itself triggers the hover card */}
+                    <Link
+                      className="text-blue-600 dark:text-blue-400 hover:underline" // Add underline on hover for affordance
+                      to="/at:/$handle/$collection/$rkey"
+                      params={{
+                        handle: handle, // or identity?.raw ?? handle
+                        collection: collection,
+                        rkey: r.uri.split("/").pop() ?? "",
+                      }}
+                    >
+                      {r.uri.split("/").pop()}
+                    </Link>
+                  </HoverCardTrigger>
+                  <HoverCardContent
+                    className="w-auto max-w-lg max-h-96 overflow-auto text-xs" // Adjust width/styling as needed
+                    // Optional: Add side="top|bottom|left|right" align="start|center|end" for positioning
+                    side="right"
+                    align="start"
+                  >
+                    {/* Render content based on the shared hover state, *if* the URI matches */}
+                    {hoveredRecordState.uri === r.uri ? (
+                      <>
+                        {hoveredRecordState.loading && <Loader />}
+                        {hoveredRecordState.error && (
+                          <ShowError error={hoveredRecordState.error} />
+                        )}
+                        {hoveredRecordState.data && identity && (
+                          <RenderJson
+                            data={hoveredRecordState.data.value}
+                            did={identity.id}
+                            pds={identity.pds.toString()}
+                          />
+                        )}
+                      </>
+                    ) : (
+                      // Can show a mini-loader here too if desired while waiting for fetchHoverRecordData to set loading state
+                      <Loader />
+                    )}
+                  </HoverCardContent>
+                </HoverCard>
               </li>
             ))}
           </ul>
 
+          {/* Infinite scroll loader */}
           <div
             ref={loaderRef}
             className="flex flex-row justify-center h-10 -pt-16"