From 2aa285e52c4e63399a0a5006c279cbdbd424425d Mon Sep 17 00:00:00 2001
From: Kaushik Iska <iska.kaushik@gmail.com>
Date: Tue, 17 Oct 2023 08:26:39 -0400
Subject: [PATCH] [ui] Minor bugfixes and improvements (#524)

---
 ui/README.md                                  |  12 --
 ui/app/api/peers/route.ts                     |   7 +-
 ui/app/dto/PeersDTO.ts                        |   4 +
 ui/app/layout.tsx                             |   2 +-
 ui/app/mirrors/create/config.tsx              |   2 +-
 ui/app/mirrors/create/handlers.ts             |   5 +-
 ui/app/mirrors/create/page.tsx                |  10 +-
 ui/app/mirrors/edit/[mirrorId]/cdc.tsx        |   2 +-
 ui/app/mirrors/page.tsx                       |  24 +--
 .../{configuration => [peerType]}/handlers.ts |  12 +-
 .../helpers/common.ts                         |   3 +-
 .../helpers/pg.ts                             |   0
 .../helpers/sf.ts                             |   0
 .../{configuration => [peerType]}/page.tsx    |  22 ++-
 .../{configuration => [peerType]}/schema.ts   |   0
 ui/app/peers/create/configuration/types.ts    |   5 -
 ui/app/peers/create/page.tsx                  |   6 +-
 ui/app/peers/page.tsx                         |   7 +-
 ui/app/utils/callbacks.ts                     |   1 +
 ui/app/utils/prisma.ts                        |  14 +-
 ui/components/ConfigForm.tsx                  |   5 +-
 ui/lib/Icon/DeterminateProgressCircle.tsx     |   4 +-
 ui/lib/utils/cn.ts                            |   6 +
 ui/package.json                               |  10 +-
 ui/tailwind.config.ts                         |   2 +-
 ui/yarn.lock                                  | 181 +++++++++---------
 26 files changed, 185 insertions(+), 161 deletions(-)
 rename ui/app/peers/create/{configuration => [peerType]}/handlers.ts (91%)
 rename ui/app/peers/create/{configuration => [peerType]}/helpers/common.ts (84%)
 rename ui/app/peers/create/{configuration => [peerType]}/helpers/pg.ts (100%)
 rename ui/app/peers/create/{configuration => [peerType]}/helpers/sf.ts (100%)
 rename ui/app/peers/create/{configuration => [peerType]}/page.tsx (91%)
 rename ui/app/peers/create/{configuration => [peerType]}/schema.ts (100%)
 delete mode 100644 ui/app/peers/create/configuration/types.ts
 create mode 100644 ui/app/utils/callbacks.ts
 create mode 100644 ui/lib/utils/cn.ts

diff --git a/ui/README.md b/ui/README.md
index 5352c77e22..0cf45cf159 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -36,15 +36,3 @@ yarn storybook
 Open [http://localhost:6000](http://localhost:6000) with your browser to see the result.
 
 The stories and their corresponding components resides inside the `lib` folder.
-
-## Storybook Github pages
-
-The Storybook in this repositories Github pages at [Storybook](https://peerdb-io.github.io/peerdb-cloud-template).
-
-To deploy a new version of Storybook to Github pages run the script
-
-```bash
-yarn storybook:deploy
-```
-
-It will automatically run the storybook build, push the content to the branch `gh-pages` to automatically deply the newly built Storybook to Github pages.
diff --git a/ui/app/api/peers/route.ts b/ui/app/api/peers/route.ts
index 21c11bb224..4f98dc50b5 100644
--- a/ui/app/api/peers/route.ts
+++ b/ui/app/api/peers/route.ts
@@ -1,5 +1,8 @@
-import { UCreatePeerResponse, UValidatePeerResponse } from '@/app/dto/PeersDTO';
-import { PeerConfig } from '@/app/peers/create/configuration/types';
+import {
+  PeerConfig,
+  UCreatePeerResponse,
+  UValidatePeerResponse,
+} from '@/app/dto/PeersDTO';
 import prisma from '@/app/utils/prisma';
 import {
   DBType,
diff --git a/ui/app/dto/PeersDTO.ts b/ui/app/dto/PeersDTO.ts
index 21eed2d849..9deecc1529 100644
--- a/ui/app/dto/PeersDTO.ts
+++ b/ui/app/dto/PeersDTO.ts
@@ -1,3 +1,5 @@
+import { PostgresConfig, SnowflakeConfig } from '@/grpc_generated/peers';
+
 export type UValidatePeerResponse = {
   valid: boolean;
   message: string;
@@ -7,3 +9,5 @@ export type UCreatePeerResponse = {
   created: boolean;
   message: string;
 };
+
+export type PeerConfig = PostgresConfig | SnowflakeConfig;
diff --git a/ui/app/layout.tsx b/ui/app/layout.tsx
index 0bb7715000..92915917a6 100644
--- a/ui/app/layout.tsx
+++ b/ui/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import { AppThemeProvider, StyledComponentsRegistry } from '../lib/AppTheme';
 
 export const metadata: Metadata = {
-  title: 'Peerdb Cloud Template',
+  title: 'Peerdb UI',
 };
 
 export default function RootLayout({
diff --git a/ui/app/mirrors/create/config.tsx b/ui/app/mirrors/create/config.tsx
index bf1ba570dd..6b27069bc1 100644
--- a/ui/app/mirrors/create/config.tsx
+++ b/ui/app/mirrors/create/config.tsx
@@ -96,7 +96,7 @@ export default function MirrorConfig(props: MirrorConfigProps) {
                     onValueChange={(val) => handleChange(val, setting)}
                   >
                     {(setting.label.includes('Peer')
-                      ? props.peers?.map((peer) => peer.name)
+                      ? (props.peers ?? []).map((peer) => peer.name)
                       : ['avro', 'sql']
                     ).map((item, id) => {
                       return (
diff --git a/ui/app/mirrors/create/handlers.ts b/ui/app/mirrors/create/handlers.ts
index 600e9a4b0f..00ab3fb2af 100644
--- a/ui/app/mirrors/create/handlers.ts
+++ b/ui/app/mirrors/create/handlers.ts
@@ -1,5 +1,4 @@
 import { UCreateMirrorResponse } from '@/app/dto/MirrorsDTO';
-import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context';
 import { Dispatch, SetStateAction } from 'react';
 import { MirrorConfig, TableMapRow } from '../types';
 import { cdcSchema, tableMappingSchema } from './schema';
@@ -47,7 +46,7 @@ export const handleCreate = async (
     }>
   >,
   setLoading: Dispatch<SetStateAction<boolean>>,
-  router: AppRouterInstance
+  route: RouteCallback
 ) => {
   if (!flowJobName) {
     setMsg({ ok: false, msg: 'Mirror name is required' });
@@ -71,6 +70,6 @@ export const handleCreate = async (
     return;
   }
   setMsg({ ok: true, msg: 'CDC Mirror created successfully' });
-  router.push('/mirrors');
+  route();
   setLoading(false);
 };
diff --git a/ui/app/mirrors/create/page.tsx b/ui/app/mirrors/create/page.tsx
index 446f4a7510..ab869087b0 100644
--- a/ui/app/mirrors/create/page.tsx
+++ b/ui/app/mirrors/create/page.tsx
@@ -35,13 +35,19 @@ export default function CreateMirrors() {
   const [rows, setRows] = useState<TableMapRow[]>([
     { source: '', destination: '' },
   ]);
+
   useEffect(() => {
     fetch('/api/peers')
       .then((res) => res.json())
       .then((res) => {
-        setPeers(res.peers);
+        setPeers(res);
       });
   }, []);
+
+  let listPeersPage = () => {
+    router.push('/peers');
+  };
+
   return (
     <LayoutMain width='xxLarge' alignSelf='center' justifySelf='center'>
       <Panel>
@@ -112,7 +118,7 @@ export default function CreateMirrors() {
                 config,
                 setFormMessage,
                 setLoading,
-                router
+                listPeersPage
               )
             }
           >
diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
index a83e31cc08..7d46c6714d 100644
--- a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
+++ b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
@@ -112,7 +112,7 @@ type SnapshotStatusProps = {
 };
 const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => (
   <Table
-    title={<Label variant='headline'>Initial Snapshot</Label>}
+    title={<Label variant='headline'>Initial Copy</Label>}
     toolbar={{
       left: (
         <>
diff --git a/ui/app/mirrors/page.tsx b/ui/app/mirrors/page.tsx
index 16a771dd5e..6c40108f07 100644
--- a/ui/app/mirrors/page.tsx
+++ b/ui/app/mirrors/page.tsx
@@ -14,25 +14,6 @@ import prisma from '../utils/prisma';
 
 export const dynamic = 'force-dynamic';
 
-const Badges = [
-  <Badge variant='positive' key={1}>
-    <Icon name='play_circle' />
-    Active
-  </Badge>,
-  <Badge variant='warning' key={1}>
-    <Icon name='pause_circle' />
-    Paused
-  </Badge>,
-  <Badge variant='destructive' key={1}>
-    <Icon name='dangerous' />
-    Broken
-  </Badge>,
-  <Badge variant='normal' key={1}>
-    <Icon name='pending' />
-    Incomplete
-  </Badge>,
-];
-
 async function CDCFlows() {
   const flows = await prisma.flows.findMany({
     include: {
@@ -105,7 +86,10 @@ async function CDCFlows() {
             </Label>
           </TableCell>
           <TableCell>
-            <Label>Status TBD</Label>
+            <Badge variant='positive' key={1}>
+              <Icon name='play_circle' />
+              Active
+            </Badge>
           </TableCell>
         </TableRow>
       ))}
diff --git a/ui/app/peers/create/configuration/handlers.ts b/ui/app/peers/create/[peerType]/handlers.ts
similarity index 91%
rename from ui/app/peers/create/configuration/handlers.ts
rename to ui/app/peers/create/[peerType]/handlers.ts
index 2965e77eab..e0744d9834 100644
--- a/ui/app/peers/create/configuration/handlers.ts
+++ b/ui/app/peers/create/[peerType]/handlers.ts
@@ -1,8 +1,10 @@
-import { UCreatePeerResponse, UValidatePeerResponse } from '@/app/dto/PeersDTO';
-import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context';
+import {
+  PeerConfig,
+  UCreatePeerResponse,
+  UValidatePeerResponse,
+} from '@/app/dto/PeersDTO';
 import { Dispatch, SetStateAction } from 'react';
 import { pgSchema, sfSchema } from './schema';
-import { PeerConfig } from './types';
 
 // Frontend form validation
 const validateFields = (
@@ -71,7 +73,7 @@ export const handleCreate = async (
   config: PeerConfig,
   setMessage: Dispatch<SetStateAction<{ ok: boolean; msg: string }>>,
   setLoading: Dispatch<SetStateAction<boolean>>,
-  router: AppRouterInstance,
+  route: RouteCallback,
   name?: string
 ) => {
   let isValid = validateFields(type, config, setMessage, name);
@@ -92,6 +94,6 @@ export const handleCreate = async (
     return;
   }
   setMessage({ ok: true, msg: 'Peer created successfully' });
-  router.push('/peers');
+  route();
   setLoading(false);
 };
diff --git a/ui/app/peers/create/configuration/helpers/common.ts b/ui/app/peers/create/[peerType]/helpers/common.ts
similarity index 84%
rename from ui/app/peers/create/configuration/helpers/common.ts
rename to ui/app/peers/create/[peerType]/helpers/common.ts
index 24851da780..8aad61812e 100644
--- a/ui/app/peers/create/configuration/helpers/common.ts
+++ b/ui/app/peers/create/[peerType]/helpers/common.ts
@@ -1,4 +1,5 @@
-import { PeerConfig, PeerSetter } from '../types';
+import { PeerConfig } from '@/app/dto/PeersDTO';
+import { PeerSetter } from '@/components/ConfigForm';
 import { blankPostgresSetting } from './pg';
 import { blankSnowflakeSetting } from './sf';
 
diff --git a/ui/app/peers/create/configuration/helpers/pg.ts b/ui/app/peers/create/[peerType]/helpers/pg.ts
similarity index 100%
rename from ui/app/peers/create/configuration/helpers/pg.ts
rename to ui/app/peers/create/[peerType]/helpers/pg.ts
diff --git a/ui/app/peers/create/configuration/helpers/sf.ts b/ui/app/peers/create/[peerType]/helpers/sf.ts
similarity index 100%
rename from ui/app/peers/create/configuration/helpers/sf.ts
rename to ui/app/peers/create/[peerType]/helpers/sf.ts
diff --git a/ui/app/peers/create/configuration/page.tsx b/ui/app/peers/create/[peerType]/page.tsx
similarity index 91%
rename from ui/app/peers/create/configuration/page.tsx
rename to ui/app/peers/create/[peerType]/page.tsx
index c90b177070..5f09ee4e6a 100644
--- a/ui/app/peers/create/configuration/page.tsx
+++ b/ui/app/peers/create/[peerType]/page.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { PeerConfig } from '@/app/dto/PeersDTO';
 import { Button } from '@/lib/Button';
 import { ButtonGroup } from '@/lib/ButtonGroup';
 import { Label } from '@/lib/Label';
@@ -7,18 +8,23 @@ import { Panel } from '@/lib/Panel';
 import { TextField } from '@/lib/TextField';
 import { Tooltip } from '@/lib/Tooltip';
 import Link from 'next/link';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import ConfigForm from '../../../../components/ConfigForm';
 import { handleCreate, handleValidate } from './handlers';
 import { PeerSetting, getBlankSetting } from './helpers/common';
 import { postgresSetting } from './helpers/pg';
 import { snowflakeSetting } from './helpers/sf';
-import { PeerConfig } from './types';
-export default function CreateConfig() {
-  const searchParams = useSearchParams();
+
+type CreateConfigProps = {
+  params: { peerType: string };
+};
+
+export default function CreateConfig({
+  params: { peerType },
+}: CreateConfigProps) {
   const router = useRouter();
-  const dbType = searchParams.get('dbtype') || '';
+  const dbType = peerType;
   const blankSetting = getBlankSetting(dbType);
   const [name, setName] = useState<string>('');
   const [config, setConfig] = useState<PeerConfig>(blankSetting);
@@ -41,6 +47,10 @@ export default function CreateConfig() {
     }
   };
 
+  let listPeersRoute = () => {
+    router.push('/peers');
+  };
+
   return (
     <LayoutMain alignSelf='center' justifySelf='center' width='xxLarge'>
       <Panel>
@@ -102,7 +112,7 @@ export default function CreateConfig() {
                 config,
                 setFormMessage,
                 setLoading,
-                router,
+                listPeersRoute,
                 name
               )
             }
diff --git a/ui/app/peers/create/configuration/schema.ts b/ui/app/peers/create/[peerType]/schema.ts
similarity index 100%
rename from ui/app/peers/create/configuration/schema.ts
rename to ui/app/peers/create/[peerType]/schema.ts
diff --git a/ui/app/peers/create/configuration/types.ts b/ui/app/peers/create/configuration/types.ts
deleted file mode 100644
index 56db213056..0000000000
--- a/ui/app/peers/create/configuration/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { PostgresConfig, SnowflakeConfig } from '@/grpc_generated/peers';
-import { Dispatch, SetStateAction } from 'react';
-
-export type PeerConfig = PostgresConfig | SnowflakeConfig;
-export type PeerSetter = Dispatch<SetStateAction<PeerConfig>>;
diff --git a/ui/app/peers/create/page.tsx b/ui/app/peers/create/page.tsx
index 63352337ba..8297a9c7b5 100644
--- a/ui/app/peers/create/page.tsx
+++ b/ui/app/peers/create/page.tsx
@@ -1,4 +1,5 @@
 'use client';
+import SelectSource from '@/components/SelectSource';
 import { Action } from '@/lib/Action';
 import { Button } from '@/lib/Button';
 import { ButtonGroup } from '@/lib/ButtonGroup';
@@ -7,13 +8,10 @@ import { Label } from '@/lib/Label';
 import { LayoutMain, RowWithSelect } from '@/lib/Layout';
 import { Panel } from '@/lib/Panel';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import { useState } from 'react';
-import SelectSource from '../../../components/SelectSource';
 
 export default function CreatePeer() {
   const [peerType, setPeerType] = useState<string>('');
-  const router = useRouter();
   return (
     <LayoutMain alignSelf='center' justifySelf='center' width='xxLarge'>
       <Panel>
@@ -46,7 +44,7 @@ export default function CreatePeer() {
           <Button as={Link} href='/peers'>
             Cancel
           </Button>
-          <Link href={`/peers/create/configuration?dbtype=${peerType}`}>
+          <Link href={`/peers/create/${peerType}`}>
             <Button disabled={!peerType} variant='normalSolid'>
               Continue
             </Button>
diff --git a/ui/app/peers/page.tsx b/ui/app/peers/page.tsx
index 0ec8e00195..9f85665600 100644
--- a/ui/app/peers/page.tsx
+++ b/ui/app/peers/page.tsx
@@ -5,6 +5,7 @@ import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { LayoutMain } from '@/lib/Layout';
 import { Panel } from '@/lib/Panel';
+import { ProgressCircle } from '@/lib/ProgressCircle';
 import { SearchField } from '@/lib/SearchField';
 import { Select } from '@/lib/Select';
 import { Table, TableCell, TableRow } from '@/lib/Table';
@@ -90,7 +91,11 @@ async function PeersTable({ title }: { title: string }) {
 }
 
 function Loading() {
-  return <h2>🌀 Loading...</h2>;
+  return (
+    <h2>
+      <ProgressCircle variant='determinate_progress_circle' /> Loading...
+    </h2>
+  );
 }
 
 export default async function Peers() {
diff --git a/ui/app/utils/callbacks.ts b/ui/app/utils/callbacks.ts
new file mode 100644
index 0000000000..3b8cbede0f
--- /dev/null
+++ b/ui/app/utils/callbacks.ts
@@ -0,0 +1 @@
+type RouteCallback = () => void;
diff --git a/ui/app/utils/prisma.ts b/ui/app/utils/prisma.ts
index 4e54f7a77e..8748e8c87c 100644
--- a/ui/app/utils/prisma.ts
+++ b/ui/app/utils/prisma.ts
@@ -1,5 +1,17 @@
 import { PrismaClient } from '@prisma/client';
 
-const prisma = new PrismaClient();
+const prismaClientSingleton = () => {
+  return new PrismaClient();
+};
+
+type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>;
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClientSingleton | undefined;
+};
+
+const prisma = globalForPrisma.prisma ?? prismaClientSingleton();
 
 export default prisma;
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;
diff --git a/ui/components/ConfigForm.tsx b/ui/components/ConfigForm.tsx
index 574652d0ef..7cd816415c 100644
--- a/ui/components/ConfigForm.tsx
+++ b/ui/components/ConfigForm.tsx
@@ -1,12 +1,13 @@
 'use client';
-import { PeerSetting } from '@/app/peers/create/configuration/helpers/common';
-import { PeerSetter } from '@/app/peers/create/configuration/types';
+import { PeerConfig } from '@/app/dto/PeersDTO';
+import { PeerSetting } from '@/app/peers/create/[peerType]/helpers/common';
 import { Label } from '@/lib/Label';
 import { RowWithTextField } from '@/lib/Layout';
 import { TextField } from '@/lib/TextField';
 import { Tooltip } from '@/lib/Tooltip';
 import { InfoPopover } from './InfoPopover';
 
+export type PeerSetter = React.Dispatch<React.SetStateAction<PeerConfig>>;
 interface ConfigProps {
   settings: PeerSetting[];
   setter: PeerSetter;
diff --git a/ui/lib/Icon/DeterminateProgressCircle.tsx b/ui/lib/Icon/DeterminateProgressCircle.tsx
index ee6f114999..b74b9e6931 100644
--- a/ui/lib/Icon/DeterminateProgressCircle.tsx
+++ b/ui/lib/Icon/DeterminateProgressCircle.tsx
@@ -19,12 +19,12 @@ export function DeterminateProgressCircle({
         cy='12'
         r='9'
         stroke='currentColor'
-        stroke-width='2'
+        strokeWidth='2'
       />
       <path
         d='M12 3C13.4203 3 14.8204 3.33614 16.0859 3.98094C17.3514 4.62574 18.4463 5.56089 19.2812 6.70993C20.116 7.85897 20.667 9.18928 20.8892 10.5921C21.1114 11.9949 20.9984 13.4304 20.5595 14.7812C20.1206 16.1319 19.3683 17.3597 18.364 18.364C17.3597 19.3683 16.1319 20.1206 14.7812 20.5595C13.4304 20.9984 11.9949 21.1114 10.5921 20.8892C9.18929 20.667 7.85898 20.116 6.70994 19.2812'
         stroke='currentColor'
-        stroke-width='2'
+        strokeWidth='2'
       />
     </svg>
   );
diff --git a/ui/lib/utils/cn.ts b/ui/lib/utils/cn.ts
new file mode 100644
index 0000000000..2819a830d2
--- /dev/null
+++ b/ui/lib/utils/cn.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/ui/package.json b/ui/package.json
index a5c1f7ee02..72fa05ce48 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "peerdb-cloud-template",
+  "name": "peerdb-ui",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-form": "^0.0.3",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -33,17 +34,19 @@
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "classnames": "^2.3.2",
+    "clsx": "^2.0.0",
     "long": "^5.2.3",
+    "lucide-react": "^0.287.0",
     "material-symbols": "0.11.0",
     "moment": "^2.29.4",
-    "next": "13.4.16",
+    "next": "13.5.5",
     "prop-types": "^15.8.1",
     "protobufjs": "^7.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "styled-components": "^6.0.7",
     "swr": "^2.2.4",
-    "zod": "^3.22.2"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.3.0",
@@ -70,6 +73,7 @@
     "storybook": "^7.3.0",
     "string-width": "^6.1.0",
     "tailwindcss": "^3.3.3",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.2.2",
     "webpack": "^5.76.0"
   },
diff --git a/ui/tailwind.config.ts b/ui/tailwind.config.ts
index 08d37404ce..49e081636c 100644
--- a/ui/tailwind.config.ts
+++ b/ui/tailwind.config.ts
@@ -101,5 +101,5 @@ module.exports = {
         /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
     },
   ],
-  plugins: [require('@headlessui/tailwindcss')],
+  plugins: [require('@headlessui/tailwindcss'), require('tailwindcss-animate')],
 } satisfies Config;
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 1f49c3a584..7e366ef2d0 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1582,10 +1582,10 @@
     pump "^3.0.0"
     tar-fs "^2.1.1"
 
-"@next/env@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.npmjs.org/@next/env/-/env-13.4.16.tgz"
-  integrity sha512-pCU0sJBqdfKP9mwDadxvZd+eLz3fZrTlmmDHY12Hdpl3DD0vy8ou5HWKVfG0zZS6tqhL4wnQqRbspdY5nqa7MA==
+"@next/env@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.5.5.tgz#c26fb9784fe4eae1279c0f2906d925c2297816e9"
+  integrity sha512-agvIhYWp+ilbScg81s/sLueZo8CNEYLjNOqhISxheLmD/AQI4/VxV7bV76i/KzxH4iHy/va0YS9z0AOwGnw4Fg==
 
 "@next/eslint-plugin-next@13.4.19":
   version "13.4.19"
@@ -1594,50 +1594,50 @@
   dependencies:
     glob "7.1.7"
 
-"@next/swc-darwin-arm64@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.16.tgz"
-  integrity sha512-Rl6i1uUq0ciRa3VfEpw6GnWAJTSKo9oM2OrkGXPsm7rMxdd2FR5NkKc0C9xzFCI4+QtmBviWBdF2m3ur3Nqstw==
-
-"@next/swc-darwin-x64@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.16.tgz#36c16066a1a3ef8211e84a6a5d72bef15826b291"
-  integrity sha512-o1vIKYbZORyDmTrPV1hApt9NLyWrS5vr2p5hhLGpOnkBY1cz6DAXjv8Lgan8t6X87+83F0EUDlu7klN8ieZ06A==
-
-"@next/swc-linux-arm64-gnu@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.16.tgz#a5b5500737f07e3aa7f184014d8df7973420df26"
-  integrity sha512-JRyAl8lCfyTng4zoOmE6hNI2f1MFUr7JyTYCHl1RxX42H4a5LMwJhDVQ7a9tmDZ/yj+0hpBn+Aan+d6lA3v0UQ==
-
-"@next/swc-linux-arm64-musl@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.16.tgz#381b7662c5b10ed5750dce41dd57841aa0713e77"
-  integrity sha512-9gqVqNzUMWbUDgDiND18xoUqhwSm2gmksqXgCU0qaOKt6oAjWz8cWYjgpPVD0WICKFylEY/gvPEP1fMZDVFZ/g==
-
-"@next/swc-linux-x64-gnu@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.16.tgz#6e0b0eab1c316506950aeb4a09a5ea5c38edabe7"
-  integrity sha512-KcQGwchAKmZVPa8i5PLTxvTs1/rcFnSltfpTm803Tr/BtBV3AxCkHLfhtoyVtVzx/kl/oue8oS+DSmbepQKwhw==
-
-"@next/swc-linux-x64-musl@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.16.tgz#36b84e4509168a5cadf9dfd728c239002d4311fe"
-  integrity sha512-2RbMZNxYnJmW8EPHVBsGZPq5zqWAyBOc/YFxq/jIQ/Yn3RMFZ1dZVCjtIcsiaKmgh7mjA/W0ApbumutHNxRqqQ==
-
-"@next/swc-win32-arm64-msvc@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.16.tgz#52d36f909ccdefa2761617b6d4e9ae65f99880a9"
-  integrity sha512-thDcGonELN7edUKzjzlHrdoKkm7y8IAdItQpRvvMxNUXa4d9r0ElofhTZj5emR7AiXft17hpen+QAkcWpqG7Jg==
-
-"@next/swc-win32-ia32-msvc@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.16.tgz#a9cb0556d19c33fbb39ac9bef195fd490d6c7673"
-  integrity sha512-f7SE1Mo4JAchUWl0LQsbtySR9xCa+x55C0taetjUApKtcLR3AgAjASrrP+oE1inmLmw573qRnE1eZN8YJfEBQw==
-
-"@next/swc-win32-x64-msvc@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.16.tgz#79a151d94583e03992c80df3d3e7f7686390ddac"
-  integrity sha512-WamDZm1M/OEM4QLce3lOmD1XdLEl37zYZwlmOLhmF7qYJ2G6oYm9+ejZVv+LakQIsIuXhSpVlOvrxIAHqwRkPQ==
+"@next/swc-darwin-arm64@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.5.tgz#0ab604e2ae39d9ca5d8d7190f6eedc2f63ef89a1"
+  integrity sha512-FvTdcJdTA7H1FGY8dKPPbf/O0oDC041/znHZwXA7liiGUhgw5hOQ+9z8tWvuz0M5a/SDjY/IRPBAb5FIFogYww==
+
+"@next/swc-darwin-x64@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.5.tgz#400fe2a2845998c76c0547b6605877d7ba65aa67"
+  integrity sha512-mTqNIecaojmyia7appVO2QggBe1Z2fdzxgn6jb3x9qlAk8yY2sy4MAcsj71kC9RlenCqDmr9vtC/ESFf110TPA==
+
+"@next/swc-linux-arm64-gnu@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.5.tgz#b21291e2a5b691ac426331ce6cb0b1c4e8c3e1c7"
+  integrity sha512-U9e+kNkfvwh/T8yo+xcslvNXgyMzPPX1IbwCwnHHFmX5ckb1Uc3XZSInNjFQEQR5xhJpB5sFdal+IiBIiLYkZA==
+
+"@next/swc-linux-arm64-musl@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.5.tgz#2dc33466edbe8db37f08aefd2ae472db437ac3ca"
+  integrity sha512-h7b58eIoNCSmKVC5fr167U0HWZ/yGLbkKD9wIller0nGdyl5zfTji0SsPKJvrG8jvKPFt2xOkVBmXlFOtuKynw==
+
+"@next/swc-linux-x64-gnu@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.5.tgz#3239655c97fbc13449841bc44f9b2b86c3c7ef35"
+  integrity sha512-6U4y21T1J6FfcpM9uqzBJicxycpB5gJKLyQ3g6KOfBzT8H1sMwfHTRrvHKB09GIn1BCRy5YJHrA1G26DzqR46w==
+
+"@next/swc-linux-x64-musl@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.5.tgz#60c66bc1b2c3d1f3993dd2fa55da1ff7c8247901"
+  integrity sha512-OuqWSAQHJQM2EsapPFTSU/FLQ0wKm7UeRNatiR/jLeCe1V02aB9xmzuWYo2Neaxxag4rss3S8fj+lvMLzwDaFA==
+
+"@next/swc-win32-arm64-msvc@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.5.tgz#521b3073bac7d4b89df520a61b7ae71510a0bc5c"
+  integrity sha512-+yLrOZIIZDY4uGn9bLOc0wTgs+M8RuOUFSUK3BhmcLav9e+tcAj0jyBHD4aXv2qWhppUeuYMsyBo1I58/eE6Dg==
+
+"@next/swc-win32-ia32-msvc@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.5.tgz#a21e29a57bd0534c646ba3e6d73191064f396b96"
+  integrity sha512-SyMxXyJtf9ScMH0Dh87THJMXNFvfkRAk841xyW9SeOX3KxM1buXX3hN7vof4kMGk0Yg996OGsX+7C9ueS8ugsw==
+
+"@next/swc-win32-x64-msvc@13.5.5":
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.5.tgz#7a442ee669dd6b0e5c774a86cd98457cd945c867"
+  integrity sha512-n5KVf2Ok0BbLwofAaHiiKf+BQCj1M8WmTujiER4/qzYAVngnsNSjqEWvJ03raeN9eURqxDO+yL5VRoDrR33H9A==
 
 "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
   version "2.1.8-no-fsevents.3"
@@ -1909,6 +1909,11 @@
     "@radix-ui/react-label" "2.0.2"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-icons@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69"
+  integrity sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==
+
 "@radix-ui/react-id@1.0.1":
   version "1.0.1"
   resolved "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz"
@@ -3202,10 +3207,10 @@
   resolved "https://registry.npmjs.org/@swc/counter/-/counter-0.1.2.tgz"
   integrity sha512-9F4ys4C74eSTEUNndnER3VJ15oru2NumfQxS8geE+f3eB5xvfxpWyqE5XlVnxb/R14uoXi6SLbBwwiDSkv+XEw==
 
-"@swc/helpers@0.5.1":
-  version "0.5.1"
-  resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz"
-  integrity sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==
+"@swc/helpers@0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.2.tgz#85ea0c76450b61ad7d10a37050289eded783c27d"
+  integrity sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==
   dependencies:
     tslib "^2.4.0"
 
@@ -4823,6 +4828,11 @@ clone@^1.0.2:
   resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clsx@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
@@ -7766,6 +7776,11 @@ lru-cache@^6.0.0:
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-10.0.1.tgz"
   integrity sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==
 
+lucide-react@^0.287.0:
+  version "0.287.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.287.0.tgz#efa49872a91fa97b7ef650c4b40396b6880d0088"
+  integrity sha512-auxP2bTGiMoELzX+6ItTeNzLmhGd/O+PHBsrXV2YwPXYCxarIFJhiMOSzFT9a1GWeYPSZtnWdLr79IVXr/5JqQ==
+
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz"
@@ -8035,7 +8050,7 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nanoid@^3.3.4, nanoid@^3.3.6:
+nanoid@^3.3.6:
   version "3.3.6"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz"
   integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
@@ -8064,29 +8079,28 @@ neo-async@^2.5.0, neo-async@^2.6.1, neo-async@^2.6.2:
   resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-next@13.4.16:
-  version "13.4.16"
-  resolved "https://registry.npmjs.org/next/-/next-13.4.16.tgz"
-  integrity sha512-1xaA/5DrfpPu0eV31Iro7JfPeqO8uxQWb1zYNTe+KDKdzqkAGapLcDYHMLNKXKB7lHjZ7LfKUOf9dyuzcibrhA==
+next@13.5.5:
+  version "13.5.5"
+  resolved "https://registry.yarnpkg.com/next/-/next-13.5.5.tgz#65addd98a1ae42845d455e08bc491448bb34929b"
+  integrity sha512-LddFJjpfrtrMMw8Q9VLhIURuSidiCNcMQjRqcPtrKd+Fx07MsG7hYndJb/f2d3I+mTbTotsTJfCnn0eZ/YPk8w==
   dependencies:
-    "@next/env" "13.4.16"
-    "@swc/helpers" "0.5.1"
+    "@next/env" "13.5.5"
+    "@swc/helpers" "0.5.2"
     busboy "1.6.0"
     caniuse-lite "^1.0.30001406"
-    postcss "8.4.14"
+    postcss "8.4.31"
     styled-jsx "5.1.1"
     watchpack "2.4.0"
-    zod "3.21.4"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "13.4.16"
-    "@next/swc-darwin-x64" "13.4.16"
-    "@next/swc-linux-arm64-gnu" "13.4.16"
-    "@next/swc-linux-arm64-musl" "13.4.16"
-    "@next/swc-linux-x64-gnu" "13.4.16"
-    "@next/swc-linux-x64-musl" "13.4.16"
-    "@next/swc-win32-arm64-msvc" "13.4.16"
-    "@next/swc-win32-ia32-msvc" "13.4.16"
-    "@next/swc-win32-x64-msvc" "13.4.16"
+    "@next/swc-darwin-arm64" "13.5.5"
+    "@next/swc-darwin-x64" "13.5.5"
+    "@next/swc-linux-arm64-gnu" "13.5.5"
+    "@next/swc-linux-arm64-musl" "13.5.5"
+    "@next/swc-linux-x64-gnu" "13.5.5"
+    "@next/swc-linux-x64-musl" "13.5.5"
+    "@next/swc-win32-arm64-msvc" "13.5.5"
+    "@next/swc-win32-ia32-msvc" "13.5.5"
+    "@next/swc-win32-x64-msvc" "13.5.5"
 
 no-case@^3.0.4:
   version "3.0.4"
@@ -8723,18 +8737,9 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@8.4.14:
-  version "8.4.14"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz"
-  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
-  dependencies:
-    nanoid "^3.3.4"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
-postcss@^8.2.14, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.28:
+postcss@8.4.31, postcss@^8.2.14, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.28:
   version "8.4.31"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
   integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
   dependencies:
     nanoid "^3.3.6"
@@ -10046,6 +10051,11 @@ tailwind-merge@^1.9.1:
   resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz"
   integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
 
+tailwindcss-animate@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
+  integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
+
 tailwindcss@^3.3.3:
   version "3.3.3"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz"
@@ -10927,12 +10937,7 @@ yocto-queue@^1.0.0:
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
 
-zod@3.21.4:
-  version "3.21.4"
-  resolved "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz"
-  integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==
-
-zod@^3.22.2:
+zod@^3.22.4:
   version "3.22.4"
-  resolved "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
   integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==