From: PhiTux <redacted>
Date: Thu, 25 Sep 2025 17:37:53 +0000 (+0200)
Subject: fix for loading tags in reading-mode
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=dd73a299b938129f75bd9dafb6d9a5bf08d36f2c;p=DailyTxT.git

fix for loading tags in reading-mode
---

diff --git a/frontend/src/lib/tagStore.js b/frontend/src/lib/tagStore.js
index 1e6cc57..7af1f9d 100644
--- a/frontend/src/lib/tagStore.js
+++ b/frontend/src/lib/tagStore.js
@@ -1,3 +1,4 @@
 import {writable} from 'svelte/store';
 
-export let tags = writable([]);
\ No newline at end of file
+export let tags = writable([]);
+export let tagsLoaded = writable(false);
\ No newline at end of file
diff --git a/frontend/src/routes/(authed)/+layout.svelte b/frontend/src/routes/(authed)/+layout.svelte
index 540b6e8..48b08b6 100644
--- a/frontend/src/routes/(authed)/+layout.svelte
+++ b/frontend/src/routes/(authed)/+layout.svelte
@@ -11,7 +11,7 @@
 		darkMode
 	} from '$lib/settingsStore.js';
 	import { API_URL } from '$lib/APIurl.js';
-	import { tags } from '$lib/tagStore.js';
+	import { tags, tagsLoaded } from '$lib/tagStore.js';
 	import TagModal from '$lib/TagModal.svelte';
 	import {
 		alwaysShowSidenav,
@@ -205,6 +205,7 @@
 		getUserSettings();
 		getTemplates();
 		getVersionInfo();
+		loadTags();
 
 		if (page.url.pathname === '/read') {
 			$readingMode = true;
@@ -217,6 +218,21 @@
 		});
 	});
 
+	function loadTags() {
+		axios
+			.get(API_URL + '/logs/getTags')
+			.then((response) => {
+				$tags = response.data;
+				$tagsLoaded = true;
+			})
+			.catch((error) => {
+				console.error(error);
+				// toast
+				const toast = new bootstrap.Toast(document.getElementById('toastErrorLoadingTags'));
+				toast.show();
+			});
+	}
+
 	function logout(errorCode) {
 		axios
 			.get(API_URL + '/users/logout')
diff --git a/frontend/src/routes/(authed)/read/+page.svelte b/frontend/src/routes/(authed)/read/+page.svelte
index 7773867..4ffa668 100644
--- a/frontend/src/routes/(authed)/read/+page.svelte
+++ b/frontend/src/routes/(authed)/read/+page.svelte
@@ -7,13 +7,13 @@
 	import { onMount } from 'svelte';
 	import { marked } from 'marked';
 	import Tag from '$lib/Tag.svelte';
-	import { tags } from '$lib/tagStore.js';
+	import { tags, tagsLoaded } from '$lib/tagStore.js';
 	import FileList from '$lib/FileList.svelte';
 	import { autoLoadImagesThisDevice, settings } from '$lib/settingsStore';
 	import { faCloudArrowDown } from '@fortawesome/free-solid-svg-icons';
 	import { Fa } from 'svelte-fa';
 	import ImageViewer from '$lib/ImageViewer.svelte';
-	import { alwaysShowSidenav, needsReauthentication, isAuthenticated } from '$lib/helpers.js';
+	import { alwaysShowSidenav } from '$lib/helpers.js';
 	import { getTranslate } from '@tolgee/svelte';
 
 	const { t } = getTranslate();
@@ -65,13 +65,18 @@
 	}
 
 	onMount(() => {
-		loadMonthForReading();
 		scrollAreaEl = document.getElementById('scrollArea');
 		if (scrollAreaEl) {
 			scrollAreaEl.addEventListener('scroll', onScrollHandler, { passive: true });
 		}
 	});
 
