added settings option to toggle blur effect and disable blur in more …

…places

src/common/Settings.ts

@@ -16,6 +16,12 @@ const settings: Setting[] =  [
     icon: 'account_circle',
     element: lazy(() => import('@/components/settings/AccountSettings'))
   },
+  {
+    path: 'interface',
+    name: 'settings.drawer.interface',
+    icon: 'brush',
+    element: lazy(() => import('@/components/settings/InterfaceSettings'))
+  },
   {
     path: 'notifications',
     name: 'settings.drawer.notifications',

src/common/localStorage.ts

@@ -12,6 +12,7 @@ export enum StorageKeys {
   LAST_SELECTED_SERVER_CHANNELS = 'lastSelectedServerChannels',
   LAST_SEEN_CHANNEL_NOTICES = "lastSeenChannelNotices",
   PROGRAM_ACTIVITY_STATUS = "programActivityStatus",
+  BLUR_EFFECT_ENABLED = "blurEffectEnabled",
 }
 
 export function getStorageBoolean(key: StorageKeys, defaultValue: boolean): boolean {

src/common/useWindowProperties.ts

@@ -1,6 +1,7 @@
 import { createStore } from "solid-js/store";
 import env from "./env";
 import { createSignal } from "solid-js";
+import { StorageKeys, useReactiveLocalStorage } from "./localStorage";
 
 
 
@@ -33,14 +34,20 @@ function setPaneWidth(val: number) {
 
 const isMobileAgent = () => /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
 
+const [blurEffectEnabled, setBlurEffectEnabled] = useReactiveLocalStorage(StorageKeys.BLUR_EFFECT_ENABLED, !isMobileAgent())
+
+
+
 export function useWindowProperties() {
-  const blurEffectEnabled = () => {
-    if (isMobileAgent()) return false;
-    return windowProperties.hasFocus;
+  const isWindowFocusedAndBlurEffectEnabled  = () => {
+    if (!windowProperties.hasFocus) return false;
+    return blurEffectEnabled();
   }
 
   return {
     blurEffectEnabled,
+    setBlurEffectEnabled,
+    isWindowFocusedAndBlurEffectEnabled,
     setPaneWidth,
     width: () => windowProperties.width,
     height: () => windowProperties.height,

src/components/drawer-header/DrawerHeader.module.css → src/components/drawer-header/DrawerHeader.module.scss

@@ -1,3 +1,13 @@
+
+:global body.disableBlur {
+  :local {
+    .drawerHeaderContainer {
+      background-color: rgb(48, 48, 48);
+      backdrop-filter: none;
+    }
+  }
+}
+
 .drawerHeaderContainer {
   display: flex;
   overflow: hidden;

src/components/drawer-header/DrawerHeader.tsx

@@ -1,4 +1,4 @@
-import styles from "./DrawerHeader.module.css";
+import styles from "./DrawerHeader.module.scss";
 
 import { JSXElement, Match, Switch } from "solid-js";
 

src/components/settings/InterfaceSettings.tsx

@@ -0,0 +1,68 @@
+import { createEffect, createSignal, For, Show } from 'solid-js';
+import Text from '@/components/ui/Text';
+import { css, styled } from 'solid-styled-components';
+import { getCurrentLanguage, getLanguage, Language, languages, setCurrentLanguage } from '@/locales/languages';
+
+import ItemContainer from '../ui/Item';
+import twemoji from 'twemoji';
+import { FlexColumn, FlexRow } from '../ui/Flexbox';
+import useStore from '@/chat-api/store/useStore';
+import { useTransContext } from '@mbarzda/solid-i18next';
+import env from '@/common/env';
+import { emojiUnicodeToShortcode, unicodeToTwemojiUrl } from '@/emoji';
+import { Emoji } from '../markup/Emoji';
+import { getStorageBoolean, getStorageNumber, setStorageBoolean, setStorageNumber, StorageKeys } from '@/common/localStorage';
+import Checkbox from '../ui/Checkbox';
+import Breadcrumb, { BreadcrumbItem } from '../ui/Breadcrumb';
+import { t } from 'i18next';
+import SettingsBlock from '../ui/settings-block/SettingsBlock';
+import Slider from '../ui/Slider';
+import { playMessageNotification } from '@/common/Sound';
+import { useWindowProperties } from '@/common/useWindowProperties';
+
+const Container = styled("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 10px;
+`;
+
+
+
+export default function InterfaceSettings() {
+  const { header } = useStore();
+
+
+  createEffect(() => {
+    header.updateHeader({
+      title: "Settings - Notifications",
+      iconName: 'settings',
+    });
+  })
+
+
+  return (
+    <Container>
+      <Breadcrumb>
+        <BreadcrumbItem href='/app' icon='home' title="Dashboard" />
+        <BreadcrumbItem title={t('settings.drawer.interface')} />
+      </Breadcrumb>
+      <DesktopNotification/>
+    </Container>
+  )
+}
+
+
+function DesktopNotification() {
+  const {setBlurEffectEnabled, blurEffectEnabled} = useWindowProperties();
+  const toggleBlurEffect = () => {
+    setBlurEffectEnabled(!blurEffectEnabled());
+  }
+
+  return (
+    <SettingsBlock icon='dvr' label='Blur Effect' description='Enables transparent blur effect. Disabled by default on mobile. Can cause performance issues.'>
+      <Checkbox onChange={toggleBlurEffect} checked={blurEffectEnabled()} />
+    </SettingsBlock>
+  )
+}
+

src/components/ui/context-menu/styles.module.scss

@@ -1,3 +1,12 @@
+
+:global body.disableBlur {
+  :local {
+    .contextMenu {
+      background-color: rgb(40, 40, 40);
+      backdrop-filter: none;
+    }
+  }
+}
 .contextMenu {
   position: fixed;
 

src/index.tsx

@@ -13,10 +13,10 @@ import { useWindowProperties } from "./common/useWindowProperties";
 import { createEffect, on } from "solid-js";
 
 render(() => {
-  const { isMobileAgent, blurEffectEnabled } = useWindowProperties();
+  const { isMobileAgent, isWindowFocusedAndBlurEffectEnabled } = useWindowProperties();
 
-  createEffect(on(blurEffectEnabled, () => {
-    if (blurEffectEnabled()) {
+  createEffect(on(isWindowFocusedAndBlurEffectEnabled, () => {
+    if (isWindowFocusedAndBlurEffectEnabled()) {
       document.body.classList.remove("disableBlur");
     } else {
       document.body.classList.add("disableBlur");

src/locales/list/en-gb.json

@@ -172,6 +172,7 @@
     "drawer": {
       "title": "Settings",
       "account": "Account",
+      "interface": "Interface",
       "language": "Language",
       "notifications": "Notifications",
       "logout": "Logout",