Decouple shlink-web-component from NotFound component

shlink-web-component/Main.tsx

@@ -1,15 +1,18 @@
 import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import { useEffect } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
-import { NotFound } from '../src/common/NotFound';
 import { AsideMenu } from './common/AsideMenu';
 import { useFeature } from './utils/features';
 import { useSwipeable, useToggle } from './utils/helpers/hooks';
 import { useRoutesPrefix } from './utils/routesPrefix';
 
+type MainProps = {
+  createNotFound?: (nonPrefixedHomePath: string) => ReactNode;
+};
+
 export const Main = (
   TagsList: FC,
   ShortUrlsList: FC,
@@ -22,7 +25,7 @@ export const Main = (
   Overview: FC,
   EditShortUrl: FC,
   ManageDomains: FC,
-): FC => () => {
+): FC<MainProps> => ({ createNotFound }) => {
   const location = useLocation();
   const routesPrefix = useRoutesPrefix();
   const [sidebarVisible, toggleSidebar, showSidebar, hideSidebar] = useToggle();
@@ -56,10 +59,7 @@ export const Main = (
                 <Route path="/non-orphan-visits/*" element={<NonOrphanVisits />} />
                 <Route path="/manage-tags" element={<TagsList />} />
                 <Route path="/manage-domains" element={<ManageDomains />} />
-                <Route
+                {createNotFound && <Route path="*" element={createNotFound('/list-short-urls/1')} />}
-                  path="*"
-                  element={<NotFound to={`${routesPrefix}/list-short-urls/1`}>List short URLs</NotFound>}
-                />
               </Routes>
             </div>
           </div>

shlink-web-component/ShlinkWebComponent.tsx

@@ -11,10 +11,11 @@ import type { Settings } from './utils/settings';
 import { SettingsProvider } from './utils/settings';
 
 type ShlinkWebComponentProps = {
-  routesPrefix?: string;
-  settings?: Settings;
   serverVersion: SemVer;
   apiClient: ShlinkApiClient;
+  routesPrefix?: string;
+  settings?: Settings;
+  createNotFound?: (nonPrefixedHomePath: string) => ReactNode;
 };
 
 // FIXME
@@ -24,7 +25,7 @@ let apiClientRef: ShlinkApiClient;
 
 export const createShlinkWebComponent = (
   bottle: Bottle,
-): FC<ShlinkWebComponentProps> => ({ serverVersion, apiClient, settings, routesPrefix = '' }) => {
+): FC<ShlinkWebComponentProps> => ({ serverVersion, apiClient, settings, routesPrefix = '', createNotFound }) => {
   const features = useFeatures(serverVersion);
   const mainContent = useRef<ReactNode>();
   const [theStore, setStore] = useState<Store | undefined>();
@@ -37,7 +38,7 @@ export const createShlinkWebComponent = (
     // depend on it
     const { container } = bottle;
     const { Main, store, loadMercureInfo } = container;
-    mainContent.current = <Main />;
+    mainContent.current = <Main createNotFound={createNotFound} />;
     setStore(store);
 
     // Load mercure info

src/app/App.tsx

@@ -2,10 +2,10 @@ import classNames from 'classnames';
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
+import type { Settings } from '../../shlink-web-component';
 import { AppUpdateBanner } from '../common/AppUpdateBanner';
 import { NotFound } from '../common/NotFound';
 import type { ServersMap } from '../servers/data';
-import type { Settings } from '../settings/reducers/settings';
 import { forceUpdate } from '../utils/helpers/sw';
 import { changeThemeInMarkup } from '../utils/theme';
 import './App.scss';

src/common/MenuLayout.tsx

@@ -5,6 +5,7 @@ import { ShlinkWebComponent } from '../../shlink-web-component';
 import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuilder';
 import { isReachableServer } from '../servers/data';
 import { withSelectedServer } from '../servers/helpers/withSelectedServer';
+import { NotFound } from './NotFound';
 import './MenuLayout.scss';
 
 interface MenuLayoutProps {
@@ -19,6 +20,7 @@ export const MenuLayout = (
   ServerError: FC,
 ) => withSelectedServer<MenuLayoutProps>(({ selectedServer, sidebarNotPresent, sidebarPresent, settings }) => {
   const showContent = isReachableServer(selectedServer);
+  const routesPrefix = showContent ? `/server/${selectedServer.id}` : '';
 
   useEffect(() => {
     showContent && sidebarPresent();
@@ -34,7 +36,10 @@ export const MenuLayout = (
       serverVersion={selectedServer.version}
       apiClient={buildShlinkApiClient(selectedServer)}
       settings={settings}
-      routesPrefix={`/server/${selectedServer.id}`}
+      routesPrefix={routesPrefix}
+      createNotFound={(nonPrefixedHomePath) => (
+        <NotFound to={`${routesPrefix}${nonPrefixedHomePath}`}>List short URLs</NotFound>
+      )}
     />
   );
 }, ServerError);