From 42796d7d3f89f8538e6445918b192c49d4e2035a Mon Sep 17 00:00:00 2001 From: Mathieu Virbel Date: Wed, 4 Sep 2024 03:27:20 +0200 Subject: [PATCH] fix: rework main page to use Chakra, and a little bit of the browse page (#402) --- www/app/(app)/browse/page.tsx | 123 ++++++------ www/app/(app)/layout.tsx | 21 +-- www/app/(app)/transcripts/new/page.tsx | 249 +++++++++++++++---------- www/app/layout.tsx | 9 +- www/app/styles/theme.ts | 21 ++- www/public/reach.svg | 23 +++ 6 files changed, 271 insertions(+), 175 deletions(-) create mode 100644 www/public/reach.svg diff --git a/www/app/(app)/browse/page.tsx b/www/app/(app)/browse/page.tsx index dfc658ad..21fa553d 100644 --- a/www/app/(app)/browse/page.tsx +++ b/www/app/(app)/browse/page.tsx @@ -1,5 +1,6 @@ "use client"; import React, { useEffect, useState } from "react"; +import { useSession } from "next-auth/react"; import { GetTranscript } from "../../api"; import Pagination from "./pagination"; @@ -44,6 +45,7 @@ import { ExpandableText } from "../../lib/expandableText"; export default function TranscriptBrowser() { const [page, setPage] = useState(1); const { loading, response, refetch } = useTranscriptList(page); + const { data: session } = useSession(); const [deletionLoading, setDeletionLoading] = useState(false); const api = useApi(); const { setError } = useError(); @@ -124,8 +126,9 @@ export default function TranscriptBrowser() { flexDir="column" margin="auto" gap={2} - overflowY="scroll" - maxH="100%" + overflowY="auto" + minH="100%" + mt={8} > - {/* {user?.fields?.name}'s Meetings */} - Your Meetings + {session?.user?.name ? ( + {session?.user?.name}'s Meetings + ) : ( + Your meetings + )} + {loading || (deletionLoading && )} @@ -149,7 +156,6 @@ export default function TranscriptBrowser() { New Meeting - {response?.items @@ -169,49 +175,7 @@ export default function TranscriptBrowser() { .map((item: GetTranscript) => ( - - {item.status == "ended" && ( - - - - - - )} - {item.status == "error" && ( - - - - - - )} - {item.status == "idle" && ( - - - - - - )} - {item.status == "processing" && ( - - - - - - )} - {item.status == "recording" && ( - - - - - - )} + - - - {new Date(item.created_at).toLocaleString("en-US")} - {"\u00A0"}-{"\u00A0"} - {formatTimeMs(item.duration)} - + + + {item.status == "ended" && ( + + + + + + )} + {item.status == "error" && ( + + + + + + )} + {item.status == "idle" && ( + + + + + + )} + {item.status == "processing" && ( + + + + + + )} + {item.status == "recording" && ( + + + + + + )} + + {new Date(item.created_at).toLocaleString("en-US", { + year: "numeric", + month: "long", + day: "numeric", + hour: "numeric", + minute: "numeric", + })} + {"\u00A0"}-{"\u00A0"} + {formatTimeMs(item.duration)} + + {item.short_summary} diff --git a/www/app/(app)/layout.tsx b/www/app/(app)/layout.tsx index da758a97..89e9c276 100644 --- a/www/app/(app)/layout.tsx +++ b/www/app/(app)/layout.tsx @@ -29,25 +29,22 @@ export default async function AppLayout({ w="100%" py="2" px="0" + mt="1" > {/* Logo on the left */} - + Reflector -
-

+
+

Reflector

-

+

Capture the signal, not the noise

diff --git a/www/app/(app)/transcripts/new/page.tsx b/www/app/(app)/transcripts/new/page.tsx index 7b8eb2c2..fd3fdcb5 100644 --- a/www/app/(app)/transcripts/new/page.tsx +++ b/www/app/(app)/transcripts/new/page.tsx @@ -12,9 +12,36 @@ import SelectSearch from "react-select-search"; import { supportedLanguages } from "../../../supportedLanguages"; import { useSession } from "next-auth/react"; import { featureEnabled } from "../../../domainContext"; -import { Button, Text } from "@chakra-ui/react"; import { signIn } from "next-auth/react"; -import { Spinner } from "@chakra-ui/react"; +import { + Flex, + Box, + Spinner, + Heading, + Button, + Card, + Center, + Link, + CardBody, + Stack, + Text, + Icon, + Grid, + IconButton, + Spacer, + Menu, + MenuButton, + MenuItem, + MenuList, + AlertDialog, + AlertDialogOverlay, + AlertDialogContent, + AlertDialogHeader, + AlertDialogBody, + AlertDialogFooter, + Tooltip, + Input, +} from "@chakra-ui/react"; const TranscriptCreate = () => { const router = useRouter(); const { status } = useSession(); @@ -70,106 +97,132 @@ const TranscriptCreate = () => { useAudioDevice(); return ( -
-
-
-
-

Welcome to Reflector

-

- Reflector is a transcription and summarization pipeline that - transforms audio into knowledge. - - The output is meeting minutes and topic summaries enabling - topic-specific analyses stored in your systems of record. This - is accomplished on your infrastructure – without 3rd parties – - keeping your data private, secure, and organized. - -

- -

- In order to use Reflector, we kindly request permission to access - your microphone during meetings and events. -

- {featureEnabled("privacy") && ( - - )} -
-
-
- {!sessionReady ? ( - - ) : requireLogin && !isAuthenticated ? ( - - ) : ( -
-

Try Reflector

- - - {loading ? ( -

Checking permissions...

- ) : permissionOk ? ( -

Microphone permission granted

- ) : permissionDenied ? ( -

- Permission to use your microphone was denied, please change - the permission setting in your browser and refresh this page. -

- ) : ( + + {loading ? ( + Checking permissions... + ) : permissionOk ? ( + + ) : permissionDenied ? ( + + Permission to use your microphone was denied, please change + the permission setting in your browser and refresh this + page. + + ) : ( + + )} - )} - - - OR - - -
- )} -
-
-
+ + OR + + + + )} + + + + ); }; diff --git a/www/app/layout.tsx b/www/app/layout.tsx index efb3b10d..4dd0e79f 100644 --- a/www/app/layout.tsx +++ b/www/app/layout.tsx @@ -1,5 +1,4 @@ import "./styles/globals.scss"; -import { Poppins } from "next/font/google"; import { Metadata, Viewport } from "next"; import SessionProvider from "./lib/SessionProvider"; import { ErrorProvider } from "./(errors)/errorContext"; @@ -9,8 +8,6 @@ import { getConfig } from "./lib/edgeConfig"; import { ErrorBoundary } from "@sentry/nextjs"; import { Providers } from "./providers"; -const poppins = Poppins({ subsets: ["latin"], weight: ["200", "400", "600"] }); - export const viewport: Viewport = { themeColor: "black", width: "device-width", @@ -68,11 +65,7 @@ export default async function RootLayout({ return ( - + "something went really wrong"

}> diff --git a/www/app/styles/theme.ts b/www/app/styles/theme.ts index f0e42eba..4059bebc 100644 --- a/www/app/styles/theme.ts +++ b/www/app/styles/theme.ts @@ -1,12 +1,16 @@ -// 1. Import `extendTheme` import { extendTheme } from "@chakra-ui/react"; - +import { Poppins } from "next/font/google"; import { accordionAnatomy } from "@chakra-ui/anatomy"; import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"; const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(accordionAnatomy.keys); +const poppins = Poppins({ + subsets: ["latin"], + weight: ["200", "400", "600"], + display: "swap", +}); const custom = definePartsStyle({ container: { border: "0", @@ -29,6 +33,14 @@ const accordionTheme = defineMultiStyleConfig({ variants: { custom }, }); +const linkTheme = defineStyle({ + baseStyle: { + _hover: { + color: "blue.500", + textDecoration: "none", + }, + }, +}); export const colors = { blue: { primary: "#3158E2", @@ -60,6 +72,11 @@ const theme = extendTheme({ colors, components: { Accordion: accordionTheme, + Link: linkTheme, + }, + fonts: { + body: poppins.style.fontFamily, + heading: poppins.style.fontFamily, }, }); diff --git a/www/public/reach.svg b/www/public/reach.svg new file mode 100644 index 00000000..5105e899 --- /dev/null +++ b/www/public/reach.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + +