Merge pull request #298 from SkyCryptWebsite/dev

Author: DarthGigi

.changeset/pre.json

@@ -0,0 +1,10 @@
+{
+  "mode": "pre",
+  "tag": "beta",
+  "initialVersions": {
+    "skycrypt-frontend": "3.3.2"
+  },
+  "changesets": [
+    "warm-cooks-reply"
+  ]
+}

.changeset/warm-cooks-reply.md

@@ -0,0 +1,5 @@
+---
+"skycrypt-frontend": patch
+---
+
+feat: add internal preferences context and survey notice component

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 3.3.3-beta.0
+
+### Patch Changes
+
+- feat: add internal preferences context and survey notice component ([`b2e30ca`](https://github.com/SkyCryptWebsite/SkyCrypt-Frontend/commit/b2e30ca5fab61fb2eb6c7cba602b61d3476821e2))
+
 ## 3.3.2
 
 ### Patch Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "skycrypt-frontend",
-  "version": "3.3.2",
+  "version": "3.3.3-beta.0",
   "private": true,
   "type": "module",
   "repository": {

src/context/internal-preferences.svelte.ts

@@ -0,0 +1,40 @@
+import { PersistedState } from "runed";
+import { createContext } from "svelte";
+
+interface InternalPreferencesData {
+  skycryptSurvey: {
+    dismissedAt: Date | null;
+    confirmedAt: Date | null;
+    surveyVersion: number;
+    surveyName: string;
+  };
+}
+
+export class InternalPreferencesContext {
+  #data = new PersistedState<InternalPreferencesData>("skycryptInternalPreferences", {
+    skycryptSurvey: {
+      dismissedAt: null,
+      confirmedAt: null,
+      surveyVersion: 0,
+      surveyName: ""
+    }
+  });
+
+  get skycryptSurvey() {
+    return this.#data.current.skycryptSurvey;
+  }
+
+  set skycryptSurvey(value: InternalPreferencesData["skycryptSurvey"]) {
+    this.#data.current = { ...this.#data.current, skycryptSurvey: value };
+  }
+}
+
+const [getInternalPreferences, setInternalPreferences] = createContext<InternalPreferencesContext>();
+
+function initInternalPreferences() {
+  const preferences = new InternalPreferencesContext();
+  setInternalPreferences(preferences);
+  return preferences;
+}
+
+export { getInternalPreferences, initInternalPreferences };

src/lib/components/notices/SurveyNotice.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { getInternalPreferences } from "$ctx/internal-preferences.svelte";
+  import { Button } from "bits-ui";
+  import { toast } from "svelte-sonner";
+
+  const internalPreferences = getInternalPreferences();
+
+  function dissmissFn() {
+    toast.dismiss("survey-notice");
+    toast.info("You can find the survey on the home page if you change your mind.", { position: "bottom-center" });
+    internalPreferences.skycryptSurvey.dismissedAt = new Date();
+  }
+
+  function actionFn() {
+    window.open("https://forms.gle/wUSHhr8EACviaQVq8", "_blank");
+    toast.dismiss("survey-notice");
+    toast.success("Thank you for taking the time to fill out our survey!", { position: "bottom-center" });
+    internalPreferences.skycryptSurvey.confirmedAt = new Date();
+  }
+
+  $effect(() => {
+    if (!internalPreferences.skycryptSurvey.surveyName) internalPreferences.skycryptSurvey.surveyName = "general-survey-2026-03-18";
+    if (!internalPreferences.skycryptSurvey.surveyVersion) internalPreferences.skycryptSurvey.surveyVersion = new Date("2026-03-18").getTime();
+  });
+</script>
+
+<div class="p-4 text-text">
+  <h2 class="text-lg font-bold">SkyCrypt Survey</h2>
+  <p class="mt-2 text-sm">Please take a moment to fill out our survey and let us know what you think.</p>
+
+  <p class="mt-2 text-sm">Your feedback is actually really helpful in improving the site.</p>
+  <Button.Root onclick={actionFn} class="mt-4 inline-flex items-center rounded bg-skillbar px-4 py-2 text-sm font-medium text-text text-shadow-sm hover:bg-hover">Take the Survey</Button.Root>
+
+  <Button.Root onclick={dissmissFn} class="mt-4 inline-flex items-center rounded px-4 py-2 text-sm font-medium text-text text-shadow-sm hover:bg-text/30">Dismiss</Button.Root>
+</div>

src/routes/+layout.svelte

@@ -3,6 +3,7 @@
   import { beforeNavigate, replaceState } from "$app/navigation";
   import { page, updated } from "$app/state";
   import { initDisabledPacks, initFavorites, initInternalState, initPreferences, initRecentSearches, initTheme, initWikiOrder, PacksContext, setHoverContext, setMobileContext, setPacksContext } from "$ctx";
+  import { initInternalPreferences } from "$ctx/internal-preferences.svelte";
   import Header from "$lib/components/header/Header.svelte";
   import { CommandPalette, PerformanceMode } from "$lib/components/misc";
   import ThemeEditor from "$lib/components/theme-editor/ThemeEditor.svelte";
@@ -11,9 +12,11 @@
   import { getPacks } from "$lib/shared/api/skycrypt-api.remote";
   import { parseThemeFromURL } from "$lib/shared/themes/sharing";
   import { cn } from "$lib/shared/utils";
+  import SurveyNotice from "$src/lib/components/notices/SurveyNotice.svelte";
   import Wifi from "@lucide/svelte/icons/wifi";
   import WifiOff from "@lucide/svelte/icons/wifi-off";
   import { Tooltip } from "bits-ui";
+  import { differenceInHours } from "date-fns";
   import { onMount, type Snippet } from "svelte";
   import SvelteSeo from "svelte-seo";
   import { toast, Toaster, type ToasterProps } from "svelte-sonner";
@@ -30,6 +33,7 @@
   let commandLoading = $state(false);
   const { ign } = $derived(page.params);
   const preferences = initPreferences();
+  const internalPreferences = initInternalPreferences();
   const themeContext = initTheme();
   const internalState = initInternalState();
   const position = writable<ToasterProps["position"]>("bottom-right");
@@ -163,6 +167,28 @@
 
     if (packsData) packs.packs = packsData;
   });
