@stacksjs/defaults 0.75.89 → 0.75.91

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.89",
+  "version": "0.75.91",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "^0.75.89",
+    "@stacksjs/mobile": "^0.75.91",
     "@stacksjs/sanitizer": "^0.2.395",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",

package/resources/components/Dashboard/Feedback/FeedbackForm.stx

@@ -0,0 +1,278 @@
+{{--
+  What an external reviewer sees at `/feedback/{token}`.
+
+  Deliberately standalone rather than built out of the Dashboard UI
+  components: the person opening this has no account and no reason to load the
+  dashboard's bundle, and the closest precedent (MagicLink, the other public
+  token page) is plain markup for the same reason.
+
+  The link is never validated before a submit, and cannot be. Telling the page
+  up front whether a token is good would need a read endpoint for feedback
+  tokens, which is exactly what the capability design refuses - the token may
+  add one card and learn nothing. So the form always renders and the verdict
+  arrives with the first submit (stacksjs/stacks#2872).
+--}}
+
+<script client>
+// All four arrive as strings: they are the action's own constants, decided
+// server-side so the limits the reviewer types against are the ones the
+// submission is judged by, and a client script cannot read them itself.
+const maxTitle = useReactiveProp('maxTitle', '300')
+const maxDescription = useReactiveProp('maxDescription', '10000')
+const maxBytes = useReactiveProp('maxBytes', '5242880')
+const accept = useReactiveProp('accept', 'image/png,image/jpeg,image/webp,image/gif')
+const route = useRoute()
+const picker = useRef<HTMLInputElement>('feedbackScreenshotInput')
+
+/** ready | sending | filed | dead */
+const status = state('ready')
+const title = state('')
+const description = state('')
+const error = state('')
+const screenshot = state<File | null>(null)
+const preview = state('')
+
+const sizeLimit = derived(() => Number(maxBytes()) || 5 * 1024 * 1024)
+const acceptedTypes = derived(() => accept().split(',').map(type => type.trim()).filter(Boolean))
+
+function megabytes(bytes: number): string {
+  return `${Math.round((bytes / (1024 * 1024)) * 10) / 10} MB`
+}
+
+/**
+ * Hold a chosen screenshot, or say why it cannot be held.
+ *
+ * Checked here as well as on the server, so a reviewer finds out before
+ * uploading five megabytes rather than after. The server checks the bytes
+ * themselves and is the one that decides; this only saves the round trip, so
+ * it reads the declared type, which is all a browser offers.
+ */
+function choose(file: File | null | undefined): void {
+  releasePreview()
+
+  if (!file) {
+    screenshot.set(null)
+    return
+  }
+
+  if (!acceptedTypes().includes(file.type)) {
+    screenshot.set(null)
+    error.set('Attach a PNG, JPEG, WebP or GIF image.')
+    return
+  }
+
+  if (file.size > sizeLimit()) {
+    screenshot.set(null)
+    error.set(`A screenshot must be ${megabytes(sizeLimit())} or smaller. That one is ${megabytes(file.size)}.`)
+    return
+  }
+
+  error.set('')
+  screenshot.set(file)
+  preview.set(URL.createObjectURL(file))
+}
+
+function releasePreview(): void {
+  const url = preview()
+  if (url) {
+    // Each object URL pins the whole file in memory until it is revoked, and
+    // somebody filing several reports in a row would pin every screenshot
+    // they had chosen and changed their mind about.
+    URL.revokeObjectURL(url)
+    preview.set('')
+  }
+}
+
+function pick(event: Event): void {
+  choose((event.target as HTMLInputElement).files?.[0])
+}
+
+function drop(event: DragEvent): void {
+  choose(event.dataTransfer?.files?.[0])
+}
+
+function paste(event: ClipboardEvent): void {
+  // A screenshot usually arrives on the clipboard rather than as a file on
+  // disk, so pasting into the form is the shortest path there is.
+  const file = event.clipboardData?.files?.[0]
+  if (file)
+    choose(file)
+}
+
+function clear(): void {
+  releasePreview()
+  screenshot.set(null)
+  if (picker.current)
+    picker.current.value = ''
+}
+
+function canSubmit() {
+  return status() !== 'sending' && title().trim().length > 0
+}
+
+async function submit() {
+  if (!canSubmit())
+    return
+
+  status.set('sending')
+  error.set('')
+
+  try {
+    // Multipart whether or not a file came with it. The action reads its
+    // fields through `request.all()`, which merges a form body the same way
+    // it merges JSON, so one shape covers both.
+    const body = new FormData()
+    body.set('title', title().trim())
+    if (description().trim())
+      body.set('description', description().trim())
+    const file = screenshot()
+    if (file)
+      body.set('screenshot', file, file.name || 'screenshot')
+
+    const reply = await fetch(`/api/feedback/${encodeURIComponent(String(route.params.token || ''))}`, {
+      method: 'POST',
+      body,
+    })
+    const payload = await reply.json().catch(() => ({}))
+
+    if (reply.ok) {
+      releasePreview()
+      status.set('filed')
+      return
+    }
+
+    // 404 is the link itself: unknown, revoked or expired, all answered the
+    // same so a guessed token learns nothing. Retrying cannot help, so the
+    // form goes away rather than inviting the reviewer to type it all again.
+    // A 400 is about this submission, so the fields are kept and the reason
+    // shown above them.
+    if (reply.status === 404) {
+      status.set('dead')
+      return
+    }
+
+    status.set('ready')
+    error.set(String(payload.message || payload.error || 'That did not go through. Try again in a moment.'))
+  }
+  catch {
+    status.set('ready')
+    error.set('Could not reach the server. Check your connection and try again.')
+  }
+}
+
+function another() {
+  title.set('')
+  description.set('')
+  error.set('')
+  clear()
+  status.set('ready')
+}
+</script>
+
+<template>
+  <main class="flex items-center justify-center px-4 py-12 min-h-[100dvh] bg-neutral-50 dark:bg-neutral-950">
+    <div class="max-w-xl w-full">
+      <div :if="status() === 'dead'" class="p-8 text-center bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800">
+        <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-red-100 dark:bg-red-900/30 rounded-full">
+          <span class="h-6 w-6 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></span>
+        </div>
+        <h1 class="mb-2 font-semibold text-xl text-neutral-900 tracking-tight dark:text-white">This feedback link is not valid</h1>
+        <p class="text-[15px] text-neutral-500 dark:text-neutral-400">
+          It may have been turned off, or it may have expired. Ask whoever sent it for a fresh one.
+        </p>
+      </div>
+
+      <div :else-if="status() === 'filed'" class="p-8 text-center bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800">
+        <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-green-100 dark:bg-green-900/30 rounded-full">
+          <span class="h-6 w-6 text-green-600 dark:text-green-400 i-hugeicons-checkmark-circle-02"></span>
+        </div>
+        <h1 class="mb-2 font-semibold text-xl text-neutral-900 tracking-tight dark:text-white">Thank you</h1>
+        <p class="mb-6 text-[15px] text-neutral-500 dark:text-neutral-400">Your feedback is on the board.</p>
+        <button type="button" @click="another" class="px-5 py-2.5 font-medium text-sm text-white bg-neutral-900 rounded-lg transition-transform dark:bg-white dark:text-neutral-900 active:scale-[0.98]">
+          Send another
+        </button>
+      </div>
+
+      <div :else>
+        <div class="mb-6">
+          <h1 class="font-semibold text-2xl text-neutral-900 tracking-tight dark:text-white">Send feedback</h1>
+          <p class="mt-2 text-[15px] text-neutral-500 dark:text-neutral-400">
+            One thing per message, so each one can be picked up on its own.
+          </p>
+        </div>
+
+        <form @submit.prevent="submit" @paste="paste($event)" class="p-6 bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800 shadow-black/5 shadow-sm">
+          <div :if="error()" role="alert" class="flex gap-2 items-center mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
+            <span class="h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></span>
+            <p class="text-red-600 text-sm dark:text-red-400">{{ error() }}</p>
+          </div>
+
+          <label class="block mb-4">
+            <span class="block mb-1.5 font-medium text-neutral-700 text-sm dark:text-neutral-200">What happened</span>
+            <input
+              type="text"
+              x-model="title"
+              :maxlength="maxTitle()"
+              :disabled="status() === 'sending'"
+              required
+              placeholder="A short summary"
+              class="block px-3 py-2.5 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-neutral-300 rounded-lg transition-colors dark:border-neutral-600 placeholder:text-neutral-400 hover:border-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+            />
+          </label>
+
+          <label class="block mb-4">
+            <span class="block mb-1.5 font-medium text-neutral-700 text-sm dark:text-neutral-200">Details <span class="font-normal text-neutral-400">(optional)</span></span>
+            <textarea
+              x-model="description"
+              rows="6"
+              :maxlength="maxDescription()"
+              :disabled="status() === 'sending'"
+              placeholder="Where you were, what you expected, and what you got instead"
+              class="block px-3 py-2.5 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-neutral-300 rounded-lg resize-y transition-colors dark:border-neutral-600 placeholder:text-neutral-400 hover:border-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+            ></textarea>
+          </label>
+
+          <div class="mb-5">
+            <span class="block mb-1.5 font-medium text-neutral-700 text-sm dark:text-neutral-200">Screenshot <span class="font-normal text-neutral-400">(optional)</span></span>
+
+            <div :if="screenshot()" class="flex gap-3 items-center p-3 bg-neutral-50 dark:bg-neutral-800/50 border border-neutral-200 rounded-lg dark:border-neutral-700">
+              <img :src="preview()" alt="The screenshot you chose" class="h-14 w-14 bg-white dark:bg-neutral-900 border border-neutral-200 rounded object-cover dark:border-neutral-700" />
+              <span class="flex-1 min-w-0 text-neutral-600 text-sm truncate dark:text-neutral-300">{{ screenshot()?.name || 'Pasted image' }}</span>
+              <button type="button" @click="clear" class="flex-shrink-0 px-2.5 py-1.5 font-medium text-neutral-600 text-xs dark:text-neutral-300 rounded-md hover:bg-neutral-200 dark:hover:bg-neutral-700">
+                Remove
+              </button>
+            </div>
+
+            <label :else class="flex flex-col items-center justify-center px-4 py-6 text-center border border-neutral-300 border-dashed rounded-lg cursor-pointer transition-colors dark:border-neutral-600 hover:border-blue-400 dark:hover:border-blue-600" @dragover.prevent @drop.prevent="drop($event)">
+              <span class="h-6 w-6 text-neutral-400 i-hugeicons-image-upload"></span>
+              <span class="mt-2 font-medium text-neutral-700 text-sm dark:text-neutral-200">Choose an image, drop it here, or paste it</span>
+              <span class="mt-1 text-neutral-400 text-xs">PNG, JPEG, WebP or GIF, up to {{ megabytes(sizeLimit()) }}</span>
+              <input
+                ref="feedbackScreenshotInput"
+                type="file"
+                name="screenshot"
+                class="sr-only"
+                :accept="accept()"
+                :disabled="status() === 'sending'"
+                @change="pick($event)"
+              />
+            </label>
+          </div>
+
+          <button
+            type="submit"
+            :disabled="!canSubmit()"
+            class="flex gap-2 items-center justify-center px-5 py-2.5 w-full font-medium text-sm text-white bg-neutral-900 rounded-lg transition-transform dark:bg-white dark:text-neutral-900 disabled:cursor-not-allowed disabled:opacity-50 active:scale-[0.99]"
+          >
+            <span :if="status() === 'sending'" class="h-4 w-4 animate-spin i-hugeicons-loading-03"></span>
+            <span>{{ status() === 'sending' ? 'Sending' : 'Send feedback' }}</span>
+          </button>
+        </form>
+
+        <p class="mt-4 text-center text-neutral-400 text-xs dark:text-neutral-500">
+          This link lets you send feedback. It does not sign you in, and it cannot read anything back.
+        </p>
+      </div>
+    </div>
+  </main>
+</template>

