Implement ApiUrlUtility (#957)

apps/browser-extension/src/entrypoints/popup/pages/Login.tsx

@@ -72,11 +72,6 @@ const Login: React.FC = () => {
           title="Open in new window"
           iconType={HeaderIconType.EXPAND}
         />
-        <HeaderButton
-          onClick={() => PopoutUtility.openInNewTab()}
-          title="Open in new tab"
-          iconType={HeaderIconType.TAB}
-        />
       </>
     ) : null;
 

apps/browser-extension/src/entrypoints/popup/pages/Settings.tsx

@@ -6,6 +6,7 @@ import { HeaderIconType } from '@/entrypoints/popup/components/Icons/HeaderIcons
 import { useAuth } from '@/entrypoints/popup/context/AuthContext';
 import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsContext';
 import { useTheme } from '@/entrypoints/popup/context/ThemeContext';
+import { useApiUrl } from '@/entrypoints/popup/utils/ApiUrlUtility';
 import { PopoutUtility } from '@/entrypoints/popup/utils/PopoutUtility';
 
 import { AppInfo } from '@/utils/AppInfo';
@@ -35,6 +36,7 @@ const Settings: React.FC = () => {
   const authContext = useAuth();
   const { setHeaderButtons } = useHeaderButtons();
   const { setIsInitialLoading } = useLoading();
+  const { loadApiUrl, getDisplayUrl } = useApiUrl();
   const [settings, setSettings] = useState<PopupSettings>({
     disabledUrls: [],
     temporaryDisabledUrls: {},
@@ -77,11 +79,6 @@ const Settings: React.FC = () => {
               title="Open in new window"
               iconType={HeaderIconType.EXPAND}
             />
-            <HeaderButton
-              onClick={() => PopoutUtility.openInNewTab()}
-              title="Open in new tab"
-              iconType={HeaderIconType.TAB}
-            />
           </>
         )}
         <HeaderButton
@@ -119,6 +116,9 @@ const Settings: React.FC = () => {
       await storage.setItem(TEMPORARY_DISABLED_SITES_KEY, cleanedTemporaryDisabledUrls);
     }
 
+    // Load API URL
+    await loadApiUrl();
+
     setSettings({
       disabledUrls,
       temporaryDisabledUrls: cleanedTemporaryDisabledUrls,
@@ -128,7 +128,7 @@ const Settings: React.FC = () => {
       isContextMenuEnabled
     });
     setIsInitialLoading(false);
-  }, [setIsInitialLoading]);
+  }, [setIsInitialLoading, loadApiUrl]);
 
   useEffect(() => {
     loadSettings();
@@ -451,7 +451,7 @@ const Settings: React.FC = () => {
       )}
 
       <div className="text-center text-gray-400 dark:text-gray-600">
-        Version: {AppInfo.VERSION}
+        Version {AppInfo.VERSION} ({getDisplayUrl()})
       </div>
     </div>
   );

apps/browser-extension/src/entrypoints/popup/utils/ApiUrlUtility.ts

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+
+import { AppInfo } from '@/utils/AppInfo';
+
+import { storage } from '#imports';
+
+/**
+ * Hook to manage API URL state and display logic.
+ * @returns Object containing apiUrl state and utility functions
+ */
+export const useApiUrl = (): {
+  apiUrl: string;
+  setApiUrl: (url: string) => void;
+  loadApiUrl: () => Promise<void>;
+  getDisplayUrl: () => string;
+} => {
+  const [apiUrl, setApiUrl] = useState<string>(AppInfo.DEFAULT_API_URL);
+
+  /**
+   * Load the API URL from storage.
+   */
+  const loadApiUrl = async (): Promise<void> => {
+    const storedUrl = await storage.getItem('local:apiUrl') as string;
+    if (storedUrl && storedUrl.length > 0) {
+      setApiUrl(storedUrl);
+    } else {
+      setApiUrl(AppInfo.DEFAULT_API_URL);
+    }
+  };
+
+  /**
+   * Get the display URL for UI presentation.
+   * @returns Formatted display URL
+   */
+  const getDisplayUrl = (): string => {
+    const cleanUrl = apiUrl.replace('https://', '').replace('http://', '').replace(':443', '').replace('/api', '');
+    return cleanUrl === 'app.aliasvault.net' ? 'aliasvault.net' : cleanUrl;
+  };
+
+  return {
+    apiUrl,
+    setApiUrl,
+    loadApiUrl,
+    getDisplayUrl,
+  };
+};