remove size limitation from text items on information screen in prepa…

…ration for allowing scrolling

app/(dashboard)/dashboard/protocols/_components/DeleteProtocolsDialog.tsx

@@ -14,6 +14,8 @@ import type { ProtocolWithInterviews } from '~/shared/types';
 import { useEffect, useState } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 import { api } from '~/trpc/client';
+import { clientRevalidateTag } from '~/utils/clientRevalidate';
+import { useRouter } from 'next/navigation';
 
 interface DeleteProtocolsDialogProps {
   open: boolean;
@@ -26,6 +28,8 @@ export const DeleteProtocolsDialog = ({
   setOpen,
   protocolsToDelete,
 }: DeleteProtocolsDialogProps) => {
+  const router = useRouter();
+
   const [protocolsInfo, setProtocolsInfo] = useState<{
     hasInterviews: boolean;
     hasUnexportedInterviews: boolean;
@@ -50,10 +54,10 @@ export const DeleteProtocolsDialog = ({
       },
     });
 
-  const utils = api.useUtils();
   const handleConfirm = async () => {
     await deleteProtocols(protocolsToDelete.map((d) => d.hash));
-    await utils.protocol.get.all.refetch();
+    await clientRevalidateTag('protocols.get.all');
+    router.refresh();
     setOpen(false);
   };
 

app/(interview)/interview/[interviewId]/page.tsx

@@ -6,7 +6,6 @@ import Link from 'next/link';
 import { api } from '~/trpc/server';
 import InterviewShell from '../_components/InterviewShell';
 import NoSSRWrapper from '~/utils/NoSSRWrapper';
-import Test from '../_components/Test';
 
 export const dynamic = 'force-dynamic';
 
@@ -38,7 +37,7 @@ export default async function Page({
       protocol={interviewProtocol}
     >
       <NoSSRWrapper>
-        <InterviewShell />
+        <InterviewShell protocol={interviewProtocol} network={initialNetwork} />
       </NoSSRWrapper>
     </InterviewProvider>
   );

app/(interview)/interview/_components/InterviewShell.tsx

@@ -1,10 +1,8 @@
 'use client';
 
-import { motion } from 'framer-motion';
 import { useRef } from 'react';
 import { Provider } from 'react-redux';
 import DialogManager from '~/lib/interviewer/components/DialogManager';
-import { SettingsMenu } from '~/lib/interviewer/components/SettingsMenu';
 import ProtocolScreen from '~/lib/interviewer/containers/ProtocolScreen';
 import configureAppStore from '~/lib/interviewer/store';
 import { useInterview } from '~/providers/InterviewProvider';
@@ -18,13 +16,10 @@ const InterviewShell = () => {
   );
 
   return (
-    <motion.div className="grid h-[100vh] grid-cols-2">
-      <Provider store={store.current}>
-        <ProtocolScreen />
-        <SettingsMenu />
-        <DialogManager />
-      </Provider>
-    </motion.div>
+    <Provider store={store.current}>
+      <ProtocolScreen />
+      <DialogManager />
+    </Provider>
   );
 };
 

app/(interview)/interview/layout.tsx

@@ -6,11 +6,7 @@ export const metadata = {
 };
 
 function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <main className="min-h-screen " style={{ background: 'var(--background)' }}>
-      {children}
-    </main>
-  );
+  return <main style={{ background: 'var(--background)' }}>{children}</main>;
 }
 
 export default RootLayout;

lib/interviewer/components/Navigation.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import ProgressBar from '~/lib/ui/components/ProgressBar';
+import useReadyForNextStage from '~/lib/interviewer/hooks/useReadyForNextStage';
+import { ChevronDown, ChevronUp, SettingsIcon } from 'lucide-react';
+import { useInterview } from '~/providers/InterviewProvider';
+import { cn } from '~/utils/shadcn';
+
+const NavigationButton = ({
+  disabled,
+  onClick,
+  className,
+  children,
+}: {
+  disabled?: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  className?: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <div
+      className={cn(
+        `session-navigation__button m-4 flex h-[4.8rem] w-[4.8rem] basis-[4.8rem] cursor-pointer items-center justify-center rounded-full transition-all`,
+        'hover:bg-[#4a4677]',
+        disabled && 'cursor-not-allowed opacity-50 hover:bg-transparent',
+        className,
+      )}
+      role="button"
+      tabIndex={0}
+      onClick={!disabled ? onClick : undefined}
+    >
+      {children}
+    </div>
+  );
+};
+
+const Navigation = () => {
+  const [isReadyForNextStage] = useReadyForNextStage();
+  const { progress, hasNextPage, hasPreviousPage, nextPage, previousPage } =
+    useInterview();
+
+  return (
+    <div
+      role="navigation"
+      className="flex flex-shrink-0 flex-grow-0 flex-col items-center justify-between bg-[#36315f]"
+      style={{ '--light-background': '#4a4677' }} // Progress bar uses this variable to set background
+    >
+      <NavigationButton>
+        <SettingsIcon className="h-[2.4rem] w-[2.4rem]" />
+      </NavigationButton>
+      <NavigationButton onClick={previousPage} disabled={!hasPreviousPage}>
+        <ChevronUp className="h-[2.4rem] w-[2.4rem]" strokeWidth="3px" />
+      </NavigationButton>
+      <div className="m-6 flex flex-grow">
+        <ProgressBar percentProgress={progress} />
+      </div>
+      <NavigationButton
+        className={cn(
+          'bg-[var(--light-background)]',
+          'hover:bg-[var(--primary)]',
+          isReadyForNextStage && 'animate-pulse',
+        )}
+        onClick={nextPage}
+        disabled={!hasNextPage}
+      >
+        <ChevronDown className="h-[2.4rem] w-[2.4rem]" strokeWidth="3px" />
+      </NavigationButton>
+    </div>
+  );
+};
+
+export default Navigation;