feat: add Input, Separator, Sheet, and Sidebar components

- Implemented Input component for user input fields.
- Created Separator component for visual separation in UI.
- Added Sheet component for modal-like overlays with customizable content.
- Developed Sidebar component with collapsible functionality and mobile responsiveness.
- Introduced Skeleton component for loading placeholders.
- Implemented Tooltip component for contextual hints.
- Updated global CSS variables for sidebar theming.
- Added useIsMobile hook for responsive design handling.
- Modified projects route to include ProjectSidebar.
- Enhanced Tailwind CSS configuration for improved styling.
- Updated Vite preload configuration for custom entry file naming.

tailwind.config.js

@@ -1,42 +1,52 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./index.html', './src/renderer/**/*.{ts,tsx}'],
+    darkMode: ['class'],
+    content: ['./index.html', './src/renderer/**/*.{ts,tsx}'],
   theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Geist', 'Inter', 'system-ui', 'sans-serif'],
-      },
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        sidebar: {
-          DEFAULT: 'hsl(var(--sidebar))',
-          border: 'hsl(var(--sidebar-border))',
-          accent: 'hsl(var(--sidebar-accent))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-    },
+  	extend: {
+  		fontFamily: {
+  			sans: [
+  				'Geist',
+  				'Inter',
+  				'system-ui',
+  				'sans-serif'
+  			]
+  		},
+  		colors: {
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			sidebar: {
+  				DEFAULT: 'hsl(var(--sidebar-background))',
+  				border: 'hsl(var(--sidebar-border))',
+  				accent: 'hsl(var(--sidebar-accent))',
+  				foreground: 'hsl(var(--sidebar-foreground))',
+  				primary: 'hsl(var(--sidebar-primary))',
+  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+  				ring: 'hsl(var(--sidebar-ring))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		}
+  	}
   },
   plugins: [],
 };