Fix a bunch of stuff

IroncladDev · Feb 22, 2024 · 10cfcff · 10cfcff
1 parent 2e7a6e0
commit 10cfcff
Show file tree

Hide file tree

Showing 20 changed files with 279 additions and 156 deletions.
diff --git a/app/about/sections/header.tsx b/app/about/sections/header.tsx
@@ -61,7 +61,7 @@ export default function Header({
           >
             AI to AI
           </Text>
-          <Text size="lg" color="dimmer">
+          <Text size="lg" color="dimmer" multiline center>
             Create beautiful side-by-side LLM Comparisons
           </Text>
         </HeaderContent>
@@ -75,7 +75,7 @@ const Container = styled(MotionDiv, {
 })
 
 const Content = styled("div", {
-  base: "flex flex-col grow max-w-screen-md w-full self-center"
+  base: "flex flex-col grow max-w-screen-md max-md:max-w-screen max-md:p-4 w-full self-center"
 })
 
 const HeaderContent = styled(MotionDiv, {

diff --git a/app/compare/content.tsx b/app/compare/content.tsx
@@ -3,12 +3,13 @@
 import { MotionContainer } from "@/components/container"
 import gr from "@/lib/gradients"
 import { tokens } from "@/tailwind.config"
+import { User } from "@prisma/client"
 import { styled } from "react-tailwind-variants"
 import Comparison from "./comparison"
 import Sidebar from "./sidebar"
 import { useCompareState } from "./state"
 
-export default function Content() {
+export default function Content({ currentUser }: { currentUser: User | null }) {
   const sidebar = useCompareState(state => state.sidebar)
 
   return (
@@ -37,7 +38,7 @@ export default function Content() {
       }}
     >
       <SidebarContainer open={sidebar}>
-        <Sidebar />
+        <Sidebar currentUser={currentUser} />
       </SidebarContainer>
       <ContentContainer>
         <Comparison />

diff --git a/app/compare/item/boolean-table.tsx b/app/compare/item/boolean-table.tsx
@@ -17,7 +17,7 @@ export default function BooleanTable({
     filter.includes("nullFields")
       ? field.values
       : field.values.filter(([, v]) => v.value !== null)
-  ).toSorted((a, b) => {
+  ).sort((a, b) => {
     switch (sort) {
       case "value-asc":
         return a[1] && !b[1] ? 1 : !a[1] && b[1] ? -1 : 0

diff --git a/app/compare/item/numeric-chart.tsx b/app/compare/item/numeric-chart.tsx
@@ -18,7 +18,7 @@ export default function NumericChart({
     filter.includes("nullFields")
       ? field.values
       : field.values.filter(([, v]) => v.value !== null)
-  ).toSorted((a, b) => {
+  ).sort((a, b) => {
     switch (sort) {
       case "value-asc":
         return Number(a[1]) - Number(b[1])

diff --git a/app/compare/item/string-table.tsx b/app/compare/item/string-table.tsx
@@ -16,7 +16,7 @@ export default function StringTable({
     filter.includes("nullFields")
       ? field.values
       : field.values.filter(([, v]) => v.value !== null)
-  ).toSorted((a, b) => {
+  ).sort((a, b) => {
     switch (sort) {
       case "value-asc":
         return String(a[1]).localeCompare(String(b[1]))

diff --git a/app/compare/sidebar.tsx b/app/compare/sidebar.tsx
@@ -1,13 +1,14 @@
 import OverflowScroll from "@/components/overflow"
 import { Button } from "@/components/ui/button"
 import Text from "@/components/ui/text"
+import { User, UserRole } from "@prisma/client"
 import { Hexagon, PlusIcon, XIcon } from "lucide-react"
 import Link from "next/link"
 import { styled } from "react-tailwind-variants"
 import LLMSearch from "./search"
 import { useCompareState } from "./state"
 
-export default function Sidebar() {
+export default function Sidebar({ currentUser }: { currentUser: User | null }) {
   const {
     llms,
     sidebar: open,
@@ -87,8 +88,44 @@ export default function Sidebar() {
         <FooterSection>
           <FooterLinks>
             <FooterLink href="/about">About</FooterLink>
-            <FooterLink href="/contribute">Contribute</FooterLink>
-            <FooterLink href="/login">Log In</FooterLink>
+            <FooterLink
+              href="/contribute"
+              hidden={
+                currentUser?.role === "contributor" ||
+                currentUser?.role === "admin"
+              }
+            >
+              Contribute
+            </FooterLink>
+            <FooterLink href="/login" hidden={!!currentUser}>
+              Log In
+            </FooterLink>
+            <FooterLink
+              href="/llms"
+              hidden={
+                !currentUser ||
+                (currentUser?.role !== UserRole.admin &&
+                  currentUser?.role !== UserRole.contributor)
+              }
+            >
+              LLMs
+            </FooterLink>
+            <FooterLink
+              href="/submit"
+              hidden={
+                !currentUser ||
+                (currentUser?.role !== UserRole.admin &&
+                  currentUser?.role !== UserRole.contributor)
+              }
+            >
+              Submit an LLM
+            </FooterLink>
+            <FooterLink
+              href="/admin"
+              hidden={!currentUser || currentUser?.role !== UserRole.admin}
+            >
+              Admin
+            </FooterLink>
             <FooterLink
               href="https://github.com/IroncladDev/ai-to-ai"
               target="_blank"

diff --git a/app/contribute/cta.tsx b/app/contribute/cta.tsx
@@ -27,7 +27,7 @@ export default function Cta() {
       }}
     >
       <Content>
-        <Text size="h1" weight="bold" color="dimmer">
+        <Text size="h1" weight="bold" color="dimmer" multiline center>
           Join as a Contributor
         </Text>
         <Text size="lg" color="dimmest" multiline paragraph center>
@@ -47,5 +47,5 @@ const Container = styled(MotionDiv, {
 })
 
 const Content = styled("div", {
-  base: "flex flex-col grow max-w-screen-md w-full self-center py-16 justify-center items-center gap-8"
+  base: "flex flex-col grow max-w-screen-md w-full max-md:max-w-screen max-md:px-4 self-center py-16 justify-center items-center gap-8"
 })
diff --git a/app/contribute/header.tsx b/app/contribute/header.tsx
@@ -57,10 +57,16 @@ export default function Header({
     <Container style={{ background }}>
       <Content>
         <HeaderContent style={{ translateY }}>
-          <Text size="display" weight="bold" className="leading-tight">
+          <Text
+            size="display"
+            weight="bold"
+            className="leading-tight"
+            center
+            multiline
+          >
             Contributing
           </Text>
-          <Text color="dimmer" size="lg">
+          <Text color="dimmer" size="lg" center multiline>
             All comparable LLMs are added by contributors like you
           </Text>
           <DownButton variant="highlight" asChild className="mt-8">
@@ -79,7 +85,7 @@ const Container = styled(MotionDiv, {
 })
 
 const Content = styled("div", {
-  base: "flex flex-col grow max-w-screen-md w-full self-center"
+  base: "flex flex-col grow max-w-screen-md max-md:max-w-screen max-md:p-4 w-full self-center"
 })
 
 const HeaderContent = styled(MotionDiv, {

diff --git a/app/llms/components/LLMOverlay/Votes.tsx b/app/llms/components/LLMOverlay/Votes.tsx
@@ -81,9 +81,11 @@ export default function Votes({
             {status === "pending" && "remainingApprovals" in consensus && (
               <VoteStat className="border-t border-outline-dimmest pt-2">
                 <Text color="dimmer" size="sm">
-                  {approvals >= rejections
-                    ? `${consensus.remainingApprovals} more approvals required`
-                    : `${consensus.remainingRejections} more rejections required`}
+                  {llm.votes.length < 4
+                    ? "Four votes required until approved/rejected"
+                    : approvals >= rejections
+                      ? `${consensus.remainingApprovals} more approvals required`
+                      : `${consensus.remainingRejections} more rejections required`}
                 </Text>
                 <PendingBadge>Pending</PendingBadge>
               </VoteStat>
@@ -229,7 +231,7 @@ const IndicatorBar = styled(MotionDiv, {
 })
 
 const Container = styled("div", {
-  base: "flex flex-col gap-2"
+  base: "flex flex-col gap-2 min-h-[160px]"
 })
 
 const VoteContainer = styled("div", {

diff --git a/app/llms/components/LLMOverlay/index.tsx b/app/llms/components/LLMOverlay/index.tsx
@@ -202,5 +202,5 @@ const ContentSection = styled("div", {
 })
 
 export const ContentContainer = styled("div", {
-  base: "flex flex-col gap-4 h-full"
+  base: "flex flex-col gap-4 h-auto"
 })
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,8 @@
+import { getSession } from "@/lib/server/utils/session"
 import Content from "./compare/content"
 
 export default async function Home() {
-  return <Content />
+  const res = await getSession()
+
+  return <Content currentUser={res?.user} />
 }