From 38997a77a5384f21f2af5ac02e970e22baee65e0 Mon Sep 17 00:00:00 2001 From: SrIzan10 <66965250+SrIzan10@users.noreply.github.com> Date: Sun, 4 May 2025 11:58:01 +0000 Subject: [PATCH] feat: feedback button and disclaimer text improvements --- package.json | 3 +- src/lib/components/app/bottom-bar.svelte | 2 + src/lib/components/app/disclaimer.svelte | 10 ++--- src/lib/components/app/feedback.svelte | 38 +++++++++++++++++++ src/lib/components/app/title.svelte | 17 +++++++++ .../ui/dialog/dialog-content.svelte | 3 +- .../components/ui/dialog/dialog-header.svelte | 2 +- src/lib/components/ui/sonner/index.ts | 1 + src/lib/components/ui/sonner/sonner.svelte | 20 ++++++++++ src/routes/+layout.svelte | 2 + src/routes/+page.svelte | 2 + yarn.lock | 23 +++++++++-- 12 files changed, 111 insertions(+), 12 deletions(-) create mode 100644 src/lib/components/app/feedback.svelte create mode 100644 src/lib/components/app/title.svelte create mode 100644 src/lib/components/ui/sonner/index.ts create mode 100644 src/lib/components/ui/sonner/sonner.svelte diff --git a/package.json b/package.json index 06720dd..35c63d3 100644 --- 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" } } diff --git a/src/lib/components/app/bottom-bar.svelte b/src/lib/components/app/bottom-bar.svelte index fbebb3c..f094a5d 100644 --- 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';
+
\ No newline at end of file diff --git a/src/lib/components/app/disclaimer.svelte b/src/lib/components/app/disclaimer.svelte index 2aa0495..45a28c1 100644 --- a/src/lib/components/app/disclaimer.svelte +++ b/src/lib/components/app/disclaimer.svelte @@ -11,20 +11,20 @@ Info & disclaimer

- 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!

+

+ Star over at Github and donate if you like my work!

I do not have the right to the songs played on this radio station, nor do I have any - affiliation with Chillhop Music. This project is open source and not intended for + affiliation with Chillhop Music. This project is open source and not intended for commercial use.

🄯 GNU GPL, Sr Izan.

- 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.

diff --git a/src/lib/components/app/feedback.svelte b/src/lib/components/app/feedback.svelte new file mode 100644 index 0000000..721265c --- /dev/null +++ b/src/lib/components/app/feedback.svelte @@ -0,0 +1,38 @@ + + + + + + + Send Feedback + +

+ Have suggestions or found a bug? Let me know! +

+
{ + 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!') + }) + }}> +
+ +
+ +
+ + \ No newline at end of file diff --git a/src/lib/components/app/title.svelte b/src/lib/components/app/title.svelte new file mode 100644 index 0000000..333338b --- /dev/null +++ b/src/lib/components/app/title.svelte @@ -0,0 +1,17 @@ + + +
+

lofi.srizan.dev

+ + + + + + +
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte index f3f76cd..164353f 100644 --- 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} > -
+
{@render children?.()}
{@render children?.()} diff --git a/src/lib/components/ui/sonner/index.ts b/src/lib/components/ui/sonner/index.ts new file mode 100644 index 0000000..1ad9f4a --- /dev/null +++ b/src/lib/components/ui/sonner/index.ts @@ -0,0 +1 @@ +export { default as Toaster } from "./sonner.svelte"; diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte new file mode 100644 index 0000000..0631191 --- /dev/null +++ b/src/lib/components/ui/sonner/sonner.svelte @@ -0,0 +1,20 @@ + + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index dc3da27..007a8fc 100644 --- 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(); + {#if !dev} {/if} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index b03e4ac..af666c5 100644 --- 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'; @@ -26,5 +27,6 @@

Error: {state.error}

{:else if state.hasInteracted} + <BottomBar /> {/if} diff --git a/yarn.lock b/yarn.lock index ada6ac9..74be546 100644 --- 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"