auto format

.editorconfig

@@ -8,4 +8,4 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 indent_style = space
-indent_size = 4
+indent_size = 2

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll": "never",
+        "source.organizeImports": true
+    },
+    "html.format.contentUnformatted": "pre,code,textarea,svg",
+}

desktop/src/App.tsx

@@ -1,56 +1,53 @@
 import { invoke } from "@tauri-apps/api/tauri";
 import { useLocalStorage } from "@uidotdev/usehooks";
 import { useEffect, useRef } from "react";
-import { v4 as uuidv4 } from 'uuid';
+import { v4 as uuidv4 } from "uuid";
 import successSvg from "./assets/success.svg";
 import { BASE_URL } from "./config";
 import { createQR } from "./qr";
 import { Action, usePeer } from "./usePeer";
 
-
 function App() {
-  const [id, ] = useLocalStorage('id', uuidv4())
-  console.log('localstorage id => ', id)
-  const {message, status} = usePeer(id, true)
+  const [id] = useLocalStorage("id", uuidv4());
+  console.log("localstorage id => ", id);
+  const { message, status } = usePeer(id, true);
   const qrDiv = useRef<HTMLDivElement>(null);
-
 
   async function renderQR() {
     const url = `${BASE_URL}?id=${id}`;
     if (qrDiv.current) {
       qrDiv.current.innerHTML = "";
     }
     const newQR = createQR(url);
-    
+
     const element = await newQR._getElement();
     if (element) {
       qrDiv.current?.appendChild(element);
     }
   }
 
   useEffect(() => {
-    console.log('status => ', status)
-    if (status === 'READY') {
+    console.log("status => ", status);
+    if (status === "READY") {
       console.log("creating qr");
       const url = `${BASE_URL}?id=${id}`;
       console.log("url => ", url);
-     renderQR() 
+      renderQR();
     }
-  }, [status])
+  }, [status]);
 
   useEffect(() => {
     if (message) {
       invoke("press", { key: Action[message.action].toString() });
     }
-  }, [message])
-
+  }, [message]);
 
   function copyURL() {
     const url = `${BASE_URL}?id=${id}`;
     navigator.clipboard.writeText(url);
   }
 
-  if (status === 'CONNECTED') {
+  if (status === "CONNECTED") {
     return (
       <div className="flex flex-col items-center justify-center w-full h-[100vh]">
         <span className="text-3xl mb-5">CONNECTED</span>
@@ -63,7 +60,7 @@ function App() {
     <div className="flex flex-col w-[100vw] h-[100vh] items-center justify-center">
       <span className="text-3xl mb-5">Ready to connect</span>
       <div ref={qrDiv} />
-      {status === 'INIT' && (
+      {status === "INIT" && (
         <div className="flex items-center justify-center w-[300px] h-[300px] rounded-xl bg-transparent shadow-xl">
           <span className="loading loading-spinner loading-lg p-0"></span>
         </div>
@@ -79,6 +76,7 @@ function App() {
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
+          {" "}
           <rect
             width="336"
             height="336"
@@ -89,14 +87,14 @@ function App() {
             strokeWidth="32"
             rx="57"
             ry="57"
-          ></rect>
+          ></rect>{" "}
           <path
             fill="none"
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="32"
             d="M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24"
-          ></path>
+          ></path>{" "}
         </svg>
         COPY URL
       </button>

desktop/src/config.ts

@@ -1,12 +1,14 @@
-import {PeerOptions} from 'peerjs'
+import { PeerOptions } from "peerjs";
 
-
-export const BASE_URL =  import.meta.env.MODE === 'development' ? 'http://localhost:5173/mobslide/' : 'https://thewh1teagle.github.io/mobslide/'
+export const BASE_URL =
+  import.meta.env.MODE === "development"
+    ? "http://localhost:5173/mobslide/"
+    : "https://thewh1teagle.github.io/mobslide/";
 export const PEERJS_OPTIONS: PeerOptions = {
-    host: 'mobslide-signaling.fly.dev',
-    port: 443,
-    path: '/',
-    pingInterval: 2000,
-    secure: true,
-    debug: 3
-}
+  host: "mobslide-signaling.fly.dev",
+  port: 443,
+  path: "/",
+  pingInterval: 2000,
+  secure: true,
+  debug: 3,
+};

desktop/src/main.tsx

@@ -3,5 +3,5 @@ import App from "./App";
 import "./main.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-    <App />
+  <App />
 );

desktop/src/qr.ts

@@ -36,7 +36,10 @@ function getOptions(url: string) {
   return {
     ...options,
     data: url,
-    dotsOptions: { type: "extra-rounded", color: isDark ? "white" : "black" },
+    dotsOptions: {
+      type: "extra-rounded",
+      color: isDark ? "white" : "black",
+    },
   } as Options;
 }
 

desktop/src/usePeer.ts

@@ -1,5 +1,5 @@
-import { useRef, useState, useEffect } from "react";
 import Peer, { DataConnection } from "peerjs";
+import { useEffect, useRef, useState } from "react";
 import { PEERJS_OPTIONS } from "./config";
 
 export enum Action {

desktop/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({

web/src/App.tsx

@@ -12,7 +12,6 @@ if (!noSleep.isEnabled) {
 }
 
 function App() {
-
   const { connectWrapper, sendMessage, status } = usePeer();
 
   useEffect(() => {
@@ -26,7 +25,7 @@ function App() {
       }
     }
     init();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const nextButtonBind = useLongPress(() => {
@@ -37,7 +36,7 @@ function App() {
     sendMessage({ action: Action.ESC });
   });
 
-  if (status !== 'CONNECTED') {
+  if (status !== "CONNECTED") {
     return (
       <div className="flex flex-col gap-5 w-[100vw] h-[100vh] items-center justify-center">
         <span className="text-lg font-bold">{status}</span>

web/src/config.ts

@@ -1,10 +1,10 @@
-import {PeerOptions} from 'peerjs'
+import { PeerOptions } from "peerjs";
 
 export const PEERJS_OPTIONS: PeerOptions = {
-    host: 'mobslide-signaling.fly.dev',
-    port: 443,
-    path: '/',
-    pingInterval: 2000,
-    secure: true,
-    debug: 3
-}
+  host: "mobslide-signaling.fly.dev",
+  port: 443,
+  path: "/",
+  pingInterval: 2000,
+  secure: true,
+  debug: 3,
+};

web/src/main.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './main.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./main.css";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);

web/src/usePeer.ts

@@ -1,5 +1,5 @@
-import { useRef, useState, useEffect } from "react";
 import Peer, { DataConnection } from "peerjs";
+import { useEffect, useRef, useState } from "react";
 import { PEERJS_OPTIONS } from "./config";
 
 export enum Action {

web/vite.config.ts

@@ -1,8 +1,8 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import react from "@vitejs/plugin-react-swc";
+import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: '/mobslide/'
-})
+  base: "/mobslide/",
+});