From 51de0213cdaeb222a5011be2afb9822d41a8dee3 Mon Sep 17 00:00:00 2001
From: James Gentes <jgentes@gmail.com>
Date: Fri, 29 Dec 2023 10:29:15 -0800
Subject: [PATCH] drawer working

---
 app/api/audioEvents.ts                    |  6 +--
 app/api/db/appState.ts                    |  2 +-
 app/components/ConfirmModal.tsx           | 60 ++++++++++++-----------
 app/components/mixes/MixCard.tsx          |  2 +-
 app/components/mixes/StemAccessButton.tsx | 10 ++--
 app/components/tracks/Controls.tsx        |  1 +
 app/components/tracks/DrawerButton.tsx    | 34 -------------
 app/components/tracks/TrackDrawer.tsx     | 45 ++++++++++-------
 app/components/tracks/TrackTable.tsx      | 21 +++++---
 app/entry.client.tsx                      |  2 +-
 app/routes/_index.tsx                     |  5 +-
 11 files changed, 85 insertions(+), 103 deletions(-)
 delete mode 100644 app/components/tracks/DrawerButton.tsx

diff --git a/app/api/audioEvents.ts b/app/api/audioEvents.ts
index 43ca550..7baf946 100644
--- a/app/api/audioEvents.ts
+++ b/app/api/audioEvents.ts
@@ -424,13 +424,13 @@ const audioEvents = {
 
 		// Adjust zoom
 		switch (beatResolution) {
-			case 0.25:
+			case '1:4':
 				waveform.zoom(20)
 				break
-			case 0.5:
+			case '1:2':
 				waveform.zoom(40)
 				break
-			case 1:
+			case '1:1':
 				waveform.zoom(80)
 				break
 		}
diff --git a/app/api/db/appState.ts b/app/api/db/appState.ts
index 7f5b50e..fe9d5bd 100644
--- a/app/api/db/appState.ts
+++ b/app/api/db/appState.ts
@@ -1,6 +1,6 @@
 // This file handles application state that is not persisted through page refreshes, therefore not in IndexedDB. appState is different from Prefs in that it isn't persistent.
 
-import { ButtonProps } from '@mui/joy'
+import type { ButtonProps } from '@nextui-org/react'
 import { Key } from 'react'
 import createStore from 'teaful'
 import type WaveSurfer from 'wavesurfer.js'
diff --git a/app/components/ConfirmModal.tsx b/app/components/ConfirmModal.tsx
index eff1a55..2df49fd 100644
--- a/app/components/ConfirmModal.tsx
+++ b/app/components/ConfirmModal.tsx
@@ -1,5 +1,11 @@
-import { Box, Button, Modal, ModalDialog, Typography } from '@mui/joy'
-import { Divider } from '@mui/material'
+import {
+	Button,
+	Divider,
+	Modal,
+	ModalBody,
+	ModalContent,
+	ModalHeader
+} from '@nextui-org/react'
 import { modalState } from '~/api/db/appState'
 import { WarningIcon } from '~/components/icons'
 
@@ -22,47 +28,45 @@ const ConfirmModal = () => {
 		<Modal
 			aria-labelledby="alert-dialog-modal-title"
 			aria-describedby="alert-dialog-modal-description"
-			open={openState || false}
-			sx={{ alignItems: 'normal' }}
+			isOpen={openState || false}
+			className="flex items-normal border-1 border-divider"
 			onClose={() => closeModal()}
-			disableEnforceFocus={true}
+			backdrop="opaque"
 		>
-			<ModalDialog
-				variant="outlined"
+			<ModalContent
 				role="alertdialog"
-				sx={{ borderColor: 'action.focus' }}
+				//sx={{ borderColor: 'action.focus' }}
 			>
-				<Typography
+				<ModalHeader
 					id="alert-dialog-modal-title"
-					component="h2"
-					level="inherit"
-					fontSize="1.25em"
-					sx={{ display: 'flex', alignItems: 'normal' }}
-					startDecorator={<WarningIcon className="self-center text-xl" />}
+					//sx={{ display: 'flex', alignItems: 'normal' }}
 				>
+					<WarningIcon className="self-center text-xl mr-2" />
 					{headerText}
-				</Typography>
-				<Divider sx={{ my: 1 }} />
-				<Typography
-					id="alert-dialog-modal-description"
-					textColor="text.tertiary"
-					mb={3}
-				>
-					{bodyText}
-				</Typography>
-				<Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
-					<Button variant="plain" color="neutral" onClick={() => onCancel()}>
+				</ModalHeader>
+				<Divider className="my-1" />
+				<ModalBody id="alert-dialog-modal-description">{bodyText}</ModalBody>
+				<div className="flex gap-2 justify-end m-3">
+					<Button
+						variant="faded"
+						color="default"
+						size="sm"
+						radius="sm"
+						onClick={() => onCancel()}
+					>
 						Cancel
 					</Button>
 					<Button
-						variant="solid"
+						size="sm"
+						radius="sm"
+						variant="flat"
 						color={confirmColor}
 						onClick={() => onConfirm()}
 					>
 						{confirmText}
 					</Button>
-				</Box>
-			</ModalDialog>
+				</div>
+			</ModalContent>
 		</Modal>
 	)
 }
