refactor: expose indent style

apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss

@@ -26,15 +26,24 @@ $inner-padding: 1rem;
   color: $gray-300;
 }
 
-.section {
+.section, .indent {
-  position: relative;
-  margin-top: 2rem;
   font-size: calc(1rem - 1px);
-  max-width: 800px;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   color: $ui-white;
+
+}
+
+.section {
+  position: relative;
+  margin-top: 2rem;
+  max-width: 800px;
+}
+
+.indent {
+  padding: 1rem;
+  background-color: $gray-1350;
 }
 
 .paragraph {
@@ -84,7 +93,6 @@ $inner-padding: 1rem;
     position: sticky;
     top: 0;
     z-index: 3;
-    box-shadow: 0 1px $white-10;
     background-color: $gray-1350;
   }
 
@@ -163,6 +171,26 @@ $inner-padding: 1rem;
   animation: animloader 1s ease-in infinite;
 }
 
+.empty {
+  background-color: $black-10;
+  text-align: center;
+  color: $muted-gray;
+
+  td {
+    padding: 2rem;
+  }
+
+  button {
+    margin-top: 1rem;
+  }
+}
+
+.inlineSiblings {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
 .empty {
   background-color: $black-10;
   text-align: center;

apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx

@@ -24,10 +24,19 @@ type SectionProps<C extends AllowedTags> = {
   children: ReactNode;
 } & JSX.IntrinsicElements[C];
 
-export function Section<C extends AllowedTags = 'div'>({ as, children, ...props }: SectionProps<C>) {
+export function Section<C extends AllowedTags = 'div'>({ as, className, children, ...props }: SectionProps<C>) {
   const Element = as ?? 'div';
   return (
-    <Element className={style.section} {...(props as HTMLAttributes<HTMLElement>)}>
+    <Element className={cx([style.section, className])} {...(props as HTMLAttributes<HTMLElement>)}>
+      {children}
+    </Element>
+  );
+}
+
+export function Indent<C extends AllowedTags = 'div'>({ as, className, children, ...props }: SectionProps<C>) {
+  const Element = as ?? 'div';
+  return (
+    <Element className={cx([style.indent, className])} {...(props as HTMLAttributes<HTMLElement>)}>
       {children}
     </Element>
   );