Refactor code structure for improved readability and maintainability

app/components/ihateserverside.tsx

@@ -37,7 +37,7 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
       {/* Main Content Area */}
       <div className="flex-1 flex overflow-hidden">
         {isSidebarVisible && (
-          <div className="w-64 flex-shrink-0">
+          <div className="w-64 flex-shrink-0 border-r">
             <Sidebar
               playlists={playlists}
               className="h-full overflow-y-auto"

app/components/menu.tsx

@@ -84,7 +84,7 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
       <>
       <Menubar className="rounded-none border-b border-none px-2 lg:px-4">
         <MenubarMenu>
-          <MenubarTrigger className="font-bold">offbrand spotify</MenubarTrigger>
+          <MenubarTrigger className="font-bold">mice</MenubarTrigger>
           <MenubarContent>
             <MenubarItem onClick={() => setOpen(true)}>About Music</MenubarItem>
             <MenubarSeparator />

app/globals.css

@@ -2,48 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  @tailwind base;
-@tailwind components;
-@tailwind utilities;
 
 body {
   font-family: Arial, Helvetica, sans-serif;
@@ -82,9 +40,9 @@ body {
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
     --hover: 240 27% 11%;
+    --radius: 0.5rem;
   }
 
-
   /* Blue Theme Dark */
   .theme-blue.dark {
     --background: 240 10% 3.9%;
@@ -107,6 +65,7 @@ body {
     --input: 217.2 32.6% 17.5%;
     --ring: 224.3 76.3% 48%;
     --hover: 240 27% 11%;
+    --radius: 0.5rem;
   }
 
   /* Violet Theme Dark */
@@ -130,36 +89,10 @@ body {
     --border: 215 27.9% 16.9%;
     --input: 215 27.9% 16.9%;
     --ring: 263.4 70% 50.4%;
+    --radius: 0.5rem;
   }
 
-  /* Default dark mode (fallback) */
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --hover: 240 27% 11%;
-  }
+ 
 }
   .dark {
     --background: 240 10% 3.9%;
@@ -187,8 +120,9 @@ body {
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
     --hover: 240 27% 11%;
+    --radius: 0.5rem;
   }
-}
+
 
 
 

app/layout.tsx

@@ -16,8 +16,8 @@ export const viewport: Viewport = {
 
 export const metadata: Metadata = {
   title: {
-    template: 'offbrand spotify | %s',
-    default: 'offbrand spotify',
+    template: 'mice | %s',
+    default: 'mice',
   },
   description: 'a very awesome music streaming service',
   robots: {

app/manifest.ts

@@ -2,9 +2,9 @@ import type { MetadataRoute } from 'next'
  
 export default function manifest(): MetadataRoute.Manifest {
   return {
-    name: 'Offbrand Spotify',
+    name: 'mice',
     short_name: 'Offbrand',
-    description: 'a very offbrand spotify clone',
+    description: 'a very mice clone',
     start_url: '/',
     categories: ["music", "entertainment"],
     display_override: ['window-controls-overlay'],