Refactor Settings UI (#20392)

* refactor with sidebar and mobile page

* sidebar spacing and color tweaks

* layout tweaks

* move camera switch button to header

* improve mobile

* remove back button on mobile page header

* mobile fixes

* remove debug

* don't use mobilepage

* more mobile tweaks

* use mobile page for components

* add optional actions to mobile page header for top right buttons

* fix alignment

* use page toggle

* tweaks

* sidebar inset tweaks

* move triggers to notifications sub menu

* consistency

* fix padding

* more padding fixes

* navigate history

web/src/components/mobile/MobilePage.tsx

@@ -170,12 +170,14 @@ export function MobilePageContent({
 
 interface MobilePageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   onClose?: () => void;
+  actions?: React.ReactNode;
 }
 
 export function MobilePageHeader({
   children,
   className,
   onClose,
+  actions,
   ...props
 }: MobilePageHeaderProps) {
   const { t } = useTranslation(["common"]);
@@ -208,6 +210,11 @@ export function MobilePageHeader({
         <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
       </Button>
       <div className="flex flex-row text-center">{children}</div>
+      {actions && (
+        <div className="absolute right-0 flex items-center gap-2">
+          {actions}
+        </div>
+      )}
     </div>
   );
 }

web/src/components/ui/sidebar.tsx

@@ -338,7 +338,7 @@ const SidebarInset = React.forwardRef<
       ref={ref}
       className={cn(
         "relative flex w-full flex-1 flex-col bg-background",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        "md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:mb-2 md:peer-data-[variant=inset]:ml-0",
         className,
       )}
       {...props}