Maple API Rewrite

api/maple.js

@@ -56,7 +56,7 @@ var options = {
 
 const slower = slowDown({
 	windowMs: 2 * 60 * 1000,
-	delayAfter: 5,
+	delayAfter: 50,
 	delayMs: (hits) => {
 		if (hits <= 15) return hits * 100;
 		return (hits - 15) * 1000 + 2000;
@@ -66,7 +66,7 @@ const slower = slowDown({
 
 const limiter = rateLimit({
 	windowMs: 2 * 60 * 1000,
-	limit: 35,
+	limit: 100,
 })
 
 try {

src/lib/components/ListTrack.svelte

@@ -237,20 +237,22 @@
 		ondrop={onDrop}
 		ondragend={onDragEnd}
 	>
-		<div class="flex min-w-0 items-center gap-4">
+		<div class="flex min-w-0 flex-1 items-center gap-4 overflow-hidden">
 			<span class="text-on-surface-variant w-8 shrink-0 text-right text-sm tabular-nums"
 				>{index}</span
 			>
 			{#if showThumbnail}
 				{#if track.image}
 					{#await OPFS.getImageUrl(track.image as string) then imageUrl}
 						<Lazy height={40} keep={true}>
-							<img
-								src={imageUrl}
-								alt="{track.title} - {track.artist}"
-								class="h-10 w-10 shrink-0 rounded-md object-cover"
-								draggable="false"
-							/>
+							<div class="h-10 w-10 shrink-0">
+								<img
+									src={imageUrl}
+									alt="{track.title} - {track.artist}"
+									class="h-full w-full rounded-md object-cover"
+									draggable="false"
+								/>
+							</div>
 						</Lazy>
 					{:catch}
 						<Lazy height={40} keep={true}>
@@ -263,9 +265,9 @@
 					</Lazy>
 				{/if}
 			{/if}
-			<div class="min-w-0 flex-1">
-				<p class="text-on-surface truncate">{track.title}</p>
-				<p class="text-on-surface-variant truncate text-sm">{track.artist}</p>
+			<div class="min-w-0 flex-1 overflow-hidden">
+				<p class="text-on-surface truncate" title={track.title}>{track.title}</p>
+				<p class="text-on-surface-variant truncate text-sm" title={track.artist}>{track.artist}</p>
 			</div>
 		</div>
 		<div class="flex items-center gap-2">
@@ -386,3 +388,14 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	.text-on-surface.truncate,
+	.text-on-surface-variant.truncate {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 100%;
+		display: block;
+	}
+</style>

src/lib/components/SideBar.svelte

@@ -3,7 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { createLibrary } from '$lib/library';
-	import { SavedUser } from '$lib/store';
+	import { SavedUser, isLoggedIn } from '$lib/store';
 
 	const isActive = (path: string) => page.url.pathname === path;
 </script>
@@ -15,7 +15,7 @@
 		<div class="mt-3 mb-3 flex flex-col items-center justify-center gap-2">
 			<button
 				type="button"
-				onclick={() => goto('/settings')}
+				onclick={() => goto($isLoggedIn ? '/settings' : '/login')}
 				class="bg-primary text-on-primary hover:bg-primary/90 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full transition-colors"
 			>
 				{#if $SavedUser?.pfp}