From fbb8520ab07037e347f1ca91ab767c14fba8b5f3 Mon Sep 17 00:00:00 2001
From: David Lane <42013603+ReenigneArcher@users.noreply.github.com>
Date: Tue, 24 Feb 2026 17:42:45 -0500
Subject: [PATCH] fix: replace remaining FontAwesome icons and drop shared-web
 dependency (#4764)

---
 package.json                                  |  2 +-
 .../assets/web/configs/tabs/General.vue       | 21 ++++++++++++-------
 .../assets/web/configs/tabs/Network.vue       | 12 +++++++----
 .../tabs/audiovideo/DisplayDeviceOptions.vue  |  3 ++-
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 16319d109..bb981be79 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@lizardbyte/shared-web": "2026.125.235713",
+    "bootstrap": "5.3.8",
     "date-fns": "4.1.0",
     "lucide-vue-next": "0.575.0",
     "marked": "17.0.3",
diff --git a/src_assets/common/assets/web/configs/tabs/General.vue b/src_assets/common/assets/web/configs/tabs/General.vue
index 21774d041..bd59f6f9c 100644
--- a/src_assets/common/assets/web/configs/tabs/General.vue
+++ b/src_assets/common/assets/web/configs/tabs/General.vue
@@ -1,6 +1,13 @@
 <script setup>
 import Checkbox from '../../Checkbox.vue'
 import { ref } from 'vue'
+import {
+  Play,
+  Plus,
+  Shield,
+  Trash2,
+  Undo,
+} from 'lucide-vue-next'
 
 const props = defineProps({
   platform: String,
@@ -35,8 +42,8 @@ function removeCmd(index) {
         <option value="cs">Čeština (Czech)</option>
         <option value="de">Deutsch (German)</option>
         <option value="en">English</option>
-        <option value="en_GB">English, UK</option>
-        <option value="en_US">English, US</option>
+        <option value="en_GB">English, United Kingdom</option>
+        <option value="en_US">English, United States</option>
         <option value="es">Español (Spanish)</option>
         <option value="fr">Français (French)</option>
         <option value="hu">Magyar (Hungarian)</option>
@@ -87,10 +94,10 @@ function removeCmd(index) {
       <table class="table" v-if="config.global_prep_cmd.length > 0">
         <thead>
         <tr>
-          <th scope="col"><i class="fas fa-play"></i> {{ $t('_common.do_cmd') }}</th>
-          <th scope="col"><i class="fas fa-undo"></i> {{ $t('_common.undo_cmd') }}</th>
+          <th scope="col"><Play :size="16" /> {{ $t('_common.do_cmd') }}</th>
+          <th scope="col"><Undo :size="16" /> {{ $t('_common.undo_cmd') }}</th>
           <th scope="col" v-if="platform === 'windows'">
-            <i class="fas fa-shield-alt"></i> {{ $t('_common.run_as') }}
+            <Shield :size="16" /> {{ $t('_common.run_as') }}
           </th>
           <th scope="col"></th>
         </tr>
@@ -112,10 +119,10 @@ function removeCmd(index) {
           </td>
           <td>
             <button class="btn btn-danger" @click="removeCmd(i)">
-              <i class="fas fa-trash"></i>
+              <Trash2 :size="16" />
             </button>
             <button class="btn btn-success" @click="addCmd">
-              <i class="fas fa-plus"></i>
+              <Plus :size="16" />
             </button>
           </td>
         </tr>
diff --git a/src_assets/common/assets/web/configs/tabs/Network.vue b/src_assets/common/assets/web/configs/tabs/Network.vue
index 69b7fd17a..fe9dc8b28 100644
--- a/src_assets/common/assets/web/configs/tabs/Network.vue
+++ b/src_assets/common/assets/web/configs/tabs/Network.vue
@@ -1,5 +1,9 @@
 <script setup>
 import { computed, ref } from 'vue'
+import {
+  Info,
+  TriangleAlert,
+} from 'lucide-vue-next'
 import Checkbox from "../../Checkbox.vue";
 
 const props = defineProps([
@@ -48,11 +52,11 @@ const effectivePort = computed(() => +config.value?.port ?? defaultMoonlightPort
       <div class="form-text">{{ $t('config.port_desc') }}</div>
       <!-- Add warning if any port is less than 1024 -->
       <div class="alert alert-danger" v-if="(+effectivePort - 5) < 1024">
-        <i class="fa-solid fa-xl fa-triangle-exclamation"></i> {{ $t('config.port_alert_1') }}
+        <TriangleAlert :size="20" /> {{ $t('config.port_alert_1') }}
       </div>
       <!-- Add warning if any port is above 65535 -->
       <div class="alert alert-danger" v-if="(+effectivePort + 21) > 65535">
-        <i class="fa-solid fa-xl fa-triangle-exclamation"></i> {{ $t('config.port_alert_2') }}
+        <TriangleAlert :size="20" /> {{ $t('config.port_alert_2') }}
       </div>
       <!-- Create a port table for the various ports needed by Sunshine -->
       <table class="table">
@@ -76,7 +80,7 @@ const effectivePort = computed(() => +config.value?.port ?? defaultMoonlightPort
           <td>{{+effectivePort}}</td>
           <td>
             <div class="alert alert-primary" role="alert" v-if="+effectivePort !== defaultMoonlightPort">
-              <i class="fa-solid fa-xl fa-circle-info"></i> {{ $t('config.port_http_port_note') }}
+              <Info :size="20" /> {{ $t('config.port_http_port_note') }}
             </div>
           </td>
         </tr>
@@ -108,7 +112,7 @@ const effectivePort = computed(() => +config.value?.port ?? defaultMoonlightPort
       </table>
       <!-- add warning about exposing web ui to the internet -->
       <div class="alert alert-warning" v-if="config.origin_web_ui_allowed === 'wan'">
-        <i class="fa-solid fa-xl fa-triangle-exclamation"></i> {{ $t('config.port_warning') }}
+        <TriangleAlert :size="20" /> {{ $t('config.port_warning') }}
       </div>
     </div>
 
diff --git a/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayDeviceOptions.vue b/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayDeviceOptions.vue
index 960cc105c..66802d4e3 100644
--- a/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayDeviceOptions.vue
+++ b/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayDeviceOptions.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import { Trash2 } from 'lucide-vue-next'
 import PlatformLayout from '../../../PlatformLayout.vue'
 import Checkbox from "../../../Checkbox.vue";
 
@@ -226,7 +227,7 @@ function addRemappingEntry() {
                       </td>
                       <td>
                         <button class="btn btn-danger" @click="config.dd_mode_remapping[getRemappingType()].splice(idx, 1)">
-                          <i class="fas fa-trash"></i>
+                          <Trash2 :size="16" />
                         </button>
                       </td>
                     </tr>