Consolidate forms & other minor fixes

src/components/generic/Sidebar/CollapsibleSection.tsx

@@ -7,12 +7,14 @@ import { FiArrowUp } from 'react-icons/fi';
 export interface CollapsibleSectionProps {
   title: string;
   icon?: JSX.Element;
+  status?: boolean;
   children: JSX.Element;
 }
 
 export const CollapsibleSection = ({
   title,
   icon,
+  status,
   children,
 }: CollapsibleSectionProps): JSX.Element => {
   const [open, setOpen] = useState(false);
@@ -21,6 +23,7 @@ export const CollapsibleSection = ({
     <m.div>
       <m.div
         layout
+        onClick={toggleOpen}
         className={`w-full cursor-pointer select-none overflow-hidden border-l-4 border-b bg-gray-200 p-2 text-sm font-medium dark:border-primaryDark dark:bg-tertiaryDark dark:text-gray-400 ${
           open
             ? 'border-l-primary dark:border-l-primary'
@@ -29,13 +32,25 @@ export const CollapsibleSection = ({
       >
         <m.div
           layout
-          onClick={toggleOpen}
           whileHover={{ scale: 1.01 }}
           whileTap={{ scale: 0.99 }}
-          className="flex justify-between gap-2 "
+          className="my-auto flex justify-between gap-2"
         >
-          <m.div className="flex gap-2 ">
-            <m.div className="my-auto">{icon}</m.div>
+          <m.div className="flex gap-2">
+            <m.div className="my-auto flex gap-2">
+              {status !== undefined ? (
+                <>
+                  {icon}
+                  <div
+                    className={`h-3 w-3 rounded-full ${
+                      status ? 'bg-green-500' : 'bg-red-500'
+                    }`}
+                  />
+                </>
+              ) : (
+                <>{icon}</>
+              )}
+            </m.div>
             {title}
           </m.div>
           <m.div