fix: multiple bugs

src/lib/components/dashboard/notifications/NotificationPlaceholder.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import type { ComponentType } from 'svelte';
 	import { fade } from 'svelte/transition';
+	import { theme } from '$lib/stores';
 
 	export let icon: ComponentType;
 	export let text: string | undefined = undefined;
 </script>
 
 <div class="placeholder" in:fade={{ duration: 300 }}>
-	<div class="icon-container">
+	<div class="icon-container {$theme}">
 		<svelte:component this={icon} />
 	</div>
 	<h4 class="title">No notifications to display</h4>
@@ -41,10 +42,17 @@
 
 			&::before {
 				position: absolute;
-				background-image: linear-gradient(transparent, variables.$bg-1);
 				content: '';
 				inset: -1px;
-				opacity: 0.75;
+				opacity: 0.5;
+			}
+
+			&.light::before {
+				background-image: linear-gradient(variables.$bg-1, transparent);
+			}
+
+			&.dark::before {
+				background-image: linear-gradient(transparent, variables.$bg-1);
 			}
 		}
 

src/lib/components/dashboard/sidebar/SidebarProviders.svelte

@@ -5,8 +5,9 @@
 
 	let line: HTMLDivElement;
 
+	$: providerView = $settings.providerView;
 	$: if (browser && line) {
-		const target = document.querySelector(`#${$settings.providerView}-tab`);
+		const target = document.querySelector(`#${providerView}-tab`);
 		if (target) {
 			const rect = target.getBoundingClientRect();
 			line.setAttribute('style', `width: ${rect.width}px; left: ${rect.left}px`);

src/lib/components/dashboard/sidebar/SidebarSection.svelte

@@ -6,7 +6,6 @@
 	export let title: string;
 	export let description: string;
 	export let actions: TooltipContent = [];
-	export let zIndex = 1;
 	export let first = false;
 
 	$: activeLenght = items.filter((filter) => filter.active).length;
@@ -18,7 +17,7 @@
 	}
 </script>
 
-<div class="section" style:z-index={zIndex} class:first>
+<div class="section" class:first>
 	<div class="row">
 		<h2 class="title">{title}</h2>
 		<Tooltip
@@ -47,7 +46,6 @@
 
 <style lang="scss">
 	.section {
-		position: relative;
 		display: flex;
 		flex-direction: column;
 		padding: 1.5rem 1rem;
@@ -63,7 +61,6 @@
 	}
 
 	.row {
-		/* z-index: 1; */
 		display: flex;
 		flex-direction: row;
 		align-items: center;

src/lib/components/dashboard/sidebar/WatchedPersons.svelte

@@ -6,6 +6,8 @@
 	import type { User, WatchedPerson } from '$lib/types';
 	import SidebarSection from './SidebarSection.svelte';
 
+	let canSave = false;
+
 	// Update watched persons
 	$: if (browser && !$loading) {
 		const savedWatchedPersons = storage.get('watched-persons');
@@ -35,6 +37,7 @@
 		);
 
 		$watchedPersons = persons.sort((a, b) => b.number - a.number);
+		canSave = true;
 	}
 
 	function addPerson(
@@ -75,7 +78,7 @@
 	$: botsPresent = displayedPersons.some((person) => person.login.endsWith('[bot]'));
 
 	// Save watched persons to storage
-	$: if (browser) {
+	$: if (canSave) {
 		storage.set('watched-persons', $watchedPersons);
 	}
 

src/lib/components/dashboard/sidebar/WatchedRepos.svelte

@@ -17,6 +17,8 @@
 		from: 'github' | 'gitlab';
 	}[];
 
+	let canSave = false;
+
 	// Update watched repos
 	$: if (browser && !$loading) {
 		const savedWatchedRepos = storage.get('watched-repos');
@@ -54,6 +56,7 @@
 		);
 
 		$watchedRepos = repos;
+		canSave = true;
 	}
 
 	$: providerView = $settings.providerView;
@@ -116,7 +119,7 @@
 		}));
 
 	// Save watched repos to storage
-	$: if (browser) {
+	$: if (canSave) {
 		storage.set('watched-repos', $watchedRepos);
 	}
 
@@ -165,7 +168,6 @@
 	title="Repositories"
 	description="Repos from where notifications come."
 	bind:items={$watchedRepos}
-	zIndex={2}
 >
 	{#if watchedReposByOwner.length}
 		{#each watchedReposByOwner as { name, avatar, number, active, muted, repos }}

src/routes/(tray)/tray/+page.svelte

@@ -12,16 +12,14 @@
 	let unlistenSettings: UnlistenFn = () => null;
 	let unlistenTheme: UnlistenFn = () => null;
 
-	$: isTrayApp = browser && window.__TAURI__ && window.location.pathname === '/tray';
-
 	function scrollToTop() {
 		setTimeout(() => {
 			scrollContainer?.scrollTo({ top: 0 });
 		}, 10);
 	}
 
 	onMount(async () => {
-		if (isTrayApp) {
+		if (window.__TAURI__) {
 			window.addEventListener('blur', scrollToTop);
 
 			const [a, b, c] = await Promise.all([
@@ -39,11 +37,16 @@
 			unlistenNotification = a;
 			unlistenSettings = b;
 			unlistenTheme = c;
+
+			const baseTheme = document.documentElement.getAttribute('data-theme');
+			if (baseTheme == 'light' || baseTheme == 'dark') {
+				$theme = baseTheme;
+			}
 		}
 	});
 
 	onDestroy(() => {
-		if (isTrayApp) {
+		if (browser && window.__TAURI__) {
 			window.removeEventListener('blur', scrollToTop);
 
 			unlistenNotification();