Refactor drawer UI from CD-ROM list into a reusable component

Also hide the CD-ROM drawer for emulators that don't support it
(just DingusPPC).

Updates #337

Author: mihaip

src/Mac.tsx

@@ -41,10 +41,12 @@ import {
 import {type Appearance} from "./controls/Appearance";
 import {
     emulatorNeedsMouseDeltas,
+    emulatorSupportsCDROMs,
     emulatorSupportsDownloadsFolder,
 } from "./emulator/emulator-common-emulators";
 import {type ScreenSize} from "./run-def";
 import {viewTransitionNameForDisk} from "./view-transitions";
+import {DrawersContainer} from "./controls/Drawer";
 
 export type MacProps = {
     disks: SystemDiskDef[];
@@ -690,11 +692,15 @@ export default function Mac({
                 )}
             </ScreenFrame>
             {!fullscreen && disks[0]?.infiniteHdSubset !== "mfs" && (
-                <MacCDROMs
-                    onRun={loadCDROM}
-                    appearance={appearance}
-                    platform={machine.platform}
-                />
+                <DrawersContainer>
+                    {emulatorSupportsCDROMs(machine.emulatorType) && (
+                        <MacCDROMs
+                            onRun={loadCDROM}
+                            appearance={appearance}
+                            platform={machine.platform}
+                        />
+                    )}
+                </DrawersContainer>
             )}
         </>
     );

src/MacCDROMs.css

@@ -1,99 +1,3 @@
-.Mac-CDROMs {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    z-index: 2;
-    filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.5));
-    pointer-events: none;
-}
-
-.Mac-CDROMs-Title {
-    padding: 4px 4px 4px 28px;
-    cursor: pointer;
-    background-image: url(./Images/CD-ROM.png);
-    background-position: 4px 50%;
-    background-repeat: no-repeat;
-    image-rendering: pixelated;
-    border-radius: 4px 4px 0 0;
-    border: solid 1px black;
-    border-bottom-width: 0;
-    position: relative;
-    top: 1px; /* to cover up the border of the list */
-    pointer-events: auto;
-}
-
-.Mac-CDROMs-Classic .Mac-CDROMs-Title {
-    background-color: white;
-}
-
-.Mac-CDROMs-Classic .Mac-CDROMs-Title:active {
-    background-color: #eee;
-}
-
-.Mac-CDROMs-Platinum .Mac-CDROMs-Title {
-    background-color: #ddd;
-}
-
-.Mac-CDROMs-Platinum .Mac-CDROMs-Title:active {
-    background-color: #dadada;
-}
-
-.Mac-CDROMs-NeXT .Mac-CDROMs-Title {
-    background-color: #aaa;
-    border: solid 1px;
-    border-color: #fff #555 #555 #fff;
-    color: #000;
-    border-radius: 0;
-    font-family: Helvetica, sans-serif;
-    font-weight: bold;
-}
-
-.Mac-CDROMs-Expanded.Mac-CDROMs-NeXT .Mac-CDROMs-Title {
-    box-sizing: border-box;
-    width: 80vw;
-    background-color: #000;
-    border-color: #aaa #555 #555 #aaa;
-    color: #fff;
-    outline: solid 1px #000;
-}
-
-.Mac-CDROMs-Contents {
-    background: white;
-    border: solid 1px black;
-    border-bottom-width: 0;
-    border-radius: 4px 4px 0 0;
-    height: 50vh;
-    width: 80vw;
-    pointer-events: auto;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-}
-
-.Mac-CDROMs-NeXT .Mac-CDROMs-Contents {
-    border-radius: 0;
-    background: #aaa;
-}
-
-.Mac-CDROMs-List {
-    overflow: auto;
-}
-
-.Mac-CDROMs-Header {
-    padding: 8px;
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    width: 100%;
-    justify-content: space-between;
-    box-sizing: border-box;
-    font-size: 12px;
-}
-
 .Mac-CDROMs-Instructions {
     flex-grow: 1;
 }
@@ -102,77 +6,12 @@
     width: 60px;
 }
 
-.Mac-CDROMs-Classic .Mac-CDROMs-Header {
-    border-bottom: solid 1px #9e9e9e;
-}
-
-.Mac-CDROMs-Platinum .Mac-CDROMs-Header {
-    background: #ddd;
-    border-bottom: solid 1px #a5a5a5;
-}
-
-.Mac-CDROMs-NeXT .Mac-CDROMs-Header {
-    background: #aaa;
-    border-top: solid 1px #000;
-    border-bottom: solid 1px #555;
-    position: relative;
-}
-
-.Mac-CDROMs-NeXT .Mac-CDROMs-Header:after {
-    content: "";
-    display: block;
-    width: 100%;
-    height: 1px;
-    background: #fff;
-    position: absolute;
-    bottom: -2px;
-    left: 0;
-}
-
 .Mac-CDROMs-Contents .link {
     cursor: pointer;
     text-decoration: underline;
     color: #00c;
 }
 
