feat: realtime status, mentions, push notifications

2026-06-29 15:52:34 -04:00
parent 282a436995
commit 6c8defb6fd
10 changed files with 387 additions and 34 deletions
@@ -0,0 +1,42 @@
+import type { Member } from "../stores/member.ts";
+
+interface MentionDropdownProps {
+  query: string;
+  members: Member[];
+  onSelect: (username: string) => void;
+}
+
+export function MentionDropdown({ query, members, onSelect }: MentionDropdownProps) {
+  const q = query.toLowerCase();
+  const filtered = members
+    .filter(
+      (m) =>
+        m.username.toLowerCase().includes(q) ||
+        m.display_name?.toLowerCase().includes(q),
+    )
+    .slice(0, 6);
+
+  if (filtered.length === 0) return null;
+
+  return (
+    <div className="absolute bottom-full left-0 mb-1 z-50 w-64 max-h-48 overflow-y-auto bg-gb-bg-s border border-gb-bg-t shadow-lg">
+      <div className="px-2 py-1 text-xs text-gb-fg-s font-mono border-b border-gb-bg-t">
+        MENTION
+      </div>
+      {filtered.map((m) => (
+        <button
+          key={m.id}
+          type="button"
+          onClick={() => onSelect(m.username)}
+          className="w-full px-2 py-1 text-left text-sm font-mono flex items-center gap-2 hover:bg-gb-orange hover:text-gb-bg transition-colors"
+        >
+          <span className="text-gb-green">●</span>
+          <span className="truncate">{m.display_name || m.username}</span>
+          {m.display_name && m.display_name !== m.username && (
+            <span className="text-gb-fg-f text-xs">({m.username})</span>
+          )}
+        </button>
+      ))}
+    </div>
+  );
+}