Merge pull request #55 from goniszewski/40-grimoire-web-app-is-showin…

…g-outdated-information-for-settings-and-bookmarks

40 grimoire web app is showing outdated information for settings and bookmarks

src/lib/components/BookmarkCard/BookmarkCard.svelte

@@ -19,6 +19,8 @@
 	import { user } from '$lib/pb';
 	import { removeBookmarkFromSearchIndex } from '$lib/utils/search';
 	import { searchEngine } from '$lib/stores/search.store';
+	import { bookmarksStore } from '$lib/stores/bookmarks.store';
+	import { userSettingsStore } from '$lib/stores/user-settings.store';
 
 	export let bookmark: Bookmark = {} as Bookmark;
 	let importanceForm: HTMLFormElement;
@@ -37,7 +39,7 @@
 
 <div
 	class={`relative flex flex-col justify-between card w-full bg-base-100 shadow-xl mb-4 break-inside-avoid h-64 min-w-[20rem] border border-base-100 hover:border-secondary ${
-		$user?.model?.settings?.uiAnimations
+		$userSettingsStore.uiAnimations
 			? 'transition hover:-translate-y-1 duration-300 ease-in-out hover:shadow-2xl'
 			: ''
 	}`}
@@ -306,11 +308,11 @@
 										showToast.success('Bookmark deleted', {
 											position: 'bottom-center'
 										});
-										removeBookmarkFromSearchIndex($searchEngine, bookmark.id);
 										await applyAction(result);
-									}
 
-									invalidate('/');
+										removeBookmarkFromSearchIndex($searchEngine, bookmark.id);
+										bookmarksStore.remove(bookmark.id);
+									}
 								};
 							}}
 						>

src/lib/components/BookmarkListItem/BookmarkListItem.svelte

@@ -19,6 +19,8 @@
 	import { user } from '$lib/pb';
 	import { removeBookmarkFromSearchIndex } from '$lib/utils/search';
 	import { searchEngine } from '$lib/stores/search.store';
+	import { bookmarksStore } from '$lib/stores/bookmarks.store';
+	import { userSettingsStore } from '$lib/stores/user-settings.store';
 
 	export let bookmark: Bookmark = {} as Bookmark;
 	let importanceForm: HTMLFormElement;
@@ -37,7 +39,7 @@
 
 <div
 	class={`flex flex-col justify-between border border-base-content border-opacity-20 p-2 rounded-md min-h-[6rem] gap-1 hover:border-secondary  ${
-		$user?.model?.settings?.uiAnimations
+		$userSettingsStore.uiAnimations
 			? 'transition hover:-translate-x-1 duration-300 ease-in-out'
 			: ''
 	}`}
@@ -310,12 +312,11 @@
 											showToast.success('Bookmark deleted', {
 												position: 'bottom-center'
 											});
-											removeBookmarkFromSearchIndex($searchEngine, bookmark.id);
-
 											await applyAction(result);
-										}
 
-										invalidate('/');
+											removeBookmarkFromSearchIndex($searchEngine, bookmark.id);
+											bookmarksStore.remove(bookmark.id);
+										}
 									};
 								}}
 							>

src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte

