@turnipxenon/pineapple 5.2.2 → 5.3.0-alpha.2

package/dist/ui/modules/NavigationMenu/NavigationMenu.svelte

@@ -1,6 +1,7 @@
 <!-- TODO: Documentation: consider documentation showcase -->
 
 <script lang="ts">
+	import { page } from "$app/state";
 	import type { ParsnipOverall } from "../../../modules/parsnip/ParsnipOverall";
 	import NavigationControl from "./NavigationControl.svelte";
 	import {
@@ -10,6 +11,7 @@
 		type ParsePageMetaCompareFn
 	} from "./PageMeta";
 	import { PinyaCard } from "../../elements/index";
+	import Placeholder from "../../elements/Placeholder.svelte";
 	import { localizeHref } from "../../../external/paraglide/runtime.js";
 
 	interface Props {
@@ -26,6 +28,8 @@
 		compareFn?: undefined | ParsePageMetaCompareFn;
 		pageSize?: number;
 		currentIndex?: number;
+		selectedTags?: string[];
+		queryReady?: boolean;
 		parsnipOverall?: ParsnipOverall;
 		parsnipBasePath?: string;
 	}
@@ -41,22 +45,43 @@
 		compareFn = undefined,
 		pageSize = $bindable(5),
 		currentIndex = $bindable(0),
+		selectedTags = $bindable([]),
+		queryReady = $bindable(false),
 		parsnipOverall = undefined,
 		parsnipBasePath = ""
 	}: Props = $props();
 
+	$effect(() => {
+		if (!shouldAllowControl) {
+			queryReady = true;
+		}
+	});
+	const hasTagQuery = $derived((() => {
+		const repeatedTags = page.url.searchParams.getAll("tags");
+		if (repeatedTags.length > 0) {
+			return true;
+		}
+		const inlineTags = page.url.searchParams.get("tags") ?? "";
+		return inlineTags.trim().length > 0;
+	})());
+
 	const fileBasedList = parsePageMeta(fileList, jsonList, imageMap, compareFn);
 	const parsnipBasedList = parsnipOverall?.files.map(pf => {
+		let imageUrl = pf.preview;
+		if (imageUrl && !imageUrl.includes('https://')) {
+			imageUrl = `${parsnipOverall.baseUrl}/${pf.preview}`;
+		}
 		const meta: PageMeta = {
 			title: pf.basename,
 			nestedPages: [],
 			relativeLink: `${parsnipBasePath}${pf.slug}`,
 			tags: pf.tags,
-			imageUrl: pf.preview ? `${parsnipOverall.baseUrl}/${pf.preview}` : undefined,
+			imageUrl,
 			imageAlt: pf.previewAlt,
 			datePublished: pf.stat.ctime ? new Date(pf.stat.ctime).toISOString().split("T")[0] : undefined,
 			lastUpdated: pf.stat.mtime ? new Date(pf.stat.mtime).toISOString().split("T")[0] : undefined,
-			description: pf.tagline
+			description: pf.tagline,
+			priority: 0
 		};
 		return meta;
 	}) ?? [];
@@ -68,7 +93,33 @@
 		pageFlatList.sort(DefaultPageMetaSorter);
 	}
 
-	let visiblePages = $derived(pageFlatList.slice(currentIndex * pageSize, (currentIndex * pageSize) + pageSize));
+	const selectedTagsSet = $derived(new Set(selectedTags.map(tag => tag.toLocaleLowerCase())));
+	const filteredPageFlatList = $derived(
+		selectedTagsSet.size === 0
+			? pageFlatList
+			: pageFlatList.filter(pageMeta => {
+				if (!pageMeta.tags || pageMeta.tags.length === 0) {
+					return false;
+				}
+				const pageTags = new Set(pageMeta.tags.map(tag => tag.toLocaleLowerCase()));
+				for (const selectedTag of selectedTagsSet) {
+					if (!pageTags.has(selectedTag)) {
+						return false;
+					}
+				}
+				return true;
+			})
+	);
+	const maxIndex = $derived(Math.max(Math.ceil(filteredPageFlatList.length / pageSize) - 1, 0));
+	$effect(() => {
+		if (currentIndex > maxIndex) {
+			currentIndex = maxIndex;
+		}
+		if (currentIndex < 0) {
+			currentIndex = 0;
+		}
+	});
+	let visiblePages = $derived(filteredPageFlatList.slice(currentIndex * pageSize, (currentIndex * pageSize) + pageSize));
 </script>
 
 <div class="navigation-wrapper">
