chore(shared): Changes kiosk/expand/flags/header

- Revamped the flags ui to be consistent with the rest
- The expand setting is on by default now. Tweaks to its dialog and
  header
- Added a new kiosk mode that will use the entire screen for the
  workbench
- Got rid of the auto-hiding behaviour of the header which gets annoying
  quick

sites/shared/components/workbench/new.mjs

@@ -8,8 +8,9 @@ import { useControlState } from 'shared/components/account/control.mjs'
 // Dependencies
 import { pluginTheme } from '@freesewing/plugin-theme'
 import { pluginI18n } from '@freesewing/plugin-i18n'
-import { objUpdate, hasRequiredMeasurements } from 'shared/utils.mjs'
+import { objUpdate, hasRequiredMeasurements, nsMerge } from 'shared/utils.mjs'
 // Components
+import { Header, ns as headerNs } from 'site/components/header/index.mjs'
 import { WorkbenchHeader } from './header.mjs'
 import { ErrorView } from 'shared/components/error/view.mjs'
 import { ModalSpinner } from 'shared/components/modal/spinner.mjs'
@@ -45,6 +46,7 @@ export const ns = [
 
 const defaultUi = {
   renderer: 'react',
+  kiosk: false,
 }
 
 const views = {
@@ -61,6 +63,8 @@ const views = {
 
 const draftViews = ['draft', 'inspect']
 
+const kioskClasses = 'z-30 w-screen h-screen fixed top-0 left-0 bg-base-100'
+
 export const Workbench = ({ design, Design, DynamicDocs }) => {
   // Hooks
   const { t, i18n } = useTranslation([...ns, design])
@@ -214,10 +218,13 @@ export const Workbench = ({ design, Design, DynamicDocs }) => {
   }
 
   return (
-    <div className="flex flex-row min-h-screen">
-      <WorkbenchHeader {...{ view, setView, update }} />
-      <div className="grow">{viewContent}</div>
-      <MobileMenubar />
-    </div>
+    <>
+      {!ui.kiosk && <Header />}
+      <div className={`flex flex-row min-h-screen ${ui.kiosk ? kioskClasses : ''}`}>
+        <WorkbenchHeader {...{ view, setView, update }} />
+        <div className="grow">{viewContent}</div>
+        <MobileMenubar />
+      </div>
+    </>
   )
 }