@@ -40,7 +40,6 @@
 	</div>
 	<div class="flex flex-col lg:flex-row gap-4">
 		{#if $bookmark?.id}
-			<!-- Display div with white background on top of other content -->
 			<div class="flex flex-col gap-2">
 				<div class="flex flex-col md:flex-row gap-2">
 					<div class="flex flex-col flex-1 gap-2 min-w-fit">

src/lib/stores/bookmarks.store.ts

@@ -0,0 +1,13 @@
+import { writable } from 'svelte/store';
+
+import type { Bookmark } from '$lib/types/Bookmark.type';
+
+const { subscribe, set, update } = writable<Bookmark[]>([]);
+export const bookmarksStore = {
+	subscribe,
+	set,
+	update,
+	add: (bookmark: Bookmark) => update((bookmarks) => [...bookmarks, bookmark]),
+	remove: (bookmarkId: string) =>
+		update((bookmarks) => bookmarks.filter((bookmark) => bookmark.id !== bookmarkId))
+};

src/routes/+page.svelte

@@ -22,6 +22,7 @@
 	import _ from 'lodash';
 	import Select from 'svelte-select';
 	import { writable } from 'svelte/store';
+	import { bookmarksStore } from '$lib/stores/bookmarks.store';
 
 	const sortByOptions = [
 		{ label: 'added (desc)', value: 'created_desc' },
@@ -32,8 +33,6 @@
 		{ label: 'opened times (asc)', value: 'opened_times_asc' }
 	];
 
-	export let bookmarks: Bookmark[] = [];
-
 	$searchEngine = initializeSearch($page.data.bookmarksForIndex);
 
 	function filterBookmarks(bookmarks: Bookmark[], settings: UserSettings) {
@@ -69,7 +68,7 @@
 			$bookmarksToDisplay,
 			$userSettingsStore.bookmarksSortedBy
 		);
-		bookmarks = filterBookmarks(sortedBookmarks, $userSettingsStore);
+		bookmarksStore.set(filterBookmarks(sortedBookmarks, $userSettingsStore));
 	}
 
 	let bookmarksViewForm: HTMLFormElement;
@@ -168,13 +167,13 @@
 				</div>
 			</div>
 			<span class="ml-auto text-sm text-gray-500"
-				>{`Showing ${bookmarks.length} out of ${$page.data.bookmarks.length}`}</span
+				>{`Showing ${$bookmarksStore.length} out of ${$page.data.bookmarks.length}`}</span
 			>
 		</form>
 		<AddBookmarkButton />
 	</div>
 
-	<BookmarkList {bookmarks} />
+	<BookmarkList bookmarks={$bookmarksStore} />
 	<Pagination
 		page={$page.data.page}
 		limit={$page.data.limit}

src/routes/categories/[slug]/+page.svelte

@@ -3,19 +3,18 @@
 	import BookmarkList from '$lib/components/BookmarksList/BookmarkList.svelte';
 	import Icon from '$lib/components/Icon/Icon.svelte';
 	import Pagination from '$lib/components/Pagination/Pagination.svelte';
+	import { bookmarksStore } from '$lib/stores/bookmarks.store';
 
 	import { editCategoryStore } from '$lib/stores/edit-category.store';
-	import type { Bookmark } from '$lib/types/Bookmark.type';
 	import type { Category } from '$lib/types/Category.type';
 
 	let slug: string;
 	let category: Category | undefined;
-	let bookmarks: Bookmark[] = [];
 
 	$: {
 		slug = $page.params.slug;
 		category = $page.data.categories.find((c) => c.slug === slug);
-		bookmarks = $page.data.bookmarks.filter((b) => b.category.id === category?.id);
+		bookmarksStore.set($page.data.bookmarks.filter((b) => b.category.id === category?.id));
 	}
 </script>
 
@@ -65,9 +64,9 @@
 			</div>
 		</div>
 
