sort by latest

app/compare/content.tsx

@@ -3,12 +3,20 @@
 import { Container } from "@/components/container"
 import { Button } from "@/components/ui/button"
 import Flex from "@/components/ui/flex"
+import { Sheet, SheetContent } from "@/components/ui/sheet"
 import Text from "@/components/ui/text"
 import useClientRect from "@/hooks/useElementSize"
-import { ArrowRightIcon, MenuIcon, PencilIcon } from "lucide-react"
+import {
+  ArrowRightIcon,
+  ExternalLinkIcon,
+  MenuIcon,
+  PencilIcon,
+  XIcon,
+} from "lucide-react"
 import Link from "next/link"
 import { useEffect, useState } from "react"
 import { styled } from "react-tailwind-variants"
+import FieldTable from "../llms/components/FieldTable"
 import { name, title } from "../metadata"
 import LLMContainer from "./llms"
 import Sidebar from "./sidebar"
@@ -25,6 +33,7 @@ export default function Content({
   const [llms, setLLMs] = useState(initialLLMs)
   const [sidebarOpen, setSidebarOpen] = useState(true)
   const [containerRef, containerRect] = useClientRect<HTMLDivElement>()
+  const [selectedLLM, setSelectedLLM] = useState<LLMWithMetadata | null>(null)
 
   useEffect(() => {
     if (mode === ModeEnum.edit) {
@@ -51,6 +60,7 @@ export default function Content({
             })
             setLLMs(items)
           }}
+          setSelectedLLM={setSelectedLLM}
         />
       )}
       <ContentContainer>
@@ -93,6 +103,48 @@ export default function Content({
           </SidebarButton>
         )}
       </ContentContainer>
+      <Sheet
+        open={Boolean(selectedLLM)}
+        onOpenChange={open => setSelectedLLM(open ? selectedLLM : null)}
+      >
+        <SheetContent>
+          <Flex gap={2} align="center" justify="between">
+            <Text size="lg" weight="semibold" className="grow">
+              {selectedLLM?.name}
+            </Text>
+            <Button
+              variant="outline"
+              onClick={() => setSelectedLLM(null)}
+              size="icon"
+            >
+              <XIcon className="w-4 h-4" />
+            </Button>
+          </Flex>
+          <Flex col gap={2}>
+            <Text weight="medium">Metadata Fields</Text>
+            <FieldTable fields={selectedLLM?.fields || []} />
+          </Flex>
+          <Flex col gap={2}>
+            <Text weight="medium">Source Description</Text>
+            <Text multiline markdown color="dimmer">
+              {selectedLLM?.sourceDescription}
+            </Text>
+          </Flex>
+          <Flex col gap={2}>
+            <Text color="dimmest" size="xs">
+              Uploaded by{" "}
+              <a
+                href={`https://github.com/${selectedLLM?.user.handle}`}
+                target="_blank"
+                className="text-accent-dimmer border-b border-accent-dimmer"
+              >
+                {selectedLLM?.user.handle}
+                <ExternalLinkIcon className="w-3 h-3 inline-block ml-1 mb-1 align-middle" />
+              </a>
+            </Text>
+          </Flex>
+        </SheetContent>
+      </Sheet>
     </Container>
   )
 }

app/compare/item/numeric-chart.tsx

@@ -101,7 +101,9 @@ function RowItem({
               N/A
             </Text>
           ) : isBarTooSmall ? (
-            <Text style={{ color: fg3 }}>{abbrNumber(value as number)}</Text>
+            <Text style={{ color: fg3 }} size="xs">
+              {abbrNumber(value as number)}
+            </Text>
           ) : null}
         </BarContainer>
       </Table.Cell>

app/compare/search.tsx

@@ -1,3 +1,4 @@
+import Flex from "@/components/ui/flex"
 import { Input } from "@/components/ui/input"
 import Text from "@/components/ui/text"
 import { useQuery } from "@tanstack/react-query"
@@ -76,11 +77,13 @@ const LLMSearch = forwardRef<
               highlighted={highlightedIndex === index}
               {...getItemProps({ item, index })}
             >
-              <ItemInfo>
+              <Flex align="center" gap={2} grow noBasis className="min-w-0">
                 <ItemIcon selected={llms.some(x => x.id === item.id)} />
                 <Text color="dimmer">{item.name}</Text>
-              </ItemInfo>
-              <Text color="dimmest">{item.fields.length} fields</Text>
+              </Flex>
+              <Text color="dimmest" className="shrink-0 min-w-0">
+                {item.fields.length} fields
+              </Text>
             </Item>
           ))}
         </ItemsContainer>
@@ -96,64 +99,54 @@ const LLMSearch = forwardRef<
 })
 LLMSearch.displayName = "LLMSearch"
 
-const {
-  Search,
-  DownshiftPopover,
-  ItemsContainer,
-  Item,
-  ItemInfo,
-  ItemIcon,
-  EmptyState,
-} = {
-  Search: styled("div", {
-    base: "flex relative basis-0 w-full min-w-0 grow",
-  }),
-  DownshiftPopover: styled("div", {
-    base: "w-full rounded-lg border-2 border-outline-dimmer/75 absolute top-12 left-0 bg-default z-10 shadow-lg",
-    variants: {
-      inputSize: {
-        default: "top-12",
-        lg: "top-14",
+const { Search, DownshiftPopover, ItemsContainer, Item, ItemIcon, EmptyState } =
+  {
+    Search: styled("div", {
+      base: "flex relative basis-0 w-full min-w-0 grow",
+    }),
+    DownshiftPopover: styled("div", {
+      base: "w-full rounded-lg border-2 border-outline-dimmer/75 absolute top-12 left-0 bg-default z-10 shadow-lg",
+      variants: {
+        inputSize: {
+          default: "top-12",
+          lg: "top-14",
+        },
+        loading: {
+          true: "animate-pulse",
+        },
       },
-      loading: {
-        true: "animate-pulse",
+      defaultVariants: {
+        inputSize: "default",
       },
-    },
-    defaultVariants: {
-      inputSize: "default",
-    },
-  }),
-  ItemsContainer: styled("ul", {
-    base: "flex-col hidden",
-    variants: {
-      visible: {
-        true: "flex",
+    }),
+    ItemsContainer: styled("ul", {
+      base: "flex-col hidden",
+      variants: {
+        visible: {
+          true: "flex",
+        },
       },
-    },
-  }),
-  Item: styled("li", {
-    base: "flex gap-2 justify-between p-2 first:rounded-t-md last:rounded-b-md",
-    variants: {
-      highlighted: {
-        true: "bg-higher",
+    }),
+    Item: styled("li", {
+      base: "flex gap-2 justify-between p-2 first:rounded-t-md last:rounded-b-md min-w-0 overflow-hidden",
+      variants: {
+        highlighted: {
+          true: "bg-higher",
+        },
       },
-    },
-  }),
-  ItemInfo: styled("div", {
-    base: "flex gap-2 items-center",
-  }),
-  ItemIcon: styled(Hexagon, {
-    base: "w-4 h-4",
-    variants: {
-      selected: {
-        true: "text-accent-dimmer fill-accent-dimmest/50",
-        false: "text-foreground-dimmest",
+    }),
+    ItemIcon: styled(Hexagon, {
+      base: "w-4 h-4",
+      variants: {
+        selected: {
+          true: "text-accent-dimmer fill-accent-dimmest/50",
+          false: "text-foreground-dimmest",
+        },
       },
-    },
-  }),
-  EmptyState: styled("div", {
-    base: "flex justify-center items-center p-4",
-  }),
-}
+    }),
+    EmptyState: styled("div", {
+      base: "flex justify-center items-center p-4",
+    }),
+  }
 
 export default LLMSearch

app/compare/search/route.ts

@@ -45,6 +45,9 @@ export async function GET(req: Request) {
         ].filter(Boolean) as Array<Prisma.LLMWhereInput>,
       },
       take: 10,
+      orderBy: {
+        createdAt: "desc",
+      },
       include: {
         fields: {
           include: {

app/compare/sidebar.tsx

@@ -56,12 +56,14 @@ export default function Sidebar({
   containerRef,
   llms,
   setLLMs,
+  setSelectedLLM,
   ...props
 }: React.ComponentPropsWithoutRef<typeof SidebarContainer> & {
   onOpenChange: React.Dispatch<React.SetStateAction<boolean>>
   containerRef: React.RefObject<HTMLDivElement>
   llms: Array<LLMWithMetadata>
   setLLMs: (items: Array<LLMWithMetadata>) => void
+  setSelectedLLM: React.Dispatch<React.SetStateAction<LLMWithMetadata | null>>
 }) {
   const {
     view,
@@ -341,17 +343,20 @@ export default function Sidebar({
           id="llm-sidebar-search"
         />
         {llms.map(item => (
-          <LLMListItem key={item.id}>
+          <LLMListItem key={item.id} onClick={() => setSelectedLLM(item)}>
             <LLMIcon size="sm" />
             <Text className="grow" color="dimmer">
               {item.name}
             </Text>
             <button
-              onClick={() => setLLMs(llms.filter(x => x.id !== item.id))}
+              onClick={e => {
+                e.stopPropagation()
+                setLLMs(llms.filter(x => x.id !== item.id))
+              }}
               disabled={llms.length < 3}
-              className="disabled:opacity-50 disabled:cursor-not-allowed"
+              className="disabled:opacity-50 disabled:cursor-not-allowed text-foreground-dimmer hover:text-foreground"
             >
-              <XIcon className="w-4 h-4 text-foreground-dimmer" />
+              <XIcon className="w-4 h-4" />
             </button>
           </LLMListItem>
         ))}
@@ -440,6 +445,6 @@ const {
     base: "flex gap-1 items-center border border-outline-dimmer rounded-md px-2 py-1 hover:border-accent-dimmer transition-colors text-foreground-dimmer hover:text-accent",
   }),
   LLMListItem: styled("div", {
-    base: "flex items-center gap-2 border-2 border-outline-dimmest rounded-lg px-2 py-1",
+    base: "flex items-center gap-2 border-2 border-outline-dimmest rounded-lg px-2 py-1 cursor-pointer hover:border-outline-dimmer hover:bg-highest transition-colors",
   }),
 }

app/compare/use-url-state.ts

@@ -12,9 +12,12 @@ export function useURLState() {
     llms,
     theme = ThemeEnum.crimson,
     view = ViewEnum.grid,
-    filter = [FilterEnum.number, FilterEnum.string, FilterEnum.boolean].join(
-      ",",
-    ),
+    filter = [
+      FilterEnum.number,
+      FilterEnum.string,
+      FilterEnum.boolean,
+      FilterEnum.nullFields,
+    ].join(","),
     mode = ModeEnum.view,
     padding = "24",
     spacing = "16",