feat: add floating fullscreen toggle button

Author: stampaaaron

apps/frontend/src/routes/_auth/questionnaire.tsx

@@ -1,14 +1,21 @@
-import { Container } from "@quassel/ui";
+import { ActionIcon, Affix, Container, IconMaximize, IconMaximizeOff, useFullscreen } from "@quassel/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/_auth/questionnaire")({
   component: QuestionnaireLayout,
 });
 
 function QuestionnaireLayout() {
+  const { fullscreen, toggle } = useFullscreen();
+
   return (
     <Container size="md" mt="xl">
       <Outlet />
+      <Affix position={{ bottom: 100, right: 40 }}>
+        <ActionIcon variant="outline" radius="xl" size="xl" onClick={toggle}>
+          {fullscreen ? <IconMaximizeOff /> : <IconMaximize />}
+        </ActionIcon>
+      </Affix>
     </Container>
   );
 }

libs/ui/src/index.ts

@@ -62,6 +62,7 @@ export {
   ColorSwatch,
   Divider,
   Flex,
+  Affix,
   Group,
   InputError,
   InputLabel,
@@ -88,7 +89,7 @@ export {
 
 export { TimeInput, DateInput } from "@mantine/dates";
 
-export { useDisclosure } from "@mantine/hooks";
+export { useDisclosure, useFullscreen } from "@mantine/hooks";
 
 export { notifications } from "@mantine/notifications";
 
@@ -106,6 +107,8 @@ export {
   IconMapSearch,
   IconMinus,
   IconRepeat,
+  IconMaximize,
+  IconMaximizeOff,
 } from "@tabler/icons-react";
 
 export { uzhColors } from "./theme/uzh";