Display Grayed-Out Mode for Unsupported Platforms (#7244)

add missing mode component

web/src/css/mode.less

@@ -312,4 +312,19 @@
             }
         }
     }
+
+    .missing-mode-container {
+        color: #b2b2b2;
+
+        .title-icon-container {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 5px;
+
+            i {
+                font-size: 1.8rem;
+            }
+        }
+    }
 }

web/src/js/components/Modes.tsx

@@ -8,6 +8,7 @@ import Transparent from "./Modes/Transparent";
 import Socks from "./Modes/Socks";
 import Upstream from "./Modes/Upstream";
 import Dns from "./Modes/Dns";
+import MissingMode from "./Modes/MissingMode";
 
 export default function Modes() {
     const platform = useAppSelector((state) => state.backendState.platform);
@@ -20,7 +21,14 @@ export default function Modes() {
                 <h3>Recommended</h3>
                 <div className="modes-container">
                     <Regular />
-                    {!platform.startsWith("linux") ? <Local /> : undefined}
+                    {!platform.startsWith("linux") ? (
+                        <Local />
+                    ) : (
+                        <MissingMode
+                            title="Local Redirect Mode"
+                            description="This mode is only supported on Windows and MacOS."
+                        />
+                    )}
                     <Wireguard />
                     <Reverse />
                 </div>
@@ -33,7 +41,12 @@ export default function Modes() {
                     <Dns />
                     {!platform.startsWith("win32") ? (
                         <Transparent />
-                    ) : undefined}
+                    ) : (
+                        <MissingMode
+                            title="Transparent Proxy"
+                            description="This mode is only supported on Linux and MacOS."
+                        />
+                    )}
                 </div>
             </div>
         </div>

web/src/js/components/Modes/MissingMode.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+interface MissingModeProps {
+    title: string;
+    description: string;
+}
+
+export default function MissingMode({ title, description }: MissingModeProps) {
+    return (
+        <div className="missing-mode-container">
+            <div className="title-icon-container">
+                <h4 className="mode-title">{title}</h4>
+                <i
+                    className="fa fa-exclamation-triangle"
+                    aria-hidden="true"
+                ></i>
+            </div>
+            <p className="mode-description">{description}</p>
+        </div>
+    );
+}