-		{#if bookmarks.length > 0}
+		{#if $bookmarksStore.length > 0}
 			<div class="flex flex-wrap gap-4">
-				<BookmarkList {bookmarks} />
+				<BookmarkList bookmarks={$bookmarksStore} />
 				<Pagination
 					page={$page.data.page}
 					limit={$page.data.limit}

src/routes/settings/+page.server.ts

@@ -2,6 +2,7 @@ import type { Actions } from '../$types';
 import { pb } from '$lib/pb';
 
 import type { UserSettings } from '$lib/types/UserSettings.type';
+import type { User } from '$lib/types/User.type';
 
 export const actions = {
 	updateUserSettings: async ({ locals, request }) => {
@@ -21,21 +22,21 @@ export const actions = {
 			.getOne(owner)
 			.then((res) => res.settings);
 
-		const updatedSettings = await pb
+		const updatedUser = await pb
 			.collection('users')
-			.update(owner, {
+			.update<User | null>(owner, {
 				settings: {
 					...currentSettings,
 					...settings
 				}
 			})
 			.catch((err) => {
 				console.error('Error updating user settings. Details:', JSON.stringify(err, null, 2));
-				return false;
+				return null;
 			});
 
 		return {
-			updatedSettings
+			updatedSettings: updatedUser?.settings
 		};
 	}
 } satisfies Actions;

src/routes/settings/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { applyAction, enhance } from '$app/forms';
-	import { invalidate } from '$app/navigation';
 	import { defaultConfig, getModels } from '$lib/integrations/ollama';
 	import { user } from '$lib/pb';
 	import { userSettingsStore } from '$lib/stores/user-settings.store';
@@ -10,13 +9,13 @@
 	import { IconPlug, IconPlugConnected } from '@tabler/icons-svelte';
 	import { writable } from 'svelte/store';
 
-	const updatedSettings = writable<Pick<UserSettings, 'llm' | 'uiAnimations' | 'theme'>>(
-		$user.model?.settings || {}
-	);
+	const updatedSettings = writable<Pick<UserSettings, 'llm' | 'uiAnimations' | 'theme'>>({
+		...$userSettingsStore
+	});
 
 	const llmModels = writable<{ fetched: boolean; models: string[] }>({
 		fetched: false,
-		models: [...([$user.model?.settings?.llm?.ollama?.model] || [])]
+		models: [...([$userSettingsStore.llm?.ollama?.model] || [])]
 	});
 
 	async function onTestConnection() {
@@ -47,10 +46,12 @@
 
 				return async ({ result }) => {
 					// @ts-ignore
-					if (result.data.type === 'success') {
+					if (result.type === 'success' && result.data?.updatedSettings) {
 						// @ts-ignore
 						userSettingsStore.set(result.data.updatedSettings);
-						await invalidate((url) => url.pathname === '/');
+						// @ts-ignore
+						themeChange(result.data.updatedSettings.theme);
+						showToast.success('Settings updated!');
 
 						await applyAction(result);
 					}
@@ -67,10 +68,8 @@
 								<select
 									name="theme"
 									class="select select-bordered w-full max-w-xs"
-									value={$user.model.settings?.theme}
+									value={$userSettingsStore.theme}
 									on:change={(e) => {
-										// @ts-ignore
-										themeChange(e.target.value);
 										// @ts-ignore
 										$updatedSettings.theme = e.target.value;
 									}}
@@ -87,7 +86,7 @@
 									type="checkbox"
 									name="uiAnimations"
 									class="checkbox checkbox-accent"
-									checked={$user.model.settings?.uiAnimations}
+									checked={$userSettingsStore.uiAnimations}
 									on:change={(e) => {
 										// @ts-ignore
 										$updatedSettings.uiAnimations = e.target.checked;
@@ -110,7 +109,7 @@
 									type="checkbox"
 									name="llmEnabled"
 									class="checkbox checkbox-accent"
-									checked={$user.model.settings?.llm.enabled}
+									checked={$userSettingsStore.llm.enabled}
 									on:change={(e) => {
 										// @ts-ignore
 										$updatedSettings.llm.enabled = e.target.checked;
@@ -126,7 +125,7 @@
 								<select
 									name="llmProvider"
 									class="select select-bordered w-full max-w-xs"
-									value={$user.model.settings?.llm.provider}
+									value={$userSettingsStore.llm.provider}
 									on:change={(e) => {
 										// @ts-ignore
 										$updatedSettings.provider = e.target.value;
@@ -149,7 +148,7 @@
 										class={`input input-bordered w-full max-w-xs ${
 											$llmModels.fetched ? ' border-success' : ''
 										}`}
-										value={$user.model.settings.llm.ollama.url}
+										value={$userSettingsStore.llm.ollama.url}
 										placeholder="http://localhost:11434"
 										on:change={(e) => {
 											// @ts-ignore
@@ -171,7 +170,7 @@
 									</button>
 								</td>
 							</tr>
-							{#if $llmModels.models.length || $user.model.settings.llm.ollama.model}
+							{#if $llmModels.models.length || $userSettingsStore.llm.ollama.model}
 								<tr>
 									<td>
 										<span class="label-text min-w-[8rem]">Model</span>
@@ -180,7 +179,7 @@
 										<select
 											name="llmOllamaModel"
 											class="select select-bordered w-full max-w-xs"
-											value={$user.model.settings.llm.ollama.model}
+											value={$userSettingsStore.llm.ollama.model}
 											placeholder="Select a model you wish to use"
 											on:change={(e) => {
 												// @ts-ignore
@@ -204,7 +203,7 @@
 										type="text"
 										name="llmOpenaiApikey"
 										class="input input-bordered w-full max-w-xs"
-										value={$user.model.settings.llm.openai.apiKey}
+										value={$userSettingsStore.llm.openai.apiKey}
 										placeholder="Paste it here..."
 										on:change={(e) => {
 											// @ts-ignore
@@ -230,7 +229,7 @@
 									<input
 										type="checkbox"
 										name="llmOllamaSummarizeEnabled"
-										checked={$user.model.settings.llm.ollama.summarize.enabled}
+										checked={$userSettingsStore.llm.ollama.summarize.enabled}
 										class="checkbox checkbox-accent"
 										on:change={(e) => {
 											// @ts-ignore
@@ -242,7 +241,7 @@
 									><textarea
 										name="llmOllamaSystemmsg"
 										class="textarea textarea-bordered textarea-sm w-full min-w-[8rem]"
-										value={$user.model.settings.llm.ollama.summarize.system}
+										value={$userSettingsStore.llm.ollama.summarize.system}
 										placeholder={defaultConfig.roles.summarize.system}
 										on:change={(e) => {
 											// @ts-ignore
@@ -257,7 +256,7 @@
 									<input
 										type="checkbox"
 										name="llmOllamaGenerateTagsEnabled"
-										checked={$user.model.settings.llm.ollama.generateTags.enabled}
+										checked={$userSettingsStore.llm.ollama.generateTags.enabled}
 										class="checkbox checkbox-accent"
 										on:change={(e) => {
 											// @ts-ignore
@@ -269,7 +268,7 @@
 									><textarea
 										name="llmOllamaSystemmsg"
 										class="textarea textarea-bordered textarea-sm w-full min-w-[8rem]"
-										value={$user.model.settings.llm.ollama.generateTags.system}
+										value={$userSettingsStore.llm.ollama.generateTags.system}
 										placeholder={defaultConfig.roles.generateTags.system}
 										on:change={(e) => {
 											// @ts-ignore

src/routes/tags/[slug]/+page.svelte

@@ -3,17 +3,17 @@
 	import BookmarkList from '$lib/components/BookmarksList/BookmarkList.svelte';
 	import EditBookmarkModal from '$lib/components/EditBookmarkModal/EditBookmarkModal.svelte';
 	import Pagination from '$lib/components/Pagination/Pagination.svelte';
+	import { bookmarksStore } from '$lib/stores/bookmarks.store';
 	import type { Bookmark } from '$lib/types/Bookmark.type';
 	import type { Tag } from '$lib/types/Tag.type';
 
 	let slug: string;
 	let tag: Tag | undefined;
-	let bookmarks: Bookmark[] = [];
 
 	$: {
 		slug = $page.params.slug;
 		tag = $page.data.tags.find((c) => c.slug === slug);
-		bookmarks = $page.data.bookmarks.filter((b) => b.tags.find((t) => t.id === tag?.id));
+		bookmarksStore.set($page.data.bookmarks.filter((b) => b.tags.find((t) => t.id === tag?.id)));
 	}
 </script>
 
@@ -22,9 +22,9 @@
 
 	<EditBookmarkModal />
 
-	{#if bookmarks.length > 0}
+	{#if $bookmarksStore.length > 0}
 		<div class="flex flex-wrap gap-4">
-			<BookmarkList {bookmarks} />
+			<BookmarkList bookmarks={$bookmarksStore} />
 			<Pagination
 				page={$page.data.page}
 				limit={$page.data.limit}