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
|
import { useMemo } from "react";
import type {
ColumnSnapshot,
ColumnState,
DeckAccount,
DeckColumn,
FullscreenState,
} from "../types/app";
import { TimelineColumn, type TimelineConfig } from "./TimelineColumn";
import { ChatColumn } from "./ChatColumn";
interface ColumnBoardProps {
columns: DeckColumn[];
accounts: DeckAccount[];
onRemove: (id: string) => void;
onStateChange: (columnId: string, state: ColumnState) => void;
onSnapshot: (columnId: string, snapshot: ColumnSnapshot) => void;
onEnterFullscreen: (payload: FullscreenState) => void;
}
export function ColumnBoard({
columns,
accounts,
onRemove,
onStateChange,
onSnapshot,
onEnterFullscreen,
}: ColumnBoardProps) {
const accountMap = useMemo(
() => Object.fromEntries(accounts.map(account => [account.id, account])),
[accounts],
);
if (!columns.length) {
return (
<section className="empty-board">
<p className="eyebrow">No columns yet</p>
<h2>Build your deck</h2>
<p>Add some columns from the left panel to start streaming timelines.</p>
</section>
);
}
return (
<section className="column-board">
{columns.map((column, columnIndex) => {
const account = accountMap[column.accountId];
if (!account) {
return (
<div className="column missing" key={column.id}>
<header>
<div>
<p className="eyebrow">Account missing</p>
<h3>{column.title}</h3>
</div>
<button className="ghost" onClick={() => onRemove(column.id)}>
Remove
</button>
</header>
<p className="muted">The account for this column was removed.</p>
</div>
);
}
if (isChatColumn(column)) {
return (
<ChatColumn
key={column.id}
column={column}
account={account}
onRemove={() => onRemove(column.id)}
/>
);
}
return (
<TimelineColumn
key={column.id}
column={column as TimelineConfig}
account={account}
onRemove={() => onRemove(column.id)}
onStateChange={onStateChange}
onSnapshot={onSnapshot}
onEnterFullscreen={onEnterFullscreen}
columnIndex={columnIndex}
/>
);
})}
</section>
);
}
function isChatColumn(column: DeckColumn): column is DeckColumn & { kind: "chat" } {
return column.kind === "chat";
}
|
