zevairouter 1.0.145 → 1.0.147

package/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.js

@@ -866,13 +866,13 @@ export default function APIPageClient({ machineId }) {
                 <Input aria-label="Cloudflare Tunnel endpoint URL" value={`${tunnelPublicUrl || tunnelUrl}/v1`} readOnly className="w-full min-w-0 font-mono text-sm sm:flex-1" />
                 <button
                   onClick={() => copy(`${tunnelPublicUrl || tunnelUrl}/v1`, "tunnel_url")}
-                  className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-text-muted transition-colors hover:bg-black/5 hover:text-primary dark:hover:bg-white/5 sm:size-9 sm:rounded-lg"
                 >
                   <span className="material-symbols-outlined text-[18px]">{copied === "tunnel_url" ? "check" : "content_copy"}</span>
                 </button>
                 <button
                   onClick={() => setShowDisableTunnelModal(true)}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Disable Tunnel"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -886,7 +886,7 @@ export default function APIPageClient({ machineId }) {
                 </div>
                 <button
                   onClick={() => setShowDisableTunnelModal(true)}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Disable Tunnel"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -900,7 +900,7 @@ export default function APIPageClient({ machineId }) {
                 </div>
                 <button
                   onClick={() => { setTunnelLoading(false); setTunnelProgress(""); }}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Stop"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -912,7 +912,7 @@ export default function APIPageClient({ machineId }) {
                   <span className="material-symbols-outlined text-sm">error</span>
                   {tunnelStatus.message}
                 </div>
-                <Button size="sm" icon="cloud_upload" onClick={() => setShowEnableTunnelModal(true)}>Enable</Button>
+                <Button size="sm" icon="cloud_upload" className="min-h-11 sm:min-h-8" onClick={() => setShowEnableTunnelModal(true)}>Enable</Button>
               </>
             ) : tunnelChecking ? (
               <>
@@ -922,7 +922,7 @@ export default function APIPageClient({ machineId }) {
                 </div>
                 <button
                   onClick={() => setTunnelChecking(false)}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Stop"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -932,6 +932,7 @@ export default function APIPageClient({ machineId }) {
               <Button
                 size="sm"
                 icon="cloud_upload"
+                className="min-h-11 sm:min-h-8"
                 onClick={() => {
                   if (isLoginUnsafe) {
                     setTunnelStatus({ type: "error", message: `Security required: ${unsafeReason}` });
@@ -958,13 +959,13 @@ export default function APIPageClient({ machineId }) {
                 <Input aria-label="Tailscale endpoint URL" value={`${tsUrl}/v1`} readOnly className="w-full min-w-0 font-mono text-sm sm:flex-1" />
                 <button
                   onClick={() => copy(`${tsUrl}/v1`, "ts_url")}
-                  className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-text-muted transition-colors hover:bg-black/5 hover:text-primary dark:hover:bg-white/5 sm:size-9 sm:rounded-lg"
                 >
                   <span className="material-symbols-outlined text-[18px]">{copied === "ts_url" ? "check" : "content_copy"}</span>
                 </button>
                 <button
                   onClick={() => setShowDisableTsModal(true)}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Disable Tailscale"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -978,7 +979,7 @@ export default function APIPageClient({ machineId }) {
                 </div>
                 <button
                   onClick={() => setShowDisableTsModal(true)}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Disable Tailscale"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -1001,7 +1002,7 @@ export default function APIPageClient({ machineId }) {
                 )}
                 <button
                   onClick={() => { setTsLoading(false); setTsConnecting(false); setTsProgress(""); clearUserAuth(); }}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Stop"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -1013,7 +1014,7 @@ export default function APIPageClient({ machineId }) {
                   <span className="material-symbols-outlined text-sm">error</span>
                   {tsStatus.message}
                 </div>
-                <Button size="sm" icon="vpn_lock" onClick={handleOpenTsModal}>Enable</Button>
+                <Button size="sm" icon="vpn_lock" className="min-h-11 sm:min-h-8" onClick={handleOpenTsModal}>Enable</Button>
               </>
             ) : (
               <Button
@@ -1026,7 +1027,7 @@ export default function APIPageClient({ machineId }) {
                   }
                   handleOpenTsModal();
                 }}
-                className="bg-linear-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 text-white!"
+                className="min-h-11 sm:min-h-8"
               >
                 Enable
               </Button>
@@ -1073,6 +1074,7 @@ export default function APIPageClient({ machineId }) {
         {(tunnelEnabled || tsEnabled) && (
           <div className="mt-4 pt-4 border-t border-border flex items-center gap-3">
             <Toggle
+              touchTarget
               label="Allow dashboard access via tunnel"
               checked={tunnelDashboardAccess}
               onChange={() => handleTunnelDashboardAccess(!tunnelDashboardAccess)}
@@ -1099,7 +1101,7 @@ export default function APIPageClient({ machineId }) {
           </div>
           <Link
             href="/dashboard/token-saver"
-            className="inline-flex w-full shrink-0 items-center justify-center gap-1.5 rounded-lg border border-primary/25 bg-surface/80 px-3.5 py-2 text-sm font-semibold text-text-main shadow-sm transition-[border-color,color,transform] hover:translate-x-0.5 hover:border-primary/50 hover:text-primary sm:w-auto"
+            className="inline-flex min-h-11 w-full shrink-0 items-center justify-center gap-1.5 rounded-xl border border-primary/25 bg-surface/80 px-3.5 py-2 text-sm font-semibold text-text-main shadow-sm transition-[border-color,color,transform] hover:translate-x-0.5 hover:border-primary/50 hover:text-primary sm:min-h-0 sm:w-auto sm:rounded-lg"
           >
             Open workspace
             <span className="material-symbols-outlined text-[16px]">arrow_forward</span>
@@ -1149,6 +1151,7 @@ export default function APIPageClient({ machineId }) {
           </div>
           <div className="shrink-0 self-end sm:self-auto">
             <Toggle
+              touchTarget
               label="Require API key"
               checked={requireApiKey}
               onChange={() => handleRequireApiKey(!requireApiKey)}
@@ -1189,7 +1192,7 @@ export default function APIPageClient({ machineId }) {
                     <button
                       type="button"
                       onClick={() => toggleKeyVisibility(key.id)}
-                      className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all shrink-0"
+                      className="flex size-11 shrink-0 items-center justify-center rounded-xl text-text-muted opacity-100 transition-all hover:bg-black/5 hover:text-primary dark:hover:bg-white/5 sm:size-7 sm:rounded-lg sm:opacity-0 sm:group-hover:opacity-100"
                       title={visibleKeys.has(key.id) ? "Hide key" : "Show key"}
                       aria-label={visibleKeys.has(key.id) ? "Hide API key" : "Show API key"}
                     >
@@ -1200,7 +1203,7 @@ export default function APIPageClient({ machineId }) {
                     <button
                       type="button"
                       onClick={() => handleCopyKey(key.id)}
-                      className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all shrink-0"
+                      className="flex size-11 shrink-0 items-center justify-center rounded-xl text-text-muted opacity-100 transition-all hover:bg-black/5 hover:text-primary dark:hover:bg-white/5 sm:size-7 sm:rounded-lg sm:opacity-0 sm:group-hover:opacity-100"
                       title="Copy key"
                       aria-label="Copy API key"
                     >
@@ -1242,30 +1245,34 @@ export default function APIPageClient({ machineId }) {
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
-                  <Toggle
-                    size="sm"
-                    disabled={keyPending === `toggle:${key.id}`}
-                    checked={key.isActive ?? true}
-                    onChange={(checked) => {
-                      if (key.isActive && !checked) {
-                        setConfirmState({
-                          title: "Pause API Key",
-                          message: `Pause API key "${key.name}"?\n\nThis key will stop working immediately but can be resumed later.`,
-                          onConfirm: async () => {
-                            setConfirmState(null);
-                            handleToggleKey(key.id, checked);
-                          }
-                        });
-                      } else {
-                        handleToggleKey(key.id, checked);
-                      }
-                    }}
-                    title={key.isActive ? "Pause key" : "Resume key"}
-                  />
+                  <div className="flex size-11 items-center justify-center sm:size-auto">
+                    <Toggle
+                      size="sm"
+                      touchTarget
+                      disabled={keyPending === `toggle:${key.id}`}
+                      checked={key.isActive ?? true}
+                      onChange={(checked) => {
+                        if (key.isActive && !checked) {
+                          setConfirmState({
+                            title: "Pause API Key",
+                            message: `Pause API key "${key.name}"?\n\nThis key will stop working immediately but can be resumed later.`,
+                            onConfirm: async () => {
+                              setConfirmState(null);
+                              handleToggleKey(key.id, checked);
+                            }
+                          });
+                        } else {
+                          handleToggleKey(key.id, checked);
+                        }
+                      }}
+                      title={key.isActive ? "Pause key" : "Resume key"}
+                    />
+                  </div>
                   <button
                     disabled={keyPending === `delete:${key.id}`}
                     onClick={() => handleDeleteKey(key.id)}
-                    className="p-2 hover:bg-red-500/10 rounded text-red-500 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
+                    className="flex size-11 items-center justify-center rounded-xl text-red-500 opacity-100 transition-all hover:bg-red-500/10 sm:size-9 sm:rounded-lg sm:opacity-0 sm:group-hover:opacity-100"
+                    aria-label={`Delete ${key.name}`}
                   >
                     <span className="material-symbols-outlined text-[18px]">delete</span>
                   </button>
@@ -1515,7 +1522,7 @@ function EndpointRow({ label, url, copyId, copied, onCopy, badge, actions }) {
       <Input aria-label={`${label} endpoint URL`} value={url} readOnly className="w-full min-w-0 font-mono text-sm sm:flex-1" />
       <button
         onClick={() => onCopy(url, copyId)}
-        className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors shrink-0"
+        className="flex size-11 shrink-0 items-center justify-center rounded-xl text-text-muted transition-colors hover:bg-black/5 hover:text-primary dark:hover:bg-white/5 sm:size-9 sm:rounded-lg"
         aria-label={`Copy ${label} endpoint URL`}
       >
         <span className="material-symbols-outlined text-[18px]">{copied === copyId ? "check" : "content_copy"}</span>
@@ -1569,7 +1576,7 @@ function SecurityWarning({ message, action }) {
       {action && (
         <a
           href={action.href}
-          className="text-xs font-medium underline shrink-0 hover:opacity-80"
+          className="inline-flex min-h-11 shrink-0 items-center text-xs font-medium underline hover:opacity-80 sm:min-h-0"
           onClick={action.href.startsWith("#") ? (e) => {
             e.preventDefault();
             document.getElementById(action.href.slice(1))?.scrollIntoView({ behavior: "smooth" });