Password auth, artist folders, timezone fix

Add password-based registration + login alongside existing magic links.
New /register and updated /login with tabs (password default, magic link
as alternative). Bun.password.hash/verify for bcrypt. Auto-login on
register. Landing page CTAs point to /register.

Add projects.artist field for grouping projects by artist in sidebar.
Sidebar shows collapsible artist sections (▸ Anna Berger) with project
counts, "Ohne Zuordnung" for ungrouped projects. Search filters across
artist names. New/edit project forms include artist field.

Fix timezone bug: set postgres connection timezone to UTC so magic link
expiry works correctly in CEST and other non-UTC timezones.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/src/lib/components/workspace/Sidebar.svelte

@@ -8,8 +8,9 @@
   import Icon from '$lib/components/ui/Icon.svelte';
   import CoverImage from '$lib/components/ui/CoverImage.svelte';
 
-  type Project = { id: string; name: string; coverUrl: string | null };
+  type Project = { id: string; name: string; artist: string | null; coverUrl: string | null };
   type ProjectMembership = { project: Project; role: string; trackCount: number };
+  type ArtistGroup = { artist: string; memberships: ProjectMembership[] };
   type TrackStatus = 'sketch' | 'in_progress' | 'final' | 'released';
   type Track = { id: string; name: string; coverUrl: string | null; status: TrackStatus };
 
@@ -37,17 +38,53 @@
   const activeProjectId = $derived(($page.params as Record<string, string>).projectId ?? null);
   const activeTrackId = $derived(($page.params as Record<string, string>).trackId ?? null);
 
-  // Filtered projects: a project matches if its name matches OR any of its loaded tracks match
+  // Filtered projects: a project matches if its name matches, artist matches, OR any of its loaded tracks match
   const filtered = $derived.by(() => {
     const q = query.trim().toLowerCase();
     if (!q) return projects;
     return projects.filter(({ project }) => {
       if (project.name.toLowerCase().includes(q)) return true;
+      if (project.artist?.toLowerCase().includes(q)) return true;
       const tracks = tracksByProject[project.id];
       return tracks?.some((t) => t.name.toLowerCase().includes(q));
     });
   });
 
+  // Group filtered projects by artist
+  const artistGroups = $derived.by(() => {
+    const groups = new Map<string, ProjectMembership[]>();
+    for (const m of filtered) {
+      const key = m.project.artist?.trim() || '';
+      if (!groups.has(key)) groups.set(key, []);
+      groups.get(key)!.push(m);
+    }
+    const sorted: ArtistGroup[] = [];
+    for (const [artist, memberships] of groups) {
+      if (artist) sorted.push({ artist, memberships });
+    }
+    sorted.sort((a, b) => a.artist.localeCompare(b.artist));
+    const ungrouped = groups.get('');
+    if (ungrouped) sorted.push({ artist: '', memberships: ungrouped });
+    return sorted;
+  });
+
+  // Artist group collapsed state
+  let collapsedArtists = $state<Set<string>>(new Set());
+  function toggleArtist(artist: string) {
+    const next = new Set(collapsedArtists);
+    if (next.has(artist)) next.delete(artist);
+    else next.add(artist);
+    collapsedArtists = next;
+  }
+  function isArtistExpanded(artist: string) {
+    if (collapsedArtists.has(artist)) return false;
+    // Auto-expand if active project is in this group or search is active
+    if (query.trim()) return true;
+    return artistGroups.some(
+      (g) => g.artist === artist && g.memberships.some((m) => m.project.id === activeProjectId),
+    );
+  }
+
   function trackMatches(track: Track) {
     const q = query.trim().toLowerCase();
     return !q || track.name.toLowerCase().includes(q);
@@ -133,44 +170,65 @@
         <Icon name="plus" size={14} />
       </a>
     </div>
-    <ul class="projects">
-      {#each filtered as { project, trackCount } (project.id)}
-        <li>
-          <a
-            href="/projects/{project.id}"
-            class="project"
-            class:active={activeProjectId === project.id}
-            onclick={handleNavClick}
-          >
-            <CoverImage src={project.coverUrl} name={project.name} size="xs" rounded="sm" />
-            <span class="name">{project.name}</span>
-            <span class="count">{trackCount}</span>
-          </a>
-          {#if shouldExpand(project.id) && tracksByProject[project.id]}
-            <ul class="tracks">
-              {#each tracksByProject[project.id].filter(trackMatches) as track (track.id)}
+    <div class="artist-groups">
+      {#each artistGroups as group (group.artist)}
+        {@const expanded = group.artist === '' || isArtistExpanded(group.artist) || !collapsedArtists.has(group.artist)}
+        <div class="artist-group">
+          {#if group.artist}
+            <button class="artist-head" onclick={() => toggleArtist(group.artist)}>
+              <Icon name={expanded ? 'chevron-down' : 'chevron-right'} size={12} />
+              <span class="artist-name">{group.artist}</span>
+              <span class="count">{group.memberships.length}</span>
+            </button>
+          {:else}
+            <div class="artist-head ungrouped">
+              <span class="artist-name">Ohne Zuordnung</span>
+            </div>
+          {/if}
+
+          {#if expanded}
+            <ul class="projects">
+              {#each group.memberships as { project, trackCount } (project.id)}
                 <li>
                   <a
-                    href="/projects/{project.id}/tracks/{track.id}"
-                    class="track"
-                    class:active={activeTrackId === track.id}
+                    href="/projects/{project.id}"
+                    class="project"
+                    class:active={activeProjectId === project.id}
                     onclick={handleNavClick}
                   >
-                    <span class="status-dot" style="background: {STATUS_COLORS[track.status]}"></span>
-                    {track.name}
+                    <CoverImage src={project.coverUrl} name={project.name} size="xs" rounded="sm" />
+                    <span class="name">{project.name}</span>
+                    <span class="count">{trackCount}</span>
                   </a>
+                  {#if shouldExpand(project.id) && tracksByProject[project.id]}
+                    <ul class="tracks">
+                      {#each tracksByProject[project.id].filter(trackMatches) as track (track.id)}
+                        <li>
+                          <a
+                            href="/projects/{project.id}/tracks/{track.id}"
+                            class="track"
+                            class:active={activeTrackId === track.id}
+                            onclick={handleNavClick}
+                          >
+                            <span class="status-dot" style="background: {STATUS_COLORS[track.status]}"></span>
+                            {track.name}
+                          </a>
+                        </li>
+                      {/each}
+                    </ul>
+                  {/if}
                 </li>
               {/each}
             </ul>
           {/if}
-        </li>
+        </div>
       {/each}
       {#if filtered.length === 0 && query}
-        <li class="empty">Nichts gefunden für "{query}"</li>
+        <p class="empty">Nichts gefunden für "{query}"</p>
       {:else if projects.length === 0}
-        <li class="empty">Noch keine Projekte</li>
+        <p class="empty">Noch keine Projekte</p>
       {/if}
-    </ul>
+    </div>
   </div>
 
   <div class="user-block">
@@ -314,6 +372,45 @@
     color: var(--color-accent);
   }
 
+  .artist-groups {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+  .artist-head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+    padding: var(--space-1) var(--space-3);
+    background: none;
+    border: none;
+    color: var(--color-text-tertiary);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+    text-align: left;
+    border-radius: var(--radius-sm);
+    transition: all var(--transition-fast);
+  }
+  .artist-head:hover {
+    color: var(--color-text-secondary);
+  }
+  .artist-head.ungrouped {
+    cursor: default;
+    padding-top: var(--space-2);
+    border-top: 1px solid var(--color-border);
+    margin-top: var(--space-1);
+    border-radius: 0;
+  }
+  .artist-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .projects {
     list-style: none;
     padding: 0;

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

@@ -22,6 +22,18 @@ export async function checkAuth() {
   }
 }
 
+export async function register(name: string, email: string, password: string) {
+  const res = await api.post<{ user: User }>('/auth/register', { name, email, password });
+  user.set(res.user);
+  return res.user;
+}
+
+export async function login(email: string, password: string) {
+  const res = await api.post<{ user: User }>('/auth/login', { email, password });
+  user.set(res.user);
+  return res.user;
+}
+
 export async function sendMagicLink(email: string) {
   return api.post('/auth/magic-link', { email });
 }

apps/web/src/routes/(app)/projects/[projectId]/settings/+page.svelte

@@ -19,7 +19,7 @@
     user: { id: string; email: string; name: string; avatarUrl: string | null };
   };
 
-  type Project = { id: string; name: string; description: string | null; coverUrl: string | null; coverImageUrl: string | null };
+  type Project = { id: string; name: string; description: string | null; artist: string | null; coverUrl: string | null; coverImageUrl: string | null };
 
   const projectId = $page.params.projectId!;
 
@@ -30,6 +30,7 @@
 
   // Edit project
   let editName = $state('');
+  let editArtist = $state('');
   let editDesc = $state('');
   let saving = $state(false);
 
@@ -52,6 +53,7 @@
       project = projectRes.project;
       role = projectRes.role;
       editName = project.name;
+      editArtist = project.artist || '';
       editDesc = project.description || '';
       members = membersRes.members;
     } finally {
@@ -70,6 +72,7 @@
     try {
       await api.patch(`/projects/${projectId}`, {
         name: editName,
+        artist: editArtist.trim() || null,
         description: editDesc || undefined,
       });
       toastSuccess('Projekt gespeichert');
@@ -135,6 +138,7 @@
       <div class="cover-row">
         <CoverUpload currentUrl={project.coverUrl} name={project.name} onUploaded={saveCover} />
         <form class="details-form" onsubmit={(e) => { e.preventDefault(); saveProject(); }}>
+          <Input label="Artist" bind:value={editArtist} placeholder="z.B. Anna Berger (optional)" />
           <Input label="Name" bind:value={editName} />
           <div class="textarea-group">
             <label class="textarea-label">Beschreibung</label>

apps/web/src/routes/(app)/projects/new/+page.svelte

@@ -7,6 +7,7 @@
   import TopBar from '$lib/components/workspace/TopBar.svelte';
 
   let name = $state('');
+  let artist = $state('');
   let description = $state('');
   let loading = $state(false);
 
@@ -16,6 +17,7 @@
     try {
       const res = await api.post<{ project: { id: string } }>('/projects', {
         name,
+        artist: artist.trim() || null,
         description: description || undefined,
       });
       toastSuccess('Projekt erstellt');
@@ -38,6 +40,7 @@
     <h1>Neues Projekt</h1>
 
     <form onsubmit={handleSubmit}>
+      <Input label="Artist" bind:value={artist} placeholder="z.B. Anna Berger (optional)" />
       <Input label="Name" bind:value={name} placeholder="Mein Album" />
 
       <div class="textarea-group">

apps/web/src/routes/+layout.svelte

@@ -3,6 +3,7 @@
   import { page } from '$app/stores';
   import { checkAuth, authLoading } from '$lib/stores/auth.js';
   import ToastContainer from '$lib/components/ui/ToastContainer.svelte';
+  // @ts-ignore — no types shipped for fontsource
   import '@fontsource-variable/inter';
 
   let { children } = $props();
@@ -11,7 +12,9 @@
   const isPublic = $derived(
     $page.url.pathname === '/' ||
       $page.url.pathname === '/login' ||
-      $page.url.pathname.startsWith('/listen/'),
+      $page.url.pathname === '/register' ||
+      $page.url.pathname.startsWith('/listen/') ||
+      $page.url.pathname.startsWith('/auth/'),
   );
 
   onMount(() => {

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

@@ -24,7 +24,7 @@
         <Button href="/dashboard" size="sm">Zum Dashboard</Button>
       {:else}
         <a href="/login" class="nav-link">Einloggen</a>
-        <Button href="/login" size="sm">Kostenlos starten</Button>
+        <Button href="/register" size="sm">Kostenlos starten</Button>
       {/if}
     </div>
   </nav>
@@ -43,7 +43,7 @@
         ohne Account, ohne Anmeldung, ohne Stress.
       </p>
       <div class="hero-cta">
-        <Button href="/login" size="lg">Kostenlos starten</Button>
+        <Button href="/register" size="lg">Kostenlos starten</Button>
         <a href="/listen/{DEMO_SHARE_TOKEN}" target="_blank" rel="noopener" class="cta-secondary">
           Live-Demo ansehen <span class="arrow">→</span>
         </a>
@@ -275,7 +275,7 @@
       präg die Roadmap mit. Gratis, ohne Verpflichtung.
     </p>
     <div class="hero-cta center">
-      <Button href="/login" size="lg">Account anlegen</Button>
+      <Button href="/register" size="lg">Account anlegen</Button>
       <!-- TODO: GitHub-Link sobald Repo öffentlich -->
       <a href="https://git.mydrugismusic.com/robin/music-hub" target="_blank" rel="noopener" class="cta-secondary">
         Auf Git anschauen <span class="arrow">→</span>

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

@@ -1,52 +1,99 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { user, sendMagicLink } from '$lib/stores/auth.js';
+  import { user, login, sendMagicLink } from '$lib/stores/auth.js';
   import Button from '$lib/components/ui/Button.svelte';
   import Input from '$lib/components/ui/Input.svelte';
 
+  let tab = $state<'password' | 'magic'>('password');
+
+  // Password
   let email = $state('');
-  let sent = $state(false);
+  let password = $state('');
   let loading = $state(false);
   let error = $state('');
 
+  // Magic Link
+  let magicEmail = $state('');
+  let magicSent = $state(false);
+  let magicLoading = $state(false);
+  let magicError = $state('');
+
   $effect(() => {
     if ($user) goto('/dashboard');
   });
 
-  async function handleSubmit(e: Event) {
+  async function handleLogin(e: Event) {
     e.preventDefault();
     error = '';
     loading = true;
     try {
-      await sendMagicLink(email);
-      sent = true;
+      await login(email, password);
+      goto('/dashboard');
     } catch (err) {
-      error = err instanceof Error ? err.message : 'Etwas ist schiefgelaufen';
+      error = err instanceof Error ? err.message : 'Login fehlgeschlagen';
     } finally {
       loading = false;
     }
   }
+
+  async function handleMagicLink(e: Event) {
+    e.preventDefault();
+    magicError = '';
+    magicLoading = true;
+    try {
+      await sendMagicLink(magicEmail);
+      magicSent = true;
+    } catch (err) {
+      magicError = err instanceof Error ? err.message : 'Fehler beim Senden';
+    } finally {
+      magicLoading = false;
+    }
+  }
 </script>
 
 <div class="login-page">
   <a href="/" class="back">← Zurück</a>
 
-  <div class="login-card">
+  <div class="card">
     <p class="brand">Music Hub</p>
     <h1>Einloggen</h1>
-    <p class="card-sub">Magic Link per E-Mail. Kein Passwort, keine Hürden.</p>
 
-    {#if sent}
-      <div class="success">
-        <p>📬 Check deine E-Mails — der Link ist unterwegs.</p>
-        <Button variant="secondary" onclick={() => { sent = false; email = ''; }}>Andere Adresse</Button>
-      </div>
-    {:else}
-      <form onsubmit={handleSubmit}>
-        <Input type="email" bind:value={email} placeholder="deine@email.de" {error} />
-        <Button type="submit" size="lg" {loading}>Login-Link senden</Button>
+    <div class="tabs">
+      <button class:active={tab === 'password'} onclick={() => (tab = 'password')}>Passwort</button>
+      <button class:active={tab === 'magic'} onclick={() => (tab = 'magic')}>Magic Link</button>
+    </div>
+
+    {#if tab === 'password'}
+      <form onsubmit={handleLogin}>
+        <Input type="email" bind:value={email} placeholder="deine@email.de" label="E-Mail" />
+        <Input type="password" bind:value={password} placeholder="Dein Passwort" label="Passwort" />
+        {#if error}
+          <p class="error">{error}</p>
+        {/if}
+        <Button type="submit" size="lg" {loading} disabled={!email || !password}>
+          Einloggen
+        </Button>
       </form>
+    {:else}
+      {#if magicSent}
+        <div class="success">
+          <p>Check deine E-Mails — der Link ist unterwegs.</p>
+          <Button variant="secondary" onclick={() => { magicSent = false; magicEmail = ''; }}>
+            Andere Adresse
+          </Button>
+        </div>
+      {:else}
+        <form onsubmit={handleMagicLink}>
+          <p class="hint">Kein Passwort? Wir schicken dir einen Login-Link per E-Mail.</p>
+          <Input type="email" bind:value={magicEmail} placeholder="deine@email.de" label="E-Mail" error={magicError} />
+          <Button type="submit" size="lg" loading={magicLoading}>
+            Login-Link senden
+          </Button>
+        </form>
+      {/if}
     {/if}
+
+    <p class="switch">Noch kein Konto? <a href="/register">Registrieren</a></p>
   </div>
 </div>
 
@@ -60,7 +107,6 @@
     padding: var(--space-8) var(--space-4);
     gap: var(--space-6);
   }
-
   .back {
     color: var(--color-text-tertiary);
     font-size: var(--text-sm);
@@ -70,7 +116,7 @@
     color: var(--color-text-primary);
   }
 
-  .login-card {
+  .card {
     background: var(--color-bg-overlay);
     border-radius: var(--radius-lg);
     padding: var(--space-10);
@@ -87,16 +133,36 @@
     font-size: var(--text-xs);
     margin: 0 0 var(--space-2);
   }
-
   h1 {
-    margin: 0 0 var(--space-1);
+    margin: 0 0 var(--space-5);
     font-size: var(--text-2xl);
   }
 
-  .card-sub {
+  .tabs {
+    display: flex;
+    border-bottom: 1px solid var(--color-border);
+    margin-bottom: var(--space-5);
+  }
+  .tabs button {
+    flex: 1;
+    background: none;
+    border: none;
     color: var(--color-text-tertiary);
+    padding: var(--space-3) var(--space-2);
+    cursor: pointer;
+    font-family: inherit;
     font-size: var(--text-sm);
-    margin: 0 0 var(--space-6);
+    font-weight: 500;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    transition: all var(--transition-fast);
+  }
+  .tabs button:hover {
+    color: var(--color-text-primary);
+  }
+  .tabs button.active {
+    color: var(--color-text-primary);
+    border-bottom-color: var(--color-accent);
   }
 
   form {
@@ -105,8 +171,27 @@
     gap: var(--space-4);
   }
 
+  .error {
+    color: var(--color-error);
+    font-size: var(--text-sm);
+    margin: 0;
+  }
+  .hint {
+    color: var(--color-text-tertiary);
+    font-size: var(--text-sm);
+    margin: 0;
+  }
   .success p {
     color: var(--color-text-primary);
     margin-bottom: var(--space-4);
   }
+  .switch {
+    text-align: center;
+    color: var(--color-text-tertiary);
+    font-size: var(--text-sm);
+    margin: var(--space-5) 0 0;
+  }
+  .switch a {
+    color: var(--color-accent);
+  }
 </style>

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

@@ -0,0 +1,140 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { user, register } from '$lib/stores/auth.js';
+  import Button from '$lib/components/ui/Button.svelte';
+  import Input from '$lib/components/ui/Input.svelte';
+
+  let name = $state('');
+  let email = $state('');
+  let password = $state('');
+  let passwordConfirm = $state('');
+  let loading = $state(false);
+  let error = $state('');
+
+  $effect(() => {
+    if ($user) goto('/dashboard');
+  });
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault();
+    error = '';
+
+    if (password !== passwordConfirm) {
+      error = 'Passwörter stimmen nicht überein';
+      return;
+    }
+    if (password.length < 8) {
+      error = 'Passwort muss mindestens 8 Zeichen haben';
+      return;
+    }
+
+    loading = true;
+    try {
+      await register(name, email, password);
+      goto('/dashboard');
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Registrierung fehlgeschlagen';
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<div class="register-page">
+  <a href="/" class="back">← Zurück</a>
+
+  <div class="card">
+    <p class="brand">Music Hub</p>
+    <h1>Konto erstellen</h1>
+    <p class="card-sub">Kostenlos. Kein Abo, keine Kreditkarte.</p>
+
+    <form onsubmit={handleSubmit}>
+      <Input label="Name" bind:value={name} placeholder="Dein Name" />
+      <Input label="E-Mail" type="email" bind:value={email} placeholder="deine@email.de" />
+      <Input label="Passwort" type="password" bind:value={password} placeholder="Mindestens 8 Zeichen" />
+      <Input label="Passwort wiederholen" type="password" bind:value={passwordConfirm} placeholder="Nochmal eingeben" />
+
+      {#if error}
+        <p class="error">{error}</p>
+      {/if}
+
+      <Button type="submit" size="lg" {loading} disabled={!name || !email || !password}>
+        Registrieren
+      </Button>
+    </form>
+
+    <p class="switch">Schon ein Konto? <a href="/login">Einloggen</a></p>
+  </div>
+</div>
+
+<style>
+  .register-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    padding: var(--space-8) var(--space-4);
+    gap: var(--space-6);
+  }
+
+  .back {
+    color: var(--color-text-tertiary);
+    font-size: var(--text-sm);
+    text-decoration: none;
+  }
+  .back:hover {
+    color: var(--color-text-primary);
+  }
+
+  .card {
+    background: var(--color-bg-overlay);
+    border-radius: var(--radius-lg);
+    padding: var(--space-10);
+    border: 1px solid var(--color-border);
+    box-shadow: 0 20px 60px rgba(244, 63, 94, 0.08);
+    width: 100%;
+    max-width: 440px;
+  }
+
+  .brand {
+    color: var(--color-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    font-size: var(--text-xs);
+    margin: 0 0 var(--space-2);
+  }
+
+  h1 {
+    margin: 0 0 var(--space-1);
+    font-size: var(--text-2xl);
+  }
+
+  .card-sub {
+    color: var(--color-text-tertiary);
+    font-size: var(--text-sm);
+    margin: 0 0 var(--space-6);
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  .error {
+    color: var(--color-error);
+    font-size: var(--text-sm);
+    margin: 0;
+  }
+
+  .switch {
+    text-align: center;
+    color: var(--color-text-tertiary);
+    font-size: var(--text-sm);
+    margin: var(--space-5) 0 0;
+  }
+  .switch a {
+    color: var(--color-accent);
+  }
+</style>