@kelpie/ui 0.1.0

package/src/pages/account/PreferencesPage.tsx

@@ -0,0 +1,224 @@
+import { THEME_PREFERENCES } from '@kelpie/schemas'
+import type { AccountPreferences, ThemePreference } from '@kelpie/schemas'
+import { useState } from 'react'
+import type { FormEvent, ReactNode } from 'react'
+
+import {
+  useAccountPreferences,
+  useTheme,
+  useUpdateAccountPreferences,
+} from '../../api/resources/account.ts'
+import { EntitySearch } from '../../components/EntitySearch.tsx'
+import { PageHeader } from '../../components/PageHeader.tsx'
+import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
+import { Field } from './Field.tsx'
+
+/**
+ * Appearance, timezone, and what to email.
+ *
+ * Ported from the mockup's Preferences page. Appearance is applied the moment it
+ * is clicked, because it is visible in the click; everything else waits for the
+ * save button, as the mockup does.
+ */
+
+const THEME_LABELS: Readonly<Record<ThemePreference, string>> = {
+  system: 'System',
+  light: 'Light',
+  dark: 'Dark',
+}
+
+/**
+ * Every zone this runtime's ICU knows, matching what the server's
+ * `timezoneSchema` will accept. Falls back to the zones the mockup offered if
+ * `Intl.supportedValuesOf` is missing, for a browser old enough to lack it.
+ *
+ * `UTC` is prepended because `supportedValuesOf` omits it in some engines even
+ * though ECMA-402 guarantees `Intl.DateTimeFormat` accepts it as a zone name.
+ * Without this, a very common choice would be searchable only by accident of
+ * already being the stored value.
+ */
+const ALL_TIMEZONES: readonly string[] = (() => {
+  try {
+    return ['UTC', ...Intl.supportedValuesOf('timeZone')]
+  } catch {
+    return [
+      'UTC',
+      'Australia/Sydney',
+      'Australia/Melbourne',
+      'America/Los_Angeles',
+      'America/New_York',
+      'Europe/London',
+    ]
+  }
+})()
+
+export function PreferencesPage(): React.JSX.Element {
+  const { preferences, isLoading, error } = useAccountPreferences()
+
+  if (error !== null) {
+    return <ErrorPanel error={error} />
+  }
+
+  if (isLoading || preferences === undefined) {
+    return <LoadingPanel />
+  }
+
+  return <PreferencesForm preferences={preferences} />
+}
+
+function PreferencesForm({
+  preferences,
+}: {
+  readonly preferences: AccountPreferences
+}): React.JSX.Element {
+  const { theme, setTheme } = useTheme()
+  const update = useUpdateAccountPreferences()
+  const [timezone, setTimezone] = useState(preferences.timezone)
+  const [emailDigest, setEmailDigest] = useState(preferences.emailDigest)
+  const [mentionEmails, setMentionEmails] = useState(preferences.mentionEmails)
+  const [productUpdates, setProductUpdates] = useState(preferences.productUpdates)
+  const [saved, setSaved] = useState(false)
+
+  const zones = ALL_TIMEZONES.includes(timezone) ? ALL_TIMEZONES : [timezone, ...ALL_TIMEZONES]
+
+  function save(event: FormEvent): void {
+    event.preventDefault()
+    setSaved(false)
+
+    update
+      // Theme is left out deliberately: it is already saved, by the control that
+      // changed it. Sending the current one back would undo a click made while
+      // this form sat open.
+      .runAsync({ timezone, emailDigest, mentionEmails, productUpdates })
+      .then(() => {
+        setSaved(true)
+      })
+      .catch(() => undefined)
+  }
+
+  return (
+    <div className="animate-slide-in space-y-6">
+      <PageHeader
+        title="Preferences"
+        description="Appearance, timezone, and email notifications."
+      />
+
+      <form onSubmit={save} className="space-y-5">
+        <fieldset>
+          <legend className="mb-1.5 text-[12px] font-medium text-ink">Appearance</legend>
+          <div className="inline-flex rounded-md border border-border p-0.5">
+            {THEME_PREFERENCES.map((value) => (
+              <button
+                key={value}
+                type="button"
+                onClick={() => {
+                  setTheme(value)
+                }}
+                className={[
+                  'rounded px-2.5 py-1 text-[12px] transition',
+                  theme === value
+                    ? 'bg-surface-sunken font-medium text-ink'
+                    : 'text-ink-muted hover:text-ink',
+                ].join(' ')}
+              >
+                {THEME_LABELS[value]}
+              </button>
+            ))}
+          </div>
+          <p className="mt-1 text-[11px] text-ink-faint">
+            Saved to your account as you click, and applied in every browser you sign in to.
+          </p>
+        </fieldset>
+
+        <div className="max-w-md">
+          <Field
+            label="Timezone"
+            hint="Stored on your account. Kelpie does not format dates by it yet."
+          >
+            <EntitySearch
+              options={zones.map((zone) => ({ id: zone, label: zone }))}
+              value={timezone}
+              onChange={setTimezone}
+              placeholder="Search time zones…"
+              limit={20}
+              required
+              size="md"
+            />
+          </Field>
+        </div>
+
+        <fieldset className="space-y-2">
+          <legend className="text-[12px] font-medium text-ink">Email notifications</legend>
+          {/* Said plainly rather than left to be inferred from a toggle that
+              looks live. Kelpie sends no notification email yet; these record
+              the answer for when it does. */}
+          <p className="max-w-lg text-[11px] text-ink-faint">
+            Kelpie does not send these emails yet. Your choices are saved and will apply when it
+            does.
+          </p>
+          <Toggle
+            checked={emailDigest}
+            onChange={setEmailDigest}
+            label="Weekly digest"
+            description="Summary of deals, decisions, and activity."
+          />
+          <Toggle
+            checked={mentionEmails}
+            onChange={setMentionEmails}
+            label="Mentions and assignments"
+            description="When someone mentions you or assigns a Plan item."
+          />
+          <Toggle
+            checked={productUpdates}
+            onChange={setProductUpdates}
+            label="Product updates"
+            description="Occasional notes about Kelpie releases."
+          />
+        </fieldset>
+
+        {update.error !== null && (
+          <div className="max-w-lg">
+            <ErrorPanel error={update.error} />
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={update.isPending}
+          className="rounded-md bg-accent px-3 py-1.5 text-[12px] font-medium text-accent-fg transition hover:bg-accent-hover disabled:opacity-50"
+        >
+          {update.isPending ? 'Saving…' : saved ? 'Saved' : 'Save preferences'}
+        </button>
+      </form>
+    </div>
+  )
+}
+
+function Toggle({
+  checked,
+  onChange,
+  label,
+  description,
+}: {
+  readonly checked: boolean
+  readonly onChange: (value: boolean) => void
+  readonly label: string
+  readonly description: string
+}): ReactNode {
+  return (
+    <label className="flex max-w-lg cursor-pointer items-start gap-3 rounded-md border border-border px-3 py-2.5">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(event) => {
+          onChange(event.target.checked)
+        }}
+        className="mt-0.5 h-4 w-4 rounded border-border text-accent focus:ring-accent/20"
+      />
+      <span>
+        <span className="block text-[13px] font-medium text-ink">{label}</span>
+        <span className="mt-0.5 block text-[12px] text-ink-muted">{description}</span>
+      </span>
+    </label>
+  )
+}

package/src/pages/account/ProfilePage.tsx

@@ -0,0 +1,147 @@
+import type { Account } from '@kelpie/schemas'
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+
+import { useAccount, useUpdateAccount } from '../../api/resources/account.ts'
+import { PageHeader } from '../../components/PageHeader.tsx'
+import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
+import { initialsOf } from '../../lib/names.ts'
+import { Field } from './Field.tsx'
+
+/**
+ * The account's name and address.
+ *
+ * Ported from the mockup's Profile page. Two differences now that there is an
+ * API behind it: the address is unique across Kelpie, so a save can be refused,
+ * and changing it changes what this person signs in with, so the service (and
+ * this form) asks for the current password before it takes effect.
+ *
+ * The form saves explicitly rather than per keystroke, like workspace settings:
+ * a half-typed address is a different account, and committing one on every
+ * character would be a stream of them.
+ */
+
+export function ProfilePage(): React.JSX.Element {
+  const { account, isLoading, error } = useAccount()
+
+  if (error !== null) {
+    return <ErrorPanel error={error} />
+  }
+
+  if (isLoading || account === undefined) {
+    return <LoadingPanel />
+  }
+
+  return <ProfileForm key={account.id} account={account} />
+}
+
+function ProfileForm({ account }: { readonly account: Account }): React.JSX.Element {
+  const update = useUpdateAccount()
+  const [name, setName] = useState(account.name)
+  const [email, setEmail] = useState(account.email)
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [saved, setSaved] = useState(false)
+  const [localError, setLocalError] = useState<string | null>(null)
+
+  const trimmedEmail = email.trim()
+  const emailChanged = trimmedEmail !== account.email
+
+  function save(event: FormEvent): void {
+    event.preventDefault()
+    setSaved(false)
+
+    if (emailChanged && currentPassword.length === 0) {
+      setLocalError('Enter your current password to change your email.')
+      return
+    }
+
+    setLocalError(null)
+
+    const trimmedName = name.trim()
+
+    update
+      .runAsync({
+        ...(trimmedName === account.name ? {} : { name: trimmedName }),
+        ...(emailChanged ? { email: trimmedEmail, currentPassword } : {}),
+      })
+      .then((updated) => {
+        // The service lowercases the address it stored. Showing what was typed
+        // instead would leave the field disagreeing with the account.
+        setEmail(updated.email)
+        setName(updated.name)
+        setCurrentPassword('')
+        setSaved(true)
+      })
+      .catch(() => undefined)
+  }
+
+  return (
+    <div className="animate-slide-in space-y-6">
+      <PageHeader title="Profile" description="Your name and email across every workspace." />
+
+      <form onSubmit={save} className="space-y-4">
+        <div className="flex items-center gap-3">
+          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-accent text-[13px] font-medium text-accent-fg">
+            {initialsOf(name)}
+          </div>
+          <p className="text-[12px] text-ink-muted">Initials are derived from your name.</p>
+        </div>
+
+        <Field label="Name">
+          <input
+            value={name}
+            onChange={(event) => {
+              setName(event.target.value)
+            }}
+            required
+            className="w-full max-w-md rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
+          />
+        </Field>
+
+        <Field label="Email" hint="This is the address you sign in with.">
+          <input
+            type="email"
+            value={email}
+            onChange={(event) => {
+              setEmail(event.target.value)
+            }}
+            required
+            autoComplete="email"
+            className="w-full max-w-md rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
+          />
+        </Field>
+
+        {emailChanged && (
+          <Field label="Current password" hint="Required to change the address you sign in with.">
+            <input
+              type="password"
+              value={currentPassword}
+              onChange={(event) => {
+                setCurrentPassword(event.target.value)
+              }}
+              autoComplete="current-password"
+              required
+              className="w-full max-w-md rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
+            />
+          </Field>
+        )}
+
+        {localError !== null && <p className="text-[12px] text-danger">{localError}</p>}
+
+        {update.error !== null && (
+          <div className="max-w-xl">
+            <ErrorPanel error={update.error} />
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={update.isPending}
+          className="rounded-md bg-accent px-3.5 py-2 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover disabled:opacity-50"
+        >
+          {update.isPending ? 'Saving…' : saved ? 'Saved' : 'Save changes'}
+        </button>
+      </form>
+    </div>
+  )
+}

package/src/pages/account/SecurityPage.tsx

@@ -0,0 +1,237 @@
+import { MINIMUM_PASSWORD_LENGTH } from '@kelpie/schemas'
+import type { AccountSession } from '@kelpie/schemas'
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+
+import {
+  useAccountSessions,
+  useChangePassword,
+  useRevokeAccountSession,
+} from '../../api/resources/account.ts'
+import { PageHeader } from '../../components/PageHeader.tsx'
+import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
+import { formatDateTime } from '../../lib/dates.ts'
+
+/**
+ * Password and signed-in devices.
+ *
+ * Ported from the mockup's Security page against the endpoints that already
+ * existed. Two things the mockup could not show: changing the password really
+ * does end every other session, so the list below refetches, and the caller's
+ * own row cannot be revoked because signing yourself out from here is what the
+ * account menu is for.
+ */
+
+export function SecurityPage(): React.JSX.Element {
+  return (
+    <div className="animate-slide-in space-y-8">
+      <PageHeader title="Security" description="Your password and where you are signed in." />
+      <ChangePasswordForm />
+      <SessionList />
+    </div>
+  )
+}
+
+const inputClass =
+  'w-full rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20'
+
+function ChangePasswordForm(): React.JSX.Element {
+  const change = useChangePassword()
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmation, setConfirmation] = useState('')
+  const [localError, setLocalError] = useState<string | null>(null)
+  const [changed, setChanged] = useState(false)
+
+  /**
+   * The two rules the browser can decide on its own. Length is checked here as
+   * well as by the service so the reader learns it before submitting; the
+   * confirmation never reaches the API, which has nothing to compare it to.
+   */
+  function localProblem(): string | null {
+    if (currentPassword.length === 0 || newPassword.length === 0) {
+      return 'Enter your current and new password.'
+    }
+
+    if (newPassword.length < MINIMUM_PASSWORD_LENGTH) {
+      return `New password must be at least ${String(MINIMUM_PASSWORD_LENGTH)} characters.`
+    }
+
+    return newPassword === confirmation ? null : 'New password and confirmation do not match.'
+  }
+
+  function submit(event: FormEvent): void {
+    event.preventDefault()
+    setChanged(false)
+
+    const problem = localProblem()
+
+    setLocalError(problem)
+
+    if (problem !== null) {
+      return
+    }
+
+    change
+      .runAsync({ currentPassword, newPassword })
+      .then(() => {
+        setCurrentPassword('')
+        setNewPassword('')
+        setConfirmation('')
+        setChanged(true)
+      })
+      .catch(() => undefined)
+  }
+
+  return (
+    <form onSubmit={submit} className="space-y-3">
+      <h2 className="text-[14px] font-semibold text-ink">Change password</h2>
+      <p className="max-w-md text-[12px] text-ink-muted">
+        Changing your password signs you out everywhere except this browser.
+      </p>
+
+      <label className="block max-w-md">
+        <span className="mb-1.5 block text-[12px] font-medium text-ink">Current password</span>
+        <input
+          type="password"
+          value={currentPassword}
+          onChange={(event) => {
+            setCurrentPassword(event.target.value)
+          }}
+          autoComplete="current-password"
+          className={inputClass}
+        />
+      </label>
+
+      <label className="block max-w-md">
+        <span className="mb-1.5 block text-[12px] font-medium text-ink">New password</span>
+        <input
+          type="password"
+          value={newPassword}
+          onChange={(event) => {
+            setNewPassword(event.target.value)
+          }}
+          autoComplete="new-password"
+          className={inputClass}
+        />
+        <span className="mt-1 block text-[11px] text-ink-faint">
+          At least {MINIMUM_PASSWORD_LENGTH} characters.
+        </span>
+      </label>
+
+      <label className="block max-w-md">
+        <span className="mb-1.5 block text-[12px] font-medium text-ink">Confirm new password</span>
+        <input
+          type="password"
+          value={confirmation}
+          onChange={(event) => {
+            setConfirmation(event.target.value)
+          }}
+          autoComplete="new-password"
+          className={inputClass}
+        />
+      </label>
+
+      {localError !== null && <p className="text-[12px] text-danger">{localError}</p>}
+      {change.error !== null && (
+        <div className="max-w-md">
+          <ErrorPanel error={change.error} />
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={change.isPending}
+        className="rounded-md bg-accent px-3.5 py-2 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover disabled:opacity-50"
+      >
+        {change.isPending ? 'Updating…' : changed ? 'Password updated' : 'Update password'}
+      </button>
+    </form>
+  )
+}
+
+function SessionList(): React.JSX.Element {
+  const { sessions, isLoading, error } = useAccountSessions()
+  const revoke = useRevokeAccountSession()
+
+  return (
+    <section>
+      <h2 className="mb-3 text-[14px] font-semibold text-ink">Sessions</h2>
+
+      {error !== null && <ErrorPanel error={error} />}
+      {error === null && isLoading && <LoadingPanel label="Loading sessions…" />}
+
+      {/* The wrapper scrolls rather than clips, like the team tables: a narrow
+          window must not hide the column with the Revoke button in it. */}
+      {error === null && !isLoading && (
+        <div className="overflow-x-auto rounded-md border border-border">
+          <table className="w-full text-left text-[13px]">
+            <thead>
+              <tr className="border-b border-border bg-surface text-[11px] font-semibold tracking-wide text-ink-muted uppercase">
+                <th className="px-4 py-2.5">Device</th>
+                <th className="px-4 py-2.5">Location</th>
+                <th className="px-4 py-2.5">Last active</th>
+                <th className="px-4 py-2.5 text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {sessions.map((session) => (
+                <SessionRow
+                  key={session.id}
+                  session={session}
+                  onRevoke={() => {
+                    revoke.run(session.id)
+                  }}
+                  isRevoking={revoke.isPending}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {revoke.error !== null && (
+        <div className="mt-3 max-w-xl">
+          <ErrorPanel error={revoke.error} />
+        </div>
+      )}
+    </section>
+  )
+}
+
+function SessionRow({
+  session,
+  onRevoke,
+  isRevoking,
+}: {
+  readonly session: AccountSession
+  readonly onRevoke: () => void
+  readonly isRevoking: boolean
+}): React.JSX.Element {
+  return (
+    <tr className="border-b border-border last:border-0">
+      <td className="px-4 py-3">
+        <div className="font-medium break-all text-ink">{session.device ?? 'Unknown device'}</div>
+        {session.current && <span className="text-[11px] font-medium text-success">This device</span>}
+      </td>
+      {/* Always unknown today: the service records the User-Agent and nothing
+          derives a location from the request. The column stays because the field
+          is on the wire and a session says where it is from once something can
+          tell. */}
+      <td className="px-4 py-3 text-ink-muted">{session.location ?? 'Unknown'}</td>
+      <td className="px-4 py-3 text-ink-muted">{formatDateTime(session.lastActiveAt)}</td>
+      <td className="px-4 py-3 text-right">
+        {!session.current && (
+          <button
+            type="button"
+            onClick={onRevoke}
+            disabled={isRevoking}
+            className="text-[12px] font-medium text-danger hover:underline disabled:opacity-50"
+          >
+            Revoke
+          </button>
+        )}
+      </td>
+    </tr>
+  )
+}