@@ -85,53 +136,78 @@
 	{#if allowUpperControl && shouldAllowControl}
 		<NavigationControl
 			bind:currentIndex={currentIndex}
-			contentLength={pageFlatList.length}
-			bind:pageSize={pageSize}></NavigationControl
+			contentLength={filteredPageFlatList.length}
+			bind:pageSize={pageSize}
+			bind:selectedTags={selectedTags}
+			bind:queryReady={queryReady}></NavigationControl
 		>
 	{/if}
 
 	<div class="navigation-component">
-		<!-- all the misc routes-->
-		{#each visiblePages as pageMeta (pageMeta.title)}
-			{@const fullPath = `${parentSubpath}${pageMeta.relativeLink}`}
-			<!-- thank you so much to https://www.reddit.com/r/sveltejs/comments/yoe6in/comment/jvaj1ez -->
-			<a href={localizeHref(fullPath)} class="card-anchor a-as-btn" data-sveltekit-reload>
-				<PinyaCard
-					widthClass="w-full"
-					className="navigation-element"
-				>
-					{#if pageMeta.imageUrl}
-						<img src={pageMeta.imageUrl}
-						     alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
-					{/if}
-					<section class="blurb-text">
-						<h2>{pageMeta.title}</h2>
-						<p>Published: {pageMeta.datePublished ?? "N/A"} | Last updated: {pageMeta.lastUpdated ?? "N/A"}</p>
-						<p>{pageMeta.description ?? ""}</p>
-						Tags:
-						{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
-							{#each pageMeta.tags as tagValue, idx (idx)}
-								&nbsp;<span class="badge variant-filled tag-container">{tagValue}</span>
-							{/each}
-						{:else}
-							None
+		{#if hasTagQuery && !queryReady}
+			<PinyaCard widthClass="w-full" paddingClass="" className="navigation-element">
+				<div class="blurb-text">
+					<Placeholder classes="h-8 w-2/3 mb-4" />
+					<Placeholder classes="h-4 w-1/2 mb-2" />
+					<Placeholder classes="h-4 w-full mb-2" />
+					<Placeholder classes="h-4 w-5/6 mb-2" />
+				</div>
+			</PinyaCard>
+			<PinyaCard widthClass="w-full" className="navigation-element" paddingClass="">
+				<div class="blurb-text">
+					<Placeholder classes="h-8 w-2/3 mb-4" />
+					<Placeholder classes="h-4 w-1/2 mb-2" />
+					<Placeholder classes="h-4 w-full mb-2" />
+					<Placeholder classes="h-4 w-5/6 mb-2" />
+				</div>
+			</PinyaCard>
+		{:else}
+			<!-- all the misc routes-->
+			{#each visiblePages as pageMeta (pageMeta.title)}
+				{@const fullPath = `${parentSubpath}${pageMeta.relativeLink}`}
+				<!-- thank you so much to https://www.reddit.com/r/sveltejs/comments/yoe6in/comment/jvaj1ez -->
+				<a href={localizeHref(fullPath)} class="card-anchor a-as-btn" data-sveltekit-reload>
+					<PinyaCard
+						widthClass="w-full"
+						className="navigation-element"
+						paddingClass=""
+					>
+						{#if pageMeta.imageUrl}
+							<img src={pageMeta.imageUrl}
+							     class="pinya-card-image"
+							     alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
 						{/if}
-					</section>
-				</PinyaCard>
-			</a>
-		{/each}
+						<section class="blurb-text">
+							<h2>{pageMeta.title}</h2>
+							<p>Published: {pageMeta.datePublished ?? "N/A"} | Last updated: {pageMeta.lastUpdated ?? "N/A"}</p>
+							<p>{pageMeta.description ?? ""}</p>
+							Tags:
+							{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
+								{#each pageMeta.tags as tagValue, idx (idx)}
+									&nbsp;<span class="badge tag-container">{tagValue}</span>
+								{/each}
+							{:else}
+								None
+							{/if}
+						</section>
+					</PinyaCard>
+				</a>
+			{/each}
 
-		{#if visiblePages.length === 0}
-			<PinyaCard>
-				<p class="default-card">Sorry, no content was found</p>
-			</PinyaCard>
+			{#if visiblePages.length === 0}
+				<PinyaCard>
+					<p class="default-card">Sorry, no content was found</p>
+				</PinyaCard>
+			{/if}
 		{/if}
 	</div>
 
 	{#if shouldAllowControl}
 		<NavigationControl bind:currentIndex={currentIndex}
-		                   contentLength={pageFlatList.length}
-		                   bind:pageSize={pageSize}></NavigationControl>
+		                   contentLength={filteredPageFlatList.length}
+		                   bind:pageSize={pageSize}
+		                   bind:selectedTags={selectedTags}
+		                   bind:queryReady={queryReady}></NavigationControl>
 	{/if}
 
 </div>
@@ -206,6 +282,18 @@
 
     .tag-container {
         margin: 0.25lh 0;
+        display: inline-flex;
+        align-items: center;
+        border-radius: 0.5rem;
+        padding: 0.2rem 0.55rem;
+        border: 1px solid var(--color-surface-700-600);
+        background-color: transparent;
+        color: var(--color-surface-900-100);
+        transition: border-color 0.15s ease;
+    }
+
+    :global(.navigation-element:hover) .tag-container {
+        border-color: var(--color-primary-400-600);
     }
 
     a.card-anchor {
@@ -228,4 +316,8 @@
     h2 {
         text-align: start;
     }
+
+    .navigation-wrapper .pinya-card-image {
+		    border-radius: var(--radius-xl);
+    }
 </style>

package/dist/ui/modules/NavigationMenu/NavigationMenu.svelte.d.ts

@@ -14,10 +14,12 @@ interface Props {
     compareFn?: undefined | ParsePageMetaCompareFn;
     pageSize?: number;
     currentIndex?: number;
+    selectedTags?: string[];
+    queryReady?: boolean;
     parsnipOverall?: ParsnipOverall;
     parsnipBasePath?: string;
 }
-declare const NavigationMenu: import("svelte").Component<Props, {}, "currentIndex" | "pageSize">;
+declare const NavigationMenu: import("svelte").Component<Props, {}, "currentIndex" | "pageSize" | "selectedTags" | "queryReady">;
 type NavigationMenu = ReturnType<typeof NavigationMenu>;
 export default NavigationMenu;
 //# sourceMappingURL=NavigationMenu.svelte.d.ts.map

package/dist/ui/modules/NavigationMenu/NavigationMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/NavigationMenu/NavigationMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAE1E,OAAO,EAIL,KAAK,sBAAsB,EAC3B,MAAM,yCAAyC,CAAC;AAKjD,UAAU,KAAK;IACd,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,SAAS,GAAG,sBAAsB,CAAC;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB;AA4GF,QAAA,MAAM,cAAc,oEAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"NavigationMenu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/NavigationMenu/NavigationMenu.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAE1E,OAAO,EAIL,KAAK,sBAAsB,EAC3B,MAAM,yCAAyC,CAAC;AAMjD,UAAU,KAAK;IACd,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,SAAS,GAAG,sBAAsB,CAAC;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB;AAgLF,QAAA,MAAM,cAAc,oGAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/ui/modules/modals/general-settings/GeneralSettingsModal.svelte

@@ -1,29 +1,29 @@
 <!-- TODO: Documentation: consider documentation showcase -->
 
 <script lang="ts">
-	import type { ModalProps } from 'svelte-modals';
-	import { setMode, userPrefersMode } from 'mode-watcher';
+	import ConstrastIcon from "../../../../assets/icons/icon-contrast.svg";
+	import DarkIcon from "../../../../assets/icons/icon-dark-mode.svg";
+	import LightIcon from "../../../../assets/icons/icon-light-mode.svg";
 
-	import { m } from '../../../../external/paraglide/messages';
+	import { m } from "../../../../external/paraglide/messages";
+	import ModalBase from "../../../components/ModalBase.svelte";
 	import SettingsPanel from "../../universal-overlay/SettingsPanel.svelte";
-	import ModalBase from '../../../components/ModalBase.svelte';
-	import DarkIcon from '../../../../assets/icons/icon-dark-mode.svg';
-	import LightIcon from '../../../../assets/icons/icon-light-mode.svg';
-	import ConstrastIcon from '../../../../assets/icons/icon-contrast.svg';
+	import { setMode, userPrefersMode } from "mode-watcher";
+	import type { ModalProps } from "svelte-modals";
 
 	let props: ModalProps = $props();
 
 
 	interface ToggleItem {
-		key: 'light' | 'dark' | 'system'
+		key: "light" | "dark" | "system"
 		imageSrc: string,
 		label: string,
 	}
 
 	const modes: ToggleItem[] = [
-		{ key: 'light', imageSrc: LightIcon, label: 'Light' },
-		{ key: 'dark', imageSrc: DarkIcon, label: 'Dark' },
-		{ key: 'system', imageSrc: ConstrastIcon, label: 'System' }
+		{ key: "light", imageSrc: LightIcon, label: "Light" },
+		{ key: "dark", imageSrc: DarkIcon, label: "Dark" },
+		{ key: "system", imageSrc: ConstrastIcon, label: "System" }
 	];
 
 	let selectedItem: ToggleItem = $state(modes[0]);
@@ -41,14 +41,14 @@
 	// when mode is changed inside the button, adjust the mode
 	$effect(() => {
 		switch (selectedItem?.key) {
-			case 'dark':
-				setMode('dark');
+			case "dark":
+				setMode("dark");
 				break;
-			case 'light':
-				setMode('light');
+			case "light":
+				setMode("light");
 				break;
-			case 'system':
-				setMode('system');
+			case "system":
+				setMode("system");
 				break;
 			default:
 				break;
@@ -60,11 +60,11 @@
 	<div class="wrapper">
 		<h2>{m.settings()}</h2>
 
-		<SettingsPanel />
+		<SettingsPanel close={props.close} />
 
 		<div class="actions">
 			<button class="btn preset-filled-primary-400-600 text-surface-100" onclick={() => props.close()}
-							title="Close modal">
+			        title="Close modal">
 				Close
 			</button>
 		</div>
@@ -78,7 +78,6 @@
 .actions {
   display: flex;
   flex-direction: row-reverse;
-  margin-top: 1.4lh;
 }
 
 .wrapper {
@@ -86,5 +85,6 @@
   flex-direction: column;
   justify-content: start;
   text-align: start;
-  gap: 1lh;
+  overflow: auto;
+  max-height: calc(100vh - 3lh);
 }</style>

package/dist/ui/modules/modals/general-settings/GeneralSettingsModal.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ModalProps } from 'svelte-modals';
+import type { ModalProps } from "svelte-modals";
 declare const GeneralSettingsModal: import("svelte").Component<ModalProps<any>, {}, "">;
 type GeneralSettingsModal = ReturnType<typeof GeneralSettingsModal>;
 export default GeneralSettingsModal;

package/dist/ui/modules/modals/general-settings/GeneralSettingsModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GeneralSettingsModal.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/ui/modules/modals/general-settings/GeneralSettingsModal.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAsFhD,QAAA,MAAM,oBAAoB,qDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"GeneralSettingsModal.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/ui/modules/modals/general-settings/GeneralSettingsModal.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AA8EhD,QAAA,MAAM,oBAAoB,qDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/ui/modules/universal-overlay/DialogPanel.svelte

@@ -6,14 +6,29 @@ Layout and logic for DialogPanel. Some of the logics for the portraits are in Un
 
 <script lang="ts">
 	import { dialogManager } from "../../../components/dialog_manager/DialogManager";
-	import { onMount } from "svelte";
+	import { getAutoScrollPrefContext, getTextSpeedContext } from "../../../util/context/pineappleBaseContextDefinitions.svelte";
+	import { onMount, tick } from "svelte";
 
 	let currentMessage = $state("");
+	let textSpeedContext = getTextSpeedContext();
+	let autoScrollPrefContext = getAutoScrollPrefContext();
+	let dialogPanelElement: HTMLDivElement | null = null;
+	let shouldStickToBottom = true;
 
 	const onDialogClick = () => {
 		dialogManager?.skipAnimation();
 	};
 
+	const onDialogScroll = () => {
+		if (!dialogPanelElement) {
+			return;
+		}
+
+		const distanceToBottom =
+			dialogPanelElement.scrollHeight - dialogPanelElement.scrollTop - dialogPanelElement.clientHeight;
+		shouldStickToBottom = distanceToBottom <= 24;
+	};
+
 	onMount(() => {
 		dialogManager.currentMessage.subscribe((value) => {
 			currentMessage = value;
@@ -21,19 +36,78 @@ Layout and logic for DialogPanel. Some of the logics for the portraits are in Un
 
 		dialogManager.update(0);
 	});
+
+	$effect(() => {
+		dialogManager.setUpdateRate((16*10) - (textSpeedContext.value*16));
+	});
+
+	$effect(() => {
+		currentMessage;
+
+		tick().then(() => {
+			if (!dialogPanelElement || !shouldStickToBottom || !autoScrollPrefContext.value) {
+				return;
+			}
+
+			dialogPanelElement.scrollTop = dialogPanelElement.scrollHeight;
+		});
+	});
 </script>
 
 <div
 	tabindex="0"
 	role="button"
+	id="dialog-panel"
+	bind:this={dialogPanelElement}
 	onclick={onDialogClick}
+	onscroll={onDialogScroll}
 	onkeyup={(e) => {
-					if (e.key === 'j') {
-						onDialogClick();
-					}
-				}}
+		if (e.key === "j") {
+			onDialogClick();
+		}
+	}}
 >
 	<!-- Made for 140 characters, like the original tweets -->
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-	{@html currentMessage}
+	<div id="reverse-dialog-wrapper">
+		{@html currentMessage}
+	</div>
 </div>
+
+<style>
+	:global {
+		:root {
+			--color-dialog-bold: #6b8499;
+			--color-dialog-italic: #a55332;
+		}
+
+		html.dark {
+			--color-dialog-bold: #85a1b6;
+			--color-dialog-italic: #f7b67c;
+		}
+
+		#reverse-dialog-wrapper {
+			width: 100%;
+		}
+
+		#dialog-panel {
+			overflow: auto;
+			display: block;
+
+			img,
+			video {
+				max-height: 3lh;
+				display: inline;
+			}
+
+			b {
+				font-weight: bolder;
+				color: var(--color-dialog-bold);
+			}
+
+			i {
+				color: var(--color-dialog-italic);
+			}
+		}
+	}
+</style>

package/dist/ui/modules/universal-overlay/DialogPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/universal-overlay/DialogPanel.svelte.ts"],"names":[],"mappings":"AAyCA,4GAA4G;AAC5G,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"DialogPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/universal-overlay/DialogPanel.svelte.ts"],"names":[],"mappings":"AA6EA,4GAA4G;AAC5G,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}