Skip to content

Commit 5169d08

Browse files
nxnomnxnom
committed
Use same styling for requests and import trace card items
1 parent 6c50f5b commit 5169d08

3 files changed

Lines changed: 155 additions & 68 deletions

File tree

‎browser-extensions/chrome/src/panel/components/import/ImportList.tsx‎

Lines changed: 83 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -22,20 +22,6 @@ const UploadIcon = () => (
2222
</svg>
2323
);
2424

25-
function getSSEStatusClass(status: ExportedSSE["status"]): string {
26-
switch (status) {
27-
case "connected":
28-
return "success";
29-
case "error":
30-
return "error";
31-
case "connecting":
32-
return "pending";
33-
case "disconnected":
34-
default:
35-
return "neutral";
36-
}
37-
}
38-
3925
function getSSEDuration(sub: ExportedSSE): string {
4026
if (sub.status === "connecting") return "connecting...";
4127

@@ -56,27 +42,38 @@ const ImportTraceRow: Component<{
5642
const isAborted = () => !!response()?.aborted;
5743
const hasError = () => !!response()?.error && !isAborted();
5844

59-
const statusClass = () => {
60-
if (isAborted()) return "aborted";
61-
if (hasError()) return "error";
62-
return "success";
63-
};
64-
6545
const parsed = () => parseQueryKey(props.trace.queryKey);
6646
const timestamp = () => formatTime(props.trace.timestamp);
6747

68-
const statusBorderClass = () => {
69-
const cls = statusClass();
70-
if (cls === "error") return "border-l-spoosh-error";
71-
if (cls === "aborted") return "border-l-spoosh-warning";
72-
return "border-l-spoosh-success";
48+
const cardClasses = () => {
49+
const base = "px-3 py-2 cursor-pointer border-l-2 transition-all";
50+
51+
// Error state styling
52+
if (hasError()) {
53+
if (props.isSelected) {
54+
return `${base} bg-spoosh-error/15 border-l-spoosh-error shadow-[inset_0_0_0_1px_rgba(248,81,73,0.3)]`;
55+
}
56+
return `${base} bg-spoosh-error/5 border-l-spoosh-error hover:bg-spoosh-error/10`;
57+
}
58+
59+
// Aborted state styling
60+
if (isAborted()) {
61+
if (props.isSelected) {
62+
return `${base} bg-spoosh-warning/15 border-l-spoosh-warning shadow-[inset_0_0_0_1px_rgba(210,153,34,0.3)]`;
63+
}
64+
return `${base} bg-spoosh-warning/5 border-l-spoosh-warning hover:bg-spoosh-warning/10`;
65+
}
66+
67+
// Success/normal state styling
68+
if (props.isSelected) {
69+
return `${base} bg-spoosh-primary/15 border-l-spoosh-primary shadow-[inset_0_0_0_1px_rgba(88,166,255,0.3)]`;
70+
}
71+
72+
return `${base} border-l-transparent hover:bg-spoosh-surface`;
7373
};
7474

7575
return (
76-
<div
77-
class={`px-3 py-2 cursor-pointer border-b border-spoosh-border border-l-2 hover:bg-spoosh-hover transition-colors ${statusBorderClass()} ${props.isSelected ? "bg-spoosh-hover" : ""}`}
78-
onClick={() => props.onSelect(props.trace.id)}
79-
>
76+
<div class={cardClasses()} onClick={() => props.onSelect(props.trace.id)}>
8077
<div class="flex items-center gap-2 mb-1">
8178
<span
8279
class={`px-1.5 py-0.5 text-2xs font-semibold rounded uppercase method-${props.trace.method}`}
@@ -107,23 +104,50 @@ const ImportSSERow: Component<{
107104
isSelected: boolean;
108105
onSelect: (id: string) => void;
109106
}> = (props) => {
110-
const statusClass = () => getSSEStatusClass(props.sub.status);
111107
const duration = () => getSSEDuration(props.sub);
112108
const timestamp = () => formatTime(props.sub.timestamp);
113109

114-
const statusBorderClass = () => {
115-
const cls = statusClass();
116-
if (cls === "error") return "border-l-spoosh-error";
117-
if (cls === "pending") return "border-l-spoosh-primary";
118-
if (cls === "success") return "border-l-spoosh-success";
119-
return "border-l-spoosh-text-muted";
110+
const hasError = () => props.sub.status === "error";
111+
const isConnecting = () => props.sub.status === "connecting";
112+
const isConnected = () => props.sub.status === "connected";
113+
114+
const cardClasses = () => {
115+
const base = "px-3 py-2 cursor-pointer border-l-2 transition-all";
116+
117+
// Error state styling
118+
if (hasError()) {
119+
if (props.isSelected) {
120+
return `${base} bg-spoosh-error/15 border-l-spoosh-error shadow-[inset_0_0_0_1px_rgba(248,81,73,0.3)]`;
121+
}
122+
return `${base} bg-spoosh-error/5 border-l-spoosh-error hover:bg-spoosh-error/10`;
123+
}
124+
125+
// Connecting state styling
126+
if (isConnecting()) {
127+
if (props.isSelected) {
128+
return `${base} bg-spoosh-primary/15 border-l-spoosh-primary shadow-[inset_0_0_0_1px_rgba(88,166,255,0.3)]`;
129+
}
130+
return `${base} border-l-spoosh-primary hover:bg-spoosh-surface`;
131+
}
132+
133+
// Connected state styling (active connections)
134+
if (isConnected()) {
135+
if (props.isSelected) {
136+
return `${base} bg-spoosh-success/15 border-l-spoosh-success shadow-[inset_0_0_0_1px_rgba(63,185,80,0.3)]`;
137+
}
138+
return `${base} border-l-spoosh-success hover:bg-spoosh-surface`;
139+
}
140+
141+
// Disconnected/normal state styling
142+
if (props.isSelected) {
143+
return `${base} bg-spoosh-primary/15 border-l-spoosh-primary shadow-[inset_0_0_0_1px_rgba(88,166,255,0.3)]`;
144+
}
145+
146+
return `${base} border-l-transparent hover:bg-spoosh-surface`;
120147
};
121148

122149
return (
123-
<div
124-
class={`px-3 py-2 cursor-pointer border-b border-spoosh-border border-l-2 hover:bg-spoosh-hover transition-colors ${statusBorderClass()} ${props.isSelected ? "bg-spoosh-hover" : ""}`}
125-
onClick={() => props.onSelect(props.sub.id)}
126-
>
150+
<div class={cardClasses()} onClick={() => props.onSelect(props.sub.id)}>
127151
<div class="flex items-center gap-2 mb-1">
128152
<span class="px-1.5 py-0.5 text-2xs font-semibold rounded uppercase method-sse">
129153
SSE
@@ -171,26 +195,28 @@ export const ImportList: Component<ImportListProps> = (props) => {
171195
</div>
172196
}
173197
>
174-
<For each={reversedItems()}>
175-
{(item) => (
176-
<Show
177-
when={item.type === "sse"}
178-
fallback={
179-
<ImportTraceRow
180-
trace={item as ExportedTrace}
198+
<div class="divide-y divide-spoosh-border">
199+
<For each={reversedItems()}>
200+
{(item) => (
201+
<Show
202+
when={item.type === "sse"}
203+
fallback={
204+
<ImportTraceRow
205+
trace={item as ExportedTrace}
206+
isSelected={item.id === props.selectedId}
207+
onSelect={props.onSelect}
208+
/>
209+
}
210+
>
211+
<ImportSSERow
212+
sub={item as ExportedSSE}
181213
isSelected={item.id === props.selectedId}
182214
onSelect={props.onSelect}
183215
/>
184-
}
185-
>
186-
<ImportSSERow
187-
sub={item as ExportedSSE}
188-
isSelected={item.id === props.selectedId}
189-
onSelect={props.onSelect}
190-
/>
191-
</Show>
192-
)}
193-
</For>
216+
</Show>
217+
)}
218+
</For>
219+
</div>
194220
</Show>
195221
</div>
196222
);

‎browser-extensions/chrome/src/panel/components/requests/SubscriptionCard.tsx‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,13 +72,43 @@ export const SubscriptionCard: Component<SubscriptionCardProps> = (props) => {
7272
const messageCount = () => props.subscription.messageCount;
7373
const statusIndicator = () => getStatusIndicator(props.subscription.status);
7474

75+
const hasError = () => props.subscription.status === "error";
76+
const isConnecting = () => props.subscription.status === "connecting";
77+
const isConnected = () => props.subscription.status === "connected";
78+
7579
const cardClasses = () => {
76-
const base = "px-3 py-2 cursor-pointer transition-colors border-l-2";
77-
const selected = props.selected
78-
? "bg-spoosh-primary/10 border-l-spoosh-primary"
79-
: "border-l-transparent hover:bg-spoosh-surface";
80+
const base = "px-3 py-2 cursor-pointer transition-all border-l-2";
81+
82+
// Error state styling
83+
if (hasError()) {
84+
if (props.selected) {
85+
return `${base} bg-spoosh-error/15 border-l-spoosh-error shadow-[inset_0_0_0_1px_rgba(248,81,73,0.3)]`;
86+
}
87+
return `${base} bg-spoosh-error/5 border-l-spoosh-error hover:bg-spoosh-error/10`;
88+
}
89+
90+
// Connecting state styling
91+
if (isConnecting()) {
92+
if (props.selected) {
93+
return `${base} bg-spoosh-primary/15 border-l-spoosh-primary shadow-[inset_0_0_0_1px_rgba(88,166,255,0.3)]`;
94+
}
95+
return `${base} border-l-spoosh-primary hover:bg-spoosh-surface`;
96+
}
97+
98+
// Connected state styling
99+
if (isConnected()) {
100+
if (props.selected) {
101+
return `${base} bg-spoosh-success/15 border-l-spoosh-success shadow-[inset_0_0_0_1px_rgba(63,185,80,0.3)]`;
102+
}
103+
return `${base} border-l-spoosh-success hover:bg-spoosh-surface`;
104+
}
105+
106+
// Disconnected/normal state styling
107+
if (props.selected) {
108+
return `${base} bg-spoosh-primary/15 border-l-spoosh-primary shadow-[inset_0_0_0_1px_rgba(88,166,255,0.3)]`;
109+
}
80110

81-
return `${base} ${selected}`;
111+
return `${base} border-l-transparent hover:bg-spoosh-surface`;
82112
};
83113

84114
return (

‎browser-extensions/chrome/src/panel/components/requests/TraceCard.tsx‎

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,13 +93,44 @@ export const TraceCard: Component<TraceCardProps> = (props) => {
9393
const preview = () => getResponsePreview(props.trace);
9494
const statusVariant = () => getStatusVariant(props.trace);
9595

96-
const cardClasses = () => {
97-
const base = "px-3 py-2 cursor-pointer transition-colors border-l-2";
98-
const selected = props.selected
99-
? "bg-spoosh-primary/10 border-l-spoosh-primary"
100-
: "border-l-transparent hover:bg-spoosh-surface";
96+
const hasError = () =>
97+
props.trace.response?.error && !props.trace.response?.aborted;
98+
const isAborted = () => props.trace.response?.aborted;
99+
const isPending = () => props.trace.duration === undefined;
101100

102-
return `${base} ${selected}`;
101+
const cardClasses = () => {
102+
const base = "px-3 py-2 cursor-pointer transition-all border-l-2";
103+
104+
// Error state styling
105+
if (hasError()) {
106+
if (props.selected) {
107+
return `${base} bg-spoosh-error/15 border-l-spoosh-error shadow-[inset_0_0_0_1px_rgba(248,81,73,0.3)]`;
108+
}
109+
return `${base} bg-spoosh-error/5 border-l-spoosh-error hover:bg-spoosh-error/10`;
110+
}
111+
112+
// Aborted state styling
113+
if (isAborted()) {
114+
if (props.selected) {
115+
return `${base} bg-spoosh-warning/15 border-l-spoosh-warning shadow-[inset_0_0_0_1px_rgba(210,153,34,0.3)]`;
116+
}
117+
return `${base} bg-spoosh-warning/5 border-l-spoosh-warning hover:bg-spoosh-warning/10`;
118+
}
119+
120+
// Pending state styling
121+
if (isPending()) {
122+
if (props.selected) {
123+
return `${base} bg-spoosh-primary/15 border-l-spoosh-primary shadow-[inset_0_0_0_1px_rgba(88,166,255,0.3)]`;
124+
}
125+
return `${base} border-l-spoosh-primary hover:bg-spoosh-surface`;
126+
}
127+
128+
// Success/normal state styling
129+
if (props.selected) {
130+
return `${base} bg-spoosh-primary/15 border-l-spoosh-primary shadow-[inset_0_0_0_1px_rgba(88,166,255,0.3)]`;
131+
}
132+
133+
return `${base} border-l-transparent hover:bg-spoosh-surface`;
103134
};
104135

105136
return (

0 commit comments

Comments
 (0)