feat: feedback button and disclaimer text improvements

2026-06-06 00:56:53 +00:00 · 2025-05-04 11:58:01 +00:00
parent 41bad33675
commit 38997a77a5
12 changed files with 111 additions and 12 deletions
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
    "prettier-plugin-svelte": "^3.3.3",
    "svelte": "^5.0.0",
    "svelte-check": "^4.0.0",
+    "svelte-sonner": "^0.3.28",
    "tailwind-merge": "^3.2.0",
    "tailwind-variants": "^1.0.0",
    "tailwindcss": "^3.4.17",
@@ -36,6 +37,6 @@
  },
  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
  "dependencies": {
-    "mode-watcher": "0.5.1"
+    "mode-watcher": "^1.0.5"
  }
 }
--- a/src/lib/components/app/bottom-bar.svelte
+++ b/src/lib/components/app/bottom-bar.svelte
@@ -4,6 +4,7 @@
  import MusicPlayer from '@/components/app/now-playing.svelte';
  import Sounds from '@/components/app/atmospheres.svelte';
  import StationDropdown from '@/components/app/station-dropdown.svelte';
+  import Feedback from '@/components/app/feedback.svelte';
 </script>

 <div
@@ -16,6 +17,7 @@
    <StationDropdown />
    <BgDropdown />
    <Sounds />
+    <Feedback />
    <Disclaimer />
  </div>
 </div>
--- a/src/lib/components/app/disclaimer.svelte
+++ b/src/lib/components/app/disclaimer.svelte
@@ -11,20 +11,20 @@
      <Dialog.Title>Info & disclaimer</Dialog.Title>
    </Dialog.Header>
    <p>
-      This project was created as an alternative to Chillhop Radio's web player, by implementing a
-      better, glassmorphic user interface paired with other utilities like Pomodoro timers and such,
-      which will be added soon.
+      Thanks for using my lofi player! There are way more features in the works, so stay tuned!
    </p>
+    <p>
+      Star over at <a href="https://github.com/SrIzan10/lofi" class="underline" target="_blank">Github</a> and <a href="https://github.com/sponsors/SrIzan10" class="underline" target="_blank">donate</a> if you like my work!
    <p>
      I do not have the right to the songs played on this radio station, nor do I have any
-      affiliation with Chillhop Music. <a href="https://github.com/SrIzan10/chillhop" class="underline" target="_blank">This project is open source</a> and not intended for
+      affiliation with Chillhop Music. <a href="https://github.com/SrIzan10/lofi" class="underline" target="_blank">This project is open source</a> and not intended for
      commercial use.
    </p>
    <p>
      🄯 GNU GPL, <a href="https://srizan.dev" class="underline">Sr Izan</a>.
    </p>
    <p class="text-sm">
-      Shoot me an email (izan *at* srizan *dot* dev) if you want this taken down.
+      Shoot me an email (izan *at* srizan *dot* dev) if you (chillhop) want this taken down.
    </p>
  </Dialog.Content>
 </Dialog.Root>
--- a/src/lib/components/app/feedback.svelte
+++ b/src/lib/components/app/feedback.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import * as Dialog from '$lib/components/ui/dialog/index.js';
+  import MessageSquare from '@lucide/svelte/icons/message-square';
+  import { Button } from '../ui/button';
+  import { toast } from 'svelte-sonner';
+  let feedback = $state('');
+  let open = $state(false);
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Trigger><Button size="icon"><MessageSquare /></Button></Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Send Feedback</Dialog.Title>
+    </Dialog.Header>
+    <p>
+      Have suggestions or found a bug? Let me know!
+    </p>
+    <form class="mt-4 space-y-4" onsubmit={(e) => {
+      e.preventDefault();
+      fetch('https://cors.notesnook.com/https://echospace.dev/api/feedback/cma9juarn0000m40sko0qqt2t', {
+        method: 'POST',
+        body: JSON.stringify({
+          message: feedback,
+        })
+      }).then(() => {
+        open = false;
+        feedback = '';
+        toast('Thanks for your feedback!')
+      })
+    }}>
+      <div class="grid w-full items-center gap-1.5">
+        <textarea id="feedback" class="p-2 rounded-md bg-white/10 border border-white/20" rows="4" bind:value={feedback}></textarea>
+      </div>
+      <Button type="submit">Submit</Button>
+    </form>
+  </Dialog.Content>
+</Dialog.Root>
--- a/src/lib/components/app/title.svelte
+++ b/src/lib/components/app/title.svelte
@@ -0,0 +1,17 @@
+<script>
+  import Button from '@/components/ui/button/button.svelte';
+  import Star from '@lucide/svelte/icons/star';
+  import Heart from '@lucide/svelte/icons/heart';
+</script>
+
+<div
+  class="flex absolute top-0 left-0 items-center p-4 bg-white/10 backdrop-blur-lg rounded-br-xl shadow-lg *:text-bold space-x-2"
+>
+  <h1 class="text-2xl font-bold">lofi.srizan.dev</h1>
+  <a href="https://github.com/SrIzan10/lofi" target="_blank">
+    <Button size="icon"><Star /></Button>
+  </a>
+  <a href="https://github.com/sponsors/SrIzan10" target="_blank">
+    <Button size="icon"><Heart /></Button>
+  </a>
+</div>
--- a/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -25,12 +25,13 @@
    class={cn(
      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
      'backdrop-blur-md border drop-shadow-md shadow-lg',
+      'filter backdrop-invert',
      'bg-black/40 dark:bg-white/30 transition border-white/20 dark:border-black/20',
      className
    )}
    {...restProps}
  >