package/resources/components/Dashboard/Kanban/KanbanCardDialog.stx

@@ -8,6 +8,7 @@ const loadingCard = derived(() => kanban.loadingCard())
 const errorCard = derived(() => kanban.errorCard())
 const allLabels = derived(() => kanban.currentLabels())
 const cardComments = derived(() => openCard()?.comments ?? [])
+const cardAttachments = derived(() => openCard()?.attachments ?? [])
 const cardLabels = derived(() => openCard()?.labels ?? [])
 const cardAssignees = derived(() => openCard()?.assignees ?? [])
 const titleDraft = state('')
@@ -215,6 +216,15 @@ function initialsOf(name: string | null, email: string | null): string {
   return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase()
 }
 
+function formatBytes(bytes: number): string {
+  const value = Number(bytes)
+  if (!Number.isFinite(value) || value <= 0)
+    return ''
+  const units = ['B', 'KB', 'MB', 'GB']
+  const index = Math.min(units.length - 1, Math.floor(Math.log(value) / Math.log(1024)))
+  return `${Math.round((value / 1024 ** index) * 10) / 10} ${units[index]}`
+}
+
 function formatTimestamp(iso: string | null | undefined): string {
   if (!iso)
     return ''
@@ -270,6 +280,26 @@ function formatTimestamp(iso: string | null | undefined): string {
           ></textarea>
         </section>
 
+        <section :if="cardAttachments().length">
+          <h4 class="mb-2 font-medium text-zinc-500 text-xs tracking-wide uppercase">Attachments</h4>
+          <ul class="grid gap-3 grid-cols-2 sm:grid-cols-3">
+            <li :for="attachment in cardAttachments" class="overflow-hidden bg-white dark:bg-zinc-950 border border-zinc-200 rounded dark:border-zinc-800">
+              <!-- The URL is signed and expires, so it is opened in a new tab rather than linked anywhere that outlives the modal. -->
+              <a :if="attachment.url" :href="attachment.url" target="_blank" rel="noopener noreferrer" class="block">
+                <img :src="attachment.url" :alt="'Attachment ' + attachment.id" loading="lazy" class="h-28 w-full bg-zinc-50 dark:bg-zinc-900 object-cover" />
+              </a>
+              <!-- Listed even without a URL: a screenshot nobody can open is worth chasing, and is not the same as no screenshot. -->
+              <div :else class="flex items-center justify-center h-28 bg-zinc-50 dark:bg-zinc-900">
+                <span class="h-5 w-5 text-zinc-400 i-hugeicons-image-not-found-01"></span>
+              </div>
+              <div class="px-2 py-1.5">
+                <p class="text-[10px] text-zinc-500 dark:text-zinc-400" :text="attachment.mimeType"></p>
+                <p class="text-[10px] text-zinc-400" :text="formatBytes(attachment.sizeBytes)"></p>
+              </div>
+            </li>
+          </ul>
+        </section>
+
         <section>
           <h4 class="mb-2 font-medium text-zinc-500 text-xs tracking-wide uppercase">Activity</h4>
           <div class="mb-4">

package/resources/views/feedback/[token].stx

@@ -0,0 +1,25 @@
+<script server>
+import { FEEDBACK_ATTACHMENT_MAX_BYTES, FEEDBACK_ATTACHMENT_TYPES } from '../../../app/Actions/Dashboard/Feedback/feedback-attachment'
+import { FEEDBACK_MAX_DESCRIPTION, FEEDBACK_MAX_TITLE } from '../../../app/Actions/Dashboard/Feedback/feedback-token'
+
+/** The accepted image types, as the file picker's `accept` attribute wants them. */
+const accept = Object.keys(FEEDBACK_ATTACHMENT_TYPES).join(',')
+
+/**
+ * Where a feedback link lands, at `/feedback/{token}`.
+ *
+ * The logic sits in the component, like the other public token pages here.
+ *
+ * The limits are passed down because they are the action's own constants and
+ * a client script cannot read them. A `maxlength` the server disagrees with
+ * either stops the reviewer typing something that would have been accepted,
+ * or lets them write a report that is refused on submit.
+ *
+ * Nothing here looks the token up. Answering "is this link good?" before a
+ * submit would need a read endpoint for feedback tokens, and a capability
+ * that may add one card and learn nothing is the whole point of the design
+ * (stacksjs/stacks#2872).
+ */
+</script>
+
+<FeedbackForm maxTitle="{{ FEEDBACK_MAX_TITLE }}" maxDescription="{{ FEEDBACK_MAX_DESCRIPTION }}" maxBytes="{{ FEEDBACK_ATTACHMENT_MAX_BYTES }}" accept="{{ accept }}" />

package/routes/dashboard.ts

@@ -47,6 +47,21 @@ route.post('/api/contact', 'Actions/ContactAction').name('contact.send').skipCsr
 route.get('/api/team-invitation-links/{token}', 'Actions/Teams/ShowInvitationAction').rateLimit(30, 'minute')
 route.post('/api/team-invitations/{token}/accept', 'Actions/Teams/AcceptInvitationAction').middleware('auth').rateLimit(10, 'minute')
 
+// An external reviewer files feedback through a revocable link, without an
+// account: the only unauthenticated write the dashboard has. Outside every
+// `auth` group on purpose, and narrow because of it - the token names one
+// board, adds a card to it, and reads nothing.
+//
+// CSRF is skipped for the same reason `/api/contact` above skips it, and more
+// safely: there is no ambient authority to borrow here. The capability is the
+// high-entropy token in the path, not a cookie the browser attaches, so a
+// cross-site POST has nothing to forge with.
+//
+// Rate limited like the other token-bearing unauthenticated routes. The token
+// is 256 bits, so this is about stopping a flood of cards from a link that
+// leaked, not about guessing.
+route.post('/api/feedback/{token}', 'Actions/Dashboard/Feedback/FeedbackStoreAction').name('feedback.store').skipCsrf().rateLimit(10, 'minute')
+
 // ============================================================================
 // Storefront (anonymous cart + multi-step checkout)
 //

package/views/dashboard/stores/kanban.ts

@@ -28,6 +28,24 @@ interface CardComment {
   updatedAt: string | null
 }
 
+/**
+ * A file on a card. Today that is a screenshot from a feedback link
+ * (stacksjs/stacks#2872).
+ *
+ * `url` is signed and expires, because the bytes live on a private disk and
+ * there is no path a browser could fetch. It is null when one could not be
+ * minted, which is a listed attachment nobody can open and a different
+ * problem from a card with no attachment.
+ */
+interface CardAttachment {
+  id: number
+  uuid: string | null
+  mimeType: string
+  sizeBytes: number
+  createdAt: string | null
+  url: string | null
+}
+
 interface CardRecord {
   id: number
   uuid: string | null
@@ -53,6 +71,7 @@ interface CardDetail extends CardRecord {
   labels: CardLabel[]
   assignees: CardAssignee[]
   comments: CardComment[]
+  attachments: CardAttachment[]
 }
 
 interface ColumnRecord {
@@ -373,7 +392,10 @@ export const kanbanStore = defineStore('kanban', () => {
       ...c,
       labels: c.labels ?? [],
       assignees: c.assignees ?? [],
-      comments: [], // hydrated by openCardDetail
+      // Both hydrated by openCardDetail. A signed URL cannot be seeded from
+      // the board view, which never carries one.
+      comments: [],
+      attachments: [],
     }
   }
 
@@ -400,6 +422,7 @@ export const kanbanStore = defineStore('kanban', () => {
         labels?: CardLabel[]
         assignees?: CardAssignee[]
         comments?: CardComment[]
+        attachments?: CardAttachment[]
         error?: string
       }>(`/api/dashboard/kanban/cards/${cardId}`)
       if (data.error || !data.card)
@@ -409,6 +432,7 @@ export const kanbanStore = defineStore('kanban', () => {
         labels: data.labels ?? [],
         assignees: data.assignees ?? [],
         comments: data.comments ?? [],
+        attachments: data.attachments ?? [],
       })
     }
     catch (e) {