Disable the blur effect on dialog overlays when GPU acceleration is disabled

src/components/FullscreenImagePreview.vue

@@ -1,7 +1,8 @@
 <template>
     <Dialog v-model:open="open">
         <DialogPortal :to="portalTo">
-            <RekaDialogOverlay class="fixed inset-0 bg-background/80 backdrop-blur-sm" />
+            <RekaDialogOverlay
+                :class="cn('fixed inset-0 bg-background/80', !disableGpuAcceleration && 'backdrop-blur-sm')" />
 
             <RekaDialogContent
                 class="fixed inset-0 p-6 sm:p-10 border-0 bg-transparent shadow-none outline-none"
@@ -101,8 +102,10 @@
     import { Button } from '@/components/ui/button';
     import { Dialog } from '@/components/ui/dialog';
     import { acquireModalPortalLayer } from '@/lib/modalPortalLayers';
+    import { cn } from '@/lib/utils';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
+    import { useGeneralSettingsStore } from '@/stores/settings/general';
     import { useI18n } from 'vue-i18n';
 
     import Noty from 'noty';
@@ -112,6 +115,7 @@
 
     const galleryStore = useGalleryStore();
     const { fullscreenImageDialog } = storeToRefs(galleryStore);
+    const { disableGpuAcceleration } = storeToRefs(useGeneralSettingsStore());
     const { t } = useI18n();
 
     const viewerEl = ref(null);

src/components/ui/dialog/DialogOverlay.vue

@@ -2,6 +2,8 @@
     import { DialogOverlay } from 'reka-ui';
     import { cn } from '@/lib/utils';
     import { reactiveOmit } from '@vueuse/core';
+    import { storeToRefs } from 'pinia';
+    import { useGeneralSettingsStore } from '@/stores/settings/general';
 
     const props = defineProps({
         forceMount: { type: Boolean, required: false },
@@ -11,6 +13,7 @@
     });
 
     const delegatedProps = reactiveOmit(props, 'class');
+    const { disableGpuAcceleration } = storeToRefs(useGeneralSettingsStore());
 </script>
 
 <template>
@@ -19,7 +22,8 @@
         v-bind="delegatedProps"
         :class="
             cn(
-                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40 backdrop-blur-xs',
+                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40',
+                !disableGpuAcceleration && 'backdrop-blur-xs',
                 props.class
             )
         ">