chore: reorganize folder structure for better code organization

AlexVOiceover · claude · AlexVOiceover · commit 8296302c2431 · 2025-04-02T12:33:55.000+01:00
- Create feature-specific folder structure for help, auth, questions, statements, and wizard - Move UI component files to their corresponding feature folders - Create index.ts barrel files for cleaner imports - Update import paths in affected files - Fix TypeScript interface definitions in Dropdown component - Ensure proper file organization following feature-based architecture 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,21 +4,20 @@ import React, { useEffect } from 'react';
 import { TooltipProvider } from './components/ui/BetterTooltip';
 
 // Providers
-import { AuthProvider } from './features/auth/AuthProvider';
+import { AuthProvider } from './features/auth/context/AuthProvider';
 import { EntriesProvider } from './features/statements/context/EntriesProvider';
-import { QuestionsProvider } from './providers/QuestionsProvider';
-import { HelpProvider } from './components/ui/helpCenter';
+import { QuestionsProvider } from './features/questions/context/QuestionsProvider';
+import { HelpProvider } from './features/help';
 
 // Components
 import LoginPage from './features/auth/components/LoginPage';
-import Header from './layouts/components/Header';
-import MainPage from './layouts/components/MainPage';
+import { Header, MainPage } from './components/layout';
 import MockNotification from './features/auth/components/MockNotification';
 
 // Hooks and Utilities
 import { useEntries } from './features/statements/hooks/useEntries';
 import { useAuth } from './features/auth/api/hooks';
-import { handleMagicLinkVerification } from './features/auth/authUtils';
+import { handleMagicLinkVerification } from './features/auth/utils/authUtils';
 
 // Outer Component: Responsible only for setting up the environment (the providers) for the rest of the app.
 const AppContent: React.FC = () => {
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -1,9 +1,9 @@
-// src/components/Header.tsx
+// src/components/layout/Header.tsx
 import React, { useState } from 'react';
-import { useEntries } from '../../features/statements/hooks/useEntries';
-import SmallCircularQuestionCounter from '../../components/ui/questionCounter/SmallCircularQuestionCounter';
-import UserDataModal from '../../components/modals/UserDataModal';
-// import { Tooltip, TooltipTrigger, TooltipContent } from '../../components/ui/better-tooltip';
+import { useEntries } from '@/features/statements';
+import { SmallCircularQuestionCounter } from '@/components/ui';
+import { UserDataModal } from '@/components/modals';
+// import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui';
 
 const Header: React.FC = () => {
   const { data } = useEntries();
diff --git a/src/components/layout/MainPage.tsx b/src/components/layout/MainPage.tsx
@@ -5,14 +5,14 @@ import {
   Tooltip,
   TooltipTrigger,
   TooltipContent,
-} from '../../components/ui/BetterTooltip';
-import StatementList from '../../features/statements/components/StatementList';
-import { useEntries } from '../../features/statements/hooks/useEntries';
-import { Button } from '../../components/ui/Button';
+  Button
+} from '@/components/ui';
+import { StatementList } from '@/features/statements/components';
+import { useEntries } from '@/features/statements';
 import { Mail } from 'lucide-react';
-import StatementWizard from '../../features/wizard/components/StatementWizard';
-import ShareEmailModal from '../../components/modals/ShareEmailModal';
-// import TestStatementButton from '../../components/debug/TestButton';
+import { StatementWizard } from '@/features/wizard';
+import { ShareEmailModal } from '@/components/modals';
+// import TestStatementButton from '@/components/debug/TestButton';
 import Footer from './Footer';
 
 const MainPage: React.FC = () => {
diff --git a/src/components/layout/index.ts b/src/components/layout/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Layout Components Module
+ * 
+ * Provides the main structural components for page layout,
+ * including the overall app container, header, and footer.
+ */
+
+export { default as Header } from './Header';
+export { default as Footer } from './Footer';
+export { default as MainPage } from './MainPage';
diff --git a/src/components/modals/index.ts b/src/components/modals/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Modal Components Module
+ * 
+ * Provides reusable modal dialog components for various purposes
+ * throughout the application.
+ */
+
+export { default as GratitudeModal } from './GratitudeModal';
+export { default as PrivacyModal } from './PrivacyModal';
+export { default as ShareEmailModal } from './ShareEmailModal';
+export { default as TermsModal } from './TermsModal';
+export { default as UserDataModal } from './UserDataModal';
diff --git a/src/components/ui/Dropdown.tsx b/src/components/ui/Dropdown.tsx
@@ -16,12 +16,15 @@ interface SimpleDropdownMenuContentProps extends React.HTMLAttributes<HTMLDivEle
   children: React.ReactNode;
   className?: string;
   sideOffset?: number;
+  align?: string;
 }
 
 interface SimpleDropdownMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   className?: string;
   onClick?: (e: React.MouseEvent) => void;
+  disabled?: boolean;
+  title?: string;
 }
 
 interface SimpleDropdownMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
