Big diff, everything uses the import aliases now

* fix some ts issues created in the process
* move context/ to contexts/ for consistency

src/App.tsx

@@ -1,27 +1,27 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import { OnboardingProvider } from './context/OnboardingContext';
+import { OnboardingProvider } from '@/contexts/OnboardingContext';
-import { DataProvider } from './providers/DataProvider';
+import { DataProvider } from '@/providers/DataProvider';
-import { BrowserNGLdoProvider, useNextGraphAuth } from './lib/nextgraph';
+import { BrowserNGLdoProvider, useNextGraphAuth } from '@/lib/nextgraph';
-import type { NextGraphAuth } from './types/nextgraph';
+import type { NextGraphAuth } from '@/types/nextgraph';
-import DashboardLayout from './components/layout/DashboardLayout';
+import DashboardLayout from '@/components/layout/DashboardLayout';
-import SocialContractPage from './pages/SocialContractPage';
+import SocialContractPage from '@/pages/SocialContractPage';
-import GroupJoinPage from './pages/GroupJoinPage';
+import GroupJoinPage from '@/pages/GroupJoinPage';
-import ImportPage from './pages/ImportPage';
+import ImportPage from '@/pages/ImportPage';
-import ContactListPage from './pages/ContactListPage';
+import ContactListPage from '@/pages/ContactListPage';
-import ContactViewPage from './pages/ContactViewPage';
+import ContactViewPage from '@/pages/ContactViewPage';
-import GroupPage from './pages/GroupPage';
+import GroupPage from '@/pages/GroupPage';
-import GroupDetailPage from './pages/GroupDetailPage';
+import GroupDetailPage from '@/pages/GroupDetailPage';
-import GroupInfoPage from './pages/GroupInfoPage';
+import GroupInfoPage from '@/pages/GroupInfoPage';
-import InvitationPage from './pages/InvitationPage';
+import InvitationPage from '@/pages/InvitationPage';
-import OnboardingPage from './pages/OnboardingPage';
+import OnboardingPage from '@/pages/OnboardingPage';
-import FeedPage from './pages/FeedPage';
+import FeedPage from '@/pages/FeedPage';
-import PostsOffersPage from './pages/PostsOffersPage';
+import PostsOffersPage from '@/pages/PostsOffersPage';
-import MessagesPage from './pages/MessagesPage';
+import MessagesPage from '@/pages/MessagesPage';
-import AccountPage from './pages/AccountPage';
+import AccountPage from '@/pages/AccountPage';
-import NotificationsPage from './pages/NotificationsPage';
+import NotificationsPage from '@/pages/NotificationsPage';
-import { createAppTheme } from './theme/theme';
+import { createAppTheme } from '@/theme/theme';
 import { Container } from '@mui/material';
 
 const theme = createAppTheme('light');

src/components/NetworkGraph.tsx

@@ -1,8 +1,8 @@
 import { useState, useEffect, useRef } from 'react';
 import { Box, Typography, Card, CardContent } from '@mui/material';
 import { alpha, useTheme } from '@mui/material/styles';
