Small improvements

package-lock.json

@@ -22,7 +22,6 @@
         "rc-slider": "^10.0.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "react-hot-keys": "^2.7.2",
         "react-hotkeys-hook": "^3.4.7",
         "react-swipeable": "^7.0.0",
         "react-zoom-pan-pinch": "^2.1.3",
@@ -7033,6 +7032,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7635,6 +7635,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -7761,20 +7762,6 @@
         "react": "^18.2.0"
       }
     },
-    "node_modules/react-hot-keys": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/react-hot-keys/-/react-hot-keys-2.7.2.tgz",
-      "integrity": "sha512-Z7eSh7SU6s52+zP+vkfFoNk0x4kgEmnwqDiyACKv53crK2AZ7FUaBLnf+vxLor3dvtId9murLmKOsrJeYgeHWw==",
-      "dependencies": {
-        "hotkeys-js": "^3.8.1",
-        "prop-types": "^15.7.2"
-      },
-      "peerDependencies": {
-        "@babel/runtime": ">=7.10.0",
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
     "node_modules/react-hotkeys-hook": {
       "version": "3.4.7",
       "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-3.4.7.tgz",
@@ -14430,7 +14417,8 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
     },
     "object-hash": {
       "version": "3.0.0",
@@ -14849,6 +14837,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -14934,15 +14923,6 @@
         "scheduler": "^0.23.0"
       }
     },
-    "react-hot-keys": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/react-hot-keys/-/react-hot-keys-2.7.2.tgz",
-      "integrity": "sha512-Z7eSh7SU6s52+zP+vkfFoNk0x4kgEmnwqDiyACKv53crK2AZ7FUaBLnf+vxLor3dvtId9murLmKOsrJeYgeHWw==",
-      "requires": {
-        "hotkeys-js": "^3.8.1",
-        "prop-types": "^15.7.2"
-      }
-    },
     "react-hotkeys-hook": {
       "version": "3.4.7",
       "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-3.4.7.tgz",

src/components/AppLayout.tsx

@@ -141,7 +141,8 @@ export const AppLayout = ({
           onClick={() => {
             setMainPanelOpen(false);
             setSubPanelOpen(false);
-          }}></div>
+          }}
+        />
       </div>
 
       {/* Content panel */}

src/components/HorizontalLine.tsx

@@ -12,5 +12,5 @@ interface Props {
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 export const HorizontalLine = ({ className }: Props): JSX.Element => (
-  <div className={cJoin("my-8 h-0 w-full border-t-2 border-dotted border-black", className)}></div>
+  <div className={cJoin("my-8 h-0 w-full border-t-2 border-dotted border-black", className)} />
 );

src/components/Markdown/Markdawn.tsx

@@ -204,7 +204,8 @@ export const Markdawn = ({ className, text: rawText }: MarkdawnProps): JSX.Eleme
                       : compProps.src
                   }
                   quality={ImageQuality.Medium}
-                  className="drop-shadow-shade-lg"></Img>
+                  className="drop-shadow-shade-lg"
+                />
               </div>
             ),
           },

src/components/PreviewLine.tsx

