fix(ui): remove inert state when modal is closed; buttons are forced to be hidden on desktop

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
+// When overflowing content: Add inset shadow to indicate scrollability
-// - [ ] Close on ESC (Implement a global stack of closable/focusable elements)
 // - [ ] 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>

front/src/ui/App.vue

@@ -38,3 +38,8 @@ onKeyboardShortcut('h', () => isShortcutsModalOpen.value = !isShortcutsModalOpen
   }
 }
 </style>
+<style>
+  body:has(#app[inert="true"]) {
+    overflow:hidden;
+  }
+</style>

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){