From 008d8e2a8a4513cd282dadc0b8d402bbea19a2fb Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Thu, 19 Dec 2024 12:56:29 +0100
Subject: [PATCH] fix(ui): remove inert state when modal is closed; buttons are
 forced to be hidden on desktop

---
 front/src/components/ui/Modal.vue   | 14 +++++++++++---
 front/src/ui/App.vue                |  5 +++++
 front/src/ui/components/Sidebar.vue |  2 +-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/front/src/components/ui/Modal.vue b/front/src/components/ui/Modal.vue
index c91f5ad25..bd99748e5 100644
--- a/front/src/components/ui/Modal.vue
+++ b/front/src/components/ui/Modal.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { type ColorProps, type DefaultProps, propsToColor } from '~/composables/colors';
+import { watchEffect } from 'vue';
+import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
 
 import Button from '~/components/ui/Button.vue'
 import Spacer from '~/components/ui/layout/Spacer.vue'
@@ -10,9 +12,15 @@ const { title, overPopover = false, ...colorProps } = defineProps<{
 } & (ColorProps | DefaultProps) >()
 const isOpen = defineModel<boolean>({ default:false })
 
+watchEffect(() =>
+  isOpen.value ?
+    document.querySelector('#app')?.setAttribute('inert', 'true') : document.querySelector('#app')?.removeAttribute('inert')
+  )
+
+onKeyboardShortcut('escape', () => isOpen.value = false)
+
 // TODO:
-// - [ ] Trap focus while open
-// - [ ] Close on ESC (Implement a global stack of closable/focusable elements)
+// When overflowing content: Add inset shadow to indicate scrollability
 // - [ ] Add aria role to inform screenreaders
 </script>
 
@@ -47,7 +55,7 @@ const isOpen = defineModel<boolean>({ default:false })
           <div v-if="$slots.actions" class="modal-actions">
             <slot name="actions" />
           </div>
-          <Spacer :size="128" v-else />
+          <Spacer :size="64" v-else />
         </div>
       </div>
     </Transition>
diff --git a/front/src/ui/App.vue b/front/src/ui/App.vue
index dcfb9ca2e..dc93c7718 100644
--- a/front/src/ui/App.vue
+++ b/front/src/ui/App.vue
@@ -38,3 +38,8 @@ onKeyboardShortcut('h', () => isShortcutsModalOpen.value = !isShortcutsModalOpen
   }
 }
 </style>
+<style>
+  body:has(#app[inert="true"]) {
+    overflow:hidden;
+  }
+</style>
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index b3512b814..f77c32730 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -304,7 +304,7 @@ const uploads = useUploadsStore()
     height: 100%;
 
     :global(.hide-on-desktop){
-      display: none;
+      display: none !important;
     }
 
     :global(.hide-on-mobile){