From 2ace284262cb3d84c1915c3f776f4b07ea3946e7 Mon Sep 17 00:00:00 2001
From: aniket866 <iamaniketkumarmaner@gmail.com>
Date: Thu, 12 Feb 2026 16:37:25 +0530
Subject: [PATCH 1/3] enhance-settting-page

---
 src/routes/settings.tsx | 269 +++++++++++++++++++++-------------------
 1 file changed, 138 insertions(+), 131 deletions(-)

diff --git a/src/routes/settings.tsx b/src/routes/settings.tsx
index e755324..e1db62d 100644
--- a/src/routes/settings.tsx
+++ b/src/routes/settings.tsx
@@ -104,143 +104,150 @@ function SettingsPage() {
 
     return (
         <div className="h-full overflow-y-auto w-full">
-            <div className="p-6 pb-safe max-w-md mx-auto space-y-8 min-h-full">
-                <h1 className="text-3xl font-bold pt-4">Settings</h1>
-
-                <div className="form-control w-full">
-                    <label className="label">
-                        <span className="label-text">Server IP (for Remote)</span>
-                    </label>
-                    <input
-                        type="text"
-                        placeholder="192.168.1.X"
-                        className="input input-bordered w-full"
-                        value={ip}
-                        onChange={(e) => setIp(e.target.value)}
-                    />
-                    <label className="label">
-                        <span className="label-text-alt opacity-50">This Computer's LAN IP</span>
-                    </label>
-                </div>
-
-                <div className="form-control w-full max-w-2xl mx-auto">
-                    <label className="label" htmlFor="sensitivity-slider">
-                        <span className="label-text">Mouse Sensitivity</span>
-                        <span className="label-text-alt font-mono">
-                            {sensitivity.toFixed(1)}x
-                        </span>
-                    </label>
-
-                    <input
-                        type="range"
-                        id="sensitivity-slider"
-                        min="0.1"
-                        max="3.0"
-                        step="0.1"
-                        value={sensitivity}
-                        onChange={(e) => setSensitivity(parseFloat(e.target.value))}
-                        className="range range-primary range-sm w-full"
-                    />
-
-                    <div className="mt-2 flex w-full justify-between px-2 text-xs opacity-50">
-                        <span>Slow</span>
-                        <span>Default</span>
-                        <span>Fast</span>
+            <div className="p-6 pb-safe max-w-5xl mx-auto min-h-full">
+                <h1 className="text-3xl font-bold pt-4 mb-8">Settings</h1>
+
+                <div className="flex flex-col md:flex-row gap-8 items-start">
+                    {/* Left Column: Settings Form */}
+                    <div className="w-full flex-1 space-y-8">
+                        <div className="form-control w-full">
+                            <label className="label">
+                                <span className="label-text">Server IP (for Remote)</span>
+                            </label>
+                            <input
+                                type="text"
+                                placeholder="192.168.1.X"
+                                className="input input-bordered w-full"
+                                value={ip}
+                                onChange={(e) => setIp(e.target.value)}
+                            />
+                            <label className="label">
+                                <span className="label-text-alt opacity-50">This Computer's LAN IP</span>
+                            </label>
+                        </div>
+
+                        <div className="form-control w-full">
+                            <label className="label" htmlFor="sensitivity-slider">
+                                <span className="label-text">Mouse Sensitivity</span>
+                                <span className="label-text-alt font-mono">
+                                    {sensitivity.toFixed(1)}x
+                                </span>
+                            </label>
+
+                            <input
+                                type="range"
+                                id="sensitivity-slider"
+                                min="0.1"
+                                max="3.0"
+                                step="0.1"
+                                value={sensitivity}
+                                onChange={(e) => setSensitivity(parseFloat(e.target.value))}
+                                className="range range-primary range-sm w-full"
+                            />
+
+                            <div className="mt-2 flex w-full justify-between px-2 text-xs opacity-50">
+                                <span>Slow</span>
+                                <span>Default</span>
+                                <span>Fast</span>
+                            </div>
+                        </div>
+
+                        <div className="form-control w-full">
+                            <label className="label cursor-pointer">
+                                <span className="label-text font-medium">Invert Scroll</span>
+                                <input
+                                    type="checkbox"
+                                    className="toggle toggle-primary"
+                                    checked={invertScroll}
+                                    onChange={(e) => setInvertScroll(e.target.checked)}
+                                />
+                            </label>
+                            <label className="label">
+                                <span className="label-text-alt opacity-50">
+                                    {invertScroll ? 'Traditional scrolling enabled' : 'Natural scrolling'}
+                                </span>
+                            </label>
+                        </div>
+
+                        <div className="form-control w-full">
+                            <label className="label">
+                                <span className="label-text">Port</span>
+                            </label>
+                            <input
+                                type="text"
+                                placeholder={String(CONFIG.FRONTEND_PORT)}
+                                className="input input-bordered w-full"
+                                value={frontendPort}
+                                onChange={(e) => setFrontendPort(e.target.value)}
+                            />
+                        </div>
+
+                        <div className="alert alert-warning text-xs shadow-lg">
+                            <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-4 w-4" fill="none" viewBox="0 0 24 24">
+                                <title>Warning</title>
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+                                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                            </svg>
+                            <span>Important: Ensure port {frontendPort} is allowed in your computer's firewall!</span>
+                        </div>
+
+                        <button
+                            className="btn btn-neutral w-full"
+                            onClick={() => {
+                                const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+                                const host = window.location.host;
+                                const wsUrl = `${protocol}//${host}/ws`;
+                                const socket = new WebSocket(wsUrl);
+
+                                socket.onopen = () => {
+                                    socket.send(JSON.stringify({
+                                        type: 'update-config',
+                                        config: {
+                                            frontendPort: parseInt(frontendPort),
+                                        }
+                                    }));
+
+                                    setTimeout(() => {
+                                        socket.close();
+                                        const newProtocol = window.location.protocol;
+                                        const newHostname = window.location.hostname;
+                                        const newUrl = `${newProtocol}//${newHostname}:${frontendPort}/settings`;
+                                        window.location.href = newUrl;
+                                    }, 1000);
+                                };
+                            }}
+                        >
+                            Save Config
+                        </button>
                     </div>
-                </div>
-
-                <div className="form-control w-full">
-                    <label className="label cursor-pointer">
-                        <span className="label-text font-medium">Invert Scroll</span>
-                        <input
-                            type="checkbox"
-                            className="toggle toggle-primary"
-                            checked={invertScroll}
-                            onChange={(e) => setInvertScroll(e.target.checked)}
-                        />
-                    </label>
-                    <br />
-                    <label className="label">
-                        <span className="label-text-alt opacity-50">
-                            {invertScroll ? 'Traditional scrolling enabled' : 'Natural scrolling'}
-                        </span>
-                    </label>
-                </div>
 
-                <div className="form-control w-full">
-                    <label className="label">
-                        <span className="label-text">Port</span>
-                    </label>
-                    <input
-                        type="text"
-                        placeholder={String(CONFIG.FRONTEND_PORT)}
-                        className="input input-bordered w-full"
-                        value={frontendPort}
-                        onChange={(e) => setFrontendPort(e.target.value)}
-                    />
-                </div>
-
-                <div className="alert alert-warning text-xs shadow-lg">
-                    <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-4 w-4" fill="none" viewBox="0 0 24 24">
-                        <title>Warning</title>
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
-                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                    </svg>
-                    <span>Important: Ensure port {frontendPort} is allowed in your computer's firewall!</span>
-                </div>
-
-                <button
-                    className="btn btn-neutral w-full"
-                    onClick={() => {
-                        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-                        const host = window.location.host;
-                        const wsUrl = `${protocol}//${host}/ws`;
-                        const socket = new WebSocket(wsUrl);
-
-                        socket.onopen = () => {
-                            socket.send(JSON.stringify({
-                                type: 'update-config',
-                                config: {
-                                    frontendPort: parseInt(frontendPort),
-                                }
-                            }));
-
-                            setTimeout(() => {
-                                socket.close();
-                                const newProtocol = window.location.protocol;
-                                const newHostname = window.location.hostname;
-                                const newUrl = `${newProtocol}//${newHostname}:${frontendPort}/settings`;
-                                window.location.href = newUrl;
-                            }, 1000);
-                        };
-                    }}
-                >
-                    Save Config
-                </button>
-
-                <div className="card bg-base-200 shadow-xl">
-                    <div className="card-body items-center text-center">
-                        <h2 className="card-title">Connect Mobile</h2>
-                        <p className="text-sm opacity-70">Scan to open remote</p>
-
-                        {qrData && (
-                            <div className="bg-white p-4 rounded-xl shadow-inner my-4">
-                                <img src={qrData} alt="Connection QR" className="w-48 h-48 mix-blend-multiply" />
+                    {/* Right Column: QR Code & Connection Info */}
+                    <div className="w-full md:w-96 flex-shrink-0">
+                        <div className="card bg-base-200 shadow-xl sticky top-6">
+                            <div className="card-body items-center text-center">
+                                <h2 className="card-title">Connect Mobile</h2>
+                                <p className="text-sm opacity-70">Scan to open remote</p>
+
+                                {qrData && (
+                                    <div className="bg-white p-4 rounded-xl shadow-inner my-4">
+                                        <img src={qrData} alt="Connection QR" className="w-48 h-48 mix-blend-multiply" />
+                                    </div>
+                                )}
+
+                                <a
+                                    className="link link-primary mt-2 break-all text-lg font-mono bg-base-100 px-4 py-2 rounded-lg inline-block max-w-full overflow-hidden text-ellipsis"
+                                    href={displayUrl}
+                                >
+                                    {ip}:{CONFIG.FRONTEND_PORT}/trackpad
+                                </a>
                             </div>
-                        )}
+                        </div>
 
-                        <a
-                            className="link link-primary mt-2 break-all text-lg font-mono bg-base-100 px-4 py-2 rounded-lg inline-block max-w-full overflow-hidden text-ellipsis"
-                            href={displayUrl}
-                        >
-                            {ip}:{CONFIG.FRONTEND_PORT}/trackpad
-                        </a>
+                        <div className="text-xs text-center opacity-50 pt-8 pb-8">
+                            Rein Remote v1.0.0
+                        </div>
                     </div>
                 </div>
-
-                <div className="text-xs text-center opacity-50 pt-8 pb-8">
-                    Rein Remote v1.0.0
-                </div>
             </div>
         </div>
     )

From 26b7cbb8d8eb4f7c2d628d463a5cea52a7d1d253 Mon Sep 17 00:00:00 2001
From: Aniket <iamaniketkumarmaner@gmail.com>
Date: Thu, 12 Feb 2026 16:50:34 +0530
Subject: [PATCH 2/3] Code rabbit follow up

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/routes/settings.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/settings.tsx b/src/routes/settings.tsx
index e1db62d..e10893b 100644
--- a/src/routes/settings.tsx
+++ b/src/routes/settings.tsx
@@ -192,6 +192,7 @@ function SettingsPage() {
                         </div>
 
                         <button
+                            type="button"
                             className="btn btn-neutral w-full"
                             onClick={() => {
                                 const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';

From 298f6d6bf0a083c2042feb474c9f8616e7405804 Mon Sep 17 00:00:00 2001
From: Aniket <iamaniketkumarmaner@gmail.com>
Date: Thu, 12 Feb 2026 16:54:29 +0530
Subject: [PATCH 3/3] Code rabbit follow up

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/routes/settings.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/routes/settings.tsx b/src/routes/settings.tsx
index e10893b..5fbfd22 100644
--- a/src/routes/settings.tsx
+++ b/src/routes/settings.tsx
@@ -195,16 +195,26 @@ function SettingsPage() {
                             type="button"
                             className="btn btn-neutral w-full"
                             onClick={() => {
+                                const port = parseInt(frontendPort, 10);
+                                if (!Number.isFinite(port) || port < 1 || port > 65535) {
+                                    alert('Please enter a valid port number (1–65535).');
+                                    return;
+                                }
+
                                 const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
                                 const host = window.location.host;
                                 const wsUrl = `${protocol}//${host}/ws`;
                                 const socket = new WebSocket(wsUrl);
 
+                                socket.onerror = () => {
+                                    alert('Failed to connect to the server.');
+                                };
+
                                 socket.onopen = () => {
                                     socket.send(JSON.stringify({
                                         type: 'update-config',
                                         config: {
-                                            frontendPort: parseInt(frontendPort),
+                                            frontendPort: port,
                                         }
                                     }));