Max 10, Obv contribution, reword, hide header

app/compare/llms.tsx

@@ -18,8 +18,17 @@ const LLMContainer = forwardRef<
   HTMLDivElement,
   { llms: Array<LLMWithMetadata>; rect?: DOMRect }
 >(({ llms, rect }, ref) => {
-  const { view, filter, theme, padding, spacing, ommitted, width, set } =
-    useURLState()
+  const {
+    view,
+    filter,
+    theme,
+    padding,
+    spacing,
+    ommitted,
+    width,
+    set,
+    hideHeader,
+  } = useURLState()
 
   const [container, box] = useClientRect<HTMLDivElement>()
 
@@ -94,42 +103,45 @@ const LLMContainer = forwardRef<
           >
             <DragHandleBar />
           </DragHandle>
-          <MotionFlex
-            style={{
-              paddingTop: springPadding,
-              paddingLeft: springPadding,
-              paddingRight: springPadding,
-              // not animating since it would cause issues with animating the gap
-              paddingBottom: spacing,
-            }}
-          >
-            <HeaderWidget
+          {hideHeader ? null : (
+            <MotionFlex
               style={{
-                borderColor: fg2 + "65",
+                paddingTop: springPadding,
+                paddingLeft: springPadding,
+                paddingRight: springPadding,
+                // not animating since it would cause issues with animating the gap
+                paddingBottom: spacing,
               }}
             >
-              <Text size="lg" weight="bold" center multiline asChild>
-                <h1>
-                  {llms.map((x, i) => (
-                    <Fragment key={x.id}>
-                      {x.name}
-                      {i < llms.length - 1 ? (
-                        <span className="text-foreground-dimmer font-medium">
-                          {" vs "}
-                        </span>
-                      ) : null}
-                    </Fragment>
-                  ))}
-                </h1>
-              </Text>
-            </HeaderWidget>
-          </MotionFlex>
+              <HeaderWidget
+                style={{
+                  borderColor: fg2 + "65",
+                }}
+              >
+                <Text size="lg" weight="bold" center multiline asChild>
+                  <h1>
+                    {llms.map((x, i) => (
+                      <Fragment key={x.id}>
+                        {x.name}
+                        {i < llms.length - 1 ? (
+                          <span className="text-foreground-dimmer font-medium">
+                            {" vs "}
+                          </span>
+                        ) : null}
+                      </Fragment>
+                    ))}
+                  </h1>
+                </Text>
+              </HeaderWidget>
+            </MotionFlex>
+          )}
           <ItemsContainer
             view={view}
             style={{
               paddingLeft: springPadding,
               paddingRight: springPadding,
               paddingBottom: springPadding,
+              paddingTop: hideHeader ? springPadding : undefined,
               // gap can't be animated, using the direct state value
               gap: spacing,
             }}

app/compare/search.tsx

@@ -68,7 +68,11 @@ const LLMSearch = forwardRef<
 
   return (
     <Search>
-      <Input size={size} {...getInputProps({ ref, ...props })} />
+      <Input
+        size={size}
+        {...getInputProps({ ref, ...props })}
+        disabled={llms.length >= 10}
+      />
       <DownshiftPopover hidden={!isOpen} inputSize={size} loading={isLoading}>
         <ItemsContainer visible={items.length > 0} {...getMenuProps()}>
           {items.map((item, index) => (

app/compare/sidebar.tsx

@@ -1,5 +1,6 @@
 import LLMIcon from "@/components/llm-icon"
 import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -75,6 +76,7 @@ export default function Sidebar({
     spacing,
     ommitted,
     setOmmittedField,
+    hideHeader,
   } = useURLState()
 
   const [hasActed, setHasActed] = useState(false)
@@ -311,6 +313,21 @@ export default function Sidebar({
           </Text>
         </Flex>
       </Flex>
+      <Flex col gap={1}>
+        <Flex gap={2} align="center">
+          <Text weight="medium" color="dimmer">
+            Hide Header
+          </Text>
+          <Checkbox
+            checked={hideHeader}
+            onCheckedChange={checked => {
+              set({
+                hideHeader: checked ? "true" : "false",
+              })
+            }}
+          />
+        </Flex>
+      </Flex>
       {ommitted.length > 0 && (
         <Flex col gap={1}>
           <Text weight="medium" color="dimmer">
@@ -339,7 +356,7 @@ export default function Sidebar({
           llms={llms}
           setLLMs={setLLMs}
           variant="elevated"
-          placeholder="Add another LLM"
+          placeholder={llms.length < 10 ? "Add another LLM" : "Max 10 LLMs"}
           id="llm-sidebar-search"
         />
         {llms.map(item => (

app/compare/state.ts

@@ -45,6 +45,7 @@ export const optionsSchema = z.object({
   padding: z.string().optional(),
   spacing: z.string().optional(),
   width: z.string().optional(),
+  hideHeader: z.enum(["true", "false"]).optional(),
 })
 
 export type OptionsType = z.infer<typeof optionsSchema>

app/compare/use-url-state.ts

@@ -23,6 +23,7 @@ export function useURLState() {
     spacing = "16",
     width = "1600",
     omit,
+    hideHeader = "false",
   }: OptionsType = Object.fromEntries(
     searchParams.entries(),
   ) as unknown as OptionsType
@@ -91,6 +92,7 @@ export function useURLState() {
     omit,
     ommitted,
     setOmmittedField,
+    hideHeader: hideHeader !== "false",
     padding: Number(padding),
     spacing: Number(spacing),
     width: Number(width),

app/contribute/join/content.tsx

@@ -8,7 +8,7 @@ import useClientRect from "@/hooks/useElementSize"
 import gr from "@/lib/gradients"
 import { colors, tokens } from "@/tailwind.config"
 import { useMotionValue, useSpring } from "framer-motion"
-import { GithubIcon, Loader2Icon } from "lucide-react"
+import { ExternalLinkIcon, Loader2Icon, PlusIcon } from "lucide-react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
 import { useCallback, useEffect, useState } from "react"
@@ -95,9 +95,8 @@ export default function ContributorLoginPage() {
           Apply as a Contributor
         </Text>
         <Text color="dimmer" multiline>
-          Your contribution request will be reviewed by an administrator
-          shortly. Once reviewed, you will be notified with further instructions
-          via email.
+          As a Contributor, you will be able to upload LLMs, vote on other
+          proposed LLMs, and help keep the information on LLM Arena up to date.
         </Text>
         <Button
           onClick={async () => {
@@ -120,12 +119,15 @@ export default function ContributorLoginPage() {
           {loading ? (
             <Loader2Icon className="w-4 h-4 animate-spin" />
           ) : (
-            <GithubIcon className="w-4 h-4" />
+            <PlusIcon className="w-4 h-4" />
           )}
-          <span>Join the waitlist</span>
+          <span>Apply to Contribute</span>
         </Button>
         <Button className="grow" asChild>
-          <Link href="/contribute">Read More</Link>
+          <a href="/contribute" target="_blank">
+            <span>Read More</span>
+            <ExternalLinkIcon className="w-4 h-4" />
+          </a>
         </Button>
         <Button variant="outline" className="grow" asChild>
           <Link href="/">No thanks</Link>

app/contribute/waitlist/content.tsx

@@ -76,8 +76,8 @@ export default function WaitlistPage({ position }: { position: number }) {
         </Text>
 
         <Text color="dimmer" multiline>
-          You are #{position} on the waitlist. You&apos;ll receive an email when
-          you can start contributing.
+          You are #{position} on the waitlist. You will be notified by email
+          shortly once an administrator approves your contribution request.
         </Text>
 
         <Button variant="highlightElevated" className="grow" asChild>

app/home/selector.tsx

@@ -12,6 +12,7 @@ import {
   PlusIcon,
   XIcon,
 } from "lucide-react"
+import Link from "next/link"
 import { useRouter } from "next/navigation"
 import { useEffect, useRef, useState } from "react"
 import { styled } from "react-tailwind-variants"
@@ -46,13 +47,19 @@ export default function Selector() {
           {name}
         </Text>
         <Text color="dimmer">
-          Select two or more LLMs to see a side-by-side comparison
+          Select 2-10 LLMs to see a side-by-side comparison
         </Text>
       </Flex>
       <LLMSearch
         llms={llms}
         setLLMs={setLLMs}
-        placeholder={llms.length === 0 ? "Add an LLM" : "Add another LLM"}
+        placeholder={
+          llms.length === 0
+            ? "Add an LLM"
+            : llms.length < 10
+              ? "Add another LLM"
+              : "Max 10 LLMs"
+        }
         size="lg"
         id="llm-search-input"
         ref={llmSearchRef}
@@ -119,6 +126,14 @@ export default function Selector() {
         See Comparison
         <ArrowRightIcon className="w-6 h-6" />
       </Button>
+      <Flex>
+        <Text color="dimmer">
+          Can&apos;t find an LLM?{" "}
+          <Link className="text-accent-dimmer" href="/contribute/join">
+            Add it
+          </Link>
+        </Text>
+      </Flex>
       <Sheet
         open={Boolean(selectedLLM)}
         onOpenChange={open => setSelectedLLM(open ? selectedLLM : null)}