feat: add optional mood to thoughts with custom moods support

Mood is an optional label+emoji string (e.g. "relaxed 😌") on thoughts. Users can define up to 8 custom moods in profile settings. Mood federates via AP Note JSON and displays on thought cards.
2026-05-29 15:38:35 +02:00
parent be27fe04e2
commit 442a61bbdb
34 changed files with 294 additions and 42 deletions
--- a/thoughts-frontend/app/page.tsx
+++ b/thoughts-frontend/app/page.tsx
@@ -114,7 +114,7 @@ async function FeedPage({
          <header className="mb-6">
            <h1 className="text-3xl font-bold text-shadow-sm">Your Feed</h1>
          </header>
-          <ThoughtForm />
+          <ThoughtForm currentUser={me} />

          <div className="block lg:hidden space-y-6">{sidebar}</div>

--- a/thoughts-frontend/app/settings/profile/page.tsx
+++ b/thoughts-frontend/app/settings/profile/page.tsx
@@ -9,6 +9,7 @@ export const metadata: Metadata = {
 import { redirect } from "next/navigation";
 import { getMe } from "@/lib/api";
 import { EditProfileForm } from "@/components/edit-profile-form";
+import { CustomMoodsEditor } from "@/components/custom-moods-editor";

 export default async function EditProfilePage() {
  const token = (await cookies()).get("auth_token")?.value;
@@ -32,6 +33,7 @@ export default async function EditProfilePage() {
        </p>
      </div>
      <EditProfileForm currentUser={me} token={token} />
+      <CustomMoodsEditor initial={me.customMoods} />
    </div>
  );
 }
--- a/thoughts-frontend/components/custom-moods-editor.tsx
+++ b/thoughts-frontend/components/custom-moods-editor.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import { useState } from "react";
+import { useAuth } from "@/hooks/use-auth";
+import { updateProfile, type ProfileField } from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { toast } from "sonner";
+import { Plus, Trash2 } from "lucide-react";
+
+const MAX_MOODS = 8;
+
+export function CustomMoodsEditor({
+  initial,
+}: {
+  initial: ProfileField[];
+}) {
+  const { token } = useAuth();
+  const [moods, setMoods] = useState<ProfileField[]>(initial);
+  const [saving, setSaving] = useState(false);
+
+  const update = (i: number, key: "name" | "value", val: string) => {
+    setMoods((prev) => prev.map((f, j) => (j === i ? { ...f, [key]: val } : f)));
+  };
+
+  const add = () => {
+    if (moods.length >= MAX_MOODS) return;
+    setMoods((prev) => [...prev, { name: "", value: "" }]);
+  };
+
+  const remove = (i: number) => {
+    setMoods((prev) => prev.filter((_, j) => j !== i));
+  };
+
+  const save = async () => {
+    if (!token) return;
+    const clean = moods.filter((f) => f.name.trim() || f.value.trim());
+    setSaving(true);
+    try {
+      await updateProfile({ customMoods: clean }, token);
+      setMoods(clean);
+      toast.success("Custom moods saved.");
+    } catch {
+      toast.error("Failed to save custom moods.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="glass-effect glossy-effect bottom rounded-md shadow-fa-lg p-4 space-y-3">
+      <div>
+        <h3 className="text-lg font-medium">Custom moods</h3>
+        <p className="text-sm text-muted-foreground">
+          Add up to {MAX_MOODS} custom moods. These appear alongside the
+          predefined moods when composing a thought.
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        {moods.map((f, i) => (
+          <div key={i} className="flex gap-2 items-center">
+            <Input
+              value={f.name}
+              onChange={(e) => update(i, "name", e.target.value)}
+              placeholder="Mood name"
+              className="max-w-[10rem] text-sm"
+            />
+            <Input
+              value={f.value}
+              onChange={(e) => update(i, "value", e.target.value)}
+              placeholder="Emoji"
+              className="max-w-[5rem] text-sm"
+            />
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => remove(i)}
+              className="shrink-0"
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </div>
+        ))}
+      </div>
+
+      <div className="flex gap-2">
+        {moods.length < MAX_MOODS && (
+          <Button variant="outline" size="sm" onClick={add}>
+            <Plus className="h-4 w-4 mr-1" /> Add mood
+          </Button>
+        )}
+        <Button size="sm" onClick={save} disabled={saving}>
+          {saving ? "Saving…" : "Save"}
+        </Button>
+      </div>
+    </div>
+  );
+}
--- a/thoughts-frontend/components/thought-card.tsx
+++ b/thoughts-frontend/components/thought-card.tsx
@@ -223,6 +223,11 @@ export function ThoughtCard({
              }}
            />
          )}
+          {(thought.mood || (meta?.mood as string | undefined)) && (
+            <p className="text-xs text-muted-foreground italic mt-2">
+              feeling {thought.mood || (meta?.mood as string)}
+            </p>
+          )}
        </CardContent>

        {token && (
@@ -244,6 +249,7 @@ export function ThoughtCard({
            <ThoughtForm
              replyToId={thought.id}
              onSuccess={() => setIsReplyOpen(false)}
+              currentUser={currentUser}
            />
          </div>
        )}
--- a/thoughts-frontend/components/thought-form.tsx
+++ b/thoughts-frontend/components/thought-form.tsx
@@ -20,7 +20,7 @@ import {
  SelectTrigger,
  SelectValue,
 } from "@/components/ui/select"
-import { CreateThoughtSchema } from "@/lib/api"
+import { CreateThoughtSchema, type Me } from "@/lib/api"
 import { useAuth } from "@/hooks/use-auth"
 import { toast } from "sonner"
 import { Globe, Lock, Users } from "lucide-react"
@@ -28,6 +28,13 @@ import { useState } from "react"
 import { Confetti } from "./confetti"
 import { createThought } from "@/app/actions/thoughts"

+const DEFAULT_MOODS = [
+  "relaxed 😌", "happy 😊", "excited 🤩", "grateful 🙏", "inspired ✨",
+  "thoughtful 🤔", "curious 🧐", "amused 😄", "proud 💪", "hopeful 🌟",
+  "tired 😴", "stressed 😰", "anxious 😟", "sad 😢", "frustrated 😤",
+  "angry 😠", "bored 😑", "confused 😕", "nostalgic 🥹", "silly 🤪",
+]
+
 interface ThoughtFormProps {
  /** Set to the parent thought ID when composing a reply. */
  replyToId?: string
@@ -35,12 +42,20 @@ interface ThoughtFormProps {
  onSuccess?: () => void
  /** Whether to wrap in a Card. Defaults to true when no replyToId. */
  card?: boolean
+  currentUser?: Me | null
 }

-export function ThoughtForm({ replyToId, onSuccess, card = !replyToId }: ThoughtFormProps) {
+export function ThoughtForm({ replyToId, onSuccess, card = !replyToId, currentUser }: ThoughtFormProps) {
  const { token } = useAuth()
  const [showConfetti, setShowConfetti] = useState(false)

+  const allMoods = [
+    ...DEFAULT_MOODS,
+    ...(currentUser?.customMoods ?? [])
+      .filter(m => !DEFAULT_MOODS.some(d => d.toLowerCase().startsWith(m.name.toLowerCase())))
+      .map(m => `${m.name} ${m.value}`),
+  ]
+
  const form = useForm<z.infer<typeof CreateThoughtSchema>>({
    resolver: zodResolver(CreateThoughtSchema),
    defaultValues: {
@@ -86,40 +101,61 @@ export function ThoughtForm({ replyToId, onSuccess, card = !replyToId }: Thought
          )}
        />
        <div className={`flex ${replyToId ? "justify-end gap-2" : "justify-between items-center"}`}>
-          {!replyToId && (
+          <div className="flex gap-2">
+            {!replyToId && (
+              <FormField
+                control={form.control}
+                name="visibility"
+                render={({ field }) => (
+                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    <FormControl>
+                      <SelectTrigger className="w-[150px]">
+                        <SelectValue placeholder="Visibility" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="public">
+                        <div className="flex items-center gap-2"><Globe className="h-4 w-4" /> Public</div>
+                      </SelectItem>
+                      <SelectItem value="followers">
+                        <div className="flex items-center gap-2"><Users className="h-4 w-4" /> Followers</div>
+                      </SelectItem>
+                      <SelectItem value="unlisted">
+                        <div className="flex items-center gap-2"><Lock className="h-4 w-4" /> Unlisted</div>
+                      </SelectItem>
+                      <SelectItem value="direct">
+                        <div className="flex items-center gap-2"><Lock className="h-4 w-4" /> Direct</div>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+            )}
            <FormField
              control={form.control}
-              name="visibility"
+              name="mood"
              render={({ field }) => (
-                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <Select onValueChange={(v) => field.onChange(v === "__none__" ? undefined : v)} value={field.value ?? "__none__"}>
                  <FormControl>
-                    <SelectTrigger className="w-[150px]">
-                      <SelectValue placeholder="Visibility" />
+                    <SelectTrigger className="w-[170px]">
+                      <SelectValue placeholder="How are you feeling?" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
-                    <SelectItem value="public">
-                      <div className="flex items-center gap-2"><Globe className="h-4 w-4" /> Public</div>
-                    </SelectItem>
-                    <SelectItem value="followers">
-                      <div className="flex items-center gap-2"><Users className="h-4 w-4" /> Followers</div>
-                    </SelectItem>
-                    <SelectItem value="unlisted">
-                      <div className="flex items-center gap-2"><Lock className="h-4 w-4" /> Unlisted</div>
-                    </SelectItem>
-                    <SelectItem value="direct">
-                      <div className="flex items-center gap-2"><Lock className="h-4 w-4" /> Direct</div>
-                    </SelectItem>
+                    <SelectItem value="__none__">No mood</SelectItem>
+                    {allMoods.map((mood) => (
+                      <SelectItem key={mood} value={mood}>{mood}</SelectItem>
+                    ))}
                  </SelectContent>
                </Select>
              )}
            />
-          )}
-          {replyToId && (
-            <Button type="button" variant="ghost" onClick={() => onSuccess?.()}>
-              Cancel
-            </Button>
-          )}
+            {replyToId && (
+              <Button type="button" variant="ghost" onClick={() => onSuccess?.()}>
+                Cancel
+              </Button>
+            )}
+          </div>
          <Button type="submit" disabled={form.formState.isSubmitting}>
            {form.formState.isSubmitting
              ? (replyToId ? "Replying..." : "Posting...")
--- a/thoughts-frontend/lib/api.ts
+++ b/thoughts-frontend/lib/api.ts
@@ -16,6 +16,7 @@ export const UserSchema = z.object({
  headerUrl: z.string().nullable(),
  customCss: z.string().nullable(),
  profileFields: z.array(ProfileFieldSchema).default([]),
+  customMoods: z.array(ProfileFieldSchema).default([]),
  local: z.boolean(),
  isFollowedByViewer: z.boolean(),
  joinedAt: z.coerce.date().nullable(),
@@ -55,6 +56,7 @@ export const ThoughtSchema = z.object({
  createdAt: z.coerce.date(),
  updatedAt: z.coerce.date().nullable(),
  noteExtensions: z.record(z.string(), z.unknown()).nullish(),
+  mood: z.string().nullable().optional(),
 });

 export const RegisterSchema = z.object({
@@ -72,6 +74,7 @@ export const CreateThoughtSchema = z.object({
  content: z.string().min(1).max(128),
  visibility: z.enum(["public", "followers", "unlisted", "direct"]).optional(),
  inReplyToId: z.string().uuid().optional(),
+  mood: z.string().max(64).optional(),
 });

 export const UpdateProfileSchema = z.object({
@@ -79,6 +82,7 @@ export const UpdateProfileSchema = z.object({
  bio: z.string().max(4000).optional(),
  customCss: z.string().optional(),
  profileFields: z.array(ProfileFieldSchema).max(4).optional(),
+  customMoods: z.array(ProfileFieldSchema).max(8).optional(),
 });

 export const SearchResultsSchema = z.object({
@@ -121,6 +125,7 @@ export const ThoughtThreadSchema: z.ZodType<{
  createdAt: Date;
  updatedAt: Date | null;
  noteExtensions?: Record<string, unknown> | null;
+  mood?: string | null;
  replies: ThoughtThread[];
 }> = z.object({
  id: z.string().uuid(),
@@ -138,6 +143,7 @@ export const ThoughtThreadSchema: z.ZodType<{
  createdAt: z.coerce.date(),
  updatedAt: z.coerce.date().nullable(),
  noteExtensions: z.record(z.string(), z.unknown()).nullish(),
+  mood: z.string().nullable().optional(),
  replies: z.lazy(() => z.array(ThoughtThreadSchema)),
 });