@meith/web 0.16.0

package/src/components/content/reply-form.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import type { UploadLimits } from '@meith/attachments/limits'
+import type { Draft } from '@meith/drafts'
+import { Alert, AlertDescription, cn, Disclosure } from '@meith/ui'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { createReplyAction } from '@/server/content-actions'
+
+import { FormError, SubmitButton } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+import { AttachmentField } from './attachment-field'
+import { ComposerIntents } from './composer-intents'
+import { ComposerRecovery } from './composer-recovery'
+import { MarkdownEditor } from './markdown-editor'
+
+export function ReplyForm({
+  threadId,
+  seenLastPostId,
+  prefill,
+  canSubscribe,
+  attachmentLimits,
+  draft,
+  collapsible = false,
+  toolbar = 'inline',
+  copy,
+}: {
+  threadId: number
+  seenLastPostId: number | null
+  prefill: string
+  canSubscribe: boolean
+  attachmentLimits: UploadLimits | null
+  draft: Draft | null
+  collapsible?: boolean
+  toolbar?: 'inline' | 'external'
+  copy: Copy
+}) {
+  const [state, action] = useActionState(createReplyAction, EMPTY_STATE)
+
+  const form = (
+    <form action={action} className="flex flex-col gap-3" noValidate>
+      <FormError message={state.error} />
+
+      {state.notice === 'saved' && (
+        <Alert tone="success">
+          <AlertDescription>{fromCopy(copy, 'composer.draftSaved')}</AlertDescription>
+        </Alert>
+      )}
+
+      <input type="hidden" name="threadId" value={threadId} />
+      {seenLastPostId !== null && (
+        <input
+          type="hidden"
+          name="seenLastPostId"
+          value={state.values?.seenLastPostId ?? seenLastPostId}
+        />
+      )}
+
+      <ComposerRecovery
+        storageKey={`meith:composer:reply:${threadId}`}
+        scope={{ threadId }}
+        serverUpdatedAt={draft?.updatedAt?.getTime() ?? 0}
+        copy={copy}
+      />
+
+      <MarkdownEditor
+        rows={collapsible ? 6 : 12}
+        required
+        defaultValue={state.values?.message ?? draft?.message ?? prefill}
+        preview={state.notice === 'preview' ? (state.preview ?? '') : undefined}
+        toolbar={toolbar}
+        {...(attachmentLimits !== null ? { attachTo: { kind: 'thread', threadId } } : {})}
+      />
+
+      {attachmentLimits !== null && <AttachmentField limits={attachmentLimits} />}
+
+      {canSubscribe && (
+        <label className="flex items-center gap-2 text-sm">
+          <input type="checkbox" name="subscribe" value="1" className="size-4 accent-primary" />
+          <span>{fromCopy(copy, 'composer.notifyReplies')}</span>
+        </label>
+      )}
+
+      <div className="flex flex-wrap items-center gap-2">
+        <SubmitButton className={collapsible ? 'w-auto' : 'w-full sm:w-auto'}>
+          {fromCopy(copy, 'composer.reply.submit')}
+        </SubmitButton>
+        <ComposerIntents />
+      </div>
+    </form>
+  )
+
+  if (!collapsible) return form
+
+  const forceOpen = state.error !== undefined || state.notice !== undefined || draft !== null
+
+  return (
+    <Disclosure
+      summary={fromCopy(copy, 'composer.reply.write')}
+      aside={
+        draft === null
+          ? fromCopy(copy, 'composer.reply.quick')
+          : fromCopy(copy, 'composer.reply.draftSaved')
+      }
+      className={cn(forceOpen && 'border-ring/40')}
+      {...(forceOpen ? { open: true } : {})}
+    >
+      {form}
+    </Disclosure>
+  )
+}

package/src/components/content/thanks-button.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { cn } from '@meith/ui'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { thankForPostAction } from '@/server/reputation-actions'
+
+import { formatFromCopy, fromCopy, useCopy } from '../shell/copy'
+
+export function ThanksButton({
+  postId,
+  authorUserId,
+  returnTo,
+  thanked,
+  count,
+}: {
+  postId: number
+  authorUserId: number
+  returnTo: string
+  thanked: boolean
+  count: number
+}) {
+  const [state, action] = useActionState(thankForPostAction, EMPTY_STATE)
+  const copy = useCopy()
+
+  return (
+    <form action={action} className="inline-flex items-center">
+      <input type="hidden" name="postId" value={postId} />
+      <input type="hidden" name="userId" value={authorUserId} />
+      <input type="hidden" name="returnTo" value={returnTo} />
+
+      <button
+        type="submit"
+        aria-pressed={thanked}
+        className={cn(
+          'inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-sm font-medium transition-colors',
+          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+          thanked
+            ? 'bg-moderation-approved/10 text-moderation-approved hover:bg-moderation-approved/20'
+            : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+        )}
+      >
+        <span aria-hidden="true">{thanked ? '★' : '☆'}</span>
+        {thanked
+          ? fromCopy(copy, 'composer.thanks.thanked')
+          : fromCopy(copy, 'composer.thanks.thanks')}
+        {count > 0 && (
+          <span className="tabular-nums opacity-70">
+            {count}
+            <span className="sr-only">
+              {' '}
+              {formatFromCopy(copy, 'composer.thanks.count', { count })}
+            </span>
+          </span>
+        )}
+      </button>
+
+      {state.error !== undefined && (
+        <span className="ml-2 text-xs text-destructive">{state.error}</span>
+      )}
+    </form>
+  )
+}

