chore: update dependencies and improve dashboard settings

- Updated Qwik and Qwik City to version 1.15.0
- Updated Tailwind CSS and related plugins to latest versions
- Added a new Settings component to manage user settings
- Integrated settings management into the OSBar component
- Improved file display in the dashboard with better responsiveness
- Enhanced error handling for user info fetching
- Removed unused id from Testimonials component

src/routes/dashboard/index.tsx

@@ -1,6 +1,7 @@
 import { component$, Signal, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik";
 import { routeLoader$, type DocumentHead } from "@builder.io/qwik-city";
 import OSBar from "~/components/dashboard/OSBar";
+import Settings from "~/components/dashboard/Settings";
 import TitleBar from "~/components/dashboard/TitleBar";
 // import Dropzone from "~/components/Dropzone";
 import { useNanostore$ } from "~/hooks/nanostores";
@@ -26,11 +27,14 @@ export default component$(() => {
 	});
 
 	return (
-		<div class="flex flex-col w-full h-screen p-8 gap-6 bg-gradient-to-b from-stereo/20 to-transparent justify-self-end">
-			<TitleBar />
-			<Files files={files} loaded={loaded} />
-			<OSBar />
-		</div>
+		<>
+			<Settings />
+			<div class="flex flex-col w-full h-screen p-8 gap-6 bg-gradient-to-b from-stereo/20 to-transparent justify-self-end">
+				<TitleBar />
+				<Files files={files} loaded={loaded} />
+				<OSBar />
+			</div>
+		</>
 	);
 });
 
@@ -44,8 +48,7 @@ const formatSize = (bytes: number) => {
 const Files = component$<{
 	files: Signal<StereoFile[]>;
 	loaded: Signal<boolean>;
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-}>(({ files, loaded }) => {
+}>(({ files }) => {
 
 	const File = component$(({ file }: { file: StereoFile }) => {
 		const Preview = component$(() => {
@@ -78,14 +81,14 @@ const Files = component$<{
 			});
 
 			return (
-				<div class="w-full h-60 object-cover flex-grow relative">
+				<div class="w-full h-60 object-cover flex-grow relative overflow-clip">
 					{fileType.value === "image" && (
 						<img
 							width={400}
 							height={300}
 							src={`/api/${file.ID}`}
 							alt={file.Name}
-							class="w-full h-60 object-cover flex-grow"
+							class="w-full h-60 object-cover flex-grow hover:scale-105 transition-all duration-300"
 						/>
 					)}
 
@@ -95,7 +98,7 @@ const Files = component$<{
 							height={300}
 							src={`/api/${file.ID}`}
 							controls
-							class="w-full h-60 object-cover flex-grow"
+							class="w-full h-60 object-cover flex-grow hover:scale-105 transition-all duration-300"
 						/>
 					)}
 
@@ -103,7 +106,7 @@ const Files = component$<{
 						<audio
 							src={`/api/${file.ID}`}
 							controls
-							class="w-full h-60 object-cover flex-grow"
+							class="w-full h-60 object-cover flex-grow hover:scale-105 transition-all duration-300"
 						/>
 					)}
 
@@ -124,7 +127,7 @@ const Files = component$<{
 				<Preview />
 
 				<div class="flex flex-col items-center justify-center text-center w-full h-full p-5">
-					<p class="text-xl">{file.Name}</p>
+					<p class="text-xl truncate w-full">{file.Name}</p>
 					<p class="text-stereo/50 text-lg">
 						{formatSize(file.Size)}
 						<span class="text-stereo/40"> • </span>
@@ -136,8 +139,8 @@ const Files = component$<{
 	})
 
 	return (
-		<div class="mb-6 flex flex-col w-full max-h-full overflow-y-auto overflow-x-hidden mask-clip-content rounded-3xl">
-			<div class="w-full h-full grid grid-cols-4 gap-2">
+		<div class="px-2 mb-6 flex flex-col w-full max-h-full overflow-y-auto overflow-x-hidden mask-clip-content rounded-3xl">
+			<div class="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
 				{files.value.map((file) => (
 					<File key={file.ID} file={file} />
 				))}

src/routes/layout.tsx

@@ -10,7 +10,11 @@ export default component$(() => {
 	const info = useNanostore$<StereoUser>(userInfo);
 
 	useVisibleTask$(async () => {
-		info.value = await api.me();
+		try {
+			info.value = await api.me();
+		} catch (err) {
+			console.error("failed to fetch user info:", err);
+		}
 	})
 
 	useOnDocument("DOMContentLoaded", $(async () => {