feat: adding optional common redist install

src/renderer/src/declaration.d.ts

@@ -234,6 +234,7 @@ declare global {
     showItemInFolder: (path: string) => Promise<void>;
     getFeatures: () => Promise<string[]>;
     getBadges: () => Promise<Badge[]>;
+    canInstallCommonRedist: () => Promise<boolean>;
     installCommonRedist: () => Promise<void>;
     onCommonRedistProgress: (
       cb: (value: { component: string; complete: boolean }) => void

src/renderer/src/pages/settings/settings-general.scss

@@ -5,8 +5,12 @@
   flex-direction: column;
   gap: globals.$spacing-unit * 2;
 
-  &__notifications-title {
+  &__section-title {
     margin-top: calc(globals.$spacing-unit * 2);
     margin-bottom: globals.$spacing-unit;
   }
+
+  &__common-redist-button {
+    align-self: flex-start;
+  }
 }

src/renderer/src/pages/settings/settings-general.tsx

@@ -12,6 +12,7 @@ import languageResources from "@locales";
 import { orderBy } from "lodash-es";
 import { settingsContext } from "@renderer/context";
 import "./settings-general.scss";
+import { DesktopDownloadIcon } from "@primer/octicons-react";
 
 interface LanguageOption {
   option: string;
@@ -27,6 +28,8 @@ export function SettingsGeneral() {
     (state) => state.userPreferences.value
   );
 
+  const [canInstallCommonRedist, setCanInstallCommonRedist] = useState(false);
+
   const [form, setForm] = useState({
     downloadsPath: "",
     downloadNotificationsEnabled: false,
@@ -47,6 +50,10 @@ export function SettingsGeneral() {
       setDefaultDownloadsPath(path);
     });
 
+    window.electron.canInstallCommonRedist().then((canInstall) => {
+      setCanInstallCommonRedist(canInstall);
+    });
+
     setLanguageOptions(
       orderBy(
         Object.entries(languageResources).map(([language, value]) => {
@@ -90,7 +97,9 @@ export function SettingsGeneral() {
     }
   }, [userPreferences, defaultDownloadsPath]);
 
-  const handleLanguageChange = (event) => {
+  const handleLanguageChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
     const value = event.target.value;
 
     handleChange({ language: value });
@@ -139,9 +148,7 @@ export function SettingsGeneral() {
         }))}
       />
 
-      <h2 className="settings-general__notifications-title">
-        {t("notifications")}
-      </h2>
+      <h2 className="settings-general__section-title">{t("notifications")}</h2>
 
       <CheckboxField
         label={t("enable_download_notifications")}
@@ -186,7 +193,18 @@ export function SettingsGeneral() {
         }
       />
 
-      <Button onClick={() => window.electron.installCommonRedist()}>
+      <h2 className="settings-general__section-title">{t("common_redist")}</h2>
+
+      <p className="settings-general__common-redist-description">
+        {t("common_redist_description")}
+      </p>
+
+      <Button
+        onClick={() => window.electron.installCommonRedist()}
+        className="settings-general__common-redist-button"
+        disabled={!canInstallCommonRedist}
+      >
+        <DesktopDownloadIcon />
         {t("install_common_redist")}
       </Button>
     </div>