feat(ui): enhance DHCP lease management with renewal confirmation and improved dialog

ui/src/components/ConfirmDialog.tsx

@@ -97,6 +97,7 @@ export function ConfirmDialog({
               )}
               <Button
                 size="SM"
+                type="button"
                 theme={buttonTheme}
                 text={isConfirming ? `${confirmText}...` : confirmText}
                 onClick={onConfirm}

ui/src/components/DhcpLeaseCard.tsx

@@ -29,9 +29,23 @@ export default function DhcpLeaseCard({
     <GridCard>
       <div className="animate-fadeIn p-4 text-black opacity-0 animation-duration-500 dark:text-white">
         <div className="space-y-3">
-          <h3 className="text-base font-bold text-slate-900 dark:text-white">
+          <div className="flex items-center justify-between">
-            DHCP Lease Information
+            <h3 className="text-base font-bold text-slate-900 dark:text-white">
-          </h3>
+              DHCP Lease Information
+            </h3>
+
+            <div>
+              <Button
+                size="XS"
+                theme="light"
+                type="button"
+                className="text-red-500"
+                text="Renew DHCP Lease"
+                LeadingIcon={LuRefreshCcw}
+                onClick={() => setShowRenewLeaseConfirm(true)}
+              />
+            </div>
+          </div>
 
           <div className="flex gap-x-6 gap-y-2">
             <div className="flex-1 space-y-2">
@@ -209,17 +223,6 @@ export default function DhcpLeaseCard({
               )}
             </div>
           </div>
-
-          <div>
-            <Button
-              size="SM"
-              theme="light"
-              className="text-red-500"
-              text="Renew DHCP Lease"
-              LeadingIcon={LuRefreshCcw}
-              onClick={() => setShowRenewLeaseConfirm(true)}
-            />
-          </div>
         </div>
       </div>
     </GridCard>

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

@@ -206,6 +206,16 @@ export default function SettingsNetworkRoute() {
   const ipv4mode = watch("ipv4_mode");
   const ipv6mode = watch("ipv6_mode");
 
+  const onDhcpLeaseRenew = () => {
+    send("renewDHCPLease", {}, resp => {
+      if ("error" in resp) {
+        notifications.error("Failed to renew lease: " + resp.error.message);
+      } else {
+        notifications.success("DHCP lease renewed");
+      }
+    });
+  };
+
   return (
     <>
       <FormProvider {...formMethods}>
@@ -496,15 +506,24 @@ export default function SettingsNetworkRoute() {
           </div>
         }
       />
-
       <ConfirmDialog
         open={showRenewLeaseConfirm}
-        title="Renew DHCP lease"
+        title="Renew DHCP Lease"
         variant="warning"
-        confirmText="Renew lease"
+        confirmText="Renew Lease"
-        description="The device may briefly disconnect while requesting a new lease."
+        description={
+          <p>
+            This will request a new IP address from your router. The device may briefly
+            disconnect during the renewal process.
+            <br />
+            <br />
+            If you receive a new IP address,{" "}
+            <strong>you may need to reconnect using the new address</strong>.
+          </p>
+        }
         onConfirm={() => {
           setShowRenewLeaseConfirm(false);
+          onDhcpLeaseRenew();
         }}
         onClose={() => setShowRenewLeaseConfirm(false)}
       />