diff --git a/package.json b/package.json index 14e4d6d..5161c59 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ "lint": "next lint", "start": "next start", "codegen": "tsx src/codegen/export-openai-types.ts", - "seed": "tsx prisma/seed.ts" + "seed": "tsx prisma/seed.ts", + "check": "concurrently 'pnpm lint' 'pnpm tsc' 'pnpm prettier . --check'" }, "dependencies": { "@babel/preset-typescript": "^7.22.5", @@ -27,6 +28,7 @@ "@emotion/react": "^11.11.1", "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", + "@fontsource/inconsolata": "^5.0.5", "@monaco-editor/loader": "^1.3.3", "@next-auth/prisma-adapter": "^1.0.5", "@prisma/client": "^4.14.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b098a06..21cd5c3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,9 @@ dependencies: '@emotion/styled': specifier: ^11.11.0 version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.6)(react@18.2.0) + '@fontsource/inconsolata': + specifier: ^5.0.5 + version: 5.0.5 '@monaco-editor/loader': specifier: ^1.3.3 version: 1.3.3(monaco-editor@0.40.0) @@ -2261,6 +2264,10 @@ packages: '@floating-ui/core': 1.3.1 dev: false + /@fontsource/inconsolata@5.0.5: + resolution: {integrity: sha512-uU9t2j/hq4UweFXTjo+geLPFqhTucDdeei/a4BEHdtFPwJIfXLXmzlHeDrjOatHYGbRlJlydS4Ipr16A4O/e5A==} + dev: false + /@graphile/logger@0.2.0: resolution: {integrity: sha512-jjcWBokl9eb1gVJ85QmoaQ73CQ52xAaOCF29ukRbYNl6lY+ts0ErTaDYOBlejcbUs2OpaiqYLO5uDhyLFzWw4w==} dev: false diff --git a/src/components/experiments/ExperimentCard.tsx b/src/components/experiments/ExperimentCard.tsx index 7f583cd..ff33448 100644 --- a/src/components/experiments/ExperimentCard.tsx +++ b/src/components/experiments/ExperimentCard.tsx @@ -1,15 +1,4 @@ -import { - Card, - CardBody, - HStack, - Icon, - VStack, - Text, - CardHeader, - Divider, - Spinner, - AspectRatio, -} from "@chakra-ui/react"; +import { HStack, Icon, VStack, Text, Divider, Spinner, AspectRatio } from "@chakra-ui/react"; import { RiFlaskLine } from "react-icons/ri"; import { formatTimePast } from "~/utils/dayjs"; import Link from "next/link"; @@ -30,22 +19,24 @@ type ExperimentData = { export const ExperimentCard = ({ exp }: { exp: ExperimentData }) => { return ( - - + + {exp.label} - - - + @@ -55,8 +46,8 @@ export const ExperimentCard = ({ exp }: { exp: ExperimentData }) => { Updated {formatTimePast(exp.updatedAt)} - - + + ); }; @@ -75,7 +66,6 @@ const CountLabel = ({ label, count }: { label: string; count: number }) => { export const NewExperimentCard = () => { const router = useRouter(); - const utils = api.useContext(); const createMutation = api.experiments.create.useMutation(); const [createExperiment, isLoading] = useHandledAsyncCallback(async () => { const newExperiment = await createMutation.mutateAsync({ label: "New Experiment" }); @@ -83,15 +73,23 @@ export const NewExperimentCard = () => { }, [createMutation, router]); return ( - - - - - - New Experiment - - - - + + + + + New Experiment + + + ); }; diff --git a/src/components/nav/AppShell.tsx b/src/components/nav/AppShell.tsx index de793f3..5059be4 100644 --- a/src/components/nav/AppShell.tsx +++ b/src/components/nav/AppShell.tsx @@ -1,24 +1,22 @@ +import { useState, useEffect } from "react"; import { Heading, VStack, Icon, HStack, Image, - Grid, - GridItem, - Divider, Text, Box, type BoxProps, type LinkProps, Link, + Flex, } from "@chakra-ui/react"; import Head from "next/head"; import { BsGithub, BsPersonCircle } from "react-icons/bs"; import { useRouter } from "next/router"; import { type IconType } from "react-icons"; import { RiFlaskLine } from "react-icons/ri"; -import { useState, useEffect } from "react"; import { signIn, useSession } from "next-auth/react"; import UserMenu from "./UserMenu"; @@ -28,40 +26,48 @@ const IconLink = ({ icon, label, href, target, color, ...props }: IconLinkProps) const router = useRouter(); const isActive = href && router.pathname.startsWith(href); return ( - - - - {label} - - + + + {label} + + ); }; +const Divider = () => ; + const NavSidebar = () => { const user = useSession().data; return ( - - - - - - OpenPipe - - - - + + + + + OpenPipe + + {user != null && ( <> @@ -115,22 +121,14 @@ export default function AppShell(props: { children: React.ReactNode; title?: str }, []); return ( - + {props.title ? `${props.title} | OpenPipe` : "OpenPipe"} - - - - + + {props.children} - - + + ); } diff --git a/src/components/nav/UserMenu.tsx b/src/components/nav/UserMenu.tsx index 14012e2..c016669 100644 --- a/src/components/nav/UserMenu.tsx +++ b/src/components/nav/UserMenu.tsx @@ -15,13 +15,7 @@ import { BsBoxArrowRight, BsChevronRight, BsPersonCircle } from "react-icons/bs" export default function UserMenu({ user }: { user: Session }) { const profileImage = user.user.image ? ( - profile picture + profile picture ) : ( ); diff --git a/src/pages/experiments/index.tsx b/src/pages/experiments/index.tsx index c268b04..241dc8a 100644 --- a/src/pages/experiments/index.tsx +++ b/src/pages/experiments/index.tsx @@ -1,6 +1,5 @@ import { SimpleGrid, - HStack, Icon, VStack, Breadcrumb, @@ -9,6 +8,7 @@ import { Center, Text, Link, + HStack, } from "@chakra-ui/react"; import { RiFlaskLine } from "react-icons/ri"; import AppShell from "~/components/nav/AppShell"; @@ -43,8 +43,8 @@ export default function ExperimentsPage() { return ( - - + + diff --git a/src/utils/theme.ts b/src/utils/theme.ts index 953a07a..010cf4d 100644 --- a/src/utils/theme.ts +++ b/src/utils/theme.ts @@ -1,4 +1,5 @@ import { extendTheme } from "@chakra-ui/react"; +import "@fontsource/inconsolata"; const systemFont = 'ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"';