Skip to content

Commit f4beb11

Browse files
diegochinediegochine
committed
Remove custom modal, use design-system component instead
1 parent 0c34a3e commit f4beb11

7 files changed

Lines changed: 134 additions & 451 deletions

File tree

‎client/app.js‎

Lines changed: 97 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,112 @@
11
// app.js
2-
(function() {
3-
const status = document.getElementById('status');
4-
let websocket = null;
2+
import Modal from './design-system/components/modal/modal.js';
53

6-
function setStatus(msg) {
4+
const status = document.getElementById('status');
5+
let websocket = null;
6+
let helpModal = null;
7+
8+
function setStatus(msg) {
9+
if (status) {
710
status.textContent = msg;
811
}
12+
}
13+
14+
// Initialize WebSocket connection
15+
function initializeWebSocket() {
16+
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
17+
const host = window.location.host;
18+
const wsUrl = `${protocol}//${host}/ws`;
19+
20+
try {
21+
websocket = new WebSocket(wsUrl);
22+
23+
websocket.onopen = function(event) {
24+
console.log('WebSocket connected');
25+
setStatus('Ready (WebSocket connected)');
26+
};
927

10-
// Initialize WebSocket connection
11-
function initializeWebSocket() {
12-
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
13-
const host = window.location.host;
14-
const wsUrl = `${protocol}//${host}/ws`;
15-
16-
try {
17-
websocket = new WebSocket(wsUrl);
18-
19-
websocket.onopen = function(event) {
20-
console.log('WebSocket connected');
21-
setStatus('Ready (WebSocket connected)');
22-
};
23-
24-
websocket.onmessage = function(event) {
25-
try {
26-
const data = JSON.parse(event.data);
27-
if (data.type === 'message' && data.message) {
28-
alert(data.message);
29-
}
30-
} catch (error) {
31-
console.error('Error parsing WebSocket message:', error);
28+
websocket.onmessage = function(event) {
29+
try {
30+
const data = JSON.parse(event.data);
31+
if (data.type === 'message' && data.message) {
32+
alert(data.message);
3233
}
33-
};
34-
35-
websocket.onclose = function(event) {
36-
console.log('WebSocket disconnected');
37-
setStatus('Ready (WebSocket disconnected)');
38-
39-
// Attempt to reconnect after 3 seconds
40-
setTimeout(() => {
41-
console.log('Attempting to reconnect WebSocket...');
42-
initializeWebSocket();
43-
}, 3000);
44-
};
45-
46-
websocket.onerror = function(error) {
47-
console.error('WebSocket error:', error);
48-
setStatus('Ready (WebSocket error)');
49-
};
50-
51-
} catch (error) {
52-
console.error('Failed to create WebSocket connection:', error);
53-
setStatus('Ready (WebSocket unavailable)');
54-
}
34+
} catch (error) {
35+
console.error('Error parsing WebSocket message:', error);
36+
}
37+
};
38+
39+
websocket.onclose = function(event) {
40+
console.log('WebSocket disconnected');
41+
setStatus('Ready (WebSocket disconnected)');
42+
43+
// Attempt to reconnect after 3 seconds
44+
setTimeout(() => {
45+
console.log('Attempting to reconnect WebSocket...');
46+
initializeWebSocket();
47+
}, 3000);
48+
};
49+
50+
websocket.onerror = function(error) {
51+
console.error('WebSocket error:', error);
52+
setStatus('Ready (WebSocket error)');
53+
};
54+
55+
} catch (error) {
56+
console.error('Failed to create WebSocket connection:', error);
57+
setStatus('Ready (WebSocket unavailable)');
5558
}
59+
}
60+
61+
// Load help content and initialize modal
62+
async function initializeHelpModal() {
63+
try {
64+
const response = await fetch('./help-content-template.html');
65+
const helpContent = await response.text();
5666

57-
// Load help content and initialize modal
58-
async function initializeHelpModal() {
59-
try {
60-
const response = await fetch('./help-content-template.html');
61-
const helpContent = await response.text();
62-
63-
// Initialize help modal with actual content
64-
HelpModal.init({
65-
triggerSelector: '#btn-help',
66-
content: helpContent,
67-
theme: 'auto'
67+
// Create help modal with actual content
68+
helpModal = Modal.createHelpModal({
69+
title: 'Help / User Guide',
70+
content: helpContent
71+
});
72+
73+
// Bind help button click handler
74+
const helpButton = document.getElementById('btn-help');
75+
if (helpButton) {
76+
helpButton.addEventListener('click', () => {
77+
helpModal.open();
6878
});
79+
}
6980

70-
setStatus('Ready');
71-
} catch (error) {
72-
console.error('Failed to load help content:', error);
73-
// Fallback to placeholder content
74-
HelpModal.init({
75-
triggerSelector: '#btn-help',
76-
content: '<p>Help content could not be loaded. Please check that help-content-template.html exists.</p>',
77-
theme: 'auto'
81+
setStatus('Ready');
82+
} catch (error) {
83+
console.error('Failed to load help content:', error);
84+
// Fallback to placeholder content
85+
helpModal = Modal.createHelpModal({
86+
title: 'Help / User Guide',
87+
content: '<p>Help content could not be loaded. Please check that help-content-template.html exists.</p>'
88+
});
89+
90+
// Bind help button click handler
91+
const helpButton = document.getElementById('btn-help');
92+
if (helpButton) {
93+
helpButton.addEventListener('click', () => {
94+
helpModal.open();
7895
});
79-
setStatus('Ready (help content unavailable)');
8096
}
81-
}
8297

83-
// Initialize both help modal and WebSocket when DOM is ready
84-
function initialize() {
85-
initializeHelpModal();
86-
initializeWebSocket();
98+
setStatus('Ready (help content unavailable)');
8799
}
100+
}
88101

89-
if (document.readyState === 'loading') {
90-
document.addEventListener('DOMContentLoaded', initialize);
91-
} else {
92-
initialize();
93-
}
94-
})();
102+
// Initialize both help modal and WebSocket when DOM is ready
103+
async function initialize() {
104+
await initializeHelpModal();
105+
initializeWebSocket();
106+
}
107+
108+
if (document.readyState === 'loading') {
109+
document.addEventListener('DOMContentLoaded', initialize);
110+
} else {
111+
initialize();
112+
}

‎client/bespoke-template.css‎

Lines changed: 0 additions & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -90,148 +90,6 @@
9090

9191
/* ===== TEMPORARY COMPONENTS (TODO: Replace when design system adds these) ===== */
9292

93-
/* Modal Components - TODO: Remove when design system adds modal component */
94-
.bespoke .modal {
95-
position: fixed;
96-
top: 0;
97-
left: 0;
98-
width: 100%;
99-
height: 100%;
100-
z-index: 500;
101-
display: flex;
102-
align-items: center;
103-
justify-content: center;
104-
padding: var(--UI-Spacing-spacing-xl);
105-
box-sizing: border-box;
106-
margin: 0;
107-
}
108-
109-
.bespoke .modal-backdrop {
110-
position: absolute;
111-
top: 0;
112-
left: 0;
113-
width: 100%;
114-
height: 100%;
115-
background: rgba(0, 0, 0, 0.5);
116-
backdrop-filter: blur(2px);
117-
}
118-
119-
.bespoke .modal-content {
120-
position: relative;
121-
background: var(--Colors-Backgrounds-Main-Top);
122-
border: 1px solid var(--Colors-Stroke-Default);
123-
border-radius: var(--UI-Radius-radius-m);
124-
max-width: 800px;
125-
width: calc(100% - 40px);
126-
max-height: 90vh;
127-
display: flex;
128-
flex-direction: column;
129-
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
130-
margin: 0;
131-
}
132-
133-
.bespoke .modal-header {
134-
display: flex;
135-
align-items: center;
136-
justify-content: space-between;
137-
padding: var(--UI-Spacing-spacing-xl);
138-
border-bottom: 1px solid var(--Colors-Stroke-Default);
139-
background: var(--Colors-Backgrounds-Main-Top);
140-
border-radius: var(--UI-Radius-radius-m) var(--UI-Radius-radius-m) 0 0;
141-
}
142-
143-
.bespoke .modal-header h2 {
144-
margin: 0;
145-
font-size: var(--Fonts-Body-Default-xl);
146-
color: var(--Colors-Text-Body-Strongest);
147-
font-family: var(--heading-family);
148-
font-weight: 500;
149-
}
150-
151-
.bespoke .modal-close {
152-
background: none;
153-
border: none;
154-
font-size: var(--Fonts-Body-Default-xxxl);
155-
color: var(--Colors-Text-Body-Medium);
156-
cursor: pointer;
157-
padding: var(--UI-Spacing-spacing-xxs) var(--UI-Spacing-spacing-s);
158-
border-radius: var(--UI-Radius-radius-xxs);
159-
line-height: 1;
160-
transition: all 0.2s ease;
161-
}
162-
163-
.bespoke .modal-close:hover {
164-
background: var(--Colors-Backgrounds-Main-Medium);
165-
color: var(--Colors-Text-Body-Default);
166-
}
167-
168-
.bespoke .modal-body {
169-
padding: var(--UI-Spacing-spacing-xl);
170-
overflow-y: auto;
171-
flex: 1;
172-
line-height: 1.6;
173-
}
174-
175-
.bespoke .modal-body h2 {
176-
margin-top: var(--UI-Spacing-spacing-xxxl);
177-
margin-bottom: var(--UI-Spacing-spacing-ml);
178-
font-size: var(--Fonts-Body-Default-xl);
179-
color: var(--Colors-Text-Body-Strongest);
180-
font-family: var(--heading-family);
181-
font-weight: 500;
182-
}
183-
184-
.bespoke .modal-body h2:first-child {
185-
margin-top: 0;
186-
}
187-
188-
.bespoke .modal-body h3 {
189-
margin-top: var(--UI-Spacing-spacing-xl);
190-
margin-bottom: var(--UI-Spacing-spacing-s);
191-
font-size: var(--Fonts-Body-Default-lg);
192-
color: var(--Colors-Text-Body-Strongest);
193-
font-family: var(--heading-family);
194-
font-weight: 500;
195-
}
196-
197-
.bespoke .modal-body p,
198-
.bespoke .modal-body li {
199-
color: var(--Colors-Text-Body-Default);
200-
margin-bottom: var(--UI-Spacing-spacing-s);
201-
}
202-
203-
.bespoke .modal-body ul,
204-
.bespoke .modal-body ol {
205-
margin: var(--UI-Spacing-spacing-s) 0 var(--UI-Spacing-spacing-ml) 0;
206-
padding-left: var(--UI-Spacing-spacing-xl);
207-
}
208-
209-
.bespoke .modal-body code {
210-
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
211-
background: rgba(148, 163, 184, 0.12);
212-
border-radius: var(--UI-Radius-radius-xxs);
213-
padding: 0.15em 0.35em;
214-
font-size: var(--Fonts-Body-Default-xs);
215-
}
216-
217-
.bespoke .modal-body pre {
218-
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
219-
background: rgba(148, 163, 184, 0.12);
220-
border-radius: var(--UI-Radius-radius-xs);
221-
padding: var(--UI-Spacing-spacing-ms);
222-
overflow: auto;
223-
margin: var(--UI-Spacing-spacing-ml) 0;
224-
}
225-
226-
.bespoke .modal-body img,
227-
.bespoke .modal-body video {
228-
max-width: 100%;
229-
height: auto;
230-
border-radius: var(--UI-Radius-radius-xs);
231-
border: 1px solid var(--Colors-Stroke-Default);
232-
margin: var(--UI-Spacing-spacing-ml) 0;
233-
}
234-
23593
/* Form Elements - TODO: Remove when design system adds form components */
23694
.bespoke label {
23795
display: flex;
@@ -417,15 +275,6 @@
417275

418276
/* Dark mode adjustments */
419277
@media (prefers-color-scheme: dark) {
420-
.bespoke .modal-backdrop {
421-
background: rgba(0, 0, 0, 0.7);
422-
}
423-
424-
.bespoke .modal-body code,
425-
.bespoke .modal-body pre {
426-
background: rgba(148, 163, 184, 0.2);
427-
}
428-
429278
.bespoke select {
430279
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c1c7d7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
431280
}
@@ -442,25 +291,5 @@
442291
border-right: none;
443292
border-bottom: 1px solid var(--Colors-Stroke-Default);
444293
}
445-
446-
.bespoke .modal {
447-
padding: var(--UI-Spacing-spacing-s);
448-
}
449-
450-
.bespoke .modal-content {
451-
max-height: 95vh;
452-
}
453-
454-
.bespoke .modal-header {
455-
padding: var(--UI-Spacing-spacing-mxl);
456-
}
457-
458-
.bespoke .modal-body {
459-
padding: var(--UI-Spacing-spacing-mxl);
460-
}
461-
462-
.bespoke .modal-header h2 {
463-
font-size: var(--Fonts-Body-Default-lg);
464-
}
465294
}
466295

0 commit comments

Comments
 (0)