fix: build

Author: therebelrobot

package-lock.json

@@ -27,6 +27,7 @@
     "globals": "^16.5.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.17",
+    "terser": "^5.44.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4"

package.json

@@ -4,23 +4,55 @@ import { GameStateProvider, useGameState } from '@context/GameStateContext';
 import { GenreEditorProvider } from '@context/GenreEditorContext';
 import { ThemeToggle } from '@components/ui/ThemeToggle';
 import { Button } from '@components/ui/Button';
+import { Modal } from '@components/ui/Modal';
 import { GenreSelector } from '@components/game/GenreSelector';
 import { QuestionFlow } from '@components/game/QuestionFlow';
 import { BingoBoard } from '@components/game/BingoBoard';
 import { GenreEditor } from '@components/editor/GenreEditor';
-import { handleSharedGenreOnLoad } from '@utils/shareGenre';
+import { getSharedGenreFromUrl, handleSharedGenreImport, clearShareUrl } from '@utils/shareGenre';
+import type { Genre } from '@data/types';
 
 type AppMode = 'game' | 'editor';
 
 function AppContent() {
   const { selectedGenre, board } = useGameState();
   const [mode, setMode] = useState<AppMode>('game');
+  const [sharedGenre, setSharedGenre] = useState<Genre | null>(null);
+  const [importModal, setImportModal] = useState(false);
+  const [successModal, setSuccessModal] = useState<string>('');
+  const [errorModal, setErrorModal] = useState<string>('');
 
   // Handle shared genre links on mount
   useEffect(() => {
-    handleSharedGenreOnLoad();
+    const genre = getSharedGenreFromUrl();
+    if (genre) {
+      setSharedGenre(genre);
+      setImportModal(true);
+    }
   }, []);
 
+  const handleImportConfirm = () => {
+    if (sharedGenre) {
+      handleSharedGenreImport(
+        sharedGenre,
+        (message) => {
+          setImportModal(false);
+          setSuccessModal(message);
+        },
+        (message) => {
+          setImportModal(false);
+          setErrorModal(message);
+        }
+      );
+    }
+  };
+
+  const handleImportCancel = () => {
+    setImportModal(false);
+    setSharedGenre(null);
+    clearShareUrl();
+  };
+
   if (mode === 'editor') {
     return (
       <div className="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)] transition-colors duration-200">
@@ -64,6 +96,33 @@ function AppContent() {
         {/* Board generated - show bingo board */}
         {selectedGenre && board && <BingoBoard />}
       </main>
+
+      {/* Shared Genre Import Modals */}
+      <Modal
+        isOpen={importModal}
+        onClose={handleImportCancel}
+        onConfirm={handleImportConfirm}
+        title="Import Shared Genre"
+        message={`Import shared genre "${sharedGenre?.name}"?\n\nThis will save it to your browser and make it available in the genre selector.`}
+        type="confirm"
+        confirmText="Import"
+      />
+
+      <Modal
+        isOpen={!!successModal}
+        onClose={() => setSuccessModal('')}
+        title="Success"
+        message={successModal}
+        type="alert"
+      />
+
+      <Modal
+        isOpen={!!errorModal}
+        onClose={() => setErrorModal('')}
+        title="Error"
+        message={errorModal}
+        type="alert"
+      />
     </div>
   );
 }

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useGenreEditor } from '@context/GenreEditorContext';
 import { Button } from '@components/ui/Button';
 import { COLOR_PALETTES, generateRandomPalette, type ColorPalette } from '@utils/colorPalettes';

src/components/editor/BasicInfoEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback } from 'react';
 import { useGenreEditor } from '@context/GenreEditorContext';
 import { getAllGenres } from '@data/genres';
 import type { Genre } from '@data/types';
@@ -7,7 +7,7 @@ import { Modal } from '@components/ui/Modal';
 import { BasicInfoEditor } from './BasicInfoEditor';
 import { QuestionsEditor } from './QuestionsEditor';
 import { TropeSetsEditor } from './TropeSetsEditor';
-import { saveCustomGenre, isCustomGenre } from '@utils/customGenres';
+import { saveCustomGenre } from '@utils/customGenres';
 import { createShareUrl } from '@utils/shareGenre';
 
 function EditorTabs() {

src/components/editor/GenreEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useGenreEditor } from '@context/GenreEditorContext';
 import type { Question, QuestionOption } from '@data/types';
 import { Button } from '@components/ui/Button';

src/components/editor/QuestionsEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useGenreEditor } from '@context/GenreEditorContext';
 import type { TropeSet, Trope } from '@data/types';
 import { Button } from '@components/ui/Button';
@@ -21,7 +21,7 @@ export function TropeSetsEditor() {
   const generateSetId = (filters: Record<string, string | string[]>): string => {
     const parts: string[] = [];
 
-    for (const [key, value] of Object.entries(filters)) {
+    for (const [, value] of Object.entries(filters)) {
       if (value === undefined) continue;
 
       if (Array.isArray(value)) {

src/components/editor/TropeSetsEditor.tsx

@@ -1,6 +1,5 @@
 import { getAllGenres } from '@data/genres';
 import { useGameState } from '@context/GameStateContext';
-import { Button } from '@components/ui/Button';
 
 export function GenreSelector() {
   const genres = getAllGenres();

src/components/game/GenreSelector.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from './Button';
 
 interface ModalProps {
@@ -62,4 +61,4 @@ export function Modal({
       </div>
     </div>
   );
-}
+}

src/components/ui/Modal.tsx

@@ -1,5 +1,5 @@
-import React, { createContext, useContext, useEffect, useState, type PropsWithChildren } from 'react';
-import type { GameState, Trope, Genre } from '@data/types';
+import { createContext, useContext, useEffect, useState, type PropsWithChildren } from 'react';
+import type { GameState, Genre } from '@data/types';
 import { getGenreById } from '@data/genres';
 import { selectTropes, generateBoard } from '@utils/tropes';
 import { generateSeed } from '@utils/shuffle';