Frontend overhaul: Technical baseline for mantine (#1486)

* refactor: Move old css and js code

* refactor: Add AppShell scaffolding

* fix: Fix ArrayExtensions

* fix: Remove "new_beta" from stylesheet options

* chores: Remove unused code

* chores: Remove unused imports

VocaDbWeb/Scripts/App.tsx

@@ -1,71 +1,28 @@
-import AppRoutes from '@/AppRoutes';
 import '@/ArrayExtensions';
-import Container from '@/Bootstrap/Container';
-import { AboutDisclaimer } from '@/Components/Shared/Partials/AboutDisclaimer';
-import { Header } from '@/Components/Shared/Partials/Header';
-import { LeftMenu } from '@/Components/Shared/Partials/LeftMenu';
-import { miniPlayerHeight, VdbPlayer } from '@/Components/VdbPlayer/VdbPlayer';
+// TODO: Remove
 import { VdbPlayerProvider } from '@/Components/VdbPlayer/VdbPlayerContext';
 import { Compose } from '@/Compose';
 import { LoginManagerProvider } from '@/LoginManagerContext';
 import { MutedUsersProvider } from '@/MutedUsersContext';
-import { VdbProvider, useVdb } from '@/VdbContext';
+import { VdbProvider } from '@/VdbContext';
 import '@/i18n';
-import '@/styles/css.less';
 import { NostalgicDivaProvider } from '@vocadb/nostalgic-diva';
-import { ScrollToTop } from '@vocadb/route-sphere';
-import React from 'react';
-import { Toaster } from 'react-hot-toast';
+import React, { Suspense } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
 import { CultureCodesProvider } from './CultureCodesContext';
 
-const UtaiteDB = React.lazy(() => import('./styles/utaiteDb'));
-const TetoDB = React.lazy(() => import('./styles/tetoDb'));
-const DarkAngel = React.lazy(() => import('./styles/darkAngel'));
+const NewApp = React.lazy(() => import('./NewApp'));
+const OldApp = React.lazy(() => import('./OldApp'));
 
-const AppContainer = (): React.ReactElement => {
-	const vdb = useVdb();
+const InnerAppChooser = (): React.ReactElement => {
+	const beta_enabled = localStorage.getItem('new_beta');
 
-	return (
-		<Container
-			fluid
-			css={{
-				flex: '1 1 100%',
-				paddingBottom: miniPlayerHeight,
-				minWidth: 0,
-				overflow: 'hidden',
-			}}
-		>
-			<div className="row-fluid">
-				<div className="span12 rightFrame well">
-					<React.Suspense fallback={null /* TODO */}>
-						<AppRoutes />
-					</React.Suspense>
-				</div>
-				<AboutDisclaimer />
-			</div>
-			<React.Suspense fallback={null}>
-				{vdb.values.loggedUser?.stylesheet && (
-					<>
-						{vdb.values.loggedUser?.stylesheet && (
-							<>
-								{vdb.values.loggedUser?.stylesheet
-									.toLowerCase()
-									.startsWith('darkangel') && <DarkAngel />}
-								{vdb.values.loggedUser?.stylesheet
-									.toLowerCase()
-									.startsWith('tetodb') && <TetoDB />}
-								{vdb.values.siteName.toLowerCase().includes('utaite') && (
-									<UtaiteDB />
-								)}
-							</>
-						)}
-					</>
-				)}
-			</React.Suspense>
-		</Container>
-	);
+	if (beta_enabled === 'true') {
+		return <NewApp />;
+	}
+
+	return <OldApp />;
 };
 
 const App = (): React.ReactElement => {
@@ -81,14 +38,9 @@ const App = (): React.ReactElement => {
 				CultureCodesProvider,
 			]}
 		>
-			<ScrollToTop />
-			<Header />
-			<div css={{ display: 'flex' }}>
-				<LeftMenu />
-				<AppContainer />
-			</div>
-			<Toaster containerStyle={{ top: '10vh' }} gutter={0} />
-			<VdbPlayer />
+			<Suspense fallback={null}>
+				<InnerAppChooser />
+			</Suspense>
 		</Compose>
 	);
 };

VocaDbWeb/Scripts/NewApp.tsx

@@ -0,0 +1,89 @@
+import {
+	AppShell,
+	Navbar,
+	Header,
+	UnstyledButton,
+	Group,
+	ThemeIcon,
+	Text,
+	MantineColor,
+} from '@mantine/core';
+import { IconMusic } from '@tabler/icons-react';
+
+const linkData = [
+	{ icon: <IconMusic size="1rem" />, color: 'blue', label: 'Songs' },
+];
+
+interface MainLinkProps {
+	icon: React.ReactNode;
+	color: MantineColor;
+	label: string;
+}
+
+const MainLink = ({
+	icon,
+	color,
+	label,
+}: MainLinkProps): React.ReactElement => {
+	return (
+		<UnstyledButton
+			// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+			sx={(theme) => ({
+				display: 'block',
+				width: '100%',
+				padding: theme.spacing.xs,
+				borderRadius: theme.radius.sm,
+				color:
+					theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+
+				'&:hover': {
+					backgroundColor:
+						theme.colorScheme === 'dark'
+							? theme.colors.dark[6]
+							: theme.colors.gray[0],
+				},
+			})}
+		>
+			<Group>
+				<ThemeIcon color={color} variant="light">
+					{icon}
+				</ThemeIcon>
+
+				<Text size="sm">{label}</Text>
+			</Group>
+		</UnstyledButton>
+	);
+};
+
+const NewApp = (): React.ReactElement => {
+	return (
+		<AppShell
+			navbarOffsetBreakpoint="sm"
+			navbar={
+				<Navbar p="md" hiddenBreakpoint="sm" width={{ sm: 200, lg: 300 }}>
+					{linkData.map((link) => (
+						<MainLink {...link} key={link.label} />
+					))}
+				</Navbar>
+			}
+			header={
+				<Header height={{ base: 50, md: 70 }} p="md">
+					{/* Header content */}
+				</Header>
+			}
+			// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+			styles={(theme) => ({
+				main: {
+					backgroundColor:
+						theme.colorScheme === 'dark'
+							? theme.colors.dark[8]
+							: theme.colors.gray[0],
+				},
+			})}
+		>
+			{/* Your application here */}
+		</AppShell>
+	);
+};
+
+export default NewApp;

VocaDbWeb/Scripts/OldApp.tsx

@@ -0,0 +1,77 @@
+import AppRoutes from '@/AppRoutes';
+import Container from '@/Bootstrap/Container';
+import { AboutDisclaimer } from '@/Components/Shared/Partials/AboutDisclaimer';
+import { Header } from '@/Components/Shared/Partials/Header';
+import { LeftMenu } from '@/Components/Shared/Partials/LeftMenu';
+import { miniPlayerHeight, VdbPlayer } from '@/Components/VdbPlayer/VdbPlayer';
+import { useVdb } from '@/VdbContext';
+import '@/i18n';
+import '@/styles/Icons.css';
+import '@/styles/css.less';
+import '@/styles/jquery.qtip.css';
+import '@/styles/themes/redmond/jquery-ui-1.10.1.custom.min.css';
+import { ScrollToTop } from '@vocadb/route-sphere';
+import React from 'react';
+import { Toaster } from 'react-hot-toast';
+
+const UtaiteDB = React.lazy(() => import('./styles/utaiteDb'));
+const TetoDB = React.lazy(() => import('./styles/tetoDb'));
+const DarkAngel = React.lazy(() => import('./styles/darkAngel'));
+
+const AppContainer = (): React.ReactElement => {
+	const vdb = useVdb();
+
+	return (
+		<Container
+			fluid
+			css={{
+				flex: '1 1 100%',
+				paddingBottom: miniPlayerHeight,
+				minWidth: 0,
+				overflow: 'hidden',
+			}}
+		>
+			<div className="row-fluid">
+				<div className="span12 rightFrame well">
+					<React.Suspense fallback={null /* TODO */}>
+						<AppRoutes />
+					</React.Suspense>
+				</div>
+				<AboutDisclaimer />
+			</div>
+			<React.Suspense fallback={null}>
+				{vdb.values.loggedUser?.stylesheet && (
+					<>
+						{vdb.values.loggedUser?.stylesheet
+							.toLowerCase()
+							.startsWith('darkangel') && <DarkAngel />}
+
+						{vdb.values.loggedUser?.stylesheet
+							.toLowerCase()
+							.startsWith('tetodb') && <TetoDB />}
+						{vdb.values.siteName.toLowerCase().includes('utaite') && (
+							<UtaiteDB />
+						)}
+					</>
+				)}
+			</React.Suspense>
+		</Container>
+	);
+};
+
+const OldApp = (): React.ReactElement => {
+	return (
+		<>
+			<ScrollToTop />
+			<Header />
+			<div css={{ display: 'flex' }}>
+				<LeftMenu />
+				<AppContainer />
+			</div>
+			<Toaster containerStyle={{ top: '10vh' }} gutter={0} />
+			<VdbPlayer />{' '}
+		</>
+	);
+};
+
+export default OldApp;

VocaDbWeb/index.html

@@ -5,17 +5,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Vocaloid Database</title>
 		<link rel="shortcut icon" href="/Content/favicon.ico" type="image/x-icon" />
-		<link href="/Content/Styles/Icons.css" rel="stylesheet" type="text/css" />
-		<link
-			href="/Content/themes/redmond/jquery-ui-1.10.1.custom.min.css"
-			rel="stylesheet"
-			type="text/css"
-		/>
-		<link
-			href="/Scripts/qTip/jquery.qtip.css"
-			rel="stylesheet"
-			type="text/css"
-		/>
 		<!-- TODO: Remove. -->
 		<link rel="stylesheet" href="/Scripts/jqwidgets27/styles/jqx.base.css" />
 		<link