drawer working

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
 		}

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'

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>
 	)
 }

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} />
 			) : (

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'
 		}

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}
 		>
 			{[

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>
 	)
 }
 

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" />
 					)
 				}
 			>

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: [

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>
 	)
 }