Use id less, and don't overwrite it

components/apps/FileExplorer/AddressBar.tsx

@@ -62,7 +62,7 @@ const AddressBar = forwardRef<HTMLInputElement, AddressBarProps>(
           {...useAddressBarContextMenu(url)}
         />
         <Button
-          id="refresh"
+          className="refresh"
           onClick={() => updateFolder(url)}
           {...label(`Refresh "${displayName}" (F5)`)}
         >

components/apps/FileExplorer/StyledAddressBar.ts

@@ -32,7 +32,7 @@ const StyledAddressBar = styled.div`
     top: 5px;
   }
 
-  #refresh {
+  .refresh {
     background-color: rgb(25, 25, 25);
     height: 28px;
     margin: 0;

components/apps/MonacoEditor/StatusBar.tsx

@@ -84,7 +84,7 @@ const StatusBar: FC<ComponentProcessProps> = ({ id }) => {
             <li>Lines {lineCount}</li>
           </ol>
           <ol>
-            <li className="clickable" id="save">
+            <li className="clickable save">
               <Button
                 onClick={async () => {
                   const [saveUrl, saveData] = getSaveFileInfo(url, editor);

components/apps/MonacoEditor/StyledStatusBar.ts

@@ -60,7 +60,7 @@ const StyledStatusBar = styled.footer`
         padding: 0;
       }
 
-      &#save {
+      &.save {
         svg {
           margin-top: 4px;
         }

components/apps/PDF/Controls.tsx

@@ -60,10 +60,10 @@ const Controls: FC<ComponentProcessProps> = ({ id }) => {
             / {count}
           </li>
         )}
-        <li id="scale">
+        <li className="scale">
           <Button
+            className="subtract"
             disabled={scale === 0.25 || count === 0}
-            id="subtract"
             onClick={() =>
               argument(id, "scale", scales[scales.indexOf(scale) - 1])
             }
@@ -102,8 +102,8 @@ const Controls: FC<ComponentProcessProps> = ({ id }) => {
             value={`${Math.round(scale * 100)}%`}
           />
           <Button
+            className="add"
             disabled={scale === 5 || count === 0}
-            id="add"
             onClick={() =>
               argument(id, "scale", scales[scales.indexOf(scale) + 1])
             }
@@ -115,8 +115,8 @@ const Controls: FC<ComponentProcessProps> = ({ id }) => {
       </ol>
       <div className="side-menu">
         <Button
+          className="download"
           disabled={count === 0}
-          id="download"
           onClick={async () => {
             const link = document.createElement("a");
 

components/apps/PDF/StyledControls.ts

@@ -46,11 +46,11 @@ const StyledControls = styled.nav`
     place-items: center;
     width: 30px;
 
-    &#subtract {
+    &.subtract {
       margin-right: 7px;
     }
 
-    &#add {
+    &.add {
       margin-left: 7px;
     }
 
@@ -78,7 +78,7 @@ const StyledControls = styled.nav`
       }
     }
 
-    &#download {
+    &.download {
       svg {
         margin-left: 1px;
         scale: 1.15;
@@ -132,7 +132,7 @@ const StyledControls = styled.nav`
         }
       }
 
-      &#scale {
+      &.scale {
         display: flex;
         place-items: center;
 

components/apps/PDF/index.tsx

@@ -7,7 +7,7 @@ import type { ComponentProcessProps } from "components/system/Apps/RenderCompone
 const PDF: FC<ComponentProcessProps> = ({ id }) => (
   <>
     <AppContainer StyledComponent={StyledPDF} id={id} useHook={usePDF}>
-      <ol id="pages" />
+      <ol className="pages" />
     </AppContainer>
     <Controls id={id} />
   </>

components/apps/PDF/usePDF.ts

@@ -143,7 +143,7 @@ const usePDF = ({
   useEffect(() => {
     if (pages.length > 0) {
       const ol = containerRef.current?.querySelector(
-        "#pages"
+        "ol.pages"
       ) as HTMLOListElement;
 
       if (ol) {

components/apps/Paint/index.tsx

@@ -179,7 +179,7 @@ const Paint: FC<ComponentProcessProps> = ({ id }) => {
       <iframe
         ref={iframeRef}
         height="100%"
-        id="jspaint-iframe"
+        id={`jspaint-${id}`}
         onLoad={() => setLoaded(true)}
         src={paintSrc}
         title={id}

contexts/process/directory.ts

@@ -64,6 +64,7 @@ const directory: Processes = {
     icon: "/System/Icons/dxball.webp",
     libs: ["/Program Files/DX-Ball/game.js"],
     lockAspectRatio: true,
+    singleton: true,
     title: "DX-Ball",
   },
   DevTools: {

pages/_document.tsx

@@ -39,7 +39,7 @@ class Document extends NextDocument {
       <Html lang={DEFAULT_LOCALE}>
         <Head />
         <body>
-          <Script id="initialHeight" strategy="beforeInteractive">
+          <Script id="initHeight" strategy="beforeInteractive">
             window.initialHeight = window.innerHeight;
           </Script>
           <Main />