muse/web/components/settings.tsx

"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { Bell, BellOff, Mail } from "lucide-react";

import { api, type Me } from "@/lib/api";
import { useToast } from "@/components/toast";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/** Your own notification settings. Not behind admin on purpose: an address
 *  you cannot change yourself turns into someone else's chore. */
export function Settings({ me, refresh }: { me: Me; refresh: () => void }) {
  const toast = useToast();
  const [email, setEmail] = React.useState(me.email ?? "");
  const [notify, setNotify] = React.useState(me.notify ?? true);
  const [busy, setBusy] = React.useState(false);

  const dirty = email !== (me.email ?? "") || notify !== (me.notify ?? true);

  const save = async () => {
    setBusy(true);
    try {
      await api.settings({ email: email.trim(), notify });
      toast("Settings saved");
      refresh();
    } catch (e) {
      toast((e as Error).message, true);
    }
    setBusy(false);
  };

  const googleImplicit = me.provider === "google" && !me.email;
  // MUSE_AUTH=off means there is no account to attach a preference to, and
  // PATCH /api/me would 401. Say so rather than offering a form that fails.
  const anonymous = !me.user;

  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      className="flex flex-col gap-4"
    >
      {anonymous && (
        <div className="card rounded-panel border-warn/40 p-4 text-callout text-warn">
          Authentication is turned off on this instance, so there is no account to
          save preferences against. Set <code className="font-mono text-[12px]">MUSE_AUTH</code>{" "}
          to <code className="font-mono text-[12px]">github</code> or{" "}
          <code className="font-mono text-[12px]">google</code> to enable sign-in.
        </div>
      )}
      <section className="card rounded-panel p-5">
        <div className="mb-1 flex items-center gap-2">
          <Mail className="h-4 w-4 text-accent" />
          <h2 className="text-headline">Notifications</h2>
        </div>
        <p className="mb-4 max-w-[58ch] text-callout text-dim">
          muse can email you when a request lands in your library, or when a download
          finished but needs your call before it&rsquo;s filed.
        </p>

        {!me.mail_configured && (
          <div className="mb-4 rounded-card border border-warn/40 bg-[var(--surface)] p-3 text-callout text-warn">
            No SMTP server is configured on this instance, so nothing will actually be
            sent. Set <code className="font-mono text-[12px]">MUSE_SMTP_HOST</code> and{" "}
            <code className="font-mono text-[12px]">MUSE_SMTP_FROM</code> to turn it on.
          </div>
        )}

        <label className="flex max-w-md flex-col gap-1.5">
          <span className="text-caption uppercase tracking-[0.7px] text-dim">
            Where to write
          </span>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && dirty && save()}
            disabled={anonymous}
            placeholder={googleImplicit ? me.user ?? "you@example.com" : "you@example.com"}
            className="focus-ring rounded-control border border-edge-hi bg-transparent px-3 py-2
                       text-body outline-none transition focus:border-accent-line
                       disabled:opacity-45"
          />
          {googleImplicit && (
            <span className="text-caption text-dim">
              Blank uses your Google address, {me.user}.
            </span>
          )}
        </label>

        <button
          onClick={() => setNotify(!notify)}
          role="switch"
          aria-checked={notify}
          disabled={anonymous}
          className="focus-ring mt-4 flex cursor-pointer items-center gap-3 rounded-card
                     text-left disabled:cursor-default disabled:opacity-45"
        >
          <span
            className={cn(
              "relative h-[26px] w-[44px] shrink-0 rounded-pill border transition-colors",
              notify ? "border-accent-line bg-accent-soft" : "border-edge bg-faint",
            )}
          >
            <motion.span
              layout
              transition={{ type: "spring", stiffness: 520, damping: 34 }}
              className={cn(
                "absolute top-[2px] h-[20px] w-[20px] rounded-full",
                notify ? "left-[21px] bg-accent" : "left-[2px] bg-dim",
              )}
            />
          </span>
          <span className="flex items-center gap-1.5 text-body">
            {notify ? (
              <Bell className="h-3.5 w-3.5 text-accent" />
            ) : (
              <BellOff className="h-3.5 w-3.5 text-dim" />
            )}
            {notify ? "Email me about my requests" : "Don't email me"}
          </span>
        </button>

        <div className="mt-5">
          <Button onClick={save} disabled={!dirty || busy || anonymous}>
            {busy ? "Saving…" : "Save"}
          </Button>
        </div>
      </section>

      <section className="card rounded-panel p-5">
        <h2 className="mb-3 text-headline">Account</h2>
        {anonymous ? (
          <p className="text-callout text-dim">
            Nobody is signed in — every request is anonymous and every role check
            reports admin.
          </p>
        ) : (
          <dl className="grid gap-x-6 gap-y-2 text-callout sm:grid-cols-[auto_1fr]">
            <Field k="Signed in as" v={me.display || me.user || "—"} />
            <Field k="Identity" v={`${me.user} · ${me.provider ?? "—"}`} />
            <Field k="Role" v={me.role ?? "—"} />
            <Field
              k="Requests this month"
              v={
                me.quota
                  ? `${me.usage?.requests ?? 0} of ${me.quota}`
                  : `${me.usage?.requests ?? 0} · no limit`
              }
            />
          </dl>
        )}
        <p className="mt-4 max-w-[58ch] text-caption text-dim">
          muse is the front door. Playback, playlists and listening history live in
          Navidrome — this only decides what gets into the library.
        </p>
      </section>
    </motion.div>
  );
}

function Field({ k, v }: { k: string; v: string }) {
  return (
    <>
      <dt className="text-dim">{k}</dt>
      <dd className="clamp1">{v}</dd>
    </>
  );
}