@turnipxenon/pineapple 2.4.56 → 2.4.58

package/dist/template/seaweed/entries/ThisWebpage.svelte

@@ -3,7 +3,7 @@ import Card from "../../../components/Card.svelte";
 import GithubIcon from "../../../assets/icons/github-mark.svg";
 import WindowSetGraph from "../../../assets/others/window-set.png";
 import ThisWebsiteFootage from "../../../assets/others/seaweed-showcase.mp4";
-import Chip from "../../../components/Chip.svelte";
+import Chip from "../../../components/chip/Chip.svelte";
 export let props;
 </script>
 

package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte

@@ -5,6 +5,9 @@
 } from "../SeaweedTemplateData";
 import { removeProxyWrapperOnString } from "./EntryOrderConfig";
 import ComboBoxWithButton from "../../../components/combo_box/ComboBoxWithButton.svelte";
+import CloseIcon from "../../../assets/icons/close.svg";
+import UpwardIcon from "../../../assets/icons/arrow-upward.svg";
+import "./entry-order-config.postcss";
 export let seaweedEntries;
 export let orderUrl;
 export let updateUrl;
@@ -20,7 +23,6 @@ const updateOrderQuery = () => {
 const addEntry = (group) => {
   return (selected) => {
     const c = GetEntryFromGlobal(selected);
-    console.log(selected, c);
     if (c) {
       group.items.push(c);
       seaweedEntries = seaweedEntries;
@@ -38,7 +40,6 @@ const swapEntry = (index, group, shouldDecrement) => {
     } else {
       return;
     }
-    console.log(index, newIndex);
     const tempVar = group.items[newIndex];
     group.items[newIndex] = group.items[index];
     group.items[index] = tempVar;
@@ -76,10 +77,8 @@ const removeGroup = (group) => {
 };
 const removeEntry = (entry, group) => {
   return () => {
-    console.log("Clicked!");
     for (let i = group.items.length - 1; i >= 0; i--) {
       if (group.items[i].name === entry.name) {
-        console.log("Reduce");
         group.items.splice(i, 1);
         seaweedEntries = seaweedEntries;
         updateOrderQuery();
@@ -89,10 +88,10 @@ const removeEntry = (entry, group) => {
   };
 };
 const allDefaultEntries = Array.from(GetAllEntryFromGlobal().keys());
-console.log("Test", Array.from(GetAllEntryFromGlobal().keys()));
 </script>
 
-<h3>Site ordering</h3>
+<br>
+<h2>Site ordering</h2>
 <blockquote>Sorry! This part of the website is still WIP, but here it is anyway. As long as it functions</blockquote>
 
 <!-- formatting: group1:entry1|entry2,group2:entry3
@@ -101,30 +100,75 @@ console.log("Test", Array.from(GetAllEntryFromGlobal().keys()));
  , <= separates each group
  -->
 <div class="advanced-setting-list">
-	<!-- todo: we might have to extract this into it's own component -->
-	<!-- todo: NOW!!! -->
 	{#each seaweedEntries as group, groupIndex}
-		<div>
-			<div>
-				<button class="editable-button" on:click={removeGroup(group)}>X</button>
-				<!-- todo: move group up or down -->
-				<button class="editable-button" on:click={swapGroups(groupIndex, true)}>^</button>
-				<button class="editable-button" on:click={swapGroups(groupIndex, false)}>v</button>
-				{group.name}
+		<div class="entry-group card">
+
+			<div class="btn-group-header">
+				<button title={`Remove ${group.name}`}
+				        on:click={removeGroup(group)}>
+					<img class="img-icon" src={CloseIcon} alt={`Remove ${group.name}`}>
+				</button>
+
+				<button title={`Move group ${group.name} upwards`}
+				        on:click={swapGroups(groupIndex, true)}
+				        disabled="{groupIndex === 0}">
+					<img class="img-icon" src={UpwardIcon} alt={`Move group ${group.name} upwards`}>
+				</button>
+
+				<button title={`Move group ${group.name} downwards`}
+				        disabled={groupIndex === seaweedEntries.length - 1}
+				        on:click={swapGroups(groupIndex, false)}>
+					<img class="img-icon flipped-vertically" src={UpwardIcon} alt={`Move group ${group.name} downwards`}>
+				</button>
+
+				<h2>{group.name}</h2>
 			</div>
-			<div class="advanced-setting-list card">
+
+			<table class="advanced-setting-list table">
+				<thead>
+				<tr>
+					<th>Entries</th>
+				</tr>
+				</thead>
+				<tbody>
 				{#each group.items as entry, entryIndex}
-					<div class="editable-entry">
-						<button on:click={removeEntry(entry, group)}>-</button>
-						<button on:click={swapEntry(entryIndex, group, true)}>^</button>
-						<button on:click={swapEntry(entryIndex, group, false)}>v</button>
-						{entry.name}
-					</div>
+					<tr class="entry-row">
+						<td class="btn-group-entry">
+
+							<button title={`Remove ${entry.name}`}
+							        on:click={removeEntry(entry, group)}>
+								<img class="img-icon" src={CloseIcon} alt={`Remove ${entry.name}`}>
+							</button>
+
+							<button title={`Move ${entry.name} upwards`}
+							        on:click={swapEntry(entryIndex, group, true)}
+							        disabled="{entryIndex === 0}">
+								<img class="img-icon" src={UpwardIcon} alt={`Move ${entry.name} upwards`}>
+							</button>
+
+							<button title={`Move ${entry.name} downwards`}
+							        disabled={entryIndex === group.items.length - 1}
+							        on:click={swapEntry(entryIndex, group, false)}>
+								<img class="img-icon flipped-vertically" src={UpwardIcon} alt={`Move ${entry.name} downwards`}>
+							</button>
+							<div class="entry-name">
+								{entry.name}
+							</div>
+						</td>
+					</tr>
 				{/each}
-			</div>
+				</tbody>
+
+				<tfoot>
+				<tr>
+					<td>
+						<ComboBoxWithButton stringItems={allDefaultEntries}
+						                    onClick={addEntry(group)}></ComboBoxWithButton>
+					</td>
+				</tr>
+				</tfoot>
+			</table>
 
-			<ComboBoxWithButton stringItems={allDefaultEntries}
-			                    onClick={addEntry(group)}></ComboBoxWithButton>
 
 		</div>
 	{/each}
@@ -136,29 +180,43 @@ console.log("Test", Array.from(GetAllEntryFromGlobal().keys()));
         flex-direction: column;
     }
 
-    :is(.dark .editable-entry > button),:is(.dark  .editable-button) {
+    :is(.dark .btn-group-header) {
         --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-tertiary));
 }
 
-    .editable-entry > button:disabled, .editable-button:disabled {
+    .btn-group-header > *:disabled {
         cursor: not-allowed;
         opacity: 0.5;
 }
 
-    .editable-entry > button:disabled:hover, .editable-button:disabled:hover {
+    .btn-group-header > *:disabled:hover {
         --tw-brightness: brightness(1);
         filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-    .editable-entry > button:disabled:active, .editable-button:disabled:active {
+    .btn-group-header > *:disabled:active {
         --tw-scale-x: 1;
         --tw-scale-y: 1;
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-    .editable-entry > button, .editable-button {
+    .btn-group-header {
+        display: inline-flex;
+        flex-direction: row;
+        overflow: hidden;
+        border-radius: var(--theme-rounded-base);
+        isolation: isolate;
+}
+
+    .btn-group-header > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0px * var(--tw-space-x-reverse));
+        margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+}
+
+    .btn-group-header button,.btn-group-header a {
         font-size: 1rem;
         line-height: 1.5rem;
         padding-left: 1.25rem;
@@ -173,37 +231,156 @@ console.log("Test", Array.from(GetAllEntryFromGlobal().keys()));
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 150ms;
-        border-radius: var(--theme-rounded-base);
+        color: inherit;
+        text-decoration-line: none;
 }
 
-    .editable-entry > button > :not([hidden]) ~ :not([hidden]), .editable-button > :not([hidden]) ~ :not([hidden]) {
+    .btn-group-header button > :not([hidden]) ~ :not([hidden]),.btn-group-header a > :not([hidden]) ~ :not([hidden]) {
         --tw-space-x-reverse: 0;
         margin-right: calc(0.5rem * var(--tw-space-x-reverse));
         margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-    .editable-entry > button:hover, .editable-button:hover {
+    .btn-group-header button:hover,.btn-group-header a:hover {
         --tw-brightness: brightness(1.15);
         filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+        background-color: rgb(var(--color-surface-50) / 3%);
 }
 
-    .editable-entry > button:active, .editable-button:active {
-        --tw-scale-x: 95%;
-        --tw-scale-y: 95%;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-        --tw-brightness: brightness(.9);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    .btn-group-header button:active,.btn-group-header a:active {
+        background-color: rgb(var(--color-surface-900) / 3%);
+}
+
+    .btn-group-header > * + * {
+        border-top-width: 0px;
+        border-left-width: 1px;
+        border-color: rgb(var(--color-surface-500) / 0.2);
 }
 
-    .editable-entry > button, .editable-button {
+    .btn-group-header {
         --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-tertiary));
 }
 
-    :is(.dark .editable-entry > button),:is(.dark  .editable-button) {
+    :is(.dark .btn-group-header) {
         --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-tertiary));
+}
+
+    .btn-group-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.5lh;
+    }
+
+    .btn-group-entry > *:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+}
+
+    .btn-group-entry > *:disabled:hover {
+        --tw-brightness: brightness(1);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .btn-group-entry > *:disabled:active {
+        --tw-scale-x: 1;
+        --tw-scale-y: 1;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+    .btn-group-entry {
+        display: inline-flex;
+        flex-direction: row;
+        overflow: hidden;
+        border-radius: var(--theme-rounded-base);
+        isolation: isolate;
+}
+
+    .btn-group-entry > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0px * var(--tw-space-x-reverse));
+        margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+}
+
+    .btn-group-entry button,.btn-group-entry a {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+        padding-top: 9px;
+        padding-bottom: 9px;
+        white-space: nowrap;
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        color: inherit;
+        text-decoration-line: none;
+}
+
+    .btn-group-entry button > :not([hidden]) ~ :not([hidden]),.btn-group-entry a > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+    .btn-group-entry button:hover,.btn-group-entry a:hover {
+        --tw-brightness: brightness(1.15);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+        background-color: rgb(var(--color-surface-50) / 3%);
+}
+
+    .btn-group-entry button:active,.btn-group-entry a:active {
+        background-color: rgb(var(--color-surface-900) / 3%);
+}
+
+    .btn-group-entry > * + * {
+        border-top-width: 0px;
+        border-left-width: 1px;
+        border-color: rgb(var(--color-surface-500) / 0.2);
 }
+
+    .btn-group-entry {
+        display: flex;
+        padding: 0;
+    }
+
+    .btn-group-entry > div {
+        padding: 1em;
+    }
+
+    .flipped-vertically {
+        transform: rotate(180deg);
+    }
+
+    .entry-group {
+        background-color: rgb(var(--color-surface-600));
+        margin-top: 1.5lh;
+        margin-bottom: 0.5lh;
+        padding: 0.5lh 0.5em;
+    }
+
+    .entry-row {
+        display: flex;
+        align-items: center;
+    }
+
+    .entry-name {
+        flex-grow: 1;
+    }
+
+    tr, td, th {
+        width: 100%;
+    }
+
+    tfoot > tr {
+        display: flex;
+    }
+
 </style>

package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponent } from "svelte";
 import { type EntryGroup, type SeaweedTemplateData } from "../SeaweedTemplateData";
+import "./entry-order-config.postcss";
 declare const __propDef: {
     props: {
         seaweedEntries: EntryGroup[];

package/dist/template/seaweed/entry_order_config/entry-order-config.postcss

@@ -0,0 +1,35 @@
+.btn-group > button {
+    padding: 0.3em 0.75em;
+}
+
+.btn-group-header > h2 {
+    font-weight: bolder;
+    padding-top: 1lh;
+    padding-bottom: 1lh;
+    margin-bottom: 0;
+    padding-inline-start: 1em;
+}
+
+.dark .btn-group-header > h2 {
+    color: rgb(var(--theme-font-color-dark));
+}
+
+.dark .entry-group {
+    background-color: rgb(var(--color-surface-800));
+}
+
+tbody tr:nth-child(odd) {
+    background-color: rgb(var(--color-surface-500));
+}
+
+.dark tbody tr:nth-child(odd) {
+    background-color: rgb(var(--color-surface-900));
+}
+
+tbody tr:nth-child(even) {
+    background-color: rgb(var(--color-surface-200));
+}
+
+.dark tbody tr:nth-child(even) {
+    background-color: rgb(var(--color-surface-800));
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.56",
+  "version": "2.4.58",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",
@@ -16,7 +16,7 @@
     "custom-check": "npx vite-node src/lib/scripts/util/ManualCheckRun.ts",
     "preview": "vite preview",
     "prepublishOnly": "yarn package",
-    "to-dev": "git checkout main && git pull origin main && git checkout -b turnip/dev"
+    "to-dev": "git checkout main && git pull origin main && git branch -d turnip/dev && git checkout -b turnip/dev"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.1.1",

package/src/lib/app.postcss

@@ -185,7 +185,6 @@ a:active {
 }
 
 #toast-progress::-moz-progress-bar {
-    /*background-color: red;*/
     background: rgba(var(--color-secondary-500));
 }
 
@@ -207,3 +206,7 @@ a:active {
 .dark .ares-logo {
     filter: invert(100%);
 }
+
+.input {
+    @apply border-surface-800;
+}

package/src/lib/assets/icons/arrow-upward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-160v-487L216-423l-56-57 320-320 320 320-56 57-224-224v487h-80Z"/></svg>

package/src/lib/components/Card.svelte

@@ -4,6 +4,7 @@
 	export let overrideStyle = "";
 	export let includeDataNoSnippet = true;
 	export let additionalClass: string[] = [];
+	export let turnOnLightModeBorder = true;
 
 	// warning: don't forget the semi-colon when adding new style!
 	const style = `
@@ -16,7 +17,15 @@
 		console.error("Missing content slot in card. No content will be displayed.");
 	}
 
-	const classes = ["card", "turnip-card"].concat(additionalClass).join(" ");
+	const originalClasses = ["card", "turnip-card"].concat(additionalClass).join(" ");
+	let classes = originalClasses.slice();
+	const toggleLightModeBorder = (turnOnLightModeBorder: boolean) => {
+		classes = originalClasses;
+		if (turnOnLightModeBorder) {
+			classes += " light-mode-border";
+		}
+	};
+	$: toggleLightModeBorder(turnOnLightModeBorder);
 </script>
 
 {#if (includeDataNoSnippet)}
@@ -24,12 +33,18 @@
 		<slot name="content" class="card" />
 	</div>
 {:else }
-	<div class="card turnip-card" style={style}>
+	<div class={classes} style={style}>
 		<slot name="content" class="card" />
 	</div>
 {/if}
 
 <style lang="postcss">
+    /*noinspection CssUnusedSymbol*/
+    .light-mode-border {
+        @apply border-surface-600 border-2 dark:border-0;
+    }
+
+    /*noinspection CssUnusedSymbol*/
     .turnip-card {
         @apply bg-surface-100 dark:bg-surface-900;
         margin: var(--turnip-card-margin);

package/src/lib/components/PineappleSlideToggle.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let checked = false;
+	export let name: string;
+
+	import { SlideToggle } from "@skeletonlabs/skeleton";
+</script>
+
+<SlideToggle name={name}
+             background="bg-surface-700 dark:bg-surface-700"
+             bind:checked={checked}>
+	<slot />
+</SlideToggle>

package/src/lib/components/{Chip.svelte → chip/Chip.svelte}

@@ -2,7 +2,7 @@
 <slot />
 </span>
 
-<style lang="postcss">
+<style>
     .chip {
         border-radius: 1em;
         margin: 0.25em;

package/src/lib/components/combo_box/ComboBoxWithButton.svelte

@@ -16,3 +16,10 @@
 	<ComboBox bind:selectedValue={selectedValue}
 	          bind:stringItems={stringItems}></ComboBox>
 </div>
+
+<style>
+    .combo-box-wrapper {
+        display: flex;
+        gap: 1em;
+    }
+</style>

package/src/lib/components/pineapple/toast/Toast.svelte

@@ -80,7 +80,9 @@
 {#if (localComponent !== undefined)}
 	<div class="toast-positioner" style={`bottom: ${$position}lh;`}>
 		<!-- todo: adjust shadow to be more dynamic or transparent -->
-		<Card marginBottom="1lh" overrideStyle="box-shadow: 3px 3px 3px var(--shadow-color);">
+		<Card marginBottom="1lh"
+		      turnOnLightModeBorder={false}
+		      overrideStyle="box-shadow: 3px 3px 3px var(--shadow-color);">
 			<div slot="content">
 				{#if (localProps !== undefined)}
 					<svelte:component this={localComponent}
@@ -101,7 +103,7 @@
         position: fixed;
         /* 12em = this component's margin (4em) + fab margin + width (8em) */
         max-width: calc(100vw - 12em);
-		    z-index: 100;
+        z-index: 100;
     }
 
     .toast-positioner:dir(ltr) {

package/src/lib/template/seaweed/CreateUrlForm.svelte

@@ -41,7 +41,7 @@
 	};
 </script>
 
-<div>
+<div class="local-list">
 	<label for="short-url">Short URL for url shortener</label>
 	<input bind:value={request.shortUrl}
 	       name="short-url"
@@ -53,6 +53,18 @@
 	       name="password"
 	       class="input"
 	       type="password"
-	       placeholder="Input" />
-	<button class="btn variant-filled" on:click={post}>Send link</button>
+	       placeholder="ILoveTurnips" />
+	<button class="send-link btn variant-filled" on:click={post}>Send link</button>
 </div>
+
+<style>
+    .local-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25lh;
+    }
+
+    .send-link {
+        margin-top: 0.75lh;
+    }
+</style>

package/src/lib/template/seaweed/SeaweedTemplate.svelte

@@ -20,6 +20,7 @@
 	import type { EntryProps } from "$pkg/template/seaweed/entries/EntryProps";
 	import { parseQueryTerms } from "$pkg/template/seaweed/ParseQueryTerms";
 	import UrlShortenerForm from "$pkg/template/seaweed/CreateUrlForm.svelte";
+	import PineappleSlideToggle from "$pkg/components/PineappleSlideToggle.svelte";
 
 	export let letChaos = true;
 	export let name = "Turnip";
@@ -385,18 +386,21 @@
 					<h1>Advanced settings</h1>
 					<p>This one is for those curious how I customize this page.</p>
 
-					<SlideToggle name="advanced-setting-slider" bind:checked={isAdvanceSettingOn}>
+					<PineappleSlideToggle name="advanced-setting-slider"
+					                      bind:checked={isAdvanceSettingOn}>
 						Advanced settings: {isAdvanceSettingOn ? "On" : "Off"}
-					</SlideToggle>
+					</PineappleSlideToggle>
 
 					{#if (isAdvanceSettingOn)}
-						<SlideToggle name="game-section-slider" bind:checked={seaweedTemplateData.gameSectionFirst}>
+						<PineappleSlideToggle name="game-section-slider"
+						                      bind:checked={seaweedTemplateData.gameSectionFirst}>
 							Should game section appear first over projects: {seaweedTemplateData.gameSectionFirst ? "On" : "Off"}
-						</SlideToggle>
+						</PineappleSlideToggle>
 						<p>Note: the above configuration was made before the dynamic entry list and to support links sent with that params, we will act like it only swaps the two groups, and nothing more dynamic if order query param does not exist. The configuration only happens during page load with query param, and it does not apply when changed here.</p>
-						<SlideToggle name="fun-note-slider" bind:checked={seaweedTemplateData.shouldAddFunNote}>
+						<PineappleSlideToggle name="fun-note-slider"
+						                      bind:checked={seaweedTemplateData.shouldAddFunNote}>
 							Should add fun note in description: {seaweedTemplateData.shouldAddFunNote ? "On" : "Off"}
-						</SlideToggle>
+						</PineappleSlideToggle>
 
 						<h3>Query terms to bold</h3>
 						<div class="query-term-grid">

package/src/lib/template/seaweed/entries/MigranteAlberta.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Chip from "$pkg/components/Chip.svelte";
+	import Chip from "$pkg/components/chip/Chip.svelte";
 	import { type EntryProps } from "./EntryProps";
 	import LinkIcon from "$pkg/assets/icons/link-icon.svg";
 	import Card from "$pkg/components/Card.svelte";

package/src/lib/template/seaweed/entries/MockUberApp.svelte

@@ -4,7 +4,7 @@
 	import GithubIcon from "$pkg/assets/icons/github-mark.svg";
 	import WindowSetGraph from "$pkg/assets/others/window-set.png";
 	import ThisWebsiteFootage from "$pkg/assets/others/seaweed-showcase.mp4";
-	import Chip from "$pkg/components/Chip.svelte";
+	import Chip from "$pkg/components/chip/Chip.svelte";
 
 	// noinspection JSUnusedGlobalSymbols
 	export let props: EntryProps;

package/src/lib/template/seaweed/entries/ThisWebpage.svelte

@@ -4,7 +4,7 @@
 	import GithubIcon from "$pkg/assets/icons/github-mark.svg";
 	import WindowSetGraph from "$pkg/assets/others/window-set.png";
 	import ThisWebsiteFootage from "$pkg/assets/others/seaweed-showcase.mp4";
-	import Chip from "$pkg/components/Chip.svelte";
+	import Chip from "$pkg/components/chip/Chip.svelte";
 
 	// noinspection JSUnusedGlobalSymbols
 	export let props: EntryProps;