From ea7dfaea5c67bf65833f87e71009913b614ac71c Mon Sep 17 00:00:00 2001
From: Diptesh Choudhuri <ignisda2001@gmail.com>
Date: Thu, 27 Jul 2023 05:53:27 +0530
Subject: [PATCH] feat(frontend): remove imports from sidebar

---
 apps/frontend/src/lib/layouts/LoggedIn.tsx  |  9 ---------
 apps/frontend/src/pages/imports/index.tsx   | 22 ++++++++++++++-------
 apps/frontend/src/pages/imports/reports.tsx | 11 ++++++++++-
 apps/frontend/src/pages/index.tsx           | 15 +++++++++++++-
 4 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/apps/frontend/src/lib/layouts/LoggedIn.tsx b/apps/frontend/src/lib/layouts/LoggedIn.tsx
index 05de9a1ded..da63ec3bf8 100644
--- a/apps/frontend/src/lib/layouts/LoggedIn.tsx
+++ b/apps/frontend/src/lib/layouts/LoggedIn.tsx
@@ -31,7 +31,6 @@ import { changeCase } from "@ryot/utilities";
 import {
 	IconChevronLeft,
 	IconChevronRight,
-	IconDatabaseImport,
 	IconDeviceSpeaker,
 	IconHome2,
 	IconLogout,
@@ -315,14 +314,6 @@ export default function ({ children }: { children: ReactElement }) {
 							icon={IconStretching}
 							links={[{ label: "Home", link: ROUTES.fitness.home }]}
 						/>
-						<LinksGroup
-							label="Importing"
-							icon={IconDatabaseImport}
-							links={[
-								{ label: "New", link: ROUTES.imports.new },
-								{ label: "Reports", link: ROUTES.imports.reports },
-							]}
-						/>
 						<LinksGroup
 							label="Settings"
 							icon={IconSettings}
diff --git a/apps/frontend/src/pages/imports/index.tsx b/apps/frontend/src/pages/imports/index.tsx
index 7a39dc7f81..b9a35eeb29 100644
--- a/apps/frontend/src/pages/imports/index.tsx
+++ b/apps/frontend/src/pages/imports/index.tsx
@@ -1,4 +1,5 @@
 import type { NextPageWithLayout } from "../_app";
+import { ROUTES } from "@/lib/constants";
 import LoggedIn from "@/lib/layouts/LoggedIn";
 import { gqlClient } from "@/lib/services/api";
 import { fileToText } from "@/lib/utilities";
@@ -9,6 +10,7 @@ import {
 	Container,
 	FileInput,
 	Flex,
+	Group,
 	PasswordInput,
 	Select,
 	Stack,
@@ -25,6 +27,7 @@ import {
 import { changeCase } from "@ryot/utilities";
 import { useMutation } from "@tanstack/react-query";
 import Head from "next/head";
+import Link from "next/link";
 import { type ReactElement, useState } from "react";
 import { match } from "ts-pattern";
 import { z } from "zod";
@@ -186,13 +189,18 @@ const Page: NextPageWithLayout = () => {
 					<Stack>
 						<Flex justify={"space-between"} align={"center"}>
 							<Title>Import data</Title>
-							<Anchor
-								size="xs"
-								href="https://ignisda.github.io/ryot/importing.html"
-								target="_blank"
-							>
-								Docs
-							</Anchor>
+							<Group>
+								<Link passHref legacyBehavior href={ROUTES.imports.reports}>
+									<Anchor size="xs">Reports</Anchor>
+								</Link>
+								<Anchor
+									size="xs"
+									href="https://ignisda.github.io/ryot/importing.html"
+									target="_blank"
+								>
+									Docs
+								</Anchor>
+							</Group>
 						</Flex>
 						<Select
 							label="Select a source"
diff --git a/apps/frontend/src/pages/imports/reports.tsx b/apps/frontend/src/pages/imports/reports.tsx
index 4ed0961da4..14f36ad37a 100644
--- a/apps/frontend/src/pages/imports/reports.tsx
+++ b/apps/frontend/src/pages/imports/reports.tsx
@@ -1,10 +1,13 @@
 import type { NextPageWithLayout } from "../_app";
+import { ROUTES } from "@/lib/constants";
 import LoadingPage from "@/lib/layouts/LoadingPage";
 import LoggedIn from "@/lib/layouts/LoggedIn";
 import { gqlClient } from "@/lib/services/api";
 import {
 	Accordion,
+	Anchor,
 	Container,
+	Flex,
 	Indicator,
 	JsonInput,
 	Stack,
@@ -16,6 +19,7 @@ import { changeCase } from "@ryot/utilities";
 import { useQuery } from "@tanstack/react-query";
 import { DateTime } from "luxon";
 import Head from "next/head";
+import Link from "next/link";
 import { type ReactElement } from "react";
 
 const Page: NextPageWithLayout = () => {
@@ -34,7 +38,12 @@ const Page: NextPageWithLayout = () => {
 			</Head>
 			<Container size="sm">
 				<Stack>
-					<Title>Import Reports</Title>
+					<Flex justify={"space-between"} align={"center"}>
+						<Title>Import Reports</Title>
+						<Link passHref legacyBehavior href={ROUTES.imports.new}>
+							<Anchor size="xs">New</Anchor>
+						</Link>
+					</Flex>
 					{importReports.data.length > 0 ? (
 						<Accordion>
 							{importReports.data.map((report) => (
diff --git a/apps/frontend/src/pages/index.tsx b/apps/frontend/src/pages/index.tsx
index a4427d1622..5a2e7e0f30 100644
--- a/apps/frontend/src/pages/index.tsx
+++ b/apps/frontend/src/pages/index.tsx
@@ -29,7 +29,11 @@ import {
 	MetadataLot,
 } from "@ryot/generated/graphql/backend/graphql";
 import { formatTimeAgo } from "@ryot/utilities";
-import { IconMessage2, IconPhotoPlus } from "@tabler/icons-react";
+import {
+	IconDatabaseImport,
+	IconMessage2,
+	IconPhotoPlus,
+} from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
 import humanFormat from "human-format";
 import {
@@ -343,6 +347,15 @@ const Page: NextPageWithLayout = () => {
 								Create a media item
 							</Button>
 						</Link>
+						<Link passHref legacyBehavior href={ROUTES.imports.new}>
+							<Button
+								variant="outline"
+								component="a"
+								leftIcon={<IconDatabaseImport />}
+							>
+								New import
+							</Button>
+						</Link>
 					</SimpleGrid>
 				</Stack>
 			</Container>