Add notification feature with permission handling and UI toggle

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -18,6 +18,7 @@
   import Arcodion from "src/lib/UI/Arcodion.svelte";
   import Button from "src/lib/UI/GUI/Button.svelte";
   import { CustomGUISettingMenuStore } from "src/ts/stores.svelte";
+  import { alertError } from "src/ts/alert";
 
     const onSchemeInputChange = (e:Event) => {
         changeColorScheme((e.target as HTMLInputElement).value)
@@ -362,6 +363,27 @@
         <Help key="betaMobileGUI"/>
     </div>
 
+    <div class="flex items-center mt-2">
+        <Check bind:check={DBState.db.notification} name={language.notification} onChange={async (e) => {
+            let hasPermission = {state: 'denied'}
+            try {
+                hasPermission = await navigator.permissions.query({name: 'notifications'})                
+            } catch (error) {
+                //for browsers that do not support permissions api
+            }
+            if(!DBState.db.notification){
+                return
+            }
+            if(hasPermission.state === 'denied'){
+                const permission = await Notification.requestPermission()
+                if(permission === 'denied'){
+                    alertError(language.permissionDenied)
+                    DBState.db.notification = false
+                }
+            }
+        }}/>
+    </div>
+
     {#if DBState.db.showUnrecommended}
         <div class="flex items-center mt-2">
             <Check bind:check={DBState.db.useChatSticker} name={language.useChatSticker}/>