Migrate backend from PocketBase to Directus

Full cutover: auth, users, collection and friendships now run on Directus
via @directus/sdk, with owner/visibility rules enforced by Directus
permissions.

- middleware: Directus session (directus_auth cookie) with token refresh
- /login is Directus (email normalized to lowercase), new /register page
  (first/last name, username) backed by public registration
- collection, friends and profile pages + all API endpoints ported;
  ownership and addressee-only accept/decline enforced by permissions
- display names use first_name/last_name everywhere (nav, friends, profile)
- PocketBase SDK, POCKETBASE_URL and pb_schema.json removed
- README and compose updated for DIRECTUS_URL

src/pages/profile.astro

@@ -1,21 +1,15 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
+import { isLoggedIn } from "../lib/auth";
+import { displayName, initials } from "../lib/directus";
 
-const { pb } = Astro.locals;
-
-if (!pb.authStore.isValid) {
+if (!isLoggedIn(Astro.locals)) {
     return Astro.redirect("/login");
 }
 
-const user = pb.authStore.record!;
-const initials = (user.name || user.email || "")
-    .split(/[\s@.]+/)
-    .filter(Boolean)
-    .slice(0, 2)
-    .map((s: string) => s[0].toUpperCase())
-    .join("");
-
+const user = Astro.locals.user!;
 const themePreference = user.theme_preference ?? "System";
+const visibility = user.visibility ?? "Friends";
 ---
 
 <BaseLayout>
@@ -64,11 +58,11 @@ const themePreference = user.theme_preference ?? "System";
                     <section>
                         <div class="flex items-center gap-4 mb-6">
                             <span class="avatar" data-size="lg">
-                                <span>{initials}</span>
+                                <span>{initials(user)}</span>
                             </span>
                             <div class="flex flex-col">
                                 <span class="font-semibold"
-                                    >{user.name || "—"}</span
+                                    >{displayName(user)}</span
                                 >
                                 <span class="text-sm opacity-70"
                                     >{user.email}</span
@@ -95,16 +89,27 @@ const themePreference = user.theme_preference ?? "System";
                                 </p>
                             </div>
                             <div role="group" class="field">
-                                <label for="name">Nom complet</label>
+                                <label for="first_name">Prénom</label>
                                 <input
                                     class="input"
                                     type="text"
-                                    id="name"
-                                    name="name"
-                                    value={user.name ?? ""}
-                                    placeholder="Votre nom complet"
+                                    id="first_name"
+                                    name="first_name"
+                                    value={user.first_name ?? ""}
+                                    placeholder="Votre prénom"
                                 />
-                                <p>Votre nom affiché dans l'application.</p>
+                            </div>
+                            <div role="group" class="field">
+                                <label for="last_name">Nom</label>
+                                <input
+                                    class="input"
+                                    type="text"
+                                    id="last_name"
+                                    name="last_name"
+                                    value={user.last_name ?? ""}
+                                    placeholder="Votre nom"
+                                />
+                                <p>Affichés dans l'application.</p>
                             </div>
                         </form>
                     </section>
@@ -229,7 +234,7 @@ const themePreference = user.theme_preference ?? "System";
         }
     };
 
-    // Account form (name)
+    // Account form (username, names)
     const accountForm = document.getElementById("account-form");
     const accountBtn = document.getElementById(
         "account-submit",
@@ -238,7 +243,8 @@ const themePreference = user.theme_preference ?? "System";
     accountForm?.addEventListener("submit", async (e) => {
         e.preventDefault();
         const formData = new FormData(accountForm as HTMLFormElement);
-        const name = formData.get("name");
+        const first_name = formData.get("first_name");
+        const last_name = formData.get("last_name");
         const username = formData.get("username");
 
         accountBtn.disabled = true;
@@ -249,14 +255,14 @@ const themePreference = user.theme_preference ?? "System";
             const res = await fetch("/api/profile", {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ name, username }),
+                body: JSON.stringify({ first_name, last_name, username }),
             });
 
             if (res.ok) {
                 showToast(
                     "success",
                     "Enregistré",
-                    "Votre nom a été mis à jour.",
+                    "Votre compte a été mis à jour.",
                 );
                 // Reload to reflect the new name in the nav
                 setTimeout(() => window.location.reload(), 1000);