fix: make signing page left-hand sidebar collapsible (#2541)

apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx

@@ -1,15 +1,23 @@
-import { useMemo, useRef } from 'react';
+import { useMemo, useRef, useState } from 'react';
 
-import { Plural, Trans } from '@lingui/react/macro';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
 import { EnvelopeType, RecipientRole } from '@prisma/client';
 import { motion } from 'framer-motion';
-import { ArrowLeftIcon, BanIcon, DownloadCloudIcon, PaperclipIcon } from 'lucide-react';
+import {
+  ArrowLeftIcon,
+  BanIcon,
+  DownloadCloudIcon,
+  PanelLeftCloseIcon,
+  PanelLeftOpenIcon,
+  PaperclipIcon,
+} from 'lucide-react';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { PDF_VIEWER_ERROR_MESSAGES } from '@documenso/lib/constants/pdf-viewer-i18n';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
 
@@ -57,6 +65,9 @@ export const DocumentSigningPageViewV2 = () => {
     onDocumentRejected,
   } = useEmbedSigningContext() || {};
 
+  const { t } = useLingui();
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+
   /**
    * The total remaining fields remaining for the current recipient or selected assistant recipient.
    *
@@ -86,7 +97,31 @@ export const DocumentSigningPageViewV2 = () => {
       {/* Main Content Area */}
       <div className="flex h-[calc(100vh-4rem)] w-screen">
         {/* Left Section - Step Navigation */}
-        <div className="embed--DocumentWidgetContainer hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-border bg-background py-4 lg:flex">
+        <div
+          className={cn(
+            'embed--DocumentWidgetContainer hidden flex-shrink-0 flex-col border-r border-border bg-background transition-[width] duration-300 lg:flex',
+            isSidebarCollapsed ? 'w-12' : 'w-80',
+          )}
+        >
+          {isSidebarCollapsed && (
+            <div className="flex justify-center pt-4">
+              <Button
+                variant="ghost"
+                className="h-7 w-7 p-0"
+                aria-label={t`Expand sidebar`}
+                onClick={() => setIsSidebarCollapsed(false)}
+              >
+                <PanelLeftOpenIcon className="h-4 w-4" />
+              </Button>
+            </div>
+          )}
+
+          <div
+            className={cn(
+              'flex flex-1 flex-col overflow-hidden py-4',
+              isSidebarCollapsed && 'invisible w-0',
+            )}
+          >
             <div className="px-4">
               <h3 className="flex items-end justify-between text-sm font-semibold text-foreground">
                 {match(recipient.role)
@@ -96,13 +131,24 @@ export const DocumentSigningPageViewV2 = () => {
                   .with(RecipientRole.ASSISTANT, () => <Trans>Assist Document</Trans>)
                   .otherwise(() => null)}
 
-              <span className="ml-2 rounded border bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground">
+                <div className="ml-2 flex items-center gap-1">
+                  <span className="rounded border bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground">
                     <Plural
                       value={recipientFieldsRemaining.length}
                       one="1 Field Remaining"
                       other="# Fields Remaining"
                     />
                   </span>
+
+                  <Button
+                    variant="ghost"
+                    className="h-7 w-7 p-0"
+                    aria-label={t`Collapse sidebar`}
+                    onClick={() => setIsSidebarCollapsed(true)}
+                  >
+                    <PanelLeftCloseIcon className="h-4 w-4" />
+                  </Button>
+                </div>
               </h3>
 
               <div className="relative my-4 h-[4px] rounded-md bg-muted">
@@ -198,9 +244,10 @@ export const DocumentSigningPageViewV2 = () => {
               )}
             </div>
           </div>
+        </div>
 
         <div
-          className="embed--DocumentContainer flex-1 overflow-y-auto"
+          className="embed--DocumentContainer min-w-0 flex-1 overflow-y-auto"
           ref={scrollableContainerRef}
         >
           <div className="flex flex-col">