-    <div class="prose prose-invert max-w-none space-y-3 *:text-white">
+    <div class="text-foreground max-w-none space-y-3">
      {@render children?.()}
    </div>
    <DialogPrimitive.Close
--- a/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -13,7 +13,7 @@

 <div
 	bind:this={ref}
-	class={cn("flex flex-col space-y-1.5 text-center sm:text-left *:text-white", className)}
+	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
 	{...restProps}
 >
 	{@render children?.()}
--- a/src/lib/components/ui/sonner/index.ts
+++ b/src/lib/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";
--- a/src/lib/components/ui/sonner/sonner.svelte
+++ b/src/lib/components/ui/sonner/sonner.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={mode.current}
+	class="toaster group"
+	toastOptions={{
+		classes: {
+			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+			description: "group-[.toast]:text-muted-foreground",
+			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+		},
+	}}
+	{...restProps}
+/>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,10 +2,12 @@
  import '../app.css';
  import { ModeWatcher } from "mode-watcher";
  import { dev } from '$app/environment';
+  import { Toaster } from "$lib/components/ui/sonner/index.js";
  let { children } = $props();
 </script>

 <ModeWatcher />
+<Toaster />
 {#if !dev}
  <script defer src="https://analytics.srizan.dev/ua.js" data-website-id="02aba16d-f8eb-4363-973b-dab04db4de10"></script>
 {/if}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,6 +5,7 @@
  import Spinner from '@lucide/svelte/icons/loader';
  import { state } from '@/state.svelte';
  import BackgroundAnalyzer from '@/components/app/bg-analyzer.svelte';
+  import Title from '@/components/app/title.svelte';
 </script>

 <BgImage />
@@ -26,5 +27,6 @@
    <p>Error: {state.error}</p>
  </div>
 {:else if state.hasInteracted}
+  <Title />
  <BottomBar />
 {/if}
--- a/yarn.lock
+++ b/yarn.lock
@@ -1364,10 +1364,13 @@ minimatch@^9.0.4:
  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==

-mode-watcher@0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/mode-watcher/-/mode-watcher-0.5.1.tgz#310e6ac144b3f0b3cfb486e1015d9e746e503377"
-  integrity sha512-adEC6T7TMX/kzQlaO/MtiQOSFekZfQu4MC+lXyoceQG+U5sKpJWZ4yKXqw846ExIuWJgedkOIPqAYYRk/xHm+w==
+mode-watcher@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/mode-watcher/-/mode-watcher-1.0.5.tgz#3640af1995cfed0a389a4a77c64275d1518997b0"
+  integrity sha512-HRURoPayaI+5Wv7OeRZ0P+Y1MjeQixdy2aC4lfnxtZdxfRSU5XIVQvqWqkkN9Bxtz8RHM6I3AaZKD7ZS1z1sBQ==
+  dependencies:
+    runed "^0.25.0"
+    svelte-toolbelt "^0.7.1"

 mri@^1.1.0:
  version "1.2.0"
@@ -1645,6 +1648,13 @@ runed@^0.23.2:
  dependencies:
    esm-env "^1.0.0"

+runed@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/runed/-/runed-0.25.0.tgz#dad779435734eb4d2bbab85798e2da36e1bd7af4"
+  integrity sha512-7+ma4AG9FT2sWQEA0Egf6mb7PBT2vHyuHail1ie8ropfSjvZGtEAx8YTmUjv/APCsdRRxEVvArNjALk9zFSOrg==
+  dependencies:
+    esm-env "^1.0.0"
+
 sade@^1.7.4, sade@^1.8.1:
  version "1.8.1"
  resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
@@ -1831,6 +1841,11 @@ svelte-check@^4.0.0:
    picocolors "^1.0.0"
    sade "^1.7.4"

+svelte-sonner@^0.3.28:
+  version "0.3.28"
+  resolved "https://registry.yarnpkg.com/svelte-sonner/-/svelte-sonner-0.3.28.tgz#b24b3e7af924d5c50ca2e33cede1382283074abf"
+  integrity sha512-K3AmlySeFifF/cKgsYNv5uXqMVNln0NBAacOYgmkQStLa/UoU0LhfAACU6Gr+YYC8bOCHdVmFNoKuDbMEsppJg==
+
 svelte-toolbelt@^0.7.1:
  version "0.7.1"
  resolved "https://registry.yarnpkg.com/svelte-toolbelt/-/svelte-toolbelt-0.7.1.tgz#63e9c6629456a1a0dd57812f85426e4631fd754e"
				`@@ -0,0 +1 @@`
				`export { default as Toaster } from "./sonner.svelte";`