fix: remaining dependabot security issues (#890)

* Upgrade docs deps

* Upgrade frontend to latest deps

* Update package overrides

* Remove redundant deps

* Add tailwind postcss plugin

* Replace language select with chakra

* Fix main nav

* Patch gray matter

* Fix webpack override

* Replace python-jose with pyjwt

* Override kv url for frontend in compose

* Upgrade hatchet sdk

* Update docs

* Supress pydantic warnings

www/app/(app)/layout.tsx

@@ -1,10 +1,8 @@
 import { Container, Flex } from "@chakra-ui/react";
-import { featureEnabled } from "../lib/features";
 import NextLink from "next/link";
 import Image from "next/image";
-import UserInfo from "../(auth)/userInfo";
 import AuthWrapper from "./AuthWrapper";
-import { RECORD_A_MEETING_URL } from "../api/urls";
+import MainNav from "../components/MainNav";
 
 export default async function AppLayout({
   children,
@@ -47,44 +45,7 @@ export default async function AppLayout({
             </p>
           </div>
         </NextLink>
-        <div>
-          {/* Text link on the right */}
-          <NextLink href={RECORD_A_MEETING_URL} className="font-light px-2">
-            Create
-          </NextLink>
-          {featureEnabled("browse") ? (
-            <>
-              &nbsp;·&nbsp;
-              <NextLink href="/browse" className="font-light px-2">
-                Browse
-              </NextLink>
-            </>
-          ) : (
-            <></>
-          )}
-          {featureEnabled("rooms") ? (
-            <>
-              &nbsp;·&nbsp;
-              <NextLink href="/rooms" className="font-light px-2">
-                Rooms
-              </NextLink>
-            </>
-          ) : (
-            <></>
-          )}
-          {featureEnabled("requireLogin") ? (
-            <>
-              &nbsp;·&nbsp;
-              <NextLink href="/settings/api-keys" className="font-light px-2">
-                Settings
-              </NextLink>
-              &nbsp;·&nbsp;
-              <UserInfo />
-            </>
-          ) : (
-            <></>
-          )}
-        </div>
+        <MainNav />
       </Flex>
 
       <AuthWrapper>{children}</AuthWrapper>

www/app/(app)/transcripts/new/page.tsx

@@ -1,13 +1,11 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import useAudioDevice from "../useAudioDevice";
-import "react-select-search/style.css";
 import "../../../styles/form.scss";
 import About from "../../../(aboutAndPrivacy)/about";
 import Privacy from "../../../(aboutAndPrivacy)/privacy";
 import { useRouter } from "next/navigation";
 import useCreateTranscript from "../createTranscript";
-import SelectSearch from "react-select-search";
 import { supportedLanguages } from "../../../supportedLanguages";
 import {
   Flex,
@@ -21,6 +19,7 @@ import {
 } from "@chakra-ui/react";
 import { useAuth } from "../../../lib/AuthProvider";
 import { featureEnabled } from "../../../lib/features";
+import { SearchableLanguageSelect } from "../../../components/SearchableLanguageSelect";
 
 const TranscriptCreate = () => {
   const router = useRouter();
@@ -147,31 +146,27 @@ const TranscriptCreate = () => {
                 p={8}
                 flexDir="column"
                 my={4}
+                className="form-on-primary"
               >
                 <Heading size="xl" mb={4}>
                   Try Reflector
                 </Heading>
                 <Box mb={4}>
-                  <Text>Recording name</Text>
-                  <div className="select-search-container">
-                    <input
-                      className="select-search-input"
-                      type="text"
-                      onChange={nameChange}
-                      placeholder="Optional"
-                    />
-                  </div>
+                  <Text mb={1}>Recording name</Text>
+                  <input
+                    className="form-field-input"
+                    type="text"
+                    onChange={nameChange}
+                    placeholder="Optional"
+                  />
                 </Box>
                 <Box mb={4}>
-                  <Text>Do you want to enable live translation?</Text>
-                  <SelectSearch
-                    search
+                  <Text mb={1}>Do you want to enable live translation?</Text>
+                  <SearchableLanguageSelect
                     options={supportedLanguages}
                     value={targetLanguage}
                     onChange={onLanguageChange}
-                    onBlur={() => {}}
-                    onFocus={() => {}}
-                    placeholder="Choose your language"
+                    placeholder="No translation"
                   />
                 </Box>
                 {!loading ? (