Enhance ConnectionPlaceholder component to handle missing device IP with localized messages; update DeviceContext to manage IP state; improve CSS for touch actions in various components; update locale files for English and Chinese with new connection prompts.

client/src/contexts/DeviceContext.tsx

@@ -14,6 +14,7 @@ import { getDeviceIpFromUrl, resolveInitialDeviceIp } from "@/lib/deviceIp";
 interface DeviceContextType {
   ip: string;
   setIp: (ip: string) => void;
+  ipMissing: boolean;
   isConnected: boolean;
   isConnecting: boolean;
   isDemoMode: boolean;
@@ -41,6 +42,7 @@ const DeviceContext = createContext<DeviceContextType | null>(null);
 
 export function DeviceProvider({ children }: { children: React.ReactNode }) {
   const [ip, setIp] = useState(resolveInitialDeviceIp);
+  const [ipMissing, setIpMissing] = useState(() => !resolveInitialDeviceIp().trim());
   const [isConnected, setIsConnected] = useState(false);
   const [isConnecting, setIsConnecting] = useState(false);
   const [isDemoMode, setDemoMode] = useState(false);
@@ -54,9 +56,8 @@ export function DeviceProvider({ children }: { children: React.ReactNode }) {
   const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const autoConnectStartedRef = useRef(false);
 
-  const saveIp = useCallback((newIp: string) => {
-    setIp(newIp);
-    localStorage.setItem("luxsin_ip", newIp);
+  const setDeviceIp = useCallback((newIp: string) => {
+    setIp(newIp.trim());
   }, []);
 
   const fetchState = useCallback(async (apiInstance: LuxsinAPI) => {
@@ -69,6 +70,13 @@ export function DeviceProvider({ children }: { children: React.ReactNode }) {
   const connect = useCallback(async (forceDemo?: boolean, connectIp?: string) => {
     const useDemo = forceDemo !== undefined ? forceDemo : isDemoMode;
     const targetIp = (connectIp ?? ip).trim();
+    if (!useDemo && !targetIp) {
+      setIpMissing(true);
+      setError(null);
+      setIsConnecting(false);
+      return;
+    }
+    setIpMissing(false);
     // Demo mode — use mock data immediately, no network call
     if (useDemo) {
       setIsConnecting(true);
@@ -209,11 +217,15 @@ export function DeviceProvider({ children }: { children: React.ReactNode }) {
     if (autoConnectStartedRef.current) return;
     autoConnectStartedRef.current = true;
 
-    const urlIp = getDeviceIpFromUrl();
-    const targetIp = urlIp ?? ip;
-    if (urlIp) saveIp(urlIp);
+    const targetIp = getDeviceIpFromUrl()?.trim() ?? "";
+    if (!targetIp) {
+      setIpMissing(true);
+      return;
+    }
+    setIp(targetIp);
+    setIpMissing(false);
     void connect(false, targetIp);
-  }, [connect, ip, saveIp]);
+  }, [connect]);
 
   // Polling for changes
   useEffect(() => {
@@ -238,7 +250,7 @@ export function DeviceProvider({ children }: { children: React.ReactNode }) {
 
   return (
     <DeviceContext.Provider value={{
-      ip, setIp: saveIp,
+      ip, setIp: setDeviceIp, ipMissing,
       isConnected, isConnecting, isDemoMode, setDemoMode,
       deviceState, peqState, lastUpdated, error,
       connect, disconnect, refresh, api,