diff --git a/app/components/mixes/MixCard.tsx b/app/components/mixes/MixCard.tsx
index e6b95d0..b5df6e0 100644
--- a/app/components/mixes/MixCard.tsx
+++ b/app/components/mixes/MixCard.tsx
@@ -43,7 +43,7 @@ const MixCard = ({
 		'p-0 border-1 border-divider rounded bg-primary-50 overflow-hidden'
 
 	return (
-		<div className="p-2 w-5/12 rounded border-1 border-divider bg-primary">
+		<div className="p-3 w-5/12 rounded border-1 border-divider bg-primary">
 			{!trackId ? (
 				<Dropzone className="h-full" trackSlot={trackSlot} />
 			) : (
diff --git a/app/components/mixes/StemAccessButton.tsx b/app/components/mixes/StemAccessButton.tsx
index 6c68472..beb80c8 100644
--- a/app/components/mixes/StemAccessButton.tsx
+++ b/app/components/mixes/StemAccessButton.tsx
@@ -1,4 +1,4 @@
-import { CircularProgress, Sheet, Typography } from '@mui/joy'
+import { CircularProgress } from '@nextui-org/react'
 import { ReactElement } from 'react'
 import { useCountUp } from 'use-count-up'
 import { StemState, audioState } from '~/api/db/appState'
@@ -52,7 +52,7 @@ const StemAccessButton = ({ trackId }: { trackId: Track['id'] }) => {
 			<CircularProgress
 				size="md"
 				color={color}
-				determinate
+				className="mx-auto"
 				value={(((value as number) || 1) / stemTimer) * 100}
 			/>
 		)
@@ -73,7 +73,7 @@ const StemAccessButton = ({ trackId }: { trackId: Track['id'] }) => {
 			secondaryText: 'Downloaded stems will be stored in the folder'
 		},
 		grantStemDirAccess: {
-			icon: <RuleFolderIcon className="text-4lg text-default-600 m-auto" />,
+			icon: <RuleFolderIcon className="text-4xl text-default-600 m-auto" />,
 			primaryText: 'Click to Grant Folder Access',
 			secondaryText: 'Permission needed to access stems'
 		},
@@ -93,13 +93,13 @@ const StemAccessButton = ({ trackId }: { trackId: Track['id'] }) => {
 			secondaryText: 'Stem separation in progress'
 		},
 		downloadingStems: {
-			icon: <CircularProgress size="md" color="success" />,
+			icon: <CircularProgress size="md" color="success" className="mx-auto" />,
 			primaryText: 'Please stand by...',
 			secondaryText: 'Downloading stems'
 		},
 		ready: { icon: <></>, primaryText: '', secondaryText: '' },
 		error: {
-			icon: <WarningIcon className="text-lg text-default-500" />,
+			icon: <WarningIcon className="text-3xl text-warning-600 mx-auto" />,
 			primaryText: 'Something went wrong',
 			secondaryText: 'Please refresh the page and try again'
 		}
diff --git a/app/components/tracks/Controls.tsx b/app/components/tracks/Controls.tsx
index c06175a..065d2d0 100644
--- a/app/components/tracks/Controls.tsx
+++ b/app/components/tracks/Controls.tsx
@@ -406,6 +406,7 @@ const MixControl = ({ tracks }: { tracks: MixPrefs['tracks'] }) => {
 				cursor:
 					'group-data-[selected=true]:bg-transparent group-data-[selected=true]:rounded p-2'
 			}}
+			defaultSelectedKey={'Pause'}
 			onSelectionChange={navEvent}
 		>
 			{[
diff --git a/app/components/tracks/DrawerButton.tsx b/app/components/tracks/DrawerButton.tsx
deleted file mode 100644
index bcf3a7b..0000000
--- a/app/components/tracks/DrawerButton.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Button } from '@mui/joy'
-import { appState } from '~/api/db/appState'
-import { ChevronIcon } from '~/components/icons'
-
-const DrawerButton = () => {
-	const [openDrawer, setOpenDrawer] = appState.openDrawer()
-
-	const direction = openDrawer ? 'down' : 'up'
-
-	return (
-		<Button
-			variant="soft"
-			size="sm"
-			fullWidth
-			title={direction === 'up' ? 'Open drawer' : 'Close drawer'}
-			sx={{
-				borderTop: '1px solid',
-				borderColor: 'divider',
-				borderRadius: 0,
-				position: 'fixed',
-				bottom: direction === 'up' ? '0' : '80%'
-			}}
-			onClick={() => setOpenDrawer(direction === 'up' ? true : false)}
-		>
-			<ChevronIcon
-				className={`text-xl ${
-					direction === 'down' ? 'rotate-90' : '-rotate-90'
-				}`}
-			/>
-		</Button>
-	)
-}
-
-export { DrawerButton as default }
diff --git a/app/components/tracks/TrackDrawer.tsx b/app/components/tracks/TrackDrawer.tsx
index 2ab74dd..4c64900 100644
--- a/app/components/tracks/TrackDrawer.tsx
+++ b/app/components/tracks/TrackDrawer.tsx
@@ -1,29 +1,38 @@
-import { Drawer } from '@mui/material'
+import { Accordion, AccordionItem } from '@nextui-org/react'
 import { appState } from '~/api/db/appState'
 import TrackTable from '~/components//tracks/TrackTable'
-import DrawerButton from '~/components/tracks/DrawerButton'
+import { ChevronIcon } from '~/components/icons'
 
 const TrackDrawer = () => {
 	const [openDrawer, setOpenDrawer] = appState.openDrawer()
 
 	return (
-		<Drawer
-			anchor="bottom"
-			open={openDrawer}
-			onClose={() => setOpenDrawer(false)}
-			PaperProps={{
-				sx: {
-					height: '80%',
-					backgroundColor: 'background.surface',
-					marginTop: 'auto'
-				},
-				variant: 'outlined',
-				elevation: 0
-			}}
+		<Accordion
+			isCompact
+			hideIndicator
+			className="absolute bottom-0 p-0"
+			disableAnimation
 		>
-			<TrackTable />
-			<DrawerButton />
-		</Drawer>
+			<AccordionItem
+				key="track-drawer"
+				aria-label="track-drawer"
+				onPress={() => setOpenDrawer(!openDrawer)}
+				title={
+					<ChevronIcon
+						className={`text-3xl text-default-600 ${
+							openDrawer ? 'rotate-90' : '-rotate-90'
+						}`}
+					/>
+				}
+				classNames={{
+					base: 'border-t-1 border-primary-300',
+					trigger: 'p-0',
+					titleWrapper: 'flex-row justify-center'
+				}}
+			>
+				<TrackTable />
+			</AccordionItem>
+		</Accordion>
 	)
 }
 
diff --git a/app/components/tracks/TrackTable.tsx b/app/components/tracks/TrackTable.tsx
index ef52c69..c7e8da5 100644
--- a/app/components/tracks/TrackTable.tsx
+++ b/app/components/tracks/TrackTable.tsx
@@ -167,8 +167,8 @@ const TrackTable = () => {
 		(track: Track) => {
 			return track.bpm ? (
 				<div className="pl-1">{track.bpm.toFixed(0)}</div>
-			) : analyzingTracks.has(track?.id) ? (
-				<div className="relative w-1/2 top-1/2 -mt-0.5 m-auto">
+			) : analyzingTracks.size > 1 || analyzingTracks.has(track.id) ? (
+				<div className="relative w-1/2 top-1/2 -mt-0.5 ml-1">
 					<ProgressBar />
 				</div>
 			) : (
@@ -266,7 +266,7 @@ const TrackTable = () => {
 			openState: true,
 			headerText: 'Are you sure?',
 			bodyText: 'Removing tracks here will not delete them from your computer.',
-			confirmColor: 'danger',
+			confirmColor: 'warning',
 			confirmText: `Remove ${selectedCount} track${
 				selectedCount > 1 ? 's' : ''
 			}`,
@@ -394,11 +394,16 @@ const TrackTable = () => {
 					{!dirtyTracks.length ? null : (
 						<Link
 							onClick={() => showAnalyzeDirtyModal()}
-							color="warning"
-							underline="none"
+							color="secondary"
 							className="ml-1 text-sm cursor-pointer"
 						>
-							({dirtyTracks.length} to analyze)
+							(
+							{analyzingTracks.size
+								? `${dirtyTracks.length} to analyze`
+								: `click to analyze ${dirtyTracks.length} track${
+										dirtyTracks.length > 1 ? 's' : ''
+								  }`}
+							)
 						</Link>
 					)}
 				</span>
@@ -451,7 +456,7 @@ const TrackTable = () => {
 					'rounded',
 					dragOver ? 'bg-primary-500 bg-opacity-10' : 'bg-default/30'
 				],
-				tr: ['rounded'],
+				tr: ['rounded border-b-1 border-divider'],
 				tbody: dragOver ? 'bg-primary-500 bg-opacity-10' : ''
 			}}
 			selectedKeys={selected}
@@ -499,7 +504,7 @@ const TrackTable = () => {
 					) : search ? (
 						'No tracks found'
 					) : (
-						<Dropzone className="h-full mx-0 my-2" />
+						<Dropzone className="h-full mt-3" />
 					)
 				}
 			>
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
index c9d546f..7bc9add 100644
--- a/app/entry.client.tsx
+++ b/app/entry.client.tsx
@@ -6,7 +6,7 @@ import { hydrateRoot } from 'react-dom/client'
 Sentry.init({
 	dsn: 'https://0158c725913324618a2d2e625ffb9fde@o4506276018192384.ingest.sentry.io/4506276020092928',
 	tracesSampleRate: 1,
-	replaysSessionSampleRate: 0.1,
+	replaysSessionSampleRate: 0,
 	replaysOnErrorSampleRate: 1,
 
 	integrations: [
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 2a2b8bb..f1207b0 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -5,7 +5,6 @@ import Header from '~/components/layout/Header'
 import Heart from '~/components/layout/HeartIcon'
 import LeftNav from '~/components/layout/LeftNav'
 import MixView from '~/components/mixes/MixView'
-import DrawerButton from '~/components/tracks/DrawerButton'
 import TrackDrawer from '~/components/tracks/TrackDrawer'
 import TrackTable from '~/components/tracks/TrackTable'
 
@@ -23,7 +22,7 @@ const Index: React.FunctionComponent = () => {
 			{mixViewVisible ? (
 				<>
 					<MixView tracks={tracks} />
-					<DrawerButton />
+					<TrackDrawer />
 				</>
 			) : (
 				<>
@@ -34,8 +33,6 @@ const Index: React.FunctionComponent = () => {
 					<Heart />
 				</>
 			)}
-
-			<TrackDrawer />
 		</div>
 	)
 }