-.Mac-CDROMs-Category {
-    margin: 8px 0;
-}
-
-.Mac-CDROMs-Category h3 {
-    margin: 8px 0;
-    background: linear-gradient(to right, #ddd, #fff);
-    padding: 1px 8px;
-}
-
-.Mac-CDROMs-NeXT .Mac-CDROMs-Category h3 {
-    /* Simulate a 2x2 gray and clear checkerboard, similar to a disabled scrollbar in NeXTSTEP 3.3 */
-    background-position: 0px 0px, 1px 1px;
-    background-size: 2px 2px;
-    background-image: linear-gradient(
-            45deg,
-            #555 25%,
-            transparent 25%,
-            transparent 75%,
-            #555 75%,
-            #555 100%
-        ),
-        linear-gradient(
-            45deg,
-            #555 25%,
-            transparent 25%,
-            transparent 75%,
-            #555 75%,
-            #555 100%
-        );
-}
-
-.Mac-CDROMs-Category-Contents {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-
 .Mac-Custom-CDROM-URL {
     width: 100%;
     box-sizing: border-box;
@@ -206,19 +45,3 @@
     border-radius: 50%;
     overflow: hidden;
 }
-
-@media (max-width: 440px) {
-    .Mac-CDROMs {
-        align-items: start;
-        margin-left: 10px;
-        margin-right: 10px;
-    }
-
-    .Mac-CDROMs-Title {
-        margin-left: 20px;
-    }
-
-    .Mac-CDROMs-Contents {
-        width: 100%;
-    }
-}

src/MacCDROMs.tsx

@@ -10,6 +10,14 @@ import {type Appearance} from "./controls/Appearance";
 import {type MachinePlatform} from "./machines";
 import defaultCDROMImage from "./Images/DefaultCDROM.png";
 import defaultCDROMNeXTImage from "./Images/DefaultCDROM-NeXT.png";
+import cdromsIcon from "./Images/CD-ROM.png";
+import {
+    Drawer,
+    DrawerContents,
+    DrawerHeader,
+    DrawerList,
+    DrawerListCategory,
+} from "./controls/Drawer";
 
 export function MacCDROMs({
     onRun,
@@ -20,28 +28,22 @@ export function MacCDROMs({
     appearance: Appearance;
     platform?: MachinePlatform;
 }) {
-    const [expanded, setExpanded] = useState(false);
-    const toggleExpanded = () => setExpanded(value => !value);
-    const className = classNames("Mac-CDROMs", `Mac-CDROMs-${appearance}`, {
-        "Mac-CDROMs-Expanded": expanded,
-    });
-
     return (
-        <div className={className}>
-            <div className="Mac-CDROMs-Title" onClick={toggleExpanded}>
-                CD-ROMs
-            </div>
-            {expanded && (
+        <Drawer
+            title="CD-ROMs"
+            titleIconUrl={cdromsIcon}
+            appearance={appearance}
+            contents={collapse => (
                 <MacCDROMsContents
                     onRun={cdrom => {
-                        setExpanded(false);
+                        collapse();
                         onRun(cdrom);
                     }}
                     appearance={appearance}
                     platform={platform}
                 />
             )}
-        </div>
+        />
     );
 }
 
@@ -108,23 +110,22 @@ function MacCDROMsContents({
     const [customCDROMVisible, setCustomCDROMVisible] = useState(false);
 
     return (
-        <div className="Mac-CDROMs-Contents">
+        <DrawerContents>
             {customCDROMVisible && (
                 <MacCustomCDROM
                     onRun={onRun}
                     onDone={() => setCustomCDROMVisible(false)}
                     appearance={appearance}
                 />
             )}
-            <div className="Mac-CDROMs-Header">
+            <DrawerHeader>
                 <div className="Mac-CDROMs-Instructions">
                     Load CD-ROM images into the emulated Mac to access software
                     that is too large to pre-install on Infinite HD.
                 </div>
                 <Button
                     appearance={appearance}
-                    onClick={() => setCustomCDROMVisible(true)}
-                >
+                    onClick={() => setCustomCDROMVisible(true)}>
                     Load from URL…
                 </Button>
                 <Input
@@ -134,28 +135,25 @@ function MacCDROMsContents({
                     value={search}
                     onChange={e => setSearch(e.target.value)}
                 />
-            </div>
-            <div className="Mac-CDROMs-List">
+            </DrawerHeader>
+            <DrawerList>
                 {Object.entries(sortedCdromsByCategory).map(
                     ([category, cdroms]) => (
-                        <div key={category} className="Mac-CDROMs-Category">
-                            <h3>{category}</h3>
-                            <div className="Mac-CDROMs-Category-Contents">
-                                {cdroms.map(cdrom => (
-                                    <MacCDROM
-                                        key={cdrom.name}
-                                        cdrom={cdrom}
-                                        onRun={() => {
-                                            onRun(cdrom);
-                                        }}
-                                    />
-                                ))}
-                            </div>
-                        </div>
+                        <DrawerListCategory key={category} title={category}>
+                            {cdroms.map(cdrom => (
+                                <MacCDROM
+                                    key={cdrom.name}
+                                    cdrom={cdrom}
+                                    onRun={() => {
+                                        onRun(cdrom);
+                                    }}
+                                />
+                            ))}
+                        </DrawerListCategory>
                     )
                 )}
-            </div>
-        </div>
+            </DrawerList>
+        </DrawerContents>
     );
 }
 
@@ -191,8 +189,7 @@ function MacCustomCDROM({
             doneLabel="Run"
             doneEnabled={url !== "" && inputRef.current?.validity.valid}
             onCancel={onDone}
-            appearance={appearance}
-        >
+            appearance={appearance}>
             <p>
                 Infinite Mac supports loading of CD-ROM images from URLs. Be
                 aware of the following caveats: