gitcasso/src/components/CommentRow.tsx at 69bdfaa1fd380bb3ee3b61fa6a63504edb218115 · diffplug/gitcasso · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import Badge from "@/components/Badge"
import { timeAgo } from "@/components/misc"
import type { CommentTableRow } from "@/entrypoints/background"
import { openOrFocusComment } from "@/entrypoints/popup/popup"
import { EnhancerRegistry } from "@/lib/registries"

const enhancers = new EnhancerRegistry()

type CommentRowProps = {
  row: CommentTableRow
  selectedIds: Set<unknown>
  toggleSelection: (id: string) => void
  handleOpen: (url: string) => void
  handleTrash: (row: CommentTableRow) => void
}

export function CommentRow({
  row,
  selectedIds,
  toggleSelection,
}: CommentRowProps) {
  const enhancer = enhancers.enhancerFor(row.spot)

  const handleTitleClick = () => {
    openOrFocusComment(row.spot.unique_key)
  }
  return (
    <tr className="hover:bg-gray-50">
      <td className="px-3 py-3">
        <input
          type="checkbox"
          checked={selectedIds.has(row.spot.unique_key)}
          onChange={() => toggleSelection(row.spot.unique_key)}
          className="rounded"
        />
      </td>
      <td className="px-3 py-3">
        <div className="space-y-1">
          {/* Context line */}
          <div className="flex items-center justify-between gap-1.5 text-gray-600 text-xs">
            <div className="flex min-w-0 flex-1 items-center gap-1.5">
              {enhancer.tableUpperDecoration(row.spot)}
            </div>
            <div className="flex flex-shrink-0 items-center gap-1">
              {row.latestDraft.stats.links.length > 0 && (
                <Badge
                  type="link"
                  text={row.latestDraft.stats.links.length}
                  data={row}
                />
              )}
              {row.latestDraft.stats.images.length > 0 && (
                <Badge
                  type="image"
                  text={row.latestDraft.stats.images.length}
                  data={row}
                />
              )}
              {row.latestDraft.stats.codeBlocks.length > 0 && (
                <Badge
                  type="code"
                  text={row.latestDraft.stats.codeBlocks.length}
                  data={row}
                />
              )}
              <Badge
                type="text"
                text={row.latestDraft.stats.charCount}
                data={row}
              />
              <Badge
                type="time"
                text={timeAgo(row.latestDraft.time)}
                data={row}
              />
              {row.isOpenTab && <Badge type="open" data={row} />}
            </div>
          </div>

          {/* Title */}
          <div className="flex items-center gap-1">
            <button
              type="button"
              onClick={handleTitleClick}
              className="cursor-pointer truncate text-left font-medium text-sm hover:underline"
            >
              {enhancer.tableTitle(row.spot)}
            </button>
            <Badge type={row.isSent ? "sent" : "unsent"} />
            {row.isTrashed && <Badge type="trashed" />}
          </div>
          {/* Draft */}
          <div className="truncate text-sm">
            <span className="text-gray-500">
              {row.latestDraft.content.substring(0, 100)}…
            </span>
          </div>
        </div>
      </td>
    </tr>
  )
}