+
+  // TODO: Remove after the survey is done
+  $effect(() => {
+    const surveyPrefs = internalPreferences?.skycryptSurvey;
+    if (!surveyPrefs) return;
+
+    const dismissedAt = surveyPrefs.dismissedAt ? new Date(surveyPrefs.dismissedAt) : null;
+    const confirmedAt = surveyPrefs.confirmedAt ? new Date(surveyPrefs.confirmedAt) : null;
+    const now = new Date();
+
+    const isDismissedExpired = dismissedAt == null || differenceInHours(now, dismissedAt) > 12;
+    const isConfirmedExpired = confirmedAt == null || differenceInHours(now, confirmedAt) > 12;
+
+    if (isDismissedExpired && isConfirmedExpired) {
+      toast.custom(SurveyNotice, {
+        id: "survey-notice",
+        important: true,
+        duration: Number.POSITIVE_INFINITY,
+        position: "bottom-center"
+      });
+    }
+  });
 </script>
 
 <svelte:document onkeydown={handleKeydown} />

src/routes/+page.svelte

@@ -65,10 +65,10 @@
       }
     },
     {
-      href: "https://forms.gle/2Jfbs9tjm76Rihfe8",
+      href: "https://forms.gle/wUSHhr8EACviaQVq8",
       text: {
-        title: "Skyblock Texture Pack Survey",
-        description: "Updating SkyCrypt to prioritize most used texture packs"
+        title: "Skyblock General Survey",
+        description: "Let us know what you think about the site and what features you'd like to see in the future"
       },
       img: {
         src: "/img/icons/google-forms.svg",