refactor: add TypeScript type checking and fix UI issues

- Add complete TypeScript type checking with tsc --noEmit
- Fix all type errors and add proper type definitions for cloudflare:test
- Add .js extensions to test imports for node16 module resolution
- Improve component accessibility (remove invalid aria-labelledby)
- Add success-50/100 colors for encrypted paste indication
- Optimize CodeEditor line number rendering with useMemo
- Fix CSS transform syntax and color consistency
- Add keyboard navigation support for Select and Autocomplete
- Add type checking to CI workflow and documentation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: SharzyL

.github/workflows/pr.yml

@@ -62,6 +62,9 @@ jobs:
           pnpm prettier -c .
           pnpm lint
 
+      - name: "Type Check"
+        run: pnpm typecheck
+
       - name: "Run Test with Coverage"
         run: pnpm coverage --testTimeout 15000
 

README.md

@@ -133,4 +133,5 @@ Remember to run eslint checks and prettier before commiting your code.
 ```console
 $ pnpm fmt
 $ pnpm lint
+$ pnpm typecheck
 ```

frontend/components/CodeEditor.tsx

@@ -1,7 +1,5 @@
-// inspired by https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/
-
-import React, { useEffect, useRef, useState } from "react"
-import { Autocomplete, AutocompleteItem, Input, Select, SelectItem } from "@heroui/react"
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import { Autocomplete, AutocompleteItem, Input, Select, SelectItem } from "./ui/index.js"
 
 import { autoCompleteOverrides, inputOverrides, selectOverrides, tst } from "../utils/overrides.js"
 import { useHLJS, highlightHTML } from "../utils/HighlightLoader.js"
