feat(mobile): declutter mobile views with contextual FAB, filter sheet, and clean outliner

frontend/src/context/MobileActionContext.tsx

@@ -22,6 +22,8 @@ interface MobileActionContextValue {
   isMenuOpen: boolean;
   setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
   closeMenu: () => void;
+  primaryAction?: () => void;
+  setPrimaryAction: (fn?: () => void) => void;
 }
 
 const MobileActionContext = createContext<MobileActionContextValue>({
@@ -30,11 +32,14 @@ const MobileActionContext = createContext<MobileActionContextValue>({
   isMenuOpen: false,
   setIsMenuOpen: () => {},
   closeMenu: () => {},
+  primaryAction: undefined,
+  setPrimaryAction: () => {},
 });
 
 export const MobileActionProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [groups, setGroupsState] = useState<MobileMenuGroup[]>([]);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [primaryAction, setPrimaryActionState] = useState<(() => void) | undefined>(undefined);
 
   const setGroups = useCallback((newGroups: MobileMenuGroup[]) => {
     setGroupsState(newGroups);
@@ -44,6 +49,10 @@ export const MobileActionProvider: React.FC<{ children: React.ReactNode }> = ({
     setIsMenuOpen(false);
   }, []);
 
+  const setPrimaryAction = useCallback((fn?: () => void) => {
+    setPrimaryActionState(() => fn);
+  }, []);
+
   return (
     <MobileActionContext.Provider
       value={{
@@ -52,6 +61,8 @@ export const MobileActionProvider: React.FC<{ children: React.ReactNode }> = ({
         isMenuOpen,
         setIsMenuOpen,
         closeMenu,
+        primaryAction,
+        setPrimaryAction,
       }}
     >
       {children}