diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md new file mode 100644 index 0000000..6094c34 --- /dev/null +++ b/frontend/CLAUDE.md @@ -0,0 +1,32 @@ +# Musify — Frontend web + +Web pública de Musify. Para diseño y recetas de UI usa el skill **`musify-web`**. + +## Stack + +SvelteKit 2 (`adapter-node`) · Svelte 5 **runes** · Tailwind 4 · TypeScript strict · auth OIDC Zitadel (`openid-client` + `jose`). + +No hay `svelte.config.js` (config inline en `vite.config.ts`) ni `tailwind.config.js` (config en `src/routes/layout.css`). + +## Comandos + +```sh +npm run dev # servidor de desarrollo (puerto 5173) +npm run build +npm run check # svelte-check — debe salir 0 errores antes de cerrar un cambio +``` + +## Reglas + +- **Sin comentarios** en el código salvo que sean imprescindibles. +- **Svelte 5 runes siempre:** `$props()` con `interface Props`, `$state`, `$derived`, `$effect`. Nada de `export let` ni `$:`. `{#each}` siempre con clave. +- **Server-only bajo `$lib/server/`**; nunca importado desde cliente. +- Datos SSR vía `load` en `+page.server.ts`/`+layout.server.ts` → prop `data`. +- Enlaces a endpoints `+server.ts` (login/logout) llevan `data-sveltekit-reload`. +- Reutiliza los tokens/recetas del sistema de diseño; extrae a `$lib/components/ui/` lo que se repita. + +## Auth + +`hooks.server.ts` valida la cookie de sesión cifrada (`mf_session`), refresca el `access_token` y puebla `locals.user` / `locals.accessToken`. Para proteger una ruta, comprueba `locals.user` en su `load` y redirige a `/login?returnTo=…`. Para el backend, envía `locals.accessToken` como Bearer hacia `API_BASE_URL`. + +Variables de entorno en `.env` (ver `.env.example`): `ZITADEL_*`, `AUTH_REDIRECT_URI`, `AUTH_POST_LOGOUT_URI`, `SESSION_SECRET`, `API_BASE_URL`. diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts index d16d09e..3640325 100644 --- a/frontend/src/app.d.ts +++ b/frontend/src/app.d.ts @@ -1,17 +1,11 @@ -// See https://svelte.dev/docs/kit/types#app.d.ts -// for information about these interfaces import type { SessionUser } from '$lib/types'; declare global { namespace App { - // interface Error {} interface Locals { user: SessionUser | null; accessToken: string | null; } - // interface PageData {} - // interface PageState {} - // interface Platform {} } } diff --git a/frontend/src/app.html b/frontend/src/app.html index 6a2bb58..f273cc5 100644 --- a/frontend/src/app.html +++ b/frontend/src/app.html @@ -3,7 +3,6 @@
- %sveltekit.head% diff --git a/frontend/src/lib/index.ts b/frontend/src/lib/index.ts deleted file mode 100644 index 856f2b6..0000000 --- a/frontend/src/lib/index.ts +++ /dev/null @@ -1 +0,0 @@ -// place files you want to import through the `$lib` alias in this folder. diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 2c2ed3c..feea18b 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -12,9 +12,4 @@ "strict": true, "moduleResolution": "bundler" } - // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias - // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files - // - // To make changes to top-level options such as include and exclude, we recommend extending - // the generated config; see https://svelte.dev/docs/kit/configuration#typescript } diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 001085f..dd21275 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -8,13 +8,9 @@ export default defineConfig({ tailwindcss(), sveltekit({ compilerOptions: { - // Force runes mode for the project, except for libraries. Can be removed in svelte 6. - runes: ({ filename }) => filename.split(/[/\\]/).includes('node_modules') ? undefined : true + runes: ({ filename }) => + filename.split(/[/\\]/).includes('node_modules') ? undefined : true }, - - // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. - // If your environment is not supported, or you settled on a specific environment, switch out the adapter. - // See https://svelte.dev/docs/kit/adapters for more information about adapters. adapter: adapter() }) ]