From 8345ed9f89a8493952e4f5ab52ae6c546f844fea Mon Sep 17 00:00:00 2001
From: suu <46421931+0suu@users.noreply.github.com>
Date: Mon, 29 Dec 2025 23:48:17 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E6=B0=97=E5=8C=96=E5=BC=8F=E5=8A=A0?=
 =?UTF-8?q?=E6=B9=BF=E5=99=A8=E3=81=AE=E3=83=81=E3=83=A3=E3=82=A4=E3=83=AB?=
 =?UTF-8?q?=E3=83=89=E3=83=AD=E3=83=83=E3=82=AF=E3=83=9C=E3=82=BF=E3=83=B3?=
 =?UTF-8?q?=E3=81=AF=E8=A9=B3=E7=B4=B0=E7=94=BB=E9=9D=A2=E3=81=AB=E3=81=A0?=
 =?UTF-8?q?=E3=81=91=E8=A1=A8=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/src/components/DeviceControls.tsx     | 4 +++-
 src/renderer/src/components/DeviceDetailScreen.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/DeviceControls.tsx b/src/renderer/src/components/DeviceControls.tsx
index 197951f..a89f695 100644
--- a/src/renderer/src/components/DeviceControls.tsx
+++ b/src/renderer/src/components/DeviceControls.tsx
@@ -42,6 +42,7 @@ interface DeviceControlsProps {
   dense?: boolean;
   showCustomCommands?: boolean;
   showNightLightInstruction?: boolean;
+  showChildLockControls?: boolean;
 }
 
 const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
@@ -62,6 +63,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
   dense = false,
   showCustomCommands = true,
   showNightLightInstruction = true,
+  showChildLockControls = false,
 }) => {
   const dispatch: AppDispatch = useDispatch();
   const isSending = useSelector((state: RootState) => selectIsCommandSendingForDevice(state, device.deviceId));
@@ -969,7 +971,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
                 </Box>
               </>
             )}