@@ -0,0 +1,44 @@
+/**
+ * UI Components Module
+ * 
+ * Provides reusable UI components that can be used across the application.
+ * These components are the building blocks for more complex components.
+ */
+
+// Export individual UI components
+export { Button } from './Button';
+export { Input } from './Input';
+export { Slot } from './Slot';
+export { ConfirmationDialog } from './ConfirmationDialog';
+
+// Export dialog components
+export {
+  SimpleDialog,
+  SimpleDialogContent,
+  SimpleDialogTitle,
+  SimpleDialogDescription,
+  SimpleDialogFooter,
+  SimpleDialogHeader
+} from './Dialog';
+
+// Export dropdown components
+export {
+  SimpleDropdownMenu,
+  SimpleDropdownMenuTrigger,
+  SimpleDropdownMenuContent,
+  SimpleDropdownMenuItem,
+  SimpleDropdownMenuSeparator
+} from './Dropdown';
+
+// Export tooltip components
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider
+} from './BetterTooltip';
+
+// Export question counter components
+export { default as QuestionCounter } from './questionCounter/QuestionCounter';
+export { default as LargeCircularQuestionCounter } from './questionCounter/LargeCircularQuestionCounter';
+export { default as SmallCircularQuestionCounter } from './questionCounter/SmallCircularQuestionCounter';
diff --git a/src/features/auth/api/hooks/useAuth.ts b/src/features/auth/api/hooks/useAuth.ts
@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { AuthContext } from '../../AuthContext';
+import { AuthContext } from '../../context/AuthContext';
 
 export const useAuth = () => {
   const context = useContext(AuthContext);
diff --git a/src/features/auth/components/LoginPage.tsx b/src/features/auth/components/LoginPage.tsx
@@ -6,7 +6,7 @@ import { useEntries } from '../../statements/hooks/useEntries';
 import MagicLinkForm from './MagicLinkForm';
 import { Input } from '../../../components/ui/input';
 import { Button } from '../../../components/ui/button';
-import { handleMagicLinkVerification } from '../authUtils';
+import { handleMagicLinkVerification } from '../utils/authUtils';
 import { Loader2 } from 'lucide-react';
 import PrivacyModal from '../../../components/modals/PrivacyModal';
 import TermsModal from '../../../components/modals/TermsModal';
diff --git a/src/features/auth/context/AuthContext.ts b/src/features/auth/context/AuthContext.ts
@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { AuthState } from './api/authApi';
+import { AuthState } from '../api/authApi';
 
 // Initial auth state
 export const initialAuthState: AuthState = {
diff --git a/src/features/auth/context/AuthProvider.tsx b/src/features/auth/context/AuthProvider.tsx
@@ -5,7 +5,7 @@ import {
   requestMagicLink as apiRequestMagicLink, 
   signOut as apiSignOut,
   updateUserProfile 
-} from './api/authApi';
+} from '../api/authApi';
 
 type AuthAction =
   | { type: 'AUTH_LOADING' }
diff --git a/src/features/auth/index.ts b/src/features/auth/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Auth Feature Module
+ * 
+ * Centralizes authentication-related functionality including
+ * context, providers, components, and utilities.
+ */
+
+// Re-export context and provider
+export { AuthContext } from './context/AuthContext';
+export { AuthProvider } from './context/AuthProvider';
+
+// Re-export hooks
+export { useAuth } from './api/hooks';
+
+// Re-export utilities
+export { handleMagicLinkVerification } from './utils/authUtils';
+
+// Re-export components as needed
+export { default as LoginPage } from './components/LoginPage';
+export { default as MagicLinkForm } from './components/MagicLinkForm';
diff --git a/src/features/auth/utils/authUtils.ts b/src/features/auth/utils/authUtils.ts
@@ -1,4 +1,4 @@
-import { verifyMagicLink } from './api/authApi';
+import { verifyMagicLink } from '../api/authApi';
 
 /**
  * Extract and verify magic link token from URL
diff --git a/src/features/help/components/HelpButton.tsx b/src/features/help/components/HelpButton.tsx
diff --git a/src/features/help/components/HelpCenter.tsx b/src/features/help/components/HelpCenter.tsx
@@ -313,4 +313,4 @@ const HelpCenter: React.FC<HelpCenterProps> = ({
   );
 };
 
-export default HelpCenter;
+export default HelpCenter;
diff --git a/src/features/help/components/WelcomePanel.tsx b/src/features/help/components/WelcomePanel.tsx
diff --git a/src/features/help/components/index.ts b/src/features/help/components/index.ts
@@ -0,0 +1,3 @@
+export { default as HelpButton } from './HelpButton';
+export { default as HelpCenter } from './HelpCenter';
+export { default as WelcomePanel } from './WelcomePanel';
diff --git a/src/features/help/context/HelpContext.ts b/src/features/help/context/HelpContext.ts
diff --git a/src/features/help/context/HelpProvider.tsx b/src/features/help/context/HelpProvider.tsx
@@ -2,9 +2,9 @@
 
 import React, { useState, useEffect } from 'react';
 import { HelpContext } from './HelpContext';
-import WelcomePanel from './WelcomePanel';
-import HelpButton from './HelpButton';
-import HelpCenter from './HelpCenter';
+import WelcomePanel from '../components/WelcomePanel';
+import HelpButton from '../components/HelpButton';
+import HelpCenter from '../components/HelpCenter';
 
 interface HelpProviderProps {
   children: React.ReactNode;
@@ -78,6 +78,4 @@ export const HelpProvider: React.FC<HelpProviderProps> = ({ children }) => {
       )}
     </HelpContext.Provider>
   );
-};
-
-export default HelpProvider;
+};
diff --git a/src/features/help/hooks/index.ts b/src/features/help/hooks/index.ts
diff --git a/src/features/help/hooks/useHelp.ts b/src/features/help/hooks/useHelp.ts
@@ -1,7 +1,7 @@
 'use client';
 
 import { useContext } from 'react';
-import { HelpContext } from '../HelpContext';
+import { HelpContext } from '../context/HelpContext';
 
 export const useHelp = () => {
   const context = useContext(HelpContext);
diff --git a/src/features/help/index.ts b/src/features/help/index.ts
@@ -6,11 +6,9 @@
  * without requiring consumers to know the internal file structure.
  * 
  * Usage:
- * import { HelpProvider, HelpButton, useHelp } from '@/components/ui/helpCenter';
+ * import { HelpProvider, HelpButton, useHelp } from '@/features/help';
  */
 
-export { default as HelpProvider } from './HelpProvider';
+export { HelpProvider } from './context/HelpProvider';
 export { useHelp } from './hooks';
-export { default as HelpButton } from './HelpButton';
-export { default as HelpCenter } from './HelpCenter';
-export { default as WelcomePanel } from './WelcomePanel';
+export { HelpButton, HelpCenter, WelcomePanel } from './components';
diff --git a/src/features/questions/context/QuestionsContext.ts b/src/features/questions/context/QuestionsContext.ts
diff --git a/src/features/questions/context/QuestionsProvider.tsx b/src/features/questions/context/QuestionsProvider.tsx
diff --git a/src/features/questions/hooks/useQuestions.ts b/src/features/questions/hooks/useQuestions.ts
@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { QuestionsContext } from '../../../providers/QuestionsContext';
+import { QuestionsContext } from '../context/QuestionsContext';
 
 export function useQuestions() {
   const context = useContext(QuestionsContext);
diff --git a/src/features/questions/index.ts b/src/features/questions/index.ts
@@ -0,0 +1,14 @@
+/**
+ * Questions Feature Module
+ * 
+ * Centralizes questions-related functionality including context,
+ * providers, hooks, and components.
+ */
+
+// Re-export context and provider
+export { QuestionsContext } from './context/QuestionsContext';
+export { QuestionsProvider } from './context/QuestionsProvider';
+
+// Re-export hooks
+export { useQuestions } from './hooks/useQuestions';
+export { useAnsweredCount } from './hooks/useAnsweredCount';
diff --git a/src/features/statements/components/index.ts b/src/features/statements/components/index.ts
@@ -0,0 +1,7 @@
+// Barrel file for statements components
+export { default as ActionForm } from './ActionForm';
+export { default as ActionLine } from './ActionLine';
+export { default as ActionsCounter } from './ActionsCounter';
+export { default as QuestionCard } from './QuestionCard';
+export { default as StatementItem } from './StatementItem';
+export { default as StatementList } from './StatementList';
diff --git a/src/features/statements/index.ts b/src/features/statements/index.ts
@@ -0,0 +1,3 @@
+// Barrel file for statements feature exports
+export { useEntries } from './hooks/useEntries';
+export { EntriesProvider } from './context/EntriesProvider';
diff --git a/src/features/wizard/components/index.ts b/src/features/wizard/components/index.ts
@@ -0,0 +1,10 @@
+// Barrel file for wizard components
+export { default as StatementWizard } from './StatementWizard';
+export { default as StatementPreview } from './StatementPreview';
+export { EditStatementModal } from './EditStatementModal';
+export { default as FilterBar } from './FilterBar';
+export { default as SentimentVerbPicker } from './SentimentVerbPicker';
+export { default as StepContainer } from './StepContainer';
+export { default as SubjectTiles } from './SubjectTiles';
+export { default as VerbGrid } from './VerbGrid';
+export { default as VerbSelector } from './VerbSelector';
diff --git a/src/features/wizard/components/steps/index.ts b/src/features/wizard/components/steps/index.ts
@@ -0,0 +1,7 @@
+// Barrel file for wizard step components
+export { CategoryStep } from './CategoryStep';
+export { ComplementStep } from './ComplementStep';
+export { ObjectStep } from './ObjectStep';
+export { PrivacyStep } from './PrivacyStep';
+export { SubjectStep } from './SubjectStep';
+export { VerbStep } from './VerbStep';
diff --git a/src/features/wizard/index.ts b/src/features/wizard/index.ts
@@ -0,0 +1,2 @@
+// Barrel file for wizard feature exports
+export { default as StatementWizard } from './components/StatementWizard';

Original file line number	Diff line number	Diff line change
`@@ -16,12 +16,15 @@ interface SimpleDropdownMenuContentProps extends React.HTMLAttributes<HTMLDivEle`
`16`	`16`	`children: React.ReactNode;`
`17`	`17`	`className?: string;`
`18`	`18`	`sideOffset?: number;`
	`19`	`+ align?: string;`
`19`	`20`	`}`
`20`	`21`
`21`	`22`	`interface SimpleDropdownMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {`
`22`	`23`	`children: React.ReactNode;`
`23`	`24`	`className?: string;`
`24`	`25`	`onClick?: (e: React.MouseEvent) => void;`
	`26`	`+ disabled?: boolean;`
	`27`	`+ title?: string;`
`25`	`28`	`}`
`26`	`29`
`27`	`30`	`interface SimpleDropdownMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {`