refactoring, finish setup page ✌️

README.md

@@ -69,9 +69,9 @@ Contributions are always welcome! Please read the [Contributing Guide](CONTRIBUT
 
 ## 💬 **Join the Community**
 
-Join our [Discord server](https://discord.gg/CrAbAYMGCe/) to connect with other users and developers.
+Join our [Discord server](https://discord.gg/CrAbAYMGCe) to connect with other users and developers.
 
-<a href="https://discord.gg/SYEByd7Zb2"><img src="https://dcbadge.limes.pink/api/server/https://discord.gg/CrAbAYMGCe?style=flat" alt="Discord"></a>
+<a href="https://discord.gg/CrAbAYMGCe"><img src="https://dcbadge.limes.pink/api/server/https://discord.gg/CrAbAYMGCe?style=flat" alt="Discord"></a>
 
 ---
 

main/background.ts

@@ -18,17 +18,18 @@ import {
   removeSongFromPlaylist,
   searchDB,
   updatePlaylist,
+  updateSettings,
 } from "./helpers/db/connectDB";
 import { initDatabase } from "./helpers/db/createDB";
 import { parseFile, selectCover } from "music-metadata";
+import fs from "fs";
 
 const isProd = process.env.NODE_ENV === "production";
-process.traceProcessWarnings = true;
 
 if (isProd) {
   serve({ directory: "app" });
 } else {
-  app.setPath("userData", `${app.getPath("userData")} (development)`);
+  app.setPath("userData", `${app.getPath("userData")}`);
 }
 
 let settings: any;
@@ -38,24 +39,25 @@ let settings: any;
   initDatabase();
   settings = await getSettings();
 
-  if (settings[0]) {
-    await initializeData(settings[0].musicFolder);
+  if (settings) {
+    await initializeData(settings.musicFolder);
   }
 })();
 
 (async () => {
   await app.whenReady();
 
   // @hiaaryan: Using Depreciated API [Seeking Not Supported with Net]
-  protocol.registerFileProtocol("music", (request, callback) => {
-    callback(request.url.slice("music://".length));
+  protocol.registerFileProtocol("wora", (request, callback) => {
+    callback({ path: request.url.replace("wora://", "") });
   });
 
   const mainWindow = createWindow("main", {
     width: 1500,
     height: 900,
     titleBarStyle: "hidden",
     trafficLightPosition: { x: 20, y: 15 },
+    transparent: true,
     icon: path.join(__dirname, "resources/icon.icns"),
     webPreferences: {
       preload: path.join(__dirname, "preload.js"),
@@ -66,7 +68,7 @@ let settings: any;
   mainWindow.setMinimumSize(1500, 900);
   mainWindow.setTitle("Wora");
 
-  if (settings[0]) {
+  if (settings) {
     if (isProd) {
       await mainWindow.loadURL("app://./home");
     } else {
@@ -204,6 +206,30 @@ ipcMain.handle("removeSongFromPlaylist", async (_, data: any) => {
   return remove;
 });
 
+ipcMain.handle("getSettings", async () => {
+  const settings = await getSettings();
+  return settings;
+});
+
+ipcMain.handle("updateSettings", async (_, data: any) => {
+  const settings = await updateSettings(data);
+  return settings;
+});
+
+ipcMain.handle("uploadProfilePicture", async (_, file) => {
+  const uploadsDir = path.join(app.getPath("userData"), "uploads");
+  if (!fs.existsSync(uploadsDir)) {
+    fs.mkdirSync(uploadsDir, { recursive: true });
+  }
+
+  const fileName = `profile_${Date.now()}${path.extname(file.name)}`;
+  const filePath = path.join(uploadsDir, fileName);
+
+  fs.writeFileSync(filePath, Buffer.from(file.data));
+
+  return filePath;
+});
+
 app.on("window-all-closed", () => {
   app.quit();
 });

main/helpers/db/connectDB.ts

@@ -12,7 +12,17 @@ const db: BetterSQLite3Database<typeof schema> = drizzle(sqlite, {
 });
 
 export const getSettings = async () => {
-  return db.select().from(settings).limit(1);
+  const throwSettings = await db.select().from(settings).limit(1);
+  return throwSettings[0];
+};
+
+export const updateSettings = async (data: any) => {
+  const update = await db.update(settings).set({
+    name: data.name,
+    profilePicture: data.profilePicture,
+  });
+
+  return true;
 };
 
 export const getSongs = async () => {
@@ -153,7 +163,7 @@ export const createPlaylist = async (data: any) => {
   if (data.description) {
     description = data.description;
   } else {
-    description = "An epic playlist created by you ✌️";
+    description = "An epic playlist created by you.";
   }
 
   if (data.coverArt) {
@@ -178,7 +188,7 @@ export const updatePlaylist = async (data: any) => {
   if (data.data.description) {
     description = data.data.description;
   } else {
-    description = "An epic playlist created by you ✌️";
+    description = "An epic playlist created by you.";
   }
 
   if (data.coverArt) {
@@ -390,14 +400,26 @@ export const initializeData = async (musicFolder: string) => {
     await db.insert(playlists).values({
       name: "Favourites",
       coverArt: "/favouritesCoverArt.png",
-      description: "Songs liked by you ❤️",
+      description: "Songs liked by you.",
     });
   }
 
-  await db.delete(settings);
-  await db.insert(settings).values({
-    fullName: "Aaryan Kapoor",
-    profilePicture: "/ak.jpeg",
-    musicFolder,
-  });
+  const getSettings = await db
+    .select()
+    .from(settings)
+    .where(eq(settings.id, 1));
+
+  if (getSettings[0]) {
+    await db
+      .update(settings)
+      .set({
+        musicFolder,
+      })
+      .where(eq(settings.id, 1));
+    return;
+  } else {
+    await db.insert(settings).values({
+      musicFolder,
+    });
+  }
 };

main/helpers/db/createDB.ts

@@ -10,7 +10,7 @@ export const initDatabase = () => {
   sqlite.exec(`
       CREATE TABLE IF NOT EXISTS settings (
         id INTEGER PRIMARY KEY,
-        fullName TEXT,
+        name TEXT,
         profilePicture TEXT,
         musicFolder TEXT
       );

main/helpers/db/schema.ts

@@ -3,7 +3,7 @@ import { relations } from "drizzle-orm";
 
 export const settings = sqliteTable("settings", {
   id: integer("id", { mode: "number" }).primaryKey({ autoIncrement: true }),
-  fullName: text("fullName"),
+  name: text("name"),
   profilePicture: text("profilePicture"),
   musicFolder: text("musicFolder"),
 });

renderer/components/ui/navbar.tsx

@@ -11,31 +11,31 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "../ui/tooltip";
-import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import { Button } from "../ui/button";
+} from "@/components/ui/tooltip";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
 import {
   Command,
   CommandDialog,
   CommandGroup,
   CommandInput,
   CommandItem,
   CommandList,
-} from "../ui/command";
+} from "@/components/ui/command";
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { usePlayer } from "@/context/playerContext";
-import Spinner from "./spinner";
+import Spinner from "@/components/ui/spinner";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "./dialog";
-import { Input } from "./input";
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 import {
   Form,
   FormControl,
@@ -54,11 +54,17 @@ const formSchema = z.object({
   description: z.string().optional(),
 });
 
+type Settings = {
+  name: string;
+  profilePicture: string;
+};
+
 const Navbar = () => {
   const router = useRouter();
   const [open, setOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [searchResults, setSearchResults] = useState([]);
+  const [settings, setSettings] = useState<Settings | null>(null);
   const [search, setSearch] = useState("");
   const [loading, setLoading] = useState(false);
   const { setQueueAndPlay } = usePlayer();
@@ -113,6 +119,8 @@ const Navbar = () => {
       router.push(`/albums/${item.id}`);
     } else if (item.type === "Song") {
       setQueueAndPlay([item], 0);
+    } else if (item.type === "Playlist") {
+      router.push(`/playlists/${item.id}`);
     }
     setOpen(false);
   };
@@ -133,6 +141,12 @@ const Navbar = () => {
     resolver: zodResolver(formSchema),
   });
 
+  useEffect(() => {
+    window.ipc.invoke("getSettings").then((response) => {
+      setSettings(response);
+    });
+  }, []);
+
   return (
     <div className="wora-border h-full w-20 rounded-xl p-6">
       <div className="flex h-full flex-col items-center gap-8">
@@ -142,13 +156,14 @@ const Navbar = () => {
               <TooltipTrigger>
                 <Link href="/settings">
                   <Avatar className="h-8 w-8">
-                    <AvatarImage src="/ak.jpeg" />
-                    <AvatarFallback>AK</AvatarFallback>
+                    <AvatarImage
+                      src={`${settings && settings.profilePicture ? "wora://" + settings.profilePicture : "/userPicture.png"}`}
+                    />
                   </Avatar>
                 </Link>
               </TooltipTrigger>
               <TooltipContent side="right" sideOffset={50}>
-                <p>Aaryan Kapoor</p>
+                <p>{settings && settings.name ? settings.name : "Wora User"}</p>
               </TooltipContent>
             </Tooltip>
           </div>
@@ -303,7 +318,8 @@ const Navbar = () => {
                       onSelect={() => handleItemClick(item)}
                     >
                       <div className="flex h-full w-full items-center gap-2.5 gradient-mask-r-70">
-                        {item.type === "Album" && (
+                        {(item.type === "Playlist" ||
+                          item.type === "Album") && (
                           <div className="relative h-12 w-12 overflow-hidden rounded shadow-xl transition duration-300">
                             <Image src={item.coverArt} alt={item.name} fill />
                           </div>

renderer/components/ui/player.tsx

@@ -77,7 +77,7 @@ function Player() {
     if (!song?.filePath) return;
 
     const sound = new Howl({
-      src: ["music://" + song?.filePath],
+      src: ["wora://" + song?.filePath],
       format: [song?.filePath.split(".").pop()],
       html5: true,
       autoplay: true,
@@ -588,10 +588,10 @@ function Player() {
                               />
                             </div>
                           </div>
-                          <div className="flex h-full w-full flex-col gap-1">
-                            <p className="text-nowrap">
-                              <span className="opacity-50">Name:</span>{" "}
-                              {metadata && metadata.common.title}
+                          <div className="flex h-full w-full flex-col gap-0.5">
+                            <p className="mb-4 text-nowrap">
+                              → {metadata && metadata.common.title} [
+                              {metadata && metadata.format.codec}]
                             </p>
                             <p className="text-nowrap">
                               <span className="opacity-50">Artist:</span>{" "}

renderer/pages/_app.tsx

@@ -5,6 +5,7 @@ import Player from "@/components/ui/player";
 import Head from "next/head";
 import { PlayerProvider } from "@/context/playerContext";
 import { useRouter } from "next/router";
+import { Toaster } from "@/components/ui/sonner";
 
 export default function App({ Component, pageProps }) {
   const router = useRouter();
@@ -18,14 +19,15 @@ export default function App({ Component, pageProps }) {
   }
 
   return (
-    <main className="select-none bg-black font-sans text-xs text-white antialiased">
+    <main className="select-none rounded-lg bg-black font-sans text-xs text-white antialiased">
       <Head>
         <title>Wora</title>
       </Head>
       <PlayerProvider>
         <div className="h-dvh w-dvw">
           <div>
             <Actions />
+            <Toaster position="top-right" />
             <div className="flex gap-8">
               <div className="sticky top-0 z-50 h-dvh p-8 pr-0 pt-12">
                 <Navbar />

renderer/pages/albums/[slug].tsx

@@ -24,7 +24,6 @@ import {
   ContextMenuSubTrigger,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu";
-import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 
 type Song = {
@@ -109,7 +108,6 @@ export default function Album() {
 
   return (
     <ScrollArea className="mt-2.5 h-full w-full rounded-xl gradient-mask-b-80">
-      <Toaster position="top-right" />
       <div className="relative h-96 w-full overflow-hidden rounded-xl">
         <Image
           alt={album ? album.name : "Album Cover"}

renderer/pages/playlists/[slug].tsx

@@ -11,7 +11,6 @@ import {
   IconArrowLeft,
   IconX,
   IconCheck,
-  IconPencil,
   IconStar,
   IconArrowRight,
 } from "@tabler/icons-react";
@@ -23,7 +22,6 @@ import {
   ContextMenuTrigger,
 } from "@/components/ui/context-menu";
 import { toast } from "sonner";
-import { Toaster } from "@/components/ui/sonner";
 import Spinner from "@/components/ui/spinner";
 import {
   Dialog,
@@ -168,7 +166,6 @@ export default function Playlist() {
 
   return (
     <ScrollArea className="mt-2.5 h-full w-full rounded-xl gradient-mask-b-80">
-      <Toaster position="top-right" />
       <div className="relative h-96 w-full overflow-hidden rounded-xl">
         {playlist && playlist.id === 1 ? (
           <div className="h-full w-full bg-red-500 gradient-mask-b-10"></div>