chore(ui): Clean up warnings (#536)

Author: IDisposable

ui/src/components/Terminal.tsx

@@ -61,9 +61,9 @@ function Terminal({
   dataChannel,
   type,
 }: {
-  title: string;
-  dataChannel: RTCDataChannel;
-  type: AvailableTerminalTypes;
+  readonly title: string;
+  readonly dataChannel: RTCDataChannel;
+  readonly type: AvailableTerminalTypes;
 }) {
   const enableTerminal = useUiStore(state => state.terminalType == type);
   const setTerminalType = useUiStore(state => state.setTerminalType);

ui/src/components/popovers/PasteModal.tsx

@@ -131,7 +131,7 @@ export default function PasteModal() {
                 }}
               >
                 <div>
-                  <div className="w-full" onKeyUp={e => e.stopPropagation()}>
+                  <div className="w-full" onKeyUp={e => e.stopPropagation()} onKeyDown={e => e.stopPropagation()}>
                     <TextAreaWithLabel
                       ref={TextAreaRef}
                       label="Paste from host"

ui/src/routes/devices.$id.settings.tsx

@@ -269,22 +269,17 @@ export default function SettingsRoute() {
   );
 }
 
-export function SettingsItem({
-  title,
-  description,
-  children,
-  className,
-  loading,
-  badge,
-}: {
-  title: string;
-  description: string | React.ReactNode;
-  children?: React.ReactNode;
-  className?: string;
-  name?: string;
-  loading?: boolean;
-  badge?: string;
-}) {
+interface SettingsItemProps {
+  readonly title: string;
+  readonly description: string | React.ReactNode;
+  readonly badge?: string;
+  readonly className?: string;
+  readonly loading?: boolean;
+  readonly children?: React.ReactNode;
+}
+export function SettingsItem(props: SettingsItemProps) {
+  const { title, description, badge, children, className, loading } = props;
+
   return (
     <label
       className={cx(

ui/src/routes/devices.$id.tsx

@@ -715,12 +715,10 @@ export default function KvmIdRoute() {
   useEffect(() => {
     if (!peerConnection) return;
     if (!kvmTerminal) {
-      // console.log('Creating data channel "terminal"');
       setKvmTerminal(peerConnection.createDataChannel("terminal"));
     }
 
     if (!serialConsole) {
-      // console.log('Creating data channel "serial"');
       setSerialConsole(peerConnection.createDataChannel("serial"));
     }
   }, [kvmTerminal, peerConnection, serialConsole]);
@@ -755,10 +753,10 @@ export default function KvmIdRoute() {
 
   const ConnectionStatusElement = useMemo(() => {
     const hasConnectionFailed =
-      connectionFailed || ["failed", "closed"].includes(peerConnectionState || "");
+      connectionFailed || ["failed", "closed"].includes(peerConnectionState ?? "");
 
     const isPeerConnectionLoading =
-      ["connecting", "new"].includes(peerConnectionState || "") ||
+      ["connecting", "new"].includes(peerConnectionState ?? "") ||
       peerConnection === null;
 
     const isDisconnected = peerConnectionState === "disconnected";
@@ -826,7 +824,7 @@ export default function KvmIdRoute() {
             isLoggedIn={authMode === "password" || !!user}
             userEmail={user?.email}
             picture={user?.picture}
-            kvmName={deviceName || "JetKVM Device"}
+            kvmName={deviceName ?? "JetKVM Device"}
           />
 
           <div className="relative flex h-full w-full overflow-hidden">
@@ -846,6 +844,9 @@ export default function KvmIdRoute() {
 
       <div
         className="z-50"
+        onClick={e => e.stopPropagation()}
+        onMouseUp={e => e.stopPropagation()}
+        onMouseDown={e => e.stopPropagation()}
         onKeyUp={e => e.stopPropagation()}
         onKeyDown={e => {
           e.stopPropagation();
@@ -869,7 +870,12 @@ export default function KvmIdRoute() {
   );
 }
 
-function SidebarContainer({ sidebarView }: { sidebarView: string | null }) {
+interface SidebarContainerProps {
+  readonly sidebarView: string | null;
+}
+
+function SidebarContainer(props: SidebarContainerProps) {
+  const { sidebarView }= props;
   return (
     <div
       className={cx(

ui/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
+    "forceConsistentCasingInFileNames": true,
     "lib": ["ES2021", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,