demo pr - not for judging

convex/sequencer.ts

@@ -1,5 +1,5 @@
-import { mutation } from "./_generated/server";
 import { v } from "convex/values";
+import { mutation } from "./_generated/server";
 
 export const createSequenceSession = mutation({
   args: {
@@ -16,3 +16,14 @@ export const createSequenceSession = mutation({
     return newSequenceSession;
   },
 });
+
+export const deleteTrack = mutation({
+  args: {
+    name: v.string(),
+  },
+  handler: async (ctx, args) => {
+    const tracks = await ctx.db.query("files").collect();
+    const trackToDelete = tracks.filter((track) => track.name === args.name);
+    await ctx.db.delete(trackToDelete[0]?._id);
+  },
+});

src/app/layouts/ProtectecLayout.tsx

@@ -9,7 +9,7 @@ export default function ProtectedLayout({
 }) {
   return (
     <div className="flex h-screen flex-row gap-3 p-3">
-      <aside className="sticky top-0 max-h-screen w-60 rounded-lg  border border-neutral-800 p-5 max-md:hidden ">
+      <aside className="sticky top-0 max-h-screen w-40 rounded-lg  border border-neutral-800 p-5 max-md:hidden ">
         <SidebarNav />
       </aside>
       <main className="relative max-h-screen flex-1  overflow-auto  rounded-lg border border-neutral-800 pb-5">

src/app/sequencer/page.tsx

@@ -10,10 +10,6 @@ export default function Page() {
             { url: "/0/hat.wav", name: "Closed Hat" },
             { url: "/0/kick.wav", name: "808 Kick" },
             { url: "/0/kick2.wav", name: "808 Kick 2" },
-            // { url: "/0/ohat.wav", name: "Open Hat" },
-            // { url: "/0/snare.wav", name: "Snare" },
-            // { url: "/0/tom.wav", name: "Tom" },
-            // { url: "/0/tom2.wav", name: "Tom 2" },
           ]}
         />
       </div>

src/app/synth/page.tsx

@@ -205,31 +205,31 @@ export default function Home() {
   };
 
   return (
-    <div className="relative flex min-h-screen bg-neutral-900 text-white">
+    <div className="relative flex min-h-screen bg-black text-white">
       <div className="min-w-48">
         <div className="fixed top-3.5 h-full">
-          <div className="flex h-full max-w-full flex-col border-r-2 p-2">
+          <div className="flex h-fit max-w-full flex-col p-2">
             <div className="flex flex-row">
               <button
                 onClick={startRecording}
                 disabled={isRecording || isPlayingBack}
-                className="mr-2 h-fit rounded bg-neutral-700 px-4 py-2 text-lg hover:bg-neutral-600"
+                className="mr-2 h-fit rounded border-[1px] px-4 py-2 text-lg border-neutral-800"
               >
                 <div className="size-5 rounded-full bg-red-500"></div>
               </button>
               <button
                 onClick={stopRecording}
                 disabled={!isRecording}
-                className="mr-2 h-fit rounded bg-neutral-700 px-4 py-2 text-lg hover:bg-neutral-600"
+                className="mr-2 h-fit rounded border-[1px] px-4 py-2 text-lg border-neutral-800"
               >
-                <div className="size-5 rounded-sm bg-neutral-500"></div>
+                <div className="size-5 rounded-sm bg-white"></div>
               </button>
               <button
                 onClick={playBackRecording}
                 disabled={
                   isRecording || isPlayingBack || recordedNotes.length === 0
                 }
-                className="h-fit rounded bg-neutral-700 px-3 py-1.5 text-lg hover:bg-neutral-600"
+                className="h-fit rounded border-[1px] px-3 py-1.5 text-lg border-neutral-800"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -241,7 +241,7 @@ export default function Home() {
                   stroke-width="2"
                   stroke-linecap="round"
                   stroke-linejoin="round"
-                  class=" text-neutral-400"
+                  class=" text-white"
                 >
                   <polygon points="5 3 19 12 5 21 5 3" />
                 </svg>

src/components/add-track-action.tsx

@@ -26,7 +26,6 @@ import React, { useEffect } from "react";
 import { Icons } from "./icons";
 import { Separator } from "./ui/separator";
 import { useToast } from "./ui/use-toast";
-import { FileIcon } from "lucide-react";
 
 export function ActionsTabs({
   getRootProps,
@@ -158,11 +157,10 @@ export function TrackActionsDialog({
   );
 
   useEffect(() => {
-    if (tempTrack.length !== 0) {
-      setSelectedSample(tempTrack[0]);
+    if (tempTrack) {
+      setSelectedSample(tempTrack);
     }
   }, [tempTrack]);
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -178,29 +176,20 @@ export function TrackActionsDialog({
             Let&apos;s add a new track to your session.
           </DialogDescription>
         </DialogHeader>
+        <p className="-mb-8 -mt-2 text-xs font-semibold text-neutral-100">
+          Sample
+        </p>
+        <ActionsTabs
+          {...{ getRootProps, getInputProps }}
+          isDragAccept={isDragAccept}
+          isDragReject={isDragReject}
+          addTrack={onSampleSave}
+          setSelectedCategory={setSelectedCategory}
+          setSelectedSample={setSelectedSample}
+          selectedCategory={selectedCategory}
+          selectedSample={selectedSample}
+        />
 
-        {tempTrack.length === 0 ? (
-          <>
-            <p className="-mb-8 -mt-2 text-xs font-semibold text-neutral-100">
-              Sample
-            </p>
-            <ActionsTabs
-              {...{ getRootProps, getInputProps }}
-              isDragAccept={isDragAccept}
-              isDragReject={isDragReject}
-              addTrack={onSampleSave}
-              setSelectedCategory={setSelectedCategory}
-              setSelectedSample={setSelectedSample}
-              selectedCategory={selectedCategory}
-              selectedSample={selectedSample}
-            />
-          </>
-        ) : (
-          <div className="flex gap-4">
-            <FileIcon />
-            <p>{tempTrack[0].name}</p>
-          </div>
-        )}
         <p className="-mb-8 -mt-2 text-xs text-neutral-400">
           This is the sample that will be played when the track is triggered.
         </p>
@@ -210,7 +199,11 @@ export function TrackActionsDialog({
             type="button"
             variant="default"
             onClick={() => {
-              if (!selectedSample?.name || !selectedSample?.url) {
+              const hasSelectedSample =
+                selectedSample?.name && selectedSample?.url;
+              const hasFile = getInputProps().value !== "";
+
+              if (!hasSelectedSample && !hasFile) {
                 toast({
                   title: "Error",
                   description:
@@ -219,42 +212,21 @@ export function TrackActionsDialog({
                 });
                 return;
               }
-              if (selectedSample?.name !== "" && selectedSample?.url !== "") {
+
+              if (hasSelectedSample) {
                 addTrack(selectedSample);
-                setOpen(false);
                 setSelectedCategory(null);
                 setSelectedSample(null);
-                toast({
-                  title: "Success",
-                  description: "Track added successfully.",
-                  variant: "default",
-                });
-              } else if (!selectedSample && getInputProps().value !== "") {
-                const file = getInputProps();
-                if (file.value !== "") {
-                  onSampleSave();
-                  setOpen(false);
-                  toast({
-                    title: "Success",
-                    description: "Track added successfully.",
-                    variant: "default",
-                  });
-                } else {
-                  toast({
-                    title: "Error",
-                    description:
-                      "No file selected. Please select a file to upload first.",
-                    variant: "destructive",
-                  });
-                }
-              } else {
-                toast({
-                  title: "Error",
-                  description:
-                    "No sample selected. Please select a sample to add to the track.",
-                  variant: "destructive",
-                });
+              } else if (hasFile) {
+                onSampleSave();
               }
+
+              setOpen(false);
+              toast({
+                title: "Success",
+                description: "Track added successfully.",
+                variant: "default",
+              });
             }}
           >
             Add Track

src/components/sample-manager.tsx

@@ -92,7 +92,7 @@ function ManageSample({
                   <Separator />
                   <ScrollArea className="h-52 w-full">
                     <div className="space-y-[0.5px]">
-                      {selectedCategory?.samples.map((sample) => (
+                      {selectedCategory?.samples.map((sample: any) => (
                         <div
                           key={sample.name}
                           className={`m-0 cursor-pointer p-1.5 text-sm hover:bg-neutral-800 ${
@@ -102,7 +102,11 @@ function ManageSample({
                           }`}
                           onClick={() => {
                             setSelectedSample(sample);
-                            handleSampleChange(sample.url, id, track);
+                            handleSampleChange(
+                              sample.url.toString(),
+                              id,
+                              track
+                            );
                           }}
                         >
                           {sample.name}

src/components/sequencer-command.tsx

@@ -1,5 +1,4 @@
 import {
-  Command,
   CommandDialog,
   CommandEmpty,
   CommandGroup,
@@ -11,10 +10,11 @@ import {
 } from "@/components/ui/command";
 import { DeleteIcon, PlayIcon, SaveIcon, ShareIcon } from "lucide-react";
 import React from "react";
+import * as Tone from "tone";
 
 type Props = {
   toast: any;
-  samples: { url: string; name: string | undefined }[];
+  samples: { url: Tone.ToneAudioBuffer; name: string | undefined }[];
   numOfSteps?: number;
   checkedSteps: string[];
   handleSaveClick: () => void;