Skip to content

Commit 292426e

Browse files
kevinjosethomaskevinjosethomas
committed
feat: improve opening modal
1 parent d0fee62 commit 292426e

2 files changed

Lines changed: 99 additions & 44 deletions

File tree

‎src/components/Openings/OpeningSelectionModal.tsx‎

Lines changed: 84 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,8 @@ export const OpeningSelectionModal: React.FC<Props> = ({
188188
<div className="flex h-20 flex-col justify-center gap-1 border-b border-white/10 p-4">
189189
<h2 className="text-xl font-bold">Select Openings</h2>
190190
<p className="text-xs text-secondary">
191-
Double-click any opening to quickly add it
191+
Click the + button to quickly add an opening with current
192+
settings
192193
</p>
193194
</div>
194195

@@ -215,65 +216,105 @@ export const OpeningSelectionModal: React.FC<Props> = ({
215216
{filteredOpenings.map((opening) => (
216217
<div key={opening.id} className="flex flex-col">
217218
<div
218-
role="button"
219-
tabIndex={0}
220-
className={`mb-1 cursor-pointer p-4 transition-colors ${
219+
className={`group mb-1 transition-colors ${
221220
previewOpening.id === opening.id && !previewVariation
222221
? 'bg-human-2/20'
223222
: 'hover:bg-human-2/10'
224223
}`}
225-
onClick={() => {
226-
setPreviewOpening(opening)
227-
setPreviewVariation(null)
228-
}}
229-
onDoubleClick={() => {
230-
addQuickSelection(opening, null)
231-
}}
232-
onKeyDown={(e) => {
233-
if (e.key === 'Enter' || e.key === ' ') {
234-
setPreviewOpening(opening)
235-
setPreviewVariation(null)
236-
}
237-
}}
238224
>
239-
<div className="flex items-center justify-between">
240-
<div>
241-
<h3 className="font-medium">{opening.name}</h3>
242-
<p className="text-sm text-secondary">
243-
{opening.description}
244-
</p>
225+
<div className="flex items-center">
226+
<div
227+
role="button"
228+
tabIndex={0}
229+
className="flex-1 cursor-pointer p-4"
230+
onClick={() => {
231+
setPreviewOpening(opening)
232+
setPreviewVariation(null)
233+
}}
234+
onKeyDown={(e) => {
235+
if (e.key === 'Enter' || e.key === ' ') {
236+
setPreviewOpening(opening)
237+
setPreviewVariation(null)
238+
}
239+
}}
240+
>
241+
<div className="flex items-center justify-between">
242+
<div>
243+
<h3 className="font-medium">{opening.name}</h3>
244+
<p className="text-sm text-secondary">
245+
{opening.description}
246+
</p>
247+
</div>
248+
</div>
245249
</div>
250+
<button
251+
onClick={(e) => {
252+
e.stopPropagation()
253+
addQuickSelection(opening, null)
254+
}}
255+
disabled={isDuplicateSelection(opening, null)}
256+
className="mr-3 rounded p-1 text-secondary/60 transition-colors hover:text-secondary disabled:cursor-not-allowed disabled:opacity-30 group-hover:text-secondary/80"
257+
title={
258+
isDuplicateSelection(opening, null)
259+
? 'Already added with current settings'
260+
: 'Add opening with current settings'
261+
}
262+
>
263+
<span className="material-symbols-outlined text-base">
264+
add
265+
</span>
266+
</button>
246267
</div>
247268
</div>
248269
{opening.variations.map((variation) => (
249270
<div
250271
key={variation.id}
251-
role="button"
252-
tabIndex={0}
253-
className={`cursor-pointer px-6 py-1 transition-colors ${
272+
className={`group transition-colors ${
254273
previewOpening.id === opening.id &&
255274
previewVariation?.id === variation.id
256275
? 'bg-human-2/20'
257276
: 'hover:bg-human-2/10'
258277
}`}
259-
onClick={() => {
260-
setPreviewOpening(opening)
261-
setPreviewVariation(variation)
262-
}}
263-
onDoubleClick={() => {
264-
addQuickSelection(opening, variation)
265-
}}
266-
onKeyDown={(e) => {
267-
if (e.key === 'Enter' || e.key === ' ') {
268-
setPreviewOpening(opening)
269-
setPreviewVariation(variation)
270-
}
271-
}}
272278
>
273-
<div className="flex items-center justify-between">
274-
<p className="text-sm text-secondary">
275-
{variation.name}
276-
</p>
279+
<div className="flex items-center">
280+
<div
281+
role="button"
282+
tabIndex={0}
283+
className="flex-1 cursor-pointer px-6 py-1"
284+
onClick={() => {
285+
setPreviewOpening(opening)
286+
setPreviewVariation(variation)
287+
}}
288+
onKeyDown={(e) => {
289+
if (e.key === 'Enter' || e.key === ' ') {
290+
setPreviewOpening(opening)
291+
setPreviewVariation(variation)
292+
}
293+
}}
294+
>
295+
<div className="flex items-center justify-between">
296+
<p className="text-sm text-secondary">
297+
{variation.name}
298+
</p>
299+
</div>
300+
</div>
301+
<button
302+
onClick={(e) => {
303+
e.stopPropagation()
304+
addQuickSelection(opening, variation)
305+
}}
306+
disabled={isDuplicateSelection(opening, variation)}
307+
className="mr-3 rounded p-1 text-secondary/60 transition-colors hover:text-secondary disabled:cursor-not-allowed disabled:opacity-30 group-hover:text-secondary/80"
308+
title={
309+
isDuplicateSelection(opening, variation)
310+
? 'Already added with current settings'
311+
: 'Add variation with current settings'
312+
}
313+
>
314+
<span className="material-symbols-outlined text-base">
315+
add
316+
</span>
317+
</button>
277318
</div>
278319
</div>
279320
))}

‎src/pages/openings/index.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,18 @@ import {
3838
const OpeningsPage: NextPage = () => {
3939
const router = useRouter()
4040
const [showSelectionModal, setShowSelectionModal] = useState(true)
41+
const [isReopenedModal, setIsReopenedModal] = useState(false)
42+
43+
// Handle modal close with navigation
44+
const handleCloseModal = () => {
45+
if (isReopenedModal) {
46+
// Modal was reopened from within the page, just close it
47+
setShowSelectionModal(false)
48+
} else {
49+
// Modal was opened from initial page load, redirect to home
50+
router.push('/')
51+
}
52+
}
4153
const [drillConfiguration, setDrillConfiguration] =
4254
useState<DrillConfiguration | null>(null)
4355
const [promotionFromTo, setPromotionFromTo] = useState<
@@ -259,6 +271,8 @@ const OpeningsPage: NextPage = () => {
259271

260272
const handleChangeSelections = useCallback(() => {
261273
controller.resetDrillSession()
274+
// Mark that this is a reopened modal so it just closes instead of navigating
275+
setIsReopenedModal(true)
262276
setShowSelectionModal(true)
263277
}, [controller])
264278

@@ -377,7 +391,7 @@ const OpeningsPage: NextPage = () => {
377391
openings={openings}
378392
initialSelections={drillConfiguration?.selections || []}
379393
onComplete={handleCompleteSelection}
380-
onClose={() => setShowSelectionModal(false)}
394+
onClose={handleCloseModal}
381395
/>
382396
</AnimatePresence>
383397
</>

0 commit comments

Comments
 (0)