@@ -41,7 +39,7 @@ function formatTabSetting(s: TabSetting, forHuman: boolean) {
 }
 
 function parseTabSetting(s: string): TabSetting | undefined {
-  const match = /^(tab|space) ([24])$/.exec(s)
+  const match = /^(tab|space) ([248])$/.exec(s)
   if (match) {
     return { char: match[1] as TabSetting["char"], width: parseInt(match[2]) as TabSetting["width"] }
   } else {
@@ -59,7 +57,7 @@ const tabSettings: TabSetting[] = [
 ]
 
 function handleNewLines(str: string): string {
-  if (str.charAt(-1) === "\n") {
+  if (str.endsWith("\n")) {
     str += " "
   }
   return str
@@ -140,6 +138,7 @@ export function CodeEditor({
     <div className={className} {...rest}>
       <div className={"mb-2 gap-2 flex flex-row" + " "}>
         <Input
+          className="flex-1"
           classNames={inputOverrides}
           type={"text"}
           label={"File name"}
@@ -148,27 +147,33 @@ export function CodeEditor({
           onValueChange={setFilename}
         />
         <Autocomplete
-          className={"max-w-[10em]"}
+          className={"max-w-[8em]"}
           classNames={autoCompleteOverrides}
           label={"Language"}
           size={"sm"}
           defaultItems={hljs ? hljs.listLanguages().map((lang) => ({ key: lang })) : []}
           // we must not use undefined here to avoid conversion from uncontrolled component to controlled component
           selectedKey={hljs && lang && hljs.listLanguages().includes(lang) ? lang : ""}
           onSelectionChange={(key) => {
-            setLang((key as string) || undefined) // when key is empty string, convert back to undefined
+            setLang(key || undefined) // when key is empty string, convert back to undefined
           }}
         >
-          {(language) => <AutocompleteItem key={language.key}>{language.key}</AutocompleteItem>}
+          {(language: { key: string }) => (
+            <AutocompleteItem key={language.key} value={language.key}>
+              {language.key}
+            </AutocompleteItem>
+          )}
         </Autocomplete>
         <Select
           size={"sm"}
           label={"Indent With"}
-          className={"max-w-[10em] text-foreground"}
+          className={"w-[6em] text-foreground"}
           classNames={selectOverrides}
           selectedKeys={[formatTabSetting(tabSetting, false)]}
           onSelectionChange={(s) => {
-            setTabSettings(parseTabSetting(s.currentKey!)!)
+            const key = Array.from(s)[0]
+            const parsed = parseTabSetting(key)
+            if (parsed) setTabSettings(parsed)
           }}
         >
           {tabSettings.map((s) => (
@@ -196,9 +201,13 @@ export function CodeEditor({
               }
               style={{ height: `${heightPx}px` }}
             >
-              {Array.from({ length: lineCount }, (_, idx) => {
-                return <span key={idx} />
-              })}
+              {useMemo(
+                () =>
+                  Array.from({ length: lineCount }, (_, idx) => {
+                    return <span key={idx} />
+                  }),
+                [lineCount],
+              )}
             </span>
           </div>
           <textarea

frontend/components/CopyWidget.tsx

@@ -1,5 +1,5 @@
-import type { ButtonProps } from "@heroui/react"
-import { Button } from "@heroui/react"
+import type { ButtonProps } from "./ui/index.js"
+import { Button } from "./ui/index.js"
 import { useRef, useState } from "react"
 import { CopyIcon, CheckIcon } from "./icons.js"
 
@@ -27,7 +27,7 @@ export function CopyWidget({ className, getCopyContent, ...rest }: CopyIconProps
   }
 
   return (
-    <Button isIconOnly aria-label="Copy" className={className} onPress={onCopy} {...rest}>
+    <Button isIconOnly size="sm" variant="light" aria-label="Copy" className={className} onPress={onCopy} {...rest}>
       {hasIssuedCopies ? <CheckIcon className="size-6" /> : <CopyIcon className="size-6" />}
     </Button>
   )

frontend/components/DarkModeToggle.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from "react"
 import React, { useEffect, useState, useSyncExternalStore } from "react"
-import type { ButtonProps } from "@heroui/react"
-import { Button, Tooltip } from "@heroui/react"
+import type { ButtonProps } from "./ui/index.js"
+import { Button, Tooltip } from "./ui/index.js"
 
 import { ComputerIcon, MoonIcon, SunIcon } from "./icons.js"
 import { tst } from "../utils/overrides.js"
@@ -79,7 +79,9 @@ export function DarkModeToggle({ modeSelection, setModeSelection, className, ...
     return (
       <Button
         isIconOnly
-        className={`rounded-full ${tst} bg-background hover:bg-default-100` + " " + className}
+        size="sm"
+        variant="light"
+        className={`${tst}` + " " + className}
         aria-label="Toggle dark mode"
         style={{ visibility: "hidden" }}
         {...rest}
@@ -93,7 +95,9 @@ export function DarkModeToggle({ modeSelection, setModeSelection, className, ...
     <Tooltip content={`Toggle dark mode (currently ${currentMode} mode)`}>
       <Button
         isIconOnly
-        className={`rounded-full ${tst} bg-background hover:bg-default-100` + " " + className}
+        size="sm"
+        variant="light"
+        className={`${tst}` + " " + className}
         aria-label="Toggle dark mode"
         onPress={() => {
           const newSelected = modeSelections[(modeSelections.indexOf(currentMode) + 1) % modeSelections.length]

frontend/components/ErrorModal.tsx

@@ -1,5 +1,5 @@
-import type { ModalProps } from "@heroui/react"
-import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "@heroui/react"
+import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "./ui/index.js"
+import type { ModalProps } from "./ui/index.js"
 import React, { useState } from "react"
 import { ErrorWithTitle } from "../utils/errors.js"
 
@@ -9,7 +9,7 @@ export interface ErrorState {
   isOpen: boolean
 }
 
-type ErrorModalProps = Omit<ModalProps, "children">
+type ErrorModalProps = Partial<Omit<ModalProps, "children" | "isOpen" | "onClose">>
 
 export function useErrorModal() {
   const [errorState, setErrorState] = useState<ErrorState>({ isOpen: false, content: "", title: "" })
@@ -38,7 +38,7 @@ export function useErrorModal() {
       setErrorState({ isOpen: false, content: "", title: "" })
     }
     return (
-      <Modal isOpen={errorState.isOpen} state={errorState} onClose={onClose} {...rest}>
+      <Modal isOpen={errorState.isOpen} onClose={onClose} {...rest}>
         <ModalContent>
           <ModalHeader className="flex flex-col gap-1">{errorState.title}</ModalHeader>
           <ModalBody>

frontend/components/PasteInputPanel.tsx

@@ -1,5 +1,5 @@
-import type { CardProps } from "@heroui/react"
-import { Card, CardBody, Tab, Tabs } from "@heroui/react"
+import type { CardProps } from "./ui/index.js"
+import { Card, CardBody, Tab, Tabs } from "./ui/index.js"
 import type { DragEvent } from "react"
 import { useRef, useState } from "react"
 import { formatSize } from "../utils/utils.js"
@@ -52,7 +52,7 @@ export function PasteInputPanel({ isPasteLoading, state, onStateChange, ...rest
         <Tabs
           variant="underlined"
           classNames={{
-            tabList: `gap-2 w-full px-2 py-0 border-divider`,
+            tabList: `gap-2 w-full py-0 border-divider mb-2 -ml-1`,
             cursor: `w-[80%] ${tst}`,
             tab: `max-w-fit px-2 h-8 px-2`,
             panel: "pb-1",

frontend/components/PasteSettingPanel.tsx

@@ -1,4 +1,4 @@
-import type { CardProps } from "@heroui/react"
+import type { CardProps } from "./ui/index.js"
 import {
   Card,
   CardBody,
@@ -10,7 +10,7 @@ import {
   RadioGroup,
   Switch,
   Tooltip,
-} from "@heroui/react"
+} from "./ui/index.js"
 import { verifyExpiration, verifyManageUrl, verifyName } from "../utils/utils.js"
 import React from "react"
 import { InfoIcon } from "./icons.js"
@@ -45,10 +45,8 @@ export function PanelSettingsPanel({ setting, onSettingChange, config, ...rest }
           <Input
             type="text"
             label="Expiration"
-            // to avoid duplicated name, see https://github.com/adobe/react-spectrum/discussions/8037
-            aria-labelledby=""
             classNames={{
-              base: "basis-80",
+              base: "basis-40",
               ...inputOverrides,
             }}
             defaultValue="7d"
@@ -62,16 +60,18 @@ export function PanelSettingsPanel({ setting, onSettingChange, config, ...rest }
           <Input
             type="password"
             label="Password"
-            aria-labelledby=""
             value={setting.password}
             onValueChange={(p) => onSettingChange({ ...setting, password: p })}
-            classNames={inputOverrides}
+            classNames={{
+              base: "flex-1",
+              ...inputOverrides,
+            }}
             placeholder={"Generated randomly"}
             description="Used to update/delete your paste"
           />
         </div>
         <RadioGroup
-          className="gap-4 mb-3 w-full"
+          className="mb-3 w-full"
           value={setting.uploadKind}
           onValueChange={(v) => onSettingChange({ ...setting, uploadKind: v as UploadKind })}
         >

frontend/components/UploadedPanel.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 
-import type { CardProps } from "@heroui/react"
-import { Card, CardBody, CardHeader, CircularProgress, Divider, Input, mergeClasses } from "@heroui/react"
+import type { CardProps } from "./ui/index.js"
+import { Card, CardBody, CardHeader, CircularProgress, Divider, Input, mergeClasses } from "./ui/index.js"
 
 import type { PasteResponse } from "../../shared/interfaces.js"
 import { tst } from "../utils/overrides.js"
@@ -32,9 +32,8 @@ export function UploadedPanel({
   encryptionKey,
   ...rest
 }: UploadedPanelProps) {
-  const copyWidgetClassNames = `bg-transparent ${tst} translate-y-[10%]`
+  const copyWidgetClassNames = `${tst}`
   const inputProps = {
-    "aria-labelledby": "",
     readOnly: true,
     className: "mb-2",
   }
@@ -49,7 +48,7 @@ export function UploadedPanel({
             <CircularProgress
               aria-label={"Loading..."}
               value={loadingProgress}
-              className={"absolute top-[50%] left-[50%] translate-[-50%]"}
+              className={"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"}
             />
           </div>
         ) : (
@@ -59,10 +58,11 @@ export function UploadedPanel({
                 {...inputProps}
                 label={"Display URL"}
                 color={encryptionKey ? "success" : "default"}
+                className={encryptionKey ? "mb-2 [&_input]:bg-success-50" : "mb-2"}
                 value={makeDecryptionUrl(pasteResponse.url, encryptionKey)}
                 endContent={
                   <CopyWidget
-                    className={copyWidgetClassNames}
+                    className={encryptionKey ? `${copyWidgetClassNames} hover:bg-success-100` : copyWidgetClassNames}
                     getCopyContent={() => makeDecryptionUrl(pasteResponse.url, encryptionKey)}
                   />
                 }