@@ -44,7 +44,7 @@ const PreviewLine = ({
         <Img className="h-full object-cover" src={thumbnail} quality={ImageQuality.Medium} />
       </div>
     ) : (
-      <div style={{ aspectRatio: thumbnailAspectRatio }}></div>
+      <div style={{ aspectRatio: thumbnailAspectRatio }} />
     )}
     <div className="grid gap-2">
       {topChips && topChips.length > 0 && (

src/components/ThumbnailHeader.tsx

@@ -57,7 +57,7 @@ export const ThumbnailHeader = ({
               onClick={() => showLightBox([thumbnail])}
             />
           ) : (
-            <div className="aspect-[4/3] w-96 rounded-xl bg-light"></div>
+            <div className="aspect-[4/3] w-96 rounded-xl bg-light" />
           )}
         </div>
         <div

src/pages/archives/videos/v/[uid].tsx

@@ -85,7 +85,7 @@ const Video = ({ video, ...otherProps }: Props): JSX.Element => {
         <div className="grid place-items-center gap-12">
           <div id="video" className="w-full overflow-hidden rounded-xl shadow-lg shadow-shade">
             {video.gone ? (
-              <video className="w-full" src={getVideoFile(video.uid)} controls></video>
+              <video className="w-full" src={getVideoFile(video.uid)} controls />
             ) : (
               <iframe
                 src={`https://www.youtube-nocookie.com/embed/${video.uid}`}
@@ -94,7 +94,8 @@ const Video = ({ video, ...otherProps }: Props): JSX.Element => {
                 frameBorder="0"
                 allow="accelerometer; autoplay; clipboard-write;
               encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen></iframe>
+                allowFullScreen
+              />
             )}
 
             <div className="mt-2 p-6">

src/pages/dev/checkup/contents.tsx

@@ -31,8 +31,8 @@ const CheckupContents = ({ contents, ...otherProps }: Props): JSX.Element => {
         {<h2 className="text-2xl">{testReport.title}</h2>}
 
         <div className="my-4 grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] items-center gap-2">
-          <p></p>
+          <p />
-          <p></p>
+          <p />
           <p className="font-headers">Ref</p>
           <p className="font-headers">Name</p>
           <p className="font-headers">Type</p>

src/pages/dev/checkup/libraryitems.tsx

@@ -33,8 +33,8 @@ const CheckupLibraryItems = ({ libraryItems, ...otherProps }: Props): JSX.Elemen
         {<h2 className="text-2xl">{testReport.title}</h2>}
 
         <div className="my-4 grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] items-center gap-2">
-          <p></p>
+          <p />
-          <p></p>
+          <p />
           <p className="font-headers">Ref</p>
           <p className="font-headers">Name</p>
           <p className="font-headers">Type</p>

src/pages/dev/transcript.tsx

@@ -369,7 +369,8 @@ const Transcript = (props: Props): JSX.Element => {
             onClick={updateLineIndex}
             onKeyUp={updateLineIndex}
             title="Input textarea"
-            className="whitespace-pre"></textarea>
+            className="whitespace-pre"
+          />
 
           <p
             className="h-[80vh] whitespace-nowrap font-[initial] font-bold
@@ -390,7 +391,8 @@ const Transcript = (props: Props): JSX.Element => {
               min="0"
               max="100"
               value={xOffset * 10}
-              onChange={(event) => setXOffset(parseInt(event.target.value, 10) / 10)}></input>
+              onChange={(event) => setXOffset(parseInt(event.target.value, 10) / 10)}
+            />
           </div>
 
           <div className="grid place-items-center">
@@ -401,9 +403,8 @@ const Transcript = (props: Props): JSX.Element => {
               min="1000"
               max="3000"
               value={fontSize * SIZE_MULTIPLIER}
-              onChange={(event) =>
+              onChange={(event) => setFontSize(parseInt(event.target.value, 10) / SIZE_MULTIPLIER)}
-                setFontSize(parseInt(event.target.value, 10) / SIZE_MULTIPLIER)
+            />
-              }></input>
           </div>
           <ToolTip content="Automatically convert Western punctuations to Japanese ones.">
             <Button text=". ⟹ 。" onClick={convertPunctuation} />

src/pages/library/[slug]/index.tsx

@@ -180,7 +180,7 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
                 }}
               />
             ) : (
-              <div className="aspect-[21/29.7] w-full rounded-xl bg-light"></div>
+              <div className="aspect-[21/29.7] w-full rounded-xl bg-light" />
             )}
           </div>
 
@@ -707,7 +707,7 @@ const ContentLine = ({
       <div className="my-4 grid gap-2">
         <div className="flex gap-2">
           {content?.type && <Chip text={content.type} />}
-          <p className="h-4 w-full border-b-2 border-dotted border-black opacity-30"></p>
+          <p className="h-4 w-full border-b-2 border-dotted border-black opacity-30" />
           <p>{rangeStart}</p>
         </div>
 
@@ -773,7 +773,7 @@ const ContentLine = ({
             <Chip key={index} text={category} />
           ))}
         </div>
-        <p className="h-4 w-full border-b-2 border-dotted border-black opacity-30"></p>
+        <p className="h-4 w-full border-b-2 border-dotted border-black opacity-30" />
         <p>{rangeStart}</p>
         {content?.type && <Chip className="justify-self-end" text={content.type} />}
       </div>