add user profile, profile vibe and trip vibe and social signal

features/profile/components/profile-editor.tsx

@@ -4,6 +4,8 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { updateProfileAction } from "@/features/profile/actions";
 import { LIMITS } from "@/lib/limits";
+import { VIBES, vibeMeta } from "@/lib/vibe";
+import type { Vibe } from "@/app/generated/prisma/enums";
 
 interface ProfileEditorProps {
   userId: string;
@@ -12,6 +14,7 @@ interface ProfileEditorProps {
     city: string | null;
     interests: string[];
     instagram: string | null;
+    vibe: Vibe | null;
   } | null;
 }
 
@@ -27,6 +30,7 @@ export function ProfileEditor({ userId, initial }: ProfileEditorProps) {
   const [instagram, setInstagram] = useState(initial?.instagram ?? "");
   const [interests, setInterests] = useState<string[]>(initial?.interests ?? []);
   const [interestDraft, setInterestDraft] = useState("");
+  const [vibe, setVibe] = useState<Vibe | null>(initial?.vibe ?? null);
 
   function addInterest() {
     const v = interestDraft.trim().toLowerCase();
@@ -65,6 +69,7 @@ export function ProfileEditor({ userId, initial }: ProfileEditorProps) {
     if (bio.trim()) formData.set("bio", bio.trim());
     if (city.trim()) formData.set("city", city.trim());
     if (instagram.trim()) formData.set("instagram", instagram.trim());
+    if (vibe) formData.set("vibe", vibe);
     interests.forEach((t) => formData.append("interests", t));
 
     const result = await updateProfileAction(formData);
@@ -257,6 +262,56 @@ export function ProfileEditor({ userId, initial }: ProfileEditorProps) {
           </div>
         </div>
 
+        <div>
+          <label className="mb-1.5 block text-sm font-semibold text-neutral-700">
+            Vibe jalanmu{" "}
+            <span className="text-xs font-normal text-neutral-400">(opsional)</span>
+          </label>
+          <p className="mb-2 text-[11px] text-neutral-500">
+            Bantu calon teman trip nyambung dengan ritme kamu.
+          </p>
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={() => setVibe(null)}
+              aria-pressed={vibe === null}
+              className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
+                vibe === null
+                  ? "border-neutral-700 bg-neutral-800 text-white"
+                  : "border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50"
+              }`}
+            >
+              Belum diisi
+            </button>
+            {VIBES.map((v) => {
+              const m = vibeMeta(v);
+              const active = vibe === v;
+              return (
+                <button
+                  key={v}
+                  type="button"
+                  onClick={() => setVibe(v)}
+                  aria-pressed={active}
+                  title={m.description}
+                  className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
+                    active
+                      ? "border-primary-600 bg-primary-600 text-white"
+                      : "border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50"
+                  }`}
+                >
+                  <span aria-hidden>{m.icon}</span>
+                  <span>{m.label}</span>
+                </button>
+              );
+            })}
+          </div>
+          {vibe && (
+            <p className="mt-2 text-[11px] italic text-neutral-500">
+              {vibeMeta(vibe).description}
+            </p>
+          )}
+        </div>
+
         <div className="flex gap-2 pt-2">
           <button
             type="submit"