Merge 748155d815 into cc9ff74276

Remove the temporary directory after extracting buildkit
Localize the extension popovers.
Update package and fix tsconfig.json
Expand development directory guide
Move messages under localization
Popovers and sidebar
Update Chinese translations
Accidentally lost the changes that @ym provided, brought them back
File formatting pass
Localized all components, hooks, providers, hooks
Localize all pages except Settings
Bump packages
Settings Access page
Settings local auth page
Fix ref lint warning
Settings Advanced page
Fix UI lint warnings
There were a bunch of ref and useEffect violations.
Settings appearance page
Settings general pages
Settings hardware page
Settings keyboard page
Settings macros pages
Settings mouse page
Settings page
Settings video page
Settings network page
Fix compilation issues
Ran machine translate

ui/src/components/MacroStepCard.tsx

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { LuArrowUp, LuArrowDown, LuX, LuTrash2 } from "react-icons/lu";
 
 import { Button } from "@components/Button";
-import { Combobox, ComboboxOption } from "@components/Combobox";
+import { Combobox } from "@components/Combobox";
 import Card from "@components/Card";
 import FieldLabel from "@components/FieldLabel";
 import { SelectMenuBasic } from "@components/SelectMenuBasic";
@@ -179,7 +179,6 @@ export function MacroStepCard({
           </div>
         </div>
 
-
         <div className="w-full flex flex-col gap-1">
           <div className="flex items-center gap-1">
             <FieldLabel label={m.macro_step_keys_label()} description={m.macro_step_keys_description({ max: MAX_KEYS_PER_STEP })} />
@@ -210,9 +209,8 @@ export function MacroStepCard({
           )}
           <div className="relative w-full">
             <Combobox
-              onChange={(option) => {
-                const selectedOption = option as ComboboxOption | null;
-                onKeySelect({ value: selectedOption?.value ?? null });
+              onChange={(value) => {
+                onKeySelect({ value: value as string | null });
                 onKeyQueryChange('');
               }}
               displayValue={() => keyQuery}

ui/src/routes/devices.$id.settings.general.update.tsx

@@ -189,6 +189,8 @@ function UpdatingDeviceState({
   otaState: UpdateState["otaState"];
   onMinimizeUpgradeDialog: () => void;
 }) {
+  const formatProgress = (progress: number) => `${Math.round(progress)}%`;
+
   const calculateOverallProgress = (type: "system" | "app") => {
     const downloadProgress = Math.round((otaState[`${type}DownloadProgress`] || 0) * 100);
     const updateProgress = Math.round((otaState[`${type}UpdateProgress`] || 0) * 100);
@@ -256,11 +258,6 @@ function UpdatingDeviceState({
     );
   };
 
-  const systemOverallProgress = calculateOverallProgress("system");
-  const systemUpdateStatus = getUpdateStatus("system");
-  const appOverallProgress = calculateOverallProgress("app");
-  const appUpdateStatus = getUpdateStatus("app");
-
   return (
     <div className="flex flex-col items-start justify-start space-y-4 text-left">
       <div className="w-full max-w-sm space-y-4">
@@ -296,7 +293,7 @@ function UpdatingDeviceState({
                     <p className="text-sm font-semibold text-black dark:text-white">
                       {m.general_update_system_update_title()}
                     </p>
-                    {systemOverallProgress < 100 ? (
+                    {calculateOverallProgress("system") < 100 ? (
                       <LoadingSpinner className="h-4 w-4 text-blue-700 dark:text-blue-500" />
                     ) : (
                       <CheckCircleIcon className="h-4 w-4 text-blue-700 dark:text-blue-500" />
@@ -305,14 +302,16 @@ function UpdatingDeviceState({
                   <div className="h-2.5 w-full overflow-hidden rounded-full bg-slate-300 dark:bg-slate-600">
                     <div
                       className="h-2.5 rounded-full bg-blue-700 transition-all duration-500 ease-linear dark:bg-blue-500"
-                      style={{ width: `${systemOverallProgress}%` }}
+                      style={{
+                        width: formatProgress(calculateOverallProgress("system")),
+                      }}
                     ></div>
                   </div>
                   <div className="flex justify-between text-sm text-slate-600 dark:text-slate-300">
-                    <span>{systemUpdateStatus}</span>{" "}
-                    {systemOverallProgress < 100
-                     ? (<span>{`${systemOverallProgress}%`}</span>)
-                     : null}
+                    <span>{getUpdateStatus("system")}</span>{" "}
+                    {calculateOverallProgress("system") < 100 ? (
+                      <span>{formatProgress(calculateOverallProgress("system"))}</span>
+                    ) : null}
                   </div>
                 </div>
               )}
@@ -326,7 +325,7 @@ function UpdatingDeviceState({
                       <p className="text-sm font-semibold text-black dark:text-white">
                         {m.general_update_app_update_title()}
                       </p>
-                      {appOverallProgress < 100 ? (
+                      {calculateOverallProgress("app") < 100 ? (
                         <LoadingSpinner className="h-4 w-4 text-blue-700 dark:text-blue-500" />
                       ) : (
                         <CheckCircleIcon className="h-4 w-4 text-blue-700 dark:text-blue-500" />
@@ -335,14 +334,16 @@ function UpdatingDeviceState({
                     <div className="h-2.5 w-full overflow-hidden rounded-full bg-slate-300 dark:bg-slate-600">
                       <div
                         className="h-2.5 rounded-full bg-blue-700 transition-all duration-500 ease-linear dark:bg-blue-500"
-                        style={{ width: `${appOverallProgress}%` }}
+                        style={{
+                          width: formatProgress(calculateOverallProgress("app")),
+                        }}
                       ></div>
                     </div>
                     <div className="flex justify-between text-sm text-slate-600 dark:text-slate-300">
-                      <span>{appUpdateStatus}</span>{" "}
-                      {appOverallProgress < 100
-                        ? (<span>{`${appOverallProgress}%`}</span>)
-                        : null}
+                      <span>{getUpdateStatus("app")}</span>{" "}
+                      {calculateOverallProgress("system") < 100 ? (
+                        <span>{formatProgress(calculateOverallProgress("app"))}</span>
+                      ) : null}
                     </div>
                   </div>
                 </>
@@ -410,13 +411,13 @@ function UpdateAvailableState({
         <p className="mb-4 text-sm text-slate-600 dark:text-slate-300">
           {versionInfo?.systemUpdateAvailable ? (
             <>
-              <span className="font-semibold">{m.general_update_system_type()}</span>: {versionInfo?.remote?.systemVersion}
+              <span className="font-semibold">{m.general_update_system_type()}</span>:&nbsp;{versionInfo?.remote?.systemVersion}
               <br />
             </>
           ) : null}
           {versionInfo?.appUpdateAvailable ? (
             <>
-              <span className="font-semibold">{m.general_update_application_type()}</span>: {versionInfo?.remote?.appVersion}
+              <span className="font-semibold">{m.general_update_application_type()}</span>:&nbsp;{versionInfo?.remote?.appVersion}
             </>
           ) : null}
         </p>