fix: folder view all page nested navigation and search filtering (#2450)

Add parentId query param support to documents/templates folder index
pages so View All correctly shows subfolders. Fix search not filtering
unpinned folders on documents page and broken mt- Tailwind class on
templates page.

packages/ui/components/document/envelope-recipient-field-tooltip.tsx

@@ -191,7 +191,7 @@ export function EnvelopeRecipientFieldTooltip({
           </span>
         </p>
 
-        <p className="text-muted-foreground mt-1 text-center text-xs">
+        <p className="mt-1 text-center text-xs text-muted-foreground">
           {getRecipientDisplayText(field.recipient)}
         </p>
 

packages/ui/primitives/document-flow/add-settings.tsx

@@ -242,7 +242,7 @@ export const AddSettingsFormPartial = ({
                         <InfoIcon className="mx-2 h-4 w-4" />
                       </TooltipTrigger>
 
-                      <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+                      <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
                         <Trans>
                           Controls the language for the document, including the language to be used
                           for email notifications, and the final certificate that is generated and
@@ -361,11 +361,11 @@ export const AddSettingsFormPartial = ({
 
             <Accordion type="multiple" className="mt-6">
               <AccordionItem value="advanced-options" className="border-none">
-                <AccordionTrigger className="text-foreground mb-2 rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
+                <AccordionTrigger className="mb-2 rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
                   <Trans>Advanced Options</Trans>
                 </AccordionTrigger>
 
-                <AccordionContent className="text-muted-foreground -mx-1 px-1 pt-2 text-sm leading-relaxed">
+                <AccordionContent className="-mx-1 px-1 pt-2 text-sm leading-relaxed text-muted-foreground">
                   <div className="flex flex-col space-y-6">
                     <FormField
                       control={form.control}
@@ -379,7 +379,7 @@ export const AddSettingsFormPartial = ({
                                 <InfoIcon className="mx-2 h-4 w-4" />
                               </TooltipTrigger>
 
-                              <TooltipContent className="text-muted-foreground max-w-xs">
+                              <TooltipContent className="max-w-xs text-muted-foreground">
                                 <Trans>
                                   Add an external ID to the document. This can be used to identify
                                   the document in external systems.
@@ -418,7 +418,7 @@ export const AddSettingsFormPartial = ({
                                 field.onChange(value);
                                 void handleAutoSave();
                               }}
-                              className="bg-background w-full"
+                              className="w-full bg-background"
                               emptySelectionPlaceholder={t`Select signature types`}
                             />
                           </FormControl>
@@ -506,7 +506,7 @@ export const AddSettingsFormPartial = ({
                                 <InfoIcon className="mx-2 h-4 w-4" />
                               </TooltipTrigger>
 
-                              <TooltipContent className="text-muted-foreground max-w-xs">
+                              <TooltipContent className="max-w-xs text-muted-foreground">
                                 <Trans>
                                   Add a URL to redirect the user to once the document is signed
                                 </Trans>

packages/ui/primitives/document-flow/field-items-advanced-settings/dropdown-field.tsx

@@ -114,7 +114,7 @@ export const DropdownFieldAdvancedSettings = ({
             handleFieldChange('defaultValue', val);
           }}
         >
-          <SelectTrigger className="text-muted-foreground bg-background mt-2 w-full">
+          <SelectTrigger className="mt-2 w-full bg-background text-muted-foreground">
             <SelectValue defaultValue={defaultValue} placeholder={`-- ${_(msg`Select`)} --`} />
           </SelectTrigger>
           <SelectContent position="popper">
@@ -152,7 +152,7 @@ export const DropdownFieldAdvancedSettings = ({
         </div>
       </div>
       <Button
-        className="bg-foreground/10 hover:bg-foreground/5 border-foreground/10 mt-2 border"
+        className="mt-2 border border-foreground/10 bg-foreground/10 hover:bg-foreground/5"
         variant="outline"
         onClick={() => setShowValidation((prev) => !prev)}
       >
@@ -183,7 +183,7 @@ export const DropdownFieldAdvancedSettings = ({
             </div>
           ))}
           <Button
-            className="bg-foreground/10 hover:bg-foreground/5 border-foreground/10 ml-9 mt-4 border"
+            className="ml-9 mt-4 border border-foreground/10 bg-foreground/10 hover:bg-foreground/5"
             variant="outline"
             onClick={addValue}
           >

packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx

@@ -122,7 +122,7 @@ export const RadioFieldAdvancedSettings = ({
           </Label>
           <Input
             id="label"
-            className="bg-background mt-2"
+            className="mt-2 bg-background"
             placeholder={_(msg`Field label`)}
             value={fieldState.label}
             onChange={(e) => handleFieldChange('label', e.target.value)}
@@ -150,7 +150,7 @@ export const RadioFieldAdvancedSettings = ({
         </div>
       </div>
       <Button
-        className="bg-foreground/10 hover:bg-foreground/5 border-foreground/10 mt-2 border"
+        className="mt-2 border border-foreground/10 bg-foreground/10 hover:bg-foreground/5"
         variant="outline"
         onClick={() => setShowValidation((prev) => !prev)}
       >
@@ -167,7 +167,7 @@ export const RadioFieldAdvancedSettings = ({
           {values.map((value) => (
             <div key={value.id} className="mt-2 flex items-center gap-4">
               <Checkbox
-                className="data-[state=checked]:bg-documenso border-foreground/30 data-[state=checked]:ring-primary dark:data-[state=checked]:ring-offset-background h-5 w-5 rounded-full data-[state=checked]:ring-1 data-[state=checked]:ring-offset-2 data-[state=checked]:ring-offset-white"
+                className="h-5 w-5 rounded-full border-foreground/30 data-[state=checked]:bg-documenso data-[state=checked]:ring-1 data-[state=checked]:ring-primary data-[state=checked]:ring-offset-2 data-[state=checked]:ring-offset-white dark:data-[state=checked]:ring-offset-background"
                 checked={value.checked}
                 onCheckedChange={(checked) => handleCheckedChange(Boolean(checked), value.id)}
               />
@@ -186,7 +186,7 @@ export const RadioFieldAdvancedSettings = ({
             </div>
           ))}
           <Button
-            className="bg-foreground/10 hover:bg-foreground/5 border-foreground/10 ml-9 mt-4 border"
+            className="ml-9 mt-4 border border-foreground/10 bg-foreground/10 hover:bg-foreground/5"
             variant="outline"
             onClick={addValue}
           >

packages/ui/primitives/recipient-selector.tsx

@@ -101,7 +101,7 @@ export const RecipientSelector = ({
           variant="outline"
           role="combobox"
           className={cn(
-            'bg-background text-muted-foreground hover:text-foreground justify-between font-normal',
+            'justify-between bg-background font-normal text-muted-foreground hover:text-foreground',
             getRecipientColorStyles(recipients.findIndex((r) => r.id === selectedRecipient?.id))
               .comboBoxTrigger,
             className,
@@ -122,21 +122,21 @@ export const RecipientSelector = ({
           <CommandInput />
 
           <CommandEmpty>
-            <span className="text-muted-foreground inline-block px-4">
+            <span className="inline-block px-4 text-muted-foreground">
               <Trans>No recipient matching this description was found.</Trans>
             </span>
           </CommandEmpty>
 
           {recipientsByRoleToDisplay.map(([role, roleRecipients], roleIndex) => (
             <CommandGroup key={roleIndex}>
-              <div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
+              <div className="mb-1 ml-2 mt-2 text-xs font-medium text-muted-foreground">
                 {_(RECIPIENT_ROLES_DESCRIPTION[role].roleNamePlural)}
               </div>
 
               {roleRecipients.length === 0 && (
                 <div
                   key={`${role}-empty`}
-                  className="text-muted-foreground/80 px-4 pb-4 pt-2.5 text-center text-xs"
+                  className="px-4 pb-4 pt-2.5 text-center text-xs text-muted-foreground/80"
                 >
                   <Trans>No recipients with this role</Trans>
                 </div>
@@ -160,7 +160,7 @@ export const RecipientSelector = ({
                   disabled={recipient.signingStatus !== SigningStatus.NOT_SIGNED}
                 >
                   <span
-                    className={cn('text-foreground/70 truncate', {
+                    className={cn('truncate text-foreground/70', {
                       'text-foreground/80': recipient.id === selectedRecipient?.id,
                     })}
                   >
@@ -182,7 +182,7 @@ export const RecipientSelector = ({
                           <Info className="ml-2 h-4 w-4" />
                         </TooltipTrigger>
 
-                        <TooltipContent className="text-muted-foreground max-w-xs">
+                        <TooltipContent className="max-w-xs text-muted-foreground">
                           <Trans>
                             This document has already been sent to this recipient. You can no longer
                             edit this recipient.