package/src/components/content/thread-rating.tsx

@@ -0,0 +1,143 @@
+import type { ThreadRating } from '@meith/polls'
+import { cn } from '@meith/ui'
+
+import { rateThreadAction } from '@/server/thread-rating-actions'
+
+import { type Copy, formatFromCopy, fromCopy } from '../shell/copy-record'
+
+const STAR_PATH = 'M10 1.6l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.21l-4.94 2.6.94-5.5-4-3.9 5.53-.8z'
+
+function Star({
+  fill,
+  gradientId,
+  className,
+}: {
+  fill: number
+  gradientId?: string
+  className?: string
+}) {
+  const clamped = Math.max(0, Math.min(1, fill))
+  const partial = clamped > 0 && clamped < 1 && gradientId !== undefined
+
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true" className={cn('size-4', className)}>
+      {partial && (
+        <defs>
+          <linearGradient id={gradientId}>
+            <stop offset={`${clamped * 100}%`} stopColor="currentColor" />
+            <stop offset={`${clamped * 100}%`} stopColor="transparent" />
+          </linearGradient>
+        </defs>
+      )}
+      <path
+        d={STAR_PATH}
+        fill={partial ? `url(#${gradientId})` : clamped >= 1 ? 'currentColor' : 'none'}
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+function Average({ value, threadId }: { value: number; threadId: number }) {
+  return (
+    <span className="flex items-center gap-0.5 text-thread-pinned">
+      {[0, 1, 2, 3, 4].map((index) => (
+        <Star key={index} fill={value - index} gradientId={`thread-${threadId}-star-${index}`} />
+      ))}
+    </span>
+  )
+}
+
+export function ThreadRatingForm({
+  threadId,
+  rating,
+  canRate,
+  copy,
+}: {
+  threadId: number
+  rating: ThreadRating
+  canRate: boolean
+  copy: Copy
+}) {
+  if (rating.count === 0 && !canRate) return null
+
+  return (
+    <section
+      aria-label={fromCopy(copy, 'thread.rating.section')}
+      className="flex flex-wrap items-center gap-x-4 gap-y-2"
+    >
+      <div className="flex items-center gap-2.5">
+        {rating.count === 0 ? (
+          <p className="text-sm text-muted-foreground">{fromCopy(copy, 'thread.rating.none')}</p>
+        ) : (
+          <>
+            <Average value={rating.average} threadId={threadId} />
+            <p className="text-sm text-muted-foreground">
+              {copy['thread.rating.outOfLead']}
+              <span className="font-medium text-foreground tabular-nums">
+                {copy['thread.rating.average']}
+              </span>
+              {copy['thread.rating.outOfTail']}
+              <span className="sr-only">{copy['thread.rating.from']}</span>
+              <span aria-hidden="true" className="tabular-nums">
+                {' · '}
+                {copy['thread.rating.countLabel']}
+              </span>
+            </p>
+          </>
+        )}
+      </div>
+
+      {canRate && (
+        <form action={rateThreadAction} className="flex flex-wrap items-center gap-2 text-sm">
+          <input type="hidden" name="threadId" value={threadId} />
+
+          <span id={`rate-${threadId}`} className="text-muted-foreground">
+            {rating.mine === null
+              ? fromCopy(copy, 'thread.rating.rateIt')
+              : fromCopy(copy, 'thread.rating.yours')}
+          </span>
+
+          <span
+            role="group"
+            aria-labelledby={`rate-${threadId}`}
+            className="flex items-center gap-0.5"
+          >
+            {[1, 2, 3, 4, 5].map((value) => {
+              const chosen = rating.mine !== null && value <= rating.mine
+
+              return (
+                <button
+                  key={value}
+                  type="submit"
+                  name="rating"
+                  value={value}
+                  aria-label={
+                    rating.mine === value
+                      ? formatFromCopy(copy, 'thread.rating.currentValue', { value })
+                      : formatFromCopy(copy, 'thread.rating.rateValue', { value })
+                  }
+                  className={cn(
+                    'inline-flex size-7 items-center justify-center rounded-md transition-colors',
+                    'hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+                    chosen ? 'text-thread-pinned' : 'text-muted-foreground',
+                  )}
+                >
+                  <Star fill={chosen ? 1 : 0} className="size-5" />
+                </button>
+              )
+            })}
+          </span>
+
+          {rating.mine !== null && (
+            <span className="text-xs text-muted-foreground tabular-nums">
+              {copy['thread.rating.mine']}
+            </span>
+          )}
+        </form>
+      )}
+    </section>
+  )
+}