-            {isEvaporativeHumidifier && (
+            {isEvaporativeHumidifier && showChildLockControls && (
               <Box sx={buttonGridSx}>
                 <Button
                   size="small"
diff --git a/src/renderer/src/components/DeviceDetailScreen.tsx b/src/renderer/src/components/DeviceDetailScreen.tsx
index 43a7dbd..6e0fdaf 100644
--- a/src/renderer/src/components/DeviceDetailScreen.tsx
+++ b/src/renderer/src/components/DeviceDetailScreen.tsx
@@ -103,7 +103,7 @@ export const DeviceDetailScreen: React.FC<DeviceDetailScreenProps> = ({ deviceId
           <Typography variant="h6" gutterBottom fontWeight="bold">
             {t("Controls")}
           </Typography>
-          <DeviceControls device={deviceDetails} status={status} showCustomCommands />
+          <DeviceControls device={deviceDetails} status={status} showCustomCommands showChildLockControls />
         </Paper>
       )}
 

From f4f49ee151a77917df0c72f3444601854bc9ac59 Mon Sep 17 00:00:00 2001
From: suu <46421931+0suu@users.noreply.github.com>
Date: Mon, 29 Dec 2025 23:56:20 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E3=83=87=E3=83=90=E3=82=A4=E3=82=B9?=
 =?UTF-8?q?=E3=82=AB=E3=83=BC=E3=83=89=E3=81=AE=E3=83=AC=E3=82=A4=E3=82=A2?=
 =?UTF-8?q?=E3=82=A6=E3=83=88=E3=82=92=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/src/components/DeviceCard.tsx    | 32 ++++++++--------
 .../src/components/DeviceControls.tsx         | 38 +++++++++++--------
 2 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/src/renderer/src/components/DeviceCard.tsx b/src/renderer/src/components/DeviceCard.tsx
index 0081350..842199e 100644
--- a/src/renderer/src/components/DeviceCard.tsx
+++ b/src/renderer/src/components/DeviceCard.tsx
@@ -1,12 +1,11 @@
 import React from "react";
 import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
 import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
-import CardActions from "@mui/material/CardActions";
 import Chip from "@mui/material/Chip";
 import Stack from "@mui/material/Stack";
+import ButtonBase from "@mui/material/ButtonBase";
 import { useTheme } from "@mui/material/styles";
 
 // Icons
@@ -19,8 +18,6 @@ import RouterIcon from "@mui/icons-material/Router";
 import TvIcon from "@mui/icons-material/Tv";
 import AcUnitIcon from "@mui/icons-material/AcUnit";
 import DeviceUnknownIcon from "@mui/icons-material/DeviceUnknown";
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
-
 import { AnyDevice } from "../../../api/types";
 import { DeviceControls } from "./DeviceControls";
 import { findDeviceDefinition, getStatusFieldsForDevice } from "../deviceDefinitions";
@@ -91,7 +88,19 @@ export const DeviceCard: React.FC<DeviceCardProps> = ({ device, status, onSelect
         >
             <CardContent sx={{ flexGrow: 1, p: 2.5 }}>
                 <Box sx={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", mb: 2 }}>
-                    <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, overflow: "hidden" }}>
+                    <ButtonBase
+                        onClick={() => onSelect(device.deviceId)}
+                        aria-label={device.deviceName || t("Unnamed Device")}
+                        sx={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 1.5,
+                            overflow: "hidden",
+                            textAlign: "left",
+                            borderRadius: 2,
+                            p: 0.5,
+                        }}
+                    >
                         <Box
                             sx={{
                                 p: 1,
@@ -113,7 +122,7 @@ export const DeviceCard: React.FC<DeviceCardProps> = ({ device, status, onSelect
                                 {device.deviceType}
                             </Typography>
                         </Box>
-                    </Box>
+                    </ButtonBase>
                 </Box>
 
                 {highlightTempHumidity && (temperatureText || humidityText) ? (
@@ -172,17 +181,6 @@ export const DeviceCard: React.FC<DeviceCardProps> = ({ device, status, onSelect
                 </Box>
             </CardContent>
 
-            <CardActions sx={{ p: 2, pt: 0 }}>
-                <Button
-                    fullWidth
-                    variant="outlined"
-                    endIcon={<ArrowForwardIcon />}
-                    onClick={() => onSelect(device.deviceId)}
-                    sx={{ borderRadius: 2 }}
-                >
-                    {t("Details")}
-                </Button>
-            </CardActions>
         </Card>
     );
 };
diff --git a/src/renderer/src/components/DeviceControls.tsx b/src/renderer/src/components/DeviceControls.tsx
index a89f695..88480ff 100644
--- a/src/renderer/src/components/DeviceControls.tsx
+++ b/src/renderer/src/components/DeviceControls.tsx
@@ -233,6 +233,14 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
   const sliderLabel = (value: number) => `${value}`;
 
   const sectionLabelSx = { fontWeight: 700, color: "text.secondary", mt: dense ? 0.25 : 1 };
+  const renderSectionLabel = (label: React.ReactNode) => {
+    if (dense) return null;
+    return (
+      <Typography variant="subtitle2" sx={sectionLabelSx}>
+        {label}
+      </Typography>
+    );
+  };
   const gridColumns = dense ? 2 : 3;
   const maxControlWidth = dense ? 360 : 520;
   const buttonGridSx = {
@@ -380,9 +388,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
     if (cmds.length === 0 || isHiddenByDefinition) return null;
     return (
       <Stack spacing={dense ? 0.6 : 1.2}>
-        <Typography variant="subtitle2" sx={sectionLabelSx}>
-          Controls
-        </Typography>
+        {renderSectionLabel("Controls")}
         <Stack spacing={dense ? 0.5 : 1}>
           {cmds.map((cmd) => (
             <Box key={cmd.command} sx={{ borderBottom: "1px dashed rgba(255,255,255,0.12)", pb: dense ? 0.5 : 1, mb: dense ? 0.5 : 1 }}>
@@ -409,9 +415,11 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
         {isSending && <LinearProgress sx={{ mb: 1 }} />}
         {deviceError && <Alert severity="error" sx={{ mb: 1 }}>{deviceError}</Alert>}
         <Stack spacing={dense ? 0.6 : 1.2}>
-          <Typography variant="subtitle2" sx={sectionLabelSx}>
-            {t("Virtual Remote")} - {remoteTypeLabel || t("Infrared device")}
-          </Typography>
+          {renderSectionLabel(
+            <>
+              {t("Virtual Remote")} - {remoteTypeLabel || t("Infrared device")}
+            </>
+          )}
 
           {remoteSupportsDefaultCommands && (
             <Box sx={buttonGridSx}>
@@ -626,7 +634,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
       <Stack spacing={dense ? 0.6 : 1.2}>
         {isBot && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Bot</Typography>
+            {renderSectionLabel("Bot")}
             {botModeType !== "unknown" && (
               <Stack direction="row" spacing={0.5} alignItems="center" sx={{ mb: dense ? 0.5 : 1 }}>
                 <Chip label={`${t("Mode")}: ${botModeLabelMap[botModeType]}`} size="small" variant="outlined" />
@@ -668,7 +676,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
 
         {isPlug && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Plug</Typography>
+            {renderSectionLabel("Plug")}
             <Box sx={buttonGridSx}>
               <Button
                 size="small"
@@ -696,7 +704,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
 
         {(isCurtain) && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Curtain / Blind</Typography>
+            {renderSectionLabel("Curtain / Blind")}
             <Box sx={buttonGridSx}>
               <Button size="small" variant="contained" onClick={() => sendCommand("turnOn")} disabled={controlsDisabled} fullWidth>Open</Button>
               <Button size="small" variant="outlined" onClick={() => sendCommand("pause")} disabled={controlsDisabled} fullWidth>Pause</Button>
@@ -723,7 +731,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
 
         {isLight && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Lighting</Typography>
+            {renderSectionLabel("Lighting")}
             <Box sx={buttonGridSx}>
               <Button
                 size="small"
@@ -843,7 +851,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
             )}
             {isCeilingLight && !dense && (
               <Stack spacing={0.75} sx={{ width: "100%", maxWidth: maxControlWidth }}>
-                <Typography variant="subtitle2" sx={sectionLabelSx}>{t("Night light button settings")}</Typography>
+                {renderSectionLabel(t("Night light button settings"))}
                 <TextField
                   select
                   size="small"
@@ -890,7 +898,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
 
         {isHumidifier && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Humidifier</Typography>
+            {renderSectionLabel("Humidifier")}
             <Box sx={buttonGridSx}>
               <Button
                 size="small"
@@ -1014,7 +1022,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
 
         {isFan && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Fan</Typography>
+            {renderSectionLabel("Fan")}
             <Box sx={buttonGridSx}>
               <Button
                 size="small"
@@ -1088,7 +1096,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
 
         {isVacuum && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Vacuum</Typography>
+            {renderSectionLabel("Vacuum")}
             <Box sx={buttonGridSx}>
               <Button
                 size="small"
@@ -1140,7 +1148,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
 
         {isLock && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Lock</Typography>
+            {renderSectionLabel("Lock")}
             <Box sx={buttonGridSx}>
               <Button
                 size="small"