feat: refactor imports and add new components for improved structure and functionality

its-me-abhishek · its-me-abhishek · commit 7f5535384e9b · 2025-11-27T23:49:25.000+05:30
diff --git a/frontend/src/components/HomeComponents/BottomBar/BottomBar.tsx b/frontend/src/components/HomeComponents/BottomBar/BottomBar.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { NavigationMenu } from '@/components/ui/navigation-menu';
 import { buttonVariants } from '@/components/ui/button';
 import { BottomBarProps } from './bottom-bar-utils';
-import { Icons } from '@/components/icons';
-import { MultiSelectFilter } from '@/components/ui/multiSelect';
+import { Icons } from '@/components/ui/icons';
+import { MultiSelectFilter } from '@/components/ui/multi-select';
 import {
   Popover,
   PopoverTrigger,
diff --git a/frontend/src/components/HomeComponents/BottomBar/__tests__/BottomBar.test.tsx b/frontend/src/components/HomeComponents/BottomBar/__tests__/BottomBar.test.tsx
@@ -4,7 +4,7 @@ import BottomBar from '../BottomBar';
 import { BottomBarProps } from '../bottom-bar-utils';
 
 // Mock the MultiSelectFilter component
-jest.mock('@/components/ui/multiSelect', () => ({
+jest.mock('@/components/ui/multi-select', () => ({
   MultiSelectFilter: jest.fn(({ title, selectedValues }) => (
     <div data-testid={`multiselect-${title.toLowerCase()}`}>
       <span data-testid={`multiselect-title-${title.toLowerCase()}`}>
diff --git a/frontend/src/components/HomeComponents/DevLogs/__tests__/__snapshots__/DevLogs.test.tsx.snap b/frontend/src/components/HomeComponents/DevLogs/__tests__/__snapshots__/DevLogs.test.tsx.snap
@@ -180,6 +180,7 @@ exports[`DevLogs Component using Snapshot renders open dialog with logs correctl
             Refresh
           </button>
           <button
+            disabled=""
             variant="outline"
           >
             Copy All
@@ -190,140 +191,9 @@ exports[`DevLogs Component using Snapshot renders open dialog with logs correctl
         class="flex-1 overflow-y-auto border rounded-md p-4 bg-gray-50 dark:bg-gray-900"
       >
         <div
-          class="space-y-2"
+          class="text-center py-8 text-gray-500"
         >
-          <div
-            class="p-3 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 hover:shadow-sm transition-shadow group"
-          >
-            <div
-              class="flex justify-between items-start gap-2"
-            >
-              <div
-                class="flex-1 font-mono text-sm"
-              >
-                <div
-                  class="flex items-center gap-2 mb-1"
-                >
-                  <span
-                    class="text-gray-500 dark:text-gray-400"
-                  >
-                    Mon, 01 Jan 2024 12:00:00 GMT
-                  </span>
-                  <span
-                    class="font-semibold text-blue-600 dark:text-blue-400"
-                  >
-                    [INFO]
-                  </span>
-                  <span
-                    class="text-purple-600 dark:text-purple-400 text-xs"
-                  >
-                    SYNC_START
-                  </span>
-                </div>
-                <div
-                  class="text-gray-800 dark:text-gray-200 break-words"
-                >
-                  Sync operation started
-                </div>
-                <div
-                  class="text-xs text-gray-500 dark:text-gray-400 mt-1"
-                >
-                  Sync ID: sync-123
-                </div>
-              </div>
-              <button
-                class="opacity-0 group-hover:opacity-100 transition-opacity"
-                variant="ghost"
-              >
-                <div>
-                  CopyIcon
-                </div>
-              </button>
-            </div>
-          </div>
-          <div
-            class="p-3 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 hover:shadow-sm transition-shadow group"
-          >
-            <div
-              class="flex justify-between items-start gap-2"
-            >
-              <div
-                class="flex-1 font-mono text-sm"
-              >
-                <div
-                  class="flex items-center gap-2 mb-1"
-                >
-                  <span
-                    class="text-gray-500 dark:text-gray-400"
-                  >
-                    Mon, 01 Jan 2024 12:01:00 GMT
-                  </span>
-                  <span
-                    class="font-semibold text-yellow-600 dark:text-yellow-400"
-                  >
-                    [WARN]
-                  </span>
-                </div>
-                <div
-                  class="text-gray-800 dark:text-gray-200 break-words"
-                >
-                  Warning message
-                </div>
-              </div>
-              <button
-                class="opacity-0 group-hover:opacity-100 transition-opacity"
-                variant="ghost"
-              >
-                <div>
-                  CopyIcon
-                </div>
-              </button>
-            </div>
-          </div>
-          <div
-            class="p-3 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 hover:shadow-sm transition-shadow group"
-          >
-            <div
-              class="flex justify-between items-start gap-2"
-            >
-              <div
-                class="flex-1 font-mono text-sm"
-              >
-                <div
-                  class="flex items-center gap-2 mb-1"
-                >
-                  <span
-                    class="text-gray-500 dark:text-gray-400"
-                  >
-                    Mon, 01 Jan 2024 12:02:00 GMT
-                  </span>
-                  <span
-                    class="font-semibold text-red-600 dark:text-red-400"
-                  >
-                    [ERROR]
-                  </span>
-                  <span
-                    class="text-purple-600 dark:text-purple-400 text-xs"
-                  >
-                    SYNC_ERROR
-                  </span>
-                </div>
-                <div
-                  class="text-gray-800 dark:text-gray-200 break-words"
-                >
-                  Error occurred
-                </div>
-              </div>
-              <button
-                class="opacity-0 group-hover:opacity-100 transition-opacity"
-                variant="ghost"
-              >
-                <div>
-                  CopyIcon
-                </div>
-              </button>
-            </div>
-          </div>
+          No logs available
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/HomeComponents/FAQ/FAQ.tsx b/frontend/src/components/HomeComponents/FAQ/FAQ.tsx
@@ -1,7 +1,7 @@
 import { Accordion } from '@/components/ui/accordion';
 import { FAQItem } from './FAQItem';
 import { FAQList } from './faq-utils';
-import { BlueHeading } from '@/lib/utils';
+import { BlueHeading } from '@/lib/Utils';
 import { HighlightLink } from '@/components/ui/link-highlight';
 
 export const FAQ = () => {
diff --git a/frontend/src/components/HomeComponents/Navbar/NavbarDesktop.tsx b/frontend/src/components/HomeComponents/Navbar/NavbarDesktop.tsx
@@ -17,7 +17,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
-import { ModeToggle } from '../../utils/theme-mode-toggle';
+import { ModeToggle } from '../../utils/ThemeModeToggle';
 import { buttonVariants } from '@/components/ui/button';
 import {
   routeList,
@@ -35,10 +35,13 @@ import {
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { url } from '@/components/utils/URLs';
-import { exportTasksAsJSON, exportTasksAsTXT } from '@/exports-tasks';
+import {
+  exportTasksAsJSON,
+  exportTasksAsTXT,
+} from '@/components/utils/ExportTasks';
 import { useState } from 'react';
 import { DevLogs } from '../DevLogs/DevLogs';
-import { useTaskAutoSync } from '@/components/utils/Task-AutoSync';
+import { useTaskAutoSync } from '@/components/utils/TaskAutoSync';
 import { Label } from '@/components/ui/label';
 
 export const NavbarDesktop = (
diff --git a/frontend/src/components/HomeComponents/Navbar/NavbarMobile.tsx b/frontend/src/components/HomeComponents/Navbar/NavbarMobile.tsx
@@ -17,7 +17,7 @@ import {
   FileText,
   Terminal,
 } from 'lucide-react';
-import { ModeToggle } from '../../utils/theme-mode-toggle';
+import { ModeToggle } from '../../utils/ThemeModeToggle';
 import { buttonVariants } from '@/components/ui/button';
 import {
   routeList,
@@ -35,9 +35,12 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { exportTasksAsJSON, exportTasksAsTXT } from '@/exports-tasks';
+import {
+  exportTasksAsJSON,
+  exportTasksAsTXT,
+} from '@/components/utils/ExportTasks';
 import { DevLogs } from '../DevLogs/DevLogs';
-import { useTaskAutoSync } from '@/components/utils/Task-AutoSync';
+import { useTaskAutoSync } from '@/components/utils/TaskAutoSync';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { Slider } from '@/components/ui/slider';
diff --git a/frontend/src/components/HomeComponents/Tasks/TaskSkeleton.tsx b/frontend/src/components/HomeComponents/Tasks/TaskSkeleton.tsx
diff --git a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState, useCallback, useRef } from 'react';
 import { Task } from '../../utils/types';
 import { ReportsView } from './ReportsView';
 import Fuse from 'fuse.js';
-import { useHotkeys } from '@/hooks/useHotkeys';
+import { useHotkeys } from '@/components/utils/use-hotkeys';
 import {
   Table,
   TableBody,
@@ -60,7 +60,7 @@ import {
 } from './tasks-utils';
 import Pagination from './Pagination';
 import { url } from '@/components/utils/URLs';
-import { MultiSelectFilter } from '@/components/ui/multiSelect';
+import { MultiSelectFilter } from '@/components/ui/multi-select';
 import BottomBar from '../BottomBar/BottomBar';
 import {
   addTaskToBackend,
@@ -72,7 +72,7 @@ import {
 import { debounce } from '@/components/utils/utils';
 import { DatePicker } from '@/components/ui/date-picker';
 import { format } from 'date-fns';
-import { Taskskeleton } from './Task-Skeleton';
+import { Taskskeleton } from './TaskSkeleton';
 import { Key } from '@/components/ui/key-button';
 
 const db = new TasksDatabase();
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
@@ -39,7 +39,7 @@ jest.mock('../tasks-utils', () => {
   };
 });
 
-jest.mock('@/components/ui/multiSelect', () => ({
+jest.mock('@/components/ui/multi-select', () => ({
   MultiSelectFilter: jest.fn(({ title }) => (
     <div>Mocked MultiSelect: {title}</div>
   )),
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/task-skeleton.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/task-skeleton.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { Taskskeleton } from '../Task-Skeleton';
+import { Taskskeleton } from '../TaskSkeleton';
 
 // Mock des composants UI
 jest.mock('@/components/ui/table', () => ({
diff --git a/frontend/src/components/LandingComponents/FAQ/FAQ.tsx b/frontend/src/components/LandingComponents/FAQ/FAQ.tsx
@@ -1,7 +1,7 @@
 import { Accordion } from '@/components/ui/accordion';
 import { FAQItem } from './FAQItem';
 import { FAQList } from './faq-utils';
-import { BlueHeading } from '@/lib/utils';
+import { BlueHeading } from '@/lib/Utils';
 import { url } from '@/components/utils/URLs';
 import { HighlightLink } from '@/components/ui/link-highlight';
 
diff --git a/frontend/src/components/LandingComponents/Navbar/NavbarDesktop.tsx b/frontend/src/components/LandingComponents/Navbar/NavbarDesktop.tsx
@@ -1,5 +1,5 @@
 import { Button, buttonVariants } from '../../ui/button';
-import { ModeToggle } from '../../utils/theme-mode-toggle';
+import { ModeToggle } from '../../utils/ThemeModeToggle';
 import { routeList } from './navbar-utils';
 import { url } from '@/components/utils/URLs';
 
diff --git a/frontend/src/components/LandingComponents/Navbar/NavbarMobile.tsx b/frontend/src/components/LandingComponents/Navbar/NavbarMobile.tsx
@@ -8,7 +8,7 @@ import {
 } from '@/components/ui/sheet';
 import { Button, buttonVariants } from '../../ui/button';
 import { Menu } from 'lucide-react';
-import { ModeToggle } from '../../utils/theme-mode-toggle';
+import { ModeToggle } from '../../utils/ThemeModeToggle';
 import { routeList } from './navbar-utils';
 import { url } from '@/components/utils/URLs';
 
diff --git a/frontend/src/components/ui/calendar.tsx b/frontend/src/components/ui/calendar.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { DayPicker } from 'react-day-picker';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/Utils';
 import { buttonVariants } from '@/components/ui/button';
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
diff --git a/frontend/src/components/ui/date-picker.tsx b/frontend/src/components/ui/date-picker.tsx
@@ -1,7 +1,7 @@
 import { format } from 'date-fns';
 import { Calendar as CalendarIcon } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/Utils';
 import { Button } from '@/components/ui/button';
 import { Calendar } from '@/components/ui/calendar';
 import {
diff --git a/frontend/src/components/ui/icons.ts b/frontend/src/components/ui/icons.ts
diff --git a/frontend/src/components/ui/multi-select.tsx b/frontend/src/components/ui/multi-select.tsx
diff --git a/frontend/src/components/utils/ExportTasks.tsx b/frontend/src/components/utils/ExportTasks.tsx
@@ -1,4 +1,5 @@
-import { Task } from './components/utils/types';
+import { Task } from './types';
+
 export function exportTasksAsJSON(tasks: Task[]) {
   if (!tasks || tasks.length === 0) {
     console.warn('No tasks to export.');
diff --git a/frontend/src/components/utils/TaskAutoSync.tsx b/frontend/src/components/utils/TaskAutoSync.tsx
diff --git a/frontend/src/components/utils/ThemeModeToggle.tsx b/frontend/src/components/utils/ThemeModeToggle.tsx
@@ -5,7 +5,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { useTheme } from '@/components/utils/theme-provider';
+import { useTheme } from '@/components/utils/ThemeProvider';
 import { Moon, Sun } from 'lucide-react';
 
 export function ModeToggle() {
diff --git a/frontend/src/components/utils/ThemeProvider.tsx b/frontend/src/components/utils/ThemeProvider.tsx
diff --git a/frontend/src/components/utils/__tests__/theme-mode-toggle.test.tsx b/frontend/src/components/utils/__tests__/theme-mode-toggle.test.tsx
@@ -1,9 +1,9 @@
 import { render, screen } from '@testing-library/react';
-import { ModeToggle } from '../theme-mode-toggle';
-import { useTheme } from '@/components/utils/theme-provider';
+import { ModeToggle } from '../ThemeModeToggle';
+import { useTheme } from '@/components/utils/ThemeProvider';
 
 // Mocking the useTheme hook
-jest.mock('@/components/utils/theme-provider');
+jest.mock('@/components/utils/ThemeProvider');
 
 describe('ModeToggle', () => {
   const setThemeMock = jest.fn();
diff --git a/frontend/src/components/utils/__tests__/theme-provider.test.tsx b/frontend/src/components/utils/__tests__/theme-provider.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
-import { ThemeProvider, useTheme } from '../theme-provider';
+import { ThemeProvider, useTheme } from '../ThemeProvider';
 
 describe('ThemeProvider', () => {
   let originalMatchMedia: ((query: string) => MediaQueryList) &
diff --git a/frontend/src/components/utils/use-hotkeys.ts b/frontend/src/components/utils/use-hotkeys.ts
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
-import { ThemeProvider } from '@/components/utils/theme-provider.tsx';
+import { ThemeProvider } from '@/components/utils/ThemeProvider.tsx';
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -21,8 +21,8 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    // "ignoreDeprecations": "6.0",
     "baseUrl": ".",
+    "ignoreDeprecations": "6.0",
     "paths": {
       "@/*": ["./src/*"]
     }
