feedtack 0.3.0 → 0.3.1

package/README.md

@@ -74,6 +74,96 @@ class MySupabaseAdapter implements FeedtackAdapter {
 }
 ```
 
+## Adapter recipes
+
+The `FeedtackAdapter` interface has five methods. Here are copy-paste implementations for common backends.
+
+### Disk / JSON files (Node.js)
+
+Git-trackable feedback — each submission becomes a JSON file in `.feedback/`.
+
+```ts
+import type { FeedtackAdapter, FeedbackItem, FeedtackPayload } from 'feedtack'
+import { readdir, readFile, writeFile, mkdir } from 'node:fs/promises'
+import { join } from 'node:path'
+
+const DIR = '.feedback'
+
+class DiskAdapter implements FeedtackAdapter {
+  async submit(payload: FeedtackPayload) {
+    await mkdir(DIR, { recursive: true })
+    const item: FeedbackItem = { payload, replies: [], resolutions: [], archives: [] }
+    await writeFile(join(DIR, `${payload.id}.json`), JSON.stringify(item, null, 2))
+  }
+
+  async reply(feedbackId: string, reply: Omit<FeedbackItem['replies'][0], 'id' | 'feedbackId'>) {
+    const item = await this.read(feedbackId)
+    item.replies.push({ ...reply, id: crypto.randomUUID(), feedbackId })
+    await this.write(feedbackId, item)
+  }
+
+  async resolve(feedbackId: string, resolution: Omit<FeedbackItem['resolutions'][0], 'feedbackId'>) {
+    const item = await this.read(feedbackId)
+    item.resolutions.push({ ...resolution, feedbackId })
+    await this.write(feedbackId, item)
+  }
+
+  async archive(feedbackId: string, userId: string) {
+    const item = await this.read(feedbackId)
+    item.archives.push({ feedbackId, archivedBy: { id: userId, name: '', role: '' }, timestamp: new Date().toISOString() })
+    await this.write(feedbackId, item)
+  }
+
+  async loadFeedback() {
+    await mkdir(DIR, { recursive: true })
+    const files = (await readdir(DIR)).filter((f) => f.endsWith('.json'))
+    return Promise.all(files.map(async (f) => JSON.parse(await readFile(join(DIR, f), 'utf-8')) as FeedbackItem))
+  }
+
+  private async read(id: string) { return JSON.parse(await readFile(join(DIR, `${id}.json`), 'utf-8')) as FeedbackItem }
+  private async write(id: string, item: FeedbackItem) { await writeFile(join(DIR, `${id}.json`), JSON.stringify(item, null, 2)) }
+}
+```
+
+### Supabase
+
+```ts
+import type { FeedtackAdapter, FeedbackItem, FeedtackFilter, FeedtackPayload } from 'feedtack'
+import type { SupabaseClient } from '@supabase/supabase-js'
+
+class SupabaseAdapter implements FeedtackAdapter {
+  constructor(private supabase: SupabaseClient) {}
+
+  async submit(payload: FeedtackPayload) {
+    await this.supabase.from('feedtack_submissions').insert({ id: payload.id, data: payload })
+  }
+
+  async reply(feedbackId: string, reply: Omit<FeedbackItem['replies'][0], 'id' | 'feedbackId'>) {
+    await this.supabase.from('feedtack_replies').insert({ feedback_id: feedbackId, ...reply })
+  }
+
+  async resolve(feedbackId: string, resolution: Omit<FeedbackItem['resolutions'][0], 'feedbackId'>) {
+    await this.supabase.from('feedtack_resolutions').insert({ feedback_id: feedbackId, ...resolution })
+  }
+
+  async archive(feedbackId: string, userId: string) {
+    await this.supabase.from('feedtack_archives').insert({ feedback_id: feedbackId, user_id: userId })
+  }
+
+  async loadFeedback(filter?: FeedtackFilter): Promise<FeedbackItem[]> {
+    let query = this.supabase.from('feedtack_submissions').select('*, feedtack_replies(*), feedtack_resolutions(*), feedtack_archives(*)')
+    if (filter?.pathname) query = query.eq('data->>page->>pathname', filter.pathname)
+    const { data } = await query
+    return (data ?? []).map((row) => ({
+      payload: row.data,
+      replies: row.feedtack_replies ?? [],
+      resolutions: row.feedtack_resolutions ?? [],
+      archives: row.feedtack_archives ?? [],
+    }))
+  }
+}
+```
+
 ## The payload
 
 Every pin emits a versioned JSON payload:

package/dist/react/index.js

@@ -171,7 +171,7 @@ function ThreadPanel({
         item.replies.map((r) => /* @__PURE__ */ jsxs2(
           "div",
           {
-            style: { borderTop: "1px solid #f3f4f6", paddingTop: 8 },
+            style: { borderTop: "1px solid var(--ft-border)", paddingTop: 8 },
             children: [
               /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, fontWeight: 600 }, children: r.author.name }),
               /* @__PURE__ */ jsx2("p", { style: { fontSize: 12 }, children: r.body })
@@ -190,7 +190,7 @@ function ThreadPanel({
               fontSize: 12,
               padding: 6,
               borderRadius: 6,
-              border: "1px solid #e5e7eb",
+              border: "1px solid var(--ft-border)",
               marginTop: 4
             }
           }
@@ -534,7 +534,12 @@ function useFeedtackDom(theme, disabled) {
 
 // src/react/usePinMode.ts
 import { useCallback, useEffect as useEffect2, useState } from "react";
-function usePinMode({ hotkey, onDeactivate, disabled }) {
+function usePinMode({
+  hotkey,
+  onDeactivate,
+  disabled,
+  isModalOpen
+}) {
   const [isActive, setIsActive] = useState(false);
   const [pendingPins, setPendingPins] = useState([]);
   const [selectedColor, setSelectedColor] = useState(PIN_PALETTE[0]);
@@ -563,7 +568,7 @@ function usePinMode({ hotkey, onDeactivate, disabled }) {
       if (e.key === "Escape") {
         deactivate();
       }
-      if (isActive && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+      if (isActive && !isModalOpen && !showForm && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
         e.preventDefault();
         setSelectedColor((prev) => {
           const idx = PIN_PALETTE.indexOf(prev);
@@ -574,7 +579,7 @@ function usePinMode({ hotkey, onDeactivate, disabled }) {
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [hotkey, deactivate, isActive, disabled]);
+  }, [hotkey, deactivate, isActive, disabled, isModalOpen, showForm]);
   const handlePageClick = useCallback(
     (e) => {
       if (!isActive) return;
@@ -657,6 +662,7 @@ function useFeedtackState({
   const pinMode = usePinMode({
     hotkey,
     disabled,
+    isModalOpen: openThreadId !== null,
     onDeactivate: () => {
       resetForm();
       setOpenThreadId(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feedtack",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Click anywhere. Drop a pin. Get a payload a developer can act on.",
   "type": "module",
   "license": "MIT",