Fixed overwritten theme duplication in ThemeList (#18405)

refs
https://www.notion.so/ghost/AdminX-feedback-27fc7f549bbf4a53bfa2e7b6e5643963?p=6a295239a38840f18b0a3b1710095074&pm=s

- There was an issue where an overwritten theme would be included in the
themes array twice when passed to the ThemeList component.
- We now remove the initial theme from the array when overwriting to
avoid duplications.

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 1260615</samp>

This pull request refactors the theme problem view component to make it
reusable and fixes a bug with theme name display in the theme modal. It
affects the files `InvalidThemeModal.tsx` and `ThemeModal.tsx` in the
admin-x-settings app.

apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx

@@ -95,6 +95,12 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
                 okColor: 'red',
                 onOk: async (confirmModal) => {
                     setUploading(true);
+
+                    // this is to avoid the themes array from returning the overwritten theme.
+                    // find index of themeFileName in existingThemeNames and remove from the array
+                    const index = existingThemeNames.indexOf(themeFileName);
+                    themes.splice(index, 1);
+
                     await handleThemeUpload({file, onActivate: onClose});
                     setUploading(false);
                     setCurrentTab('installed');

apps/admin-x-settings/src/components/settings/site/theme/InvalidThemeModal.tsx

@@ -13,7 +13,7 @@ type FatalError = {
     };
   };
 
-  type FatalErrors = FatalError[];
+type FatalErrors = FatalError[];
 
 export const ThemeProblemView = ({problem}:{problem: ThemeProblem}) => {
     const [isExpanded, setExpanded] = useState(false);