-import type { Contact } from '../types/contact';
+import type { Contact } from '@/types/contact';
-import { getContactPhotoStyles } from '../utils/photoStyles';
+import { getContactPhotoStyles } from '@/utils/photoStyles';
 
 interface NetworkNode extends Contact {
   x: number;

src/components/account/MyCollectionPage.tsx

@@ -44,7 +44,7 @@ import {
   Send,
   AutoAwesome,
 } from '@mui/icons-material';
-import type { BookmarkedItem, Collection, CollectionFilter, CollectionStats } from '../../types/collection';
+import type { BookmarkedItem, Collection, CollectionFilter, CollectionStats } from '@/types/collection';
 
 interface MyCollectionPageProps {
   // Props would come from parent component

src/components/account/MyHomePage.tsx

@@ -34,7 +34,7 @@ import {
   ShoppingCart,
   PostAdd,
 } from '@mui/icons-material';
-import type { UserContent, ContentFilter, ContentStats, ContentType } from '../../types/userContent';
+import type { UserContent, ContentFilter, ContentStats, ContentType } from '@/types/userContent';
 
 interface MyHomePageProps {
   // Props would come from parent component

src/components/account/PersonhoodCredentials.tsx

@@ -36,7 +36,7 @@ import {
   Close,
 } from '@mui/icons-material';
 import { QRCodeSVG } from 'qrcode.react';
-import type { PersonhoodCredentials } from '../../types/personhood';
+import type { PersonhoodCredentials } from '@/types/personhood';
 
 interface PersonhoodCredentialsProps {
   credentials: PersonhoodCredentials;

src/components/account/RCardManagement.tsx

@@ -30,8 +30,8 @@ import {
   Edit,
   Delete,
 } from '@mui/icons-material';
-import type { RCardWithPrivacy } from '../../types/notification';
+import type { RCardWithPrivacy } from '@/types/notification';
-import { DEFAULT_PRIVACY_SETTINGS } from '../../types/notification';
+import { DEFAULT_PRIVACY_SETTINGS } from '@/types/notification';
 
 interface RCardManagementProps {
   open: boolean;

src/components/account/RCardPrivacySettings.tsx

@@ -21,8 +21,8 @@ import {
   Refresh,
   VpnKey,
 } from '@mui/icons-material';
-import type { RCardWithPrivacy, PrivacyLevel, LocationSharingLevel } from '../../types/notification';
+import type { RCardWithPrivacy, PrivacyLevel, LocationSharingLevel } from '@/types/notification';
-import { DEFAULT_PRIVACY_SETTINGS } from '../../types/notification';
+import { DEFAULT_PRIVACY_SETTINGS } from '@/types/notification';
 
 interface RCardPrivacySettingsProps {
   rCard: RCardWithPrivacy;

src/components/invite/InviteForm.tsx

@@ -15,8 +15,8 @@ import {
   PersonAdd,
   ContactPage,
 } from '@mui/icons-material';
-import { DEFAULT_RCARDS } from '../../types/notification';
+import { DEFAULT_RCARDS } from '@/types/notification';
-import type { Group } from '../../types/group';
+import type { Group } from '@/types/group';
 
 interface InviteFormProps {
   open: boolean;

src/components/layout/DashboardLayout.tsx

@@ -37,9 +37,9 @@ import {
   LocationOn,
   Public,
 } from '@mui/icons-material';
-import BottomNavigation from '../navigation/BottomNavigation';
+import BottomNavigation from '@/components/navigation/BottomNavigation';
-import { notificationService } from '../../services/notificationService';
+import { notificationService } from '@/services/notificationService';
-import type { NotificationSummary } from '../../types/notification';
+import type { NotificationSummary } from '@/types/notification';
 
 const drawerWidth = 280;
 

src/components/notifications/NotificationDropdown.tsx

@@ -15,8 +15,8 @@ import {
   Notifications,
   MarkEmailRead,
 } from '@mui/icons-material';
-import type { Notification, NotificationSummary } from '../../types/notification';
+import type { Notification, NotificationSummary } from '@/types/notification';
-import NotificationItem from './NotificationItem';
+import NotificationItem from '@/components/notifications/NotificationItem';
 
 interface NotificationDropdownProps {
   notifications: Notification[];

src/components/notifications/NotificationItem.tsx

@@ -35,8 +35,8 @@ import {
   LocationOn,
   Public,
 } from '@mui/icons-material';
-import type { Notification } from '../../types/notification';
+import type { Notification } from '@/types/notification';
-import { DEFAULT_RCARDS } from '../../types/notification';
+import { DEFAULT_RCARDS } from '@/types/notification';
 
 interface NotificationItemProps {
   notification: Notification;

src/components/onboarding/BasicInfoStep.tsx

@@ -10,7 +10,7 @@ import {
   InputAdornment
 } from '@mui/material';
 import { Person, Email, Phone, Business, Work, PhotoCamera } from '@mui/icons-material';
-import { useOnboarding } from '../../context/OnboardingContext';
+import { useOnboarding } from '@/contexts/OnboardingContext';
 
 const BasicInfoStep = () => {
   const { state, updateProfile } = useOnboarding();

src/components/onboarding/ConnectAccountsStep.tsx

@@ -27,7 +27,7 @@ import {
   Cloud,
   Security
 } from '@mui/icons-material';
-import { useOnboarding } from '../../context/OnboardingContext';
+import { useOnboarding } from '@/contexts/OnboardingContext';
 
 const ConnectAccountsStep = () => {
   const { state, connectAccount, disconnectAccount } = useOnboarding();

src/components/tour/GroupTour.tsx

@@ -29,7 +29,7 @@ import {
   QuestionAnswer,
   CheckCircle,
 } from '@mui/icons-material';
-import type { Group } from '../../types/group';
+import type { Group } from '@/types/group';
 
 interface GroupTourProps {
   open: boolean;

src/contexts/OnboardingContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useReducer } from 'react';
 import type { ReactNode } from 'react';
-import type { OnboardingState, OnboardingContextType, UserProfile } from '../types/onboarding';
+import type { OnboardingState, OnboardingContextType, UserProfile } from '@/types/onboarding';
 
 const initialState: OnboardingState = {
   currentStep: 0,

src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import App from './App.tsx'
+import App from '@/App.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

src/pages/AccountPage.tsx

@@ -33,14 +33,14 @@ import {
   LocationOn,
   Public,
 } from '@mui/icons-material';
-import { DEFAULT_RCARDS, DEFAULT_PRIVACY_SETTINGS } from '../types/notification';
+import { DEFAULT_RCARDS, DEFAULT_PRIVACY_SETTINGS } from '@/types/notification';
-import type { RCardWithPrivacy } from '../types/notification';
+import type { RCardWithPrivacy } from '@/types/notification';
-import RCardPrivacySettings from '../components/account/RCardPrivacySettings';
+import RCardPrivacySettings from '@/components/account/RCardPrivacySettings';
-import RCardManagement from '../components/account/RCardManagement';
+import RCardManagement from '@/components/account/RCardManagement';
-import MyHomePage from '../components/account/MyHomePage';
+import MyHomePage from '@/components/account/MyHomePage';
-import MyCollectionPage from '../components/account/MyCollectionPage';
+import MyCollectionPage from '@/components/account/MyCollectionPage';
-import PersonhoodCredentialsComponent from '../components/account/PersonhoodCredentials';
+import PersonhoodCredentialsComponent from '@/components/account/PersonhoodCredentials';
-import type { PersonhoodCredentials } from '../types/personhood';
+import type { PersonhoodCredentials } from '@/types/personhood';
 
 interface TabPanelProps {
   children?: React.ReactNode;

src/pages/ContactListPage.tsx

@@ -23,7 +23,7 @@ import {
   ListItemIcon,
   ListItemText
 } from '@mui/material';
-import NetworkGraph from '../components/NetworkGraph';
+import NetworkGraph from '@/components/NetworkGraph';
 import {
   List as ListIcon,
   Hub,
@@ -47,9 +47,9 @@ import {
   People,
   DragIndicator
 } from '@mui/icons-material';
-import { dataService } from '../services/dataService';
+import { dataService } from '@/services/dataService';
-import type { Contact } from '../types/contact';
+import type { Contact } from '@/types/contact';
-import { getContactPhotoStyles } from '../utils/photoStyles';
+import { getContactPhotoStyles } from '@/utils/photoStyles';
 
 const ContactListPage = () => {
   const [contacts, setContacts] = useState<Contact[]>([]);

src/pages/ContactViewPage.tsx

@@ -32,9 +32,9 @@ import {
   CheckCircle,
   PersonOutline
 } from '@mui/icons-material';
-import { dataService } from '../services/dataService';
+import { dataService } from '@/services/dataService';
-import type { Contact } from '../types/contact';
+import type { Contact } from '@/types/contact';
-import type { Group as GroupType } from '../types/group';
+import type { Group as GroupType } from '@/types/group';
 
 const ContactViewPage = () => {
   const { id } = useParams<{ id: string }>();

src/pages/GroupDetailPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
-import { getContactPhotoStyles } from '../utils/photoStyles';
+import { getContactPhotoStyles } from '@/utils/photoStyles';
 import {
   Typography,
   Box,
@@ -43,12 +43,12 @@ import {
   Fullscreen,
   FullscreenExit,
 } from '@mui/icons-material';
-import { dataService } from '../services/dataService';
+import { dataService } from '@/services/dataService';
-import type { Group, GroupPost, GroupLink } from '../types/group';
+import type { Group, GroupPost, GroupLink } from '@/types/group';
-import PostCreateButton from '../components/PostCreateButton';
+import PostCreateButton from '@/components/PostCreateButton';
-import GroupTour from '../components/tour/GroupTour';
+import GroupTour from '@/components/tour/GroupTour';
-import AIResponseRatingComponent, { type AIResponseRating } from '../components/ai/AIResponseRating';
+import AIResponseRatingComponent, { type AIResponseRating } from '@/components/ai/AIResponseRating';
-import InviteForm, { type InviteFormData } from '../components/invite/InviteForm';
+import InviteForm, { type InviteFormData } from '@/components/invite/InviteForm';
 
 // Keyframes for pulse animation
 const pulse = keyframes`

src/pages/GroupInfoPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
-import { getContactPhotoStyles } from '../utils/photoStyles';
+import { getContactPhotoStyles } from '@/utils/photoStyles';
 import {
   Typography,
   Box,
@@ -23,9 +23,9 @@ import {
   Public,
   Lock,
 } from '@mui/icons-material';
-import { dataService } from '../services/dataService';
+import { dataService } from '@/services/dataService';
-import type { Group } from '../types/group';
+import type { Group } from '@/types/group';
-import InviteForm, { type InviteFormData } from '../components/invite/InviteForm';
+import InviteForm, { type InviteFormData } from '@/components/invite/InviteForm';
 
 // Real NAO member data
 const getMockMembers = () => [

src/pages/GroupJoinPage.tsx

@@ -27,9 +27,9 @@ import {
   Public,
   Settings
 } from '@mui/icons-material';
-import { dataService } from '../services/dataService';
+import { dataService } from '@/services/dataService';
-import { DEFAULT_RCARDS } from '../types/notification';
+import { DEFAULT_RCARDS } from '@/types/notification';
-import type { Group } from '../types/group';
+import type { Group } from '@/types/group';
 
 const GroupJoinPage = () => {
   const [group, setGroup] = useState<Group | null>(null);

src/pages/GroupPage.tsx

@@ -23,8 +23,8 @@ import {
   Lock,
   People
 } from '@mui/icons-material';
-import { dataService } from '../services/dataService';
+import { dataService } from '@/services/dataService';
-import type { Group as GroupType } from '../types/group';
+import type { Group as GroupType } from '@/types/group';
 
 const GroupPage = () => {
   const [groups, setGroups] = useState<GroupType[]>([]);

src/pages/ImportPage.tsx

@@ -16,8 +16,8 @@ import {
   Alert,
 } from '@mui/material';
 import { LinkedIn, Contacts, CloudDownload, MailOutline } from '@mui/icons-material';
-import { dataService } from '../services/dataService';
+import { dataService } from '@/services/dataService';
-import type { ImportSource } from '../types/contact';
+import type { ImportSource } from '@/types/contact';
 
 const ImportPage = () => {
   const [importSources, setImportSources] = useState<ImportSource[]>([]);

src/pages/InvitationPage.tsx

@@ -28,9 +28,9 @@ import {
   Groups
 } from '@mui/icons-material';
 import { QRCodeSVG } from 'qrcode.react';
-import { dataService } from '../services/dataService';
+import { dataService } from '@/services/dataService';
-import type { Group } from '../types/group';
+import type { Group } from '@/types/group';
-import type { Contact } from '../types/contact';
+import type { Contact } from '@/types/contact';
 
 const InvitationPage = () => {
   const [invitationUrl, setInvitationUrl] = useState('');

src/pages/NotificationsPage.tsx

@@ -22,8 +22,8 @@ import {
   Close,
   MarkEmailRead
 } from '@mui/icons-material';
-import { notificationService } from '../services/notificationService';
+import { notificationService } from '@/services/notificationService';
-import type { Notification, NotificationSummary } from '../types/notification';
+import type { Notification, NotificationSummary } from '@/types/notification';
 
 const NotificationsPage = () => {
   const theme = useTheme();

src/pages/OnboardingPage.tsx

@@ -11,11 +11,11 @@ import {
   LinearProgress
 } from '@mui/material';
 import { ArrowBack, ArrowForward } from '@mui/icons-material';
-import { useOnboarding } from '../context/OnboardingContext';
+import { useOnboarding } from '@/contexts/OnboardingContext';
-import BasicInfoStep from '../components/onboarding/BasicInfoStep';
+import BasicInfoStep from '@/components/onboarding/BasicInfoStep';
-import ConnectAccountsStep from '../components/onboarding/ConnectAccountsStep';
+import ConnectAccountsStep from '@/components/onboarding/ConnectAccountsStep';
-import { dataService } from '../services/dataService';
+import { dataService } from '@/services/dataService';
-import type { Group } from '../types/group';
+import type { Group } from '@/types/group';
 
 const OnboardingPage = () => {
   const { state, nextStep, prevStep, completeOnboarding } = useOnboarding();

src/pages/SocialContractPage.tsx

@@ -28,8 +28,8 @@ import {
   Close,
   CheckCircle
 } from '@mui/icons-material';
-import { dataService } from '../services/dataService';
+import { dataService } from '@/services/dataService';
-import type { Group } from '../types/group';
+import type { Group } from '@/types/group';
 
 const SocialContractPage = () => {
   const [group, setGroup] = useState<Group | null>(null);

src/services/dataService.ts

@@ -1,5 +1,5 @@
-import type { Contact, ImportSource } from '../types/contact';
+import type { Contact, ImportSource } from '@/types/contact';
-import type { Group } from '../types/group';
+import type { Group } from '@/types/group';
 
 export const dataService = {
   async getContacts(): Promise<Contact[]> {

src/services/notificationService.ts

@@ -3,7 +3,7 @@ import type {
   NotificationSummary, 
   Vouch, 
   Praise
-} from '../types/notification';
+} from '@/types/notification';
 
 // Mock data for development
 const mockNotifications: Notification[] = [

tsconfig.app.json

@@ -1,42 +1,44 @@
 {
-  "compilerOptions": {
+	"compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
+		"target": "ES2022",
-    "useDefineForClassFields": true,
+		"useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
+		"module": "ESNext",
-    "skipLibCheck": true,
+		"skipLibCheck": true,
 
-    /* Bundler mode */
+		/* Bundler mode */
-    "moduleResolution": "bundler",
+		"moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
+		"allowImportingTsExtensions": true,
-    "moduleDetection": "force",
+		"moduleDetection": "force",
-    "noEmit": true,
+		"noEmit": true,
-    "jsx": "react-jsx",
+		"jsx": "react-jsx",
 
-    /* Path aliases */
+		/* Path aliases */
-    "baseUrl": ".",
+		"baseUrl": ".",
-    "paths": {
+		"paths": {
-      "@/*": ["src/*"],
+			"@/*": ["src/*"],
-      "@/assets/*": ["src/assets/*"],
+			"@/assets/*": ["src/assets/*"],
-      "@/components/*": ["src/components/*"],
+			"@/components/*": ["src/components/*"],
-      "@/context/*": ["src/context/*"],
+			"@/contexts/*": ["src/contexts/*"],
-      "@/hooks/*": ["src/hooks/*"], 
+			"@/hooks/*": ["src/hooks/*"],
-      "@/lib/*": ["src/lib/*"],
+			"@/lib/*": ["src/lib/*"],
-      "@/providers/*": ["src/providers/*"],
+			"@/pages/*": ["src/pages/*"],
-      "@/services/*": ["src/services/*"],
+			"@/providers/*": ["src/providers/*"],
-      "@/stores/*": ["src/stores/*"],
+			"@/services/*": ["src/services/*"],
-      "@/types/*": ["src/types/*"],
+			"@/stores/*": ["src/stores/*"],
-    },
+			"@/types/*": ["src/types/*"],
+			"@/utils/*": ["src/utils/*"]
+		},
 
-    /* Linting */
+		/* Linting */
-    "strict": true,
+		"strict": true,
-    "noUnusedLocals": true,
+		"noUnusedLocals": true,
-    "noUnusedParameters": true,
+		"noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
+		"erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
+		"noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
+		"noUncheckedSideEffectImports": true,
-    "resolveJsonModule": true
+		"resolveJsonModule": true
-  },
+	},
-  "include": ["src", "data"]
+	"include": ["src", "data"]
 }

vite.config.ts

@@ -10,13 +10,15 @@ export default defineConfig({
       "@": resolve(__dirname, "src"),
       "@/assets": resolve(__dirname, "src/assets"),
       "@/components": resolve(__dirname, "src/components"),
-      "@/context": resolve(__dirname, "src/context"),
+      "@/contexts": resolve(__dirname, "src/contexts"),
       "@/hooks": resolve(__dirname, "src/hooks"),
       "@/lib": resolve(__dirname, "src/lib"),
+      "@/pages": resolve(__dirname, "src/pages"),
       "@/providers": resolve(__dirname, "src/providers"),
       "@/services": resolve(__dirname, "src/services"),
       "@/stores": resolve(__dirname, "src/stores"),
       "@/types": resolve(__dirname, "src/types"),
+      "@/utils": resolve(__dirname, "src/utils"),
     },
   },
   assetsInclude: ['**/*.json'],