+	$effect(() => {
+		if ($tagsLoaded) {
+			loadMonthForReading();
+		}
+	});
+
 	let currentMonth = $cal.currentMonth;
 	let currentYear = $cal.currentYear;
 	$effect(() => {
@@ -400,62 +405,76 @@
 
 	<!-- Center -->
 	<div class="d-flex flex-column my-4 ms-4 flex-fill overflow-y-auto" id="scrollArea">
-		{#each logs as log (log.day)}
-			<!-- Log-Area -->
-			{#if ('text' in log && log.text !== '') || log.tags?.length > 0 || log.files?.length > 0}
-				<div class="log glass mb-3 p-3 d-flex flex-row" data-log-day={log.day}>
-					<div class="date me-3 d-flex flex-column align-items-center">
-						<p class="dateNumber">{log.day}</p>
-						<p class="dateDay">
-							<b>
-								{new Date($cal.currentYear, $cal.currentMonth, log.day).toLocaleDateString(
-									'locale',
-									{
-										weekday: 'long'
-									}
-								)}
-							</b>
-						</p>
-					</div>
-					<div class="flex-grow-1 middle">
-						{#if log.text && log.text !== ''}
-							<div class="text">
-								{@html marked.parse(log.text)}
-							</div>
-						{/if}
-						{#if log.tags?.length > 0}
-							<div class="tags d-flex flex-row flex-wrap">
-								{#each log.tags as t}
-									<Tag tag={$tags.find((tag) => tag.id === t)} />
-								{/each}
-							</div>
-						{/if}
-						{#if log.images?.length > 0}
-							{#if !autoLoadImages && log.images.find((image) => !image.src && !image.loading)}
-								<div class="d-flex flex-row">
-									<button type="button" class="loadImageBtn" onclick={() => loadImages()}>
-										<Fa icon={faCloudArrowDown} class="me-2" size="2x" fw /><br />
-										{$t('settings.read.load_images')}
-									</button>
+		{#if logs.length > 0}
+			{#each logs as log (log.day)}
+				<!-- Log-Area -->
+				{#if ('text' in log && log.text !== '') || log.tags?.length > 0 || log.files?.length > 0}
+					<div class="log glass mb-3 p-3 d-flex flex-row" data-log-day={log.day}>
+						<div class="date me-3 d-flex flex-column align-items-center">
+							<p class="dateNumber">{log.day}</p>
+							<p class="dateDay">
+								<b>
+									{new Date($cal.currentYear, $cal.currentMonth, log.day).toLocaleDateString(
+										'locale',
+										{
+											weekday: 'long'
+										}
+									)}
+								</b>
+							</p>
+						</div>
+						<div class="flex-grow-1 middle">
+							{#if log.text && log.text !== ''}
+								<div class="text">
+									{@html marked.parse(log.text)}
 								</div>
-							{:else}
-								<ImageViewer images={log.images} />
 							{/if}
+							{#if log.tags?.length > 0}
+								<div class="tags d-flex flex-row flex-wrap">
+									{#each log.tags as t}
+										<Tag tag={$tags.find((tag) => tag.id === t)} />
+									{/each}
+								</div>
+							{/if}
+							{#if log.images?.length > 0}
+								{#if !autoLoadImages && log.images.find((image) => !image.src && !image.loading)}
+									<div class="d-flex flex-row">
+										<button type="button" class="loadImageBtn" onclick={() => loadImages()}>
+											<Fa icon={faCloudArrowDown} class="me-2" size="2x" fw /><br />
+											{$t('read.load_images')}
+										</button>
+									</div>
+								{:else}
+									<ImageViewer images={log.images} />
+								{/if}
+							{/if}
+						</div>
+
+						{#if log.files && log.files.length > 0}
+							<div class="d-flex flex-column ms-3 files">
+								<FileList files={log.files} {downloadFile} />
+							</div>
 						{/if}
 					</div>
-
-					{#if log.files && log.files.length > 0}
-						<div class="d-flex flex-column ms-3 files">
-							<FileList files={log.files} {downloadFile} />
-						</div>
-					{/if}
+				{/if}
+			{/each}
+		{:else}
+			<div class="d-flex align-items-center justify-content-center h-100">
+				<div class="glass p-5 rounded-5 no-entries">
+					<span id="no-entries">{$t('read.no_entries')}</span>
 				</div>
-			{/if}
-		{/each}
+			</div>
+		{/if}
 	</div>
 </div>
 
 <style>
+	#no-entries {
+		font-size: 1.5rem;
+		font-weight: 600;
+		opacity: 0.7;
+	}
+
 	.sidenav {
 		width: 380px;
 		min-width: 380px;
diff --git a/frontend/src/routes/(authed)/write/+page.svelte b/frontend/src/routes/(authed)/write/+page.svelte
index b009b7d..80a43f2 100644
--- a/frontend/src/routes/(authed)/write/+page.svelte
+++ b/frontend/src/routes/(authed)/write/+page.svelte
@@ -63,8 +63,6 @@
 			target: document.querySelector('.TMCommandBar')
 		});
 
-		loadTags();
-
 		getLog();
 
 		// enable popovers
@@ -84,20 +82,6 @@
 		}
 	});
 
-	function loadTags() {
-		axios
-			.get(API_URL + '/logs/getTags')
-			.then((response) => {
-				$tags = response.data;
-			})
-			.catch((error) => {
-				console.error(error);
-				// toast
-				const toast = new bootstrap.Toast(document.getElementById('toastErrorLoadingTags'));
-				toast.show();
-			});
-	}
-
 	$effect(() => {
 		if (currentLog !== savedLog) {
 			document.getElementsByClassName('TinyMDE')[0].classList.add('notSaved');