Skip to content

Commit 0bc6948

Browse files
oliverb123oliverb123
committed
feat: break inbox into some components
1 parent c26f424 commit 0bc6948

16 files changed

+1288
-1399
lines changed

‎apps/code/src/renderer/features/inbox/components/InboxEmptyStates.tsx‎

Lines changed: 182 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,201 @@
1-
import {
2-
ArrowsClockwiseIcon,
3-
CircleNotchIcon,
4-
WarningIcon,
5-
} from "@phosphor-icons/react";
6-
import { Box, Button, Flex, Text } from "@radix-ui/themes";
1+
import { AnimatedEllipsis } from "@features/inbox/components/utils/AnimatedEllipsis";
2+
import { SOURCE_PRODUCT_META } from "@features/inbox/components/utils/SourceProductIcons";
3+
import { ArrowDownIcon } from "@phosphor-icons/react";
4+
import { Box, Button, Flex, Text, Tooltip } from "@radix-ui/themes";
5+
import explorerHog from "@renderer/assets/images/explorer-hog.png";
6+
import graphsHog from "@renderer/assets/images/graphs-hog.png";
7+
import mailHog from "@renderer/assets/images/mail-hog.png";
78

8-
export function SignalsLoadingState() {
9+
// ── Full-width empty states ─────────────────────────────────────────────────
10+
11+
export function WelcomePane({ onEnableInbox }: { onEnableInbox: () => void }) {
912
return (
10-
<Flex height="100%" style={{ minHeight: 0 }}>
11-
<Box flexGrow="1" style={{ minWidth: 0 }}>
12-
<Flex direction="column" height="100%">
13-
<Flex
13+
<Flex
14+
direction="column"
15+
align="center"
16+
justify="center"
17+
height="100%"
18+
px="5"
19+
>
20+
<Flex direction="column" align="center" style={{ maxWidth: 420 }}>
21+
<img src={graphsHog} alt="" style={{ width: 120, marginBottom: 16 }} />
22+
23+
<Text
24+
size="4"
25+
weight="bold"
26+
align="center"
27+
style={{ color: "var(--gray-12)" }}
28+
>
29+
Welcome to your Inbox
30+
</Text>
31+
32+
<Flex
33+
direction="column"
34+
align="center"
35+
gap="3"
36+
mt="3"
37+
style={{ maxWidth: 340 }}
38+
>
39+
<Text
40+
size="1"
41+
align="center"
42+
style={{ color: "var(--gray-11)", lineHeight: 1.35 }}
43+
>
44+
<Text weight="medium" style={{ color: "var(--gray-12)" }}>
45+
Background analysis of your data — while you sleep.
46+
</Text>
47+
<br />
48+
Session recordings watched automatically. Issues, tickets, and evals
49+
analyzed around the clock.
50+
</Text>
51+
52+
<ArrowDownIcon size={14} style={{ color: "var(--gray-8)" }} />
53+
54+
<Text
55+
size="1"
1456
align="center"
15-
justify="between"
16-
px="3"
17-
py="2"
18-
style={{ borderBottom: "1px solid var(--gray-5)" }}
57+
style={{ color: "var(--gray-11)", lineHeight: 1.35 }}
1958
>
20-
<Flex align="center" gap="2">
21-
<CircleNotchIcon
22-
size={12}
23-
className="animate-spin text-gray-10"
24-
/>
25-
<Text size="1" color="gray" className="text-[12px]">
26-
Loading signals
27-
</Text>
28-
</Flex>
29-
</Flex>
30-
<Flex direction="column">
31-
{Array.from({ length: 5 }).map((_, index) => (
32-
<Flex
33-
// biome-ignore lint/suspicious/noArrayIndexKey: static local loading placeholders
34-
key={index}
35-
direction="column"
36-
gap="2"
37-
px="3"
38-
py="3"
39-
className="border-gray-5 border-b"
40-
>
41-
<Box className="h-[12px] w-[44%] animate-pulse rounded bg-gray-4" />
42-
<Box className="h-[11px] w-[82%] animate-pulse rounded bg-gray-3" />
43-
</Flex>
44-
))}
45-
</Flex>
59+
<Text weight="medium" style={{ color: "var(--gray-12)" }}>
60+
Ready-to-run fixes for real user problems.
61+
</Text>
62+
<br />
63+
Each report includes evidence and impact numbers — just execute the
64+
prompt in your agent.
65+
</Text>
4666
</Flex>
47-
</Box>
67+
68+
<Button size="2" style={{ marginTop: 20 }} onClick={onEnableInbox}>
69+
Enable Inbox
70+
</Button>
71+
</Flex>
4872
</Flex>
4973
);
5074
}
5175

52-
export function SignalsErrorState({
53-
onRetry,
54-
isRetrying,
76+
export function WarmingUpPane({
77+
onConfigureSources,
78+
enabledProducts,
5579
}: {
56-
onRetry: () => void;
57-
isRetrying: boolean;
80+
onConfigureSources: () => void;
81+
enabledProducts: string[];
5882
}) {
5983
return (
60-
<Flex align="center" justify="center" height="100%" p="4">
61-
<Flex
62-
direction="column"
63-
align="center"
64-
gap="3"
65-
px="4"
66-
py="4"
67-
className="w-full max-w-[460px] rounded border border-gray-6 bg-gray-2 text-center"
68-
>
69-
<WarningIcon size={20} className="text-amber-10" weight="bold" />
70-
<Flex direction="column" gap="2" align="center">
71-
<Text size="4" weight="medium">
72-
Could not load signals
73-
</Text>
74-
<Text size="1" color="gray" className="text-[12px]">
75-
Check your connection or permissions, then retry.
76-
</Text>
84+
<Flex
85+
direction="column"
86+
align="center"
87+
justify="center"
88+
height="100%"
89+
px="5"
90+
>
91+
<Flex direction="column" align="center" style={{ maxWidth: 420 }}>
92+
<img
93+
src={explorerHog}
94+
alt=""
95+
style={{ width: 120, marginBottom: 16 }}
96+
/>
97+
98+
<Text
99+
size="4"
100+
weight="bold"
101+
align="center"
102+
style={{ color: "var(--gray-12)" }}
103+
>
104+
Inbox is warming up
105+
<AnimatedEllipsis />
106+
</Text>
107+
108+
<Text
109+
size="1"
110+
align="center"
111+
mt="3"
112+
style={{ color: "var(--gray-11)", lineHeight: 1.35 }}
113+
>
114+
Reports will appear here as soon as signals come in.
115+
</Text>
116+
117+
<Flex align="center" gap="3" style={{ marginTop: 16 }}>
118+
{enabledProducts.map((sp) => {
119+
const meta = SOURCE_PRODUCT_META[sp];
120+
if (!meta) return null;
121+
const { Icon } = meta;
122+
return (
123+
<Tooltip key={sp} content={meta.label}>
124+
<span style={{ color: meta.color }}>
125+
<Icon size={16} />
126+
</span>
127+
</Tooltip>
128+
);
129+
})}
130+
<Button
131+
size="2"
132+
variant="soft"
133+
color="gray"
134+
onClick={onConfigureSources}
135+
>
136+
Configure sources
137+
</Button>
77138
</Flex>
78-
<Button
139+
</Flex>
140+
</Flex>
141+
);
142+
}
143+
144+
export function SelectReportPane() {
145+
return (
146+
<Flex
147+
direction="column"
148+
align="center"
149+
justify="center"
150+
height="100%"
151+
px="5"
152+
>
153+
<Flex direction="column" align="center" style={{ maxWidth: 300 }}>
154+
<img
155+
src={mailHog}
156+
alt=""
157+
style={{ width: 100, marginBottom: 12, opacity: 0.8 }}
158+
/>
159+
<Text
160+
size="2"
161+
weight="medium"
162+
align="center"
163+
style={{ color: "var(--gray-10)" }}
164+
>
165+
Select a report
166+
</Text>
167+
<Text
79168
size="1"
80-
variant="soft"
81-
onClick={onRetry}
82-
className="text-[12px]"
83-
disabled={isRetrying}
169+
align="center"
170+
mt="1"
171+
style={{ color: "var(--gray-9)", lineHeight: 1.35 }}
84172
>
85-
{isRetrying ? (
86-
<CircleNotchIcon size={12} className="animate-spin" />
87-
) : (
88-
<ArrowsClockwiseIcon size={12} />
89-
)}
90-
Retry
91-
</Button>
173+
Pick a report from the list to see details, signals, and evidence.
174+
</Text>
92175
</Flex>
93176
</Flex>
94177
);
95178
}
179+
180+
// ── Skeleton rows for backdrop behind empty states ──────────────────────────
181+
182+
export function SkeletonBackdrop() {
183+
return (
184+
<Flex direction="column" style={{ opacity: 0.4 }}>
185+
{Array.from({ length: 8 }).map((_, index) => (
186+
<Flex
187+
// biome-ignore lint/suspicious/noArrayIndexKey: static decorative placeholders
188+
key={index}
189+
direction="column"
190+
gap="2"
191+
px="3"
192+
py="3"
193+
className="border-gray-5 border-b"
194+
>
195+
<Box className="h-[12px] w-[44%] rounded bg-gray-4" />
196+
<Box className="h-[11px] w-[82%] rounded bg-gray-3" />
197+
</Flex>
198+
))}
199+
</Flex>
200+
);
201+
}

0 commit comments

Comments
 (0)