fix(ui): for server default options, display "All" region/language option instead of empty string (#1042)

src/components/RegionSelector/index.tsx

@@ -9,7 +9,7 @@ import 'country-flag-icons/3x2/flags.css';
 
 const messages = defineMessages({
   regionDefault: 'All Regions',
-  regionServerDefault: '{applicationTitle} Default ({region})',
+  regionServerDefault: 'Default ({region})',
 });
 
 interface RegionSelectorProps {
@@ -38,6 +38,10 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
     []
   );
 
+  const defaultRegionNameFallback =
+    regions?.find((region) => region.iso_3166_1 === currentSettings.region)
+      ?.english_name ?? currentSettings.region;
+
   useEffect(() => {
     if (regions && value) {
       if (value === 'all') {
@@ -65,15 +69,21 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
             <div className="relative">
               <span className="inline-block w-full rounded-md shadow-sm">
                 <Listbox.Button className="relative flex items-center w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
-                  {selectedRegion &&
-                    selectedRegion.iso_3166_1 !== 'all' &&
-                    hasFlag(selectedRegion?.iso_3166_1) && (
-                      <span className="h-4 mr-2 overflow-hidden text-base leading-4">
-                        <span
-                          className={`flag:${selectedRegion?.iso_3166_1}`}
-                        />
-                      </span>
-                    )}
+                  {((selectedRegion && hasFlag(selectedRegion?.iso_3166_1)) ||
+                    (isUserSetting &&
+                      !selectedRegion &&
+                      currentSettings.region &&
+                      hasFlag(currentSettings.region))) && (
+                    <span className="h-4 mr-2 overflow-hidden text-base leading-4">
+                      <span
+                        className={`flag:${
+                          selectedRegion
+                            ? selectedRegion.iso_3166_1
+                            : currentSettings.region
+                        }`}
+                      />
+                    </span>
+                  )}
                   <span className="block truncate">
                     {selectedRegion && selectedRegion.iso_3166_1 !== 'all'
                       ? intl.formatDisplayName(selectedRegion.iso_3166_1, {
@@ -82,12 +92,11 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                         }) ?? selectedRegion.english_name
                       : isUserSetting && selectedRegion?.iso_3166_1 !== 'all'
                       ? intl.formatMessage(messages.regionServerDefault, {
-                          applicationTitle: currentSettings.applicationTitle,
                           region: currentSettings.region
                             ? intl.formatDisplayName(currentSettings.region, {
                                 type: 'region',
                                 fallback: 'none',
-                              }) ?? currentSettings.region
+                              }) ?? defaultRegionNameFallback
                             : intl.formatMessage(messages.regionDefault),
                         })
                       : intl.formatMessage(messages.regionDefault)}
@@ -130,16 +139,23 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                             active
                               ? 'text-white bg-indigo-600'
                               : 'text-gray-300'
-                          } cursor-default select-none relative py-2 pl-8 pr-4`}
+                          } cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
                         >
+                          <span className="mr-2 text-base">
+                            <span
+                              className={
+                                hasFlag(currentSettings.region)
+                                  ? `flag:${currentSettings.region}`
+                                  : 'pr-6'
+                              }
+                            />
+                          </span>
                           <span
                             className={`${
                               selected ? 'font-semibold' : 'font-normal'
                             } block truncate`}
                           >
                             {intl.formatMessage(messages.regionServerDefault, {
-                              applicationTitle:
-                                currentSettings.applicationTitle,
                               region: currentSettings.region
                                 ? intl.formatDisplayName(
                                     currentSettings.region,
@@ -147,7 +163,7 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                                       type: 'region',
                                       fallback: 'none',
                                     }
-                                  ) ?? currentSettings.region
+                                  ) ?? defaultRegionNameFallback
                                 : intl.formatMessage(messages.regionDefault),
                             })}
                           </span>

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

@@ -30,7 +30,7 @@ const messages = defineMessages({
   originallanguageTip:
     'Filter content by original language (only applies to the "Popular" and "Upcoming" categories)',
   originalLanguageDefault: 'All Languages',
-  languageServerDefault: '{applicationTitle} Default ({language})',
+  languageServerDefault: 'Default ({language})',
 });
 
 const UserGeneralSettings: React.FC = () => {
@@ -61,6 +61,11 @@ const UserGeneralSettings: React.FC = () => {
     return <Error statusCode={500} />;
   }
 
+  const defaultLanguageNameFallback =
+    languages.find(
+      (language) => language.iso_639_1 === currentSettings.originalLanguage
+    )?.english_name ?? currentSettings.originalLanguage;
+
   return (
     <>
       <div className="mb-6">
@@ -167,15 +172,17 @@ const UserGeneralSettings: React.FC = () => {
                     >
                       <option value="">
                         {intl.formatMessage(messages.languageServerDefault, {
-                          applicationTitle: currentSettings.applicationTitle,
-                          language:
-                            intl.formatDisplayName(
-                              currentSettings.originalLanguage,
-                              {
-                                type: 'language',
-                                fallback: 'none',
-                              }
-                            ) ?? currentSettings.originalLanguage,
+                          language: currentSettings.originalLanguage
+                            ? intl.formatDisplayName(
+                                currentSettings.originalLanguage,
+                                {
+                                  type: 'language',
+                                  fallback: 'none',
+                                }
+                              ) ?? defaultLanguageNameFallback
+                            : intl.formatMessage(
+                                messages.originalLanguageDefault
+                              ),
                         })}
                       </option>
                       <option value="all">

src/i18n/locale/en.json

@@ -139,7 +139,7 @@
   "components.PlexLoginButton.signingin": "Signing in…",
   "components.PlexLoginButton.signinwithplex": "Sign In",
   "components.RegionSelector.regionDefault": "All Regions",
-  "components.RegionSelector.regionServerDefault": "{applicationTitle} Default ({region})",
+  "components.RegionSelector.regionServerDefault": "Default ({region})",
   "components.RequestBlock.profilechanged": "Quality Profile",
   "components.RequestBlock.requestoverrides": "Request Overrides",
   "components.RequestBlock.rootfolder": "Root Folder",
@@ -680,7 +680,7 @@
   "components.UserProfile.ProfileHeader.settings": "Edit Settings",
   "components.UserProfile.UserSettings.UserGeneralSettings.displayName": "Display Name",
   "components.UserProfile.UserSettings.UserGeneralSettings.generalsettings": "General Settings",
-  "components.UserProfile.UserSettings.UserGeneralSettings.languageServerDefault": "{applicationTitle} Default ({language})",
+  "components.UserProfile.UserSettings.UserGeneralSettings.languageServerDefault": "Default ({language})",
   "components.UserProfile.UserSettings.UserGeneralSettings.localuser": "Local User",
   "components.UserProfile.UserSettings.UserGeneralSettings.originalLanguageDefault": "All Languages",
   "components.UserProfile.UserSettings.UserGeneralSettings.originallanguage": "Discover Language",