chore(deps): update to tailwind 4 and update other deps

Signed-off-by: Jordan Shatford <[email protected]>

apps/api/.pre-commit-config.yaml

@@ -24,14 +24,14 @@ repos:
     -   id: pyupgrade
         args: [--py311-plus]
 -   repo: https://github.com/hhatto/autopep8
-    rev: v2.3.1
+    rev: v2.3.2
     hooks:
     -   id: autopep8
 -   repo: https://github.com/PyCQA/flake8
     rev: 7.1.1
     hooks:
     -   id: flake8
 -   repo: https://github.com/pre-commit/mirrors-mypy
-    rev: v1.14.0
+    rev: v1.14.1
     hooks:
     -   id: mypy

apps/web/package.json

@@ -15,21 +15,20 @@
 		"format": "prettier --write ."
 	},
 	"dependencies": {
+		"@tailwindcss/vite": "^4.0.0",
 		"@yd/client": "workspace:*",
 		"@yd/ui": "workspace:*"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.15.2",
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/kit": "^2.16.1",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@yd/config": "workspace:*",
-		"autoprefixer": "^10.4.20",
-		"postcss": "^8.4.49",
-		"svelte": "^5.17.3",
-		"svelte-check": "^4.1.3",
-		"tailwindcss": "^3.4.17",
+		"svelte": "^5.19.2",
+		"svelte-check": "^4.1.4",
+		"tailwindcss": "^4.0.0",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.3",
-		"vite": "^6.0.9"
+		"vite": "^6.0.11"
 	}
 }

apps/web/src/app.css

@@ -1,13 +1,35 @@
-/* Write your global styles here, in PostCSS syntax */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-	.max-w-xxs {
-		max-width: 14rem;
-	}
-	.max-w-xxxs {
-		max-width: 10rem;
+@import 'tailwindcss';
+
+@layer base {
+	*,
+	::after,
+	::before,
+	::backdrop,
+	::file-selector-button {
+		border-color: var(--color-gray-200, currentColor);
 	}
 }
+
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+	--color-brand-50: var(--color-blue-50);
+	--color-brand-100: var(--color-blue-100);
+	--color-brand-200: var(--color-blue-200);
+	--color-brand-300: var(--color-blue-300);
+	--color-brand-400: var(--color-blue-400);
+	--color-brand-500: var(--color-blue-500);
+	--color-brand-600: var(--color-blue-600);
+	--color-brand-700: var(--color-blue-700);
+	--color-brand-800: var(--color-blue-800);
+	--color-brand-900: var(--color-blue-900);
+	--color-brand-950: var(--color-blue-950);
+}
+
+@utility max-w-xxs {
+	max-width: 14rem;
+}
+
+@utility max-w-xxxs {
+	max-width: 10rem;
+}

apps/web/src/lib/api.ts

@@ -8,13 +8,8 @@ import { toast } from '@yd/ui';
 // Set the base server address using the environment variable.
 client.setConfig({
 	baseUrl: env.serverAddress,
-	throwOnError: true
-});
-
-client.interceptors.request.use((request) => {
-	const token = sessionStorage.getItem(SESSION_ID_KEY) ?? '';
-	request.headers.set('Authorization', `Bearer ${token}`);
-	return request;
+	throwOnError: true,
+	auth: () => sessionStorage.getItem(SESSION_ID_KEY) ?? ''
 });
 
 // Key used to store session ID value in session storage.

apps/web/src/lib/components/Logo.svelte

@@ -2,6 +2,6 @@
 	import { RoutePathConstants } from '$lib/routes';
 </script>
 
-<a class="focus:outline-none" href={RoutePathConstants.SEARCH}>
+<a class="focus:outline-hidden" href={RoutePathConstants.SEARCH}>
 	<img class="block h-10 w-auto" src="icon.png" alt="Logo" />
 </a>

apps/web/src/lib/components/NotFound.svelte

@@ -17,7 +17,7 @@
 		<h1 class="text-7xl font-black text-gray-300 dark:text-gray-600">
 			{title}
 		</h1>
-		<p class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+		<p class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
 			{subtitle}
 		</p>
 		<p class="mt-2 text-gray-500 dark:text-gray-400">

apps/web/src/lib/components/ResultCard.svelte

@@ -49,7 +49,7 @@
 			<IconButton
 				onclick={() => downloads.add(result)}
 				src={PlusIcon}
-				class="h-8 w-8 p-1 text-black hover:text-brand-600 dark:text-white dark:hover:text-brand-600"
+				class="hover:text-brand-600 dark:hover:text-brand-600 h-8 w-8 p-1 text-black hover:cursor-pointer dark:text-white"
 			/>
 		{:else}
 			<StateIcon state={$downloads[result.id].status.state} />

apps/web/src/lib/components/StatusBadge.svelte

@@ -50,7 +50,7 @@
 	<Badge icon {...lookup[status.state]}>
 		{text}
 		{#if status.progress}
-			<ProgressBar class="-ml-7 -mr-2 mt-2" value={status.progress} />
+			<ProgressBar class="mt-2 -mr-2 -ml-7" value={status.progress} />
 		{/if}
 	</Badge>
 {/key}

apps/web/src/lib/stores/downloads.ts

@@ -99,7 +99,7 @@ function createDownloadsStore() {
 			if (response.data) {
 				const download = get(DOWNLOADS)[id];
 				const filename = `${download.video.title}.${download.options.format}`;
-				saveAs(response.data, filename);
+				saveAs(response.data as Blob, filename);
 			}
 		} catch (err) {
 			handleError(id, 'Failed to get file for download.', err);

apps/web/src/routes/downloads/+page.svelte

@@ -53,16 +53,16 @@
 			<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
 				<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
 					<div
-						class="overflow-hidden rounded-lg border border-zinc-200 shadow dark:border-zinc-800 dark:shadow-dark"
+						class="dark:shadow-dark overflow-hidden rounded-lg border border-zinc-200 shadow-sm dark:border-zinc-800"
 					>
 						<Table {columns} rows={currentPageDownloads}>
 							{#snippet cell({ column, row })}
 								<span>
 									{#if column.key === 'info'}
 										<a href={row.video.url} target="_blank" class="flex items-center">
-											<div class="w-18 hidden h-10 flex-shrink-0 md:block">
+											<div class="hidden h-10 w-18 shrink-0 md:block">
 												<img
-													class="w-18 h-10 rounded-lg"
+													class="h-10 w-18 rounded-lg"
 													src={row.video.thumbnail}
 													alt="Thumbnail"
 												/>

apps/web/static/site.webmanifest

@@ -2,8 +2,16 @@
 	"name": "YouTube Downloader",
 	"short_name": "YT Downloader",
 	"icons": [
-		{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
-		{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+		{
+			"src": "/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
 	],
 	"theme_color": "#ffffff",
 	"background_color": "#ffffff",

apps/web/vite.config.ts

@@ -1,6 +1,7 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [tailwindcss(), sveltekit()]
 });

package.json

@@ -28,7 +28,7 @@
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "husky": "^9.1.7"
   },
-  "packageManager": "[email protected].2+sha512.93e57b0126f0df74ce6bff29680394c0ba54ec47246b9cf321f0121d8d9bb03f750a705f24edc3c1180853afd7c2c3b94196d0a3d53d3e069d9e2793ef11f321",
+  "packageManager": "[email protected].4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0",
   "engines": {
     "pnpm": ">=8",
     "node": ">=20"

packages/client/openapi-ts.config.ts

@@ -1,10 +1,8 @@
 import { defineConfig } from '@hey-api/openapi-ts';
 
-import input from '@yd/api';
-
 export default defineConfig({
 	client: '@hey-api/client-fetch',
-	input,
+	input: '../../apps/api/openapi.json',
 	output: {
 		format: 'prettier',
 		path: './src/generated'

packages/client/package.json

@@ -13,10 +13,10 @@
 		"format": "prettier --write ."
 	},
 	"dependencies": {
-		"@hey-api/client-fetch": "^0.6.0"
+		"@hey-api/client-fetch": "^0.7.1"
 	},
 	"devDependencies": {
-		"@hey-api/openapi-ts": "^0.61.2",
+		"@hey-api/openapi-ts": "^0.62.3",
 		"@yd/api": "workspace:*",
 		"@yd/config": "workspace:*",
 		"prettier": "^3.4.2",

packages/client/src/generated/index.ts

@@ -1,3 +1,3 @@
 // This file is auto-generated by @hey-api/openapi-ts
-export * from './sdk.gen';
 export * from './types.gen';
+export * from './sdk.gen';