Skip to content

Commit 44fdbb5

Browse files
nedtwiggnedtwigg
committed
playground is alive
1 parent 4ed332c commit 44fdbb5

File tree

6 files changed

+59
-35
lines changed

6 files changed

+59
-35
lines changed

‎browser-extension/src/entrypoints/popup/style.css‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
1+
@import url("../../styles/popup-frame.css");
2+
13
@tailwind base;
24
@tailwind components;
35
@tailwind utilities;
4-
5-
body {
6-
width: 300px;
7-
padding: 15px;
8-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
9-
font-size: 14px;
10-
line-height: 1.4;
11-
margin: 0;
12-
}

‎browser-extension/src/styles/popup-frame.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* Popup window frame styles */
2+
body {
3+
width: 300px;
4+
padding: 15px;
5+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
6+
font-size: 14px;
7+
line-height: 1.4;
8+
margin: 0;
9+
}

‎browser-extension/tests/playground/PopupPlayground.tsx‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,25 @@ export function PopupPlayground() {
77
const handleSpotClick = (spot: CommentState) => {
88
alert(`Clicked: ${spot.spot.type}\nTab: ${spot.tab.tabId}`)
99
}
10+
1011
const enhancers = new EnhancerRegistry()
12+
1113
return (
12-
<SpotTable
13-
spots={sampleSpots}
14-
enhancerRegistry={enhancers}
15-
onSpotClick={handleSpotClick}
16-
title='Comment Spots'
17-
description='Click on any row to simulate tab switching'
18-
headerText='Spot Details'
19-
className='bg-white rounded-lg shadow-sm border border-slate-200'
20-
headerClassName='p-4 font-medium text-slate-700'
21-
rowClassName='cursor-pointer transition-colors hover:bg-slate-50 border-b border-slate-200'
22-
cellClassName='p-4'
23-
showHeader={true}
24-
/>
14+
<div className='w-full'>
15+
<h2 className='mb-4 text-lg font-semibold text-foreground'>Open Comment Spots</h2>
16+
17+
<div className='border rounded-md'>
18+
<SpotTable
19+
spots={sampleSpots}
20+
enhancerRegistry={enhancers}
21+
onSpotClick={handleSpotClick}
22+
headerClassName='p-3 font-medium text-muted-foreground'
23+
rowClassName='transition-colors hover:bg-muted/50 border-b border-border/40'
24+
cellClassName='p-3'
25+
emptyStateMessage='No open comment spots'
26+
showHeader={true}
27+
/>
28+
</div>
29+
</div>
2530
)
2631
}

‎browser-extension/tests/playground/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
</head>
99
<body>
1010
<div id="root"></div>
11-
<script type="module" src="./main.tsx"></script>
11+
<script type="module" src="./playground.tsx"></script>
1212
</body>
1313
</html>

‎browser-extension/tests/playground/playground.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,33 @@
11
import { createRoot } from 'react-dom/client'
2+
import '@/entrypoints/popup/style.css'
23
import './style.css'
34
import { PopupPlayground } from './PopupPlayground'
45

56
const root = createRoot(document.getElementById('root')!)
67
root.render(
78
<div className='min-h-screen bg-slate-100'>
8-
<div className='container mx-auto px-6 py-8 max-w-4xl'>
9+
<div className='container mx-auto px-6 py-8'>
910
<div className='bg-white p-6 rounded-lg shadow-sm border border-slate-200 mb-6'>
10-
<h1 className='text-3xl font-bold text-slate-900 mb-2'>Table Playground</h1>
11+
<h1 className='text-2xl font-bold text-slate-900 mb-2'>Popup Simulator</h1>
1112
<p className='text-slate-600'>
12-
Testing table rendering with real enhancers and sample data.
13+
This shows exactly how the table appears in the browser popup (300px width).
1314
</p>
1415
</div>
1516

16-
<PopupPlayground />
17+
<div className='popup-frame'>
18+
<PopupPlayground />
19+
</div>
1720

18-
<div className='bg-slate-50 p-4 rounded-lg border border-slate-200 mt-6'>
21+
<div className='bg-slate-50 p-4 rounded-lg border border-slate-200 mt-6 max-w-2xl mx-auto'>
1922
<h3 className='font-medium text-slate-900 mb-2'>Development Notes</h3>
2023
<ul className='text-sm text-slate-600 space-y-1'>
21-
<li>Hot reload is active - changes to components update instantly</li>
22-
<li>Uses real enhancers from the browser extension</li>
2324
<li>
24-
Sample data comes from <code>playgroundData.tsx</code>
25+
The popup frame above matches the exact 300px width of the browser extension popup
26+
</li>
27+
<li>
28+
Any changes to <code>popup/style.css</code> will automatically update here
2529
</li>
30+
<li>Hot reload is active for instant updates</li>
2631
</ul>
2732
</div>
2833
</div>

‎browser-extension/tests/playground/style.css‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,28 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
/* Playground-specific styles - popup styles are imported via popup/style.css */
42

3+
/* Override body styles for playground layout */
54
body {
65
margin: 0;
76
padding: 2rem;
8-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
97
background: #f8fafc;
108
min-height: 100vh;
9+
width: auto; /* Override popup's fixed width for playground */
1110
}
1211

1312
#root {
1413
max-width: 1200px;
1514
margin: 0 auto;
1615
}
16+
17+
/* Popup simulator frame */
18+
.popup-frame {
19+
width: 300px;
20+
padding: 15px;
21+
font-size: 14px;
22+
line-height: 1.4;
23+
background: white;
24+
border: 1px solid #e2e8f0;
25+
border-radius: 8px;
26+
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
27+
margin: 0 auto;
28+
}

0 commit comments

Comments
 (0)