XAmple-Development · X-AmpleDevelopment · Aug 27, 2025
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-explicit-any': 'warn',
+  },
+}
diff --git a/dist/assets/index-RpkfYM5z.js → dist/assets/index-D3cSeV7q.js b/dist/assets/index-RpkfYM5z.js → dist/assets/index-D3cSeV7q.js
diff --git a/dist/index.html b/dist/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CrestChat - Discord Clone</title>
-    <script type="module" crossorigin src="/assets/index-RpkfYM5z.js"></script>
+    <script type="module" crossorigin src="/assets/index-D3cSeV7q.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-Bv16ervk.css">
   </head>
   <body>

diff --git a/src/components/ChatArea.tsx b/src/components/ChatArea.tsx
@@ -1,11 +1,11 @@
 import { useState, useRef, useEffect } from 'react'
 import { useMessages } from '../hooks/useMessages'
-import { Channel } from '../integrations/supabase/types'
+import { Channel, Server, Message } from '../integrations/supabase/types'
 import { toast } from 'sonner'
 
 interface ChatAreaProps {
   channel: Channel
-  server?: any
+  server?: Server
   onServerUpdate: () => void
   onChannelUpdate: () => void
   onOpenServerSettings?: () => void
@@ -90,7 +90,7 @@ export default function ChatArea({ channel, server, onOpenServerSettings }: Chat
     }
   }
 
-  const startEditing = (message: any) => {
+  const startEditing = (message: Message) => {
     setEditingMessageId(message.id)
     setEditContent(message.content)
   }

diff --git a/src/components/OnlineUsers.tsx b/src/components/OnlineUsers.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { supabase } from '../integrations/supabase/client'
 import { Server } from '../integrations/supabase/types'
 
@@ -18,13 +18,7 @@ export default function OnlineUsers({ server }: OnlineUsersProps) {
   const [onlineUsers, setOnlineUsers] = useState<OnlineUser[]>([])
   const [loading, setLoading] = useState(false)
 
-  useEffect(() => {
-    if (server) {
-      loadOnlineUsers()
-    }
-  }, [server])
-
-  const loadOnlineUsers = async () => {
+  const loadOnlineUsers = useCallback(async () => {
     if (!server) return
     setLoading(true)
     try {
@@ -46,8 +40,9 @@ export default function OnlineUsers({ server }: OnlineUsersProps) {
 
       const users = data
         ?.map(item => item.user)
-        .filter((user: any) => user && user.status !== 'offline')
-        .sort((a: any, b: any) => {
+        .flat()
+        .filter((user) => user && user.status !== 'offline')
+        .sort((a, b) => {
           // Sort by status priority: online > idle > dnd > invisible
           const statusOrder = { online: 0, idle: 1, dnd: 2, invisible: 3 }
           return statusOrder[a.status as keyof typeof statusOrder] - statusOrder[b.status as keyof typeof statusOrder]
@@ -59,7 +54,13 @@ export default function OnlineUsers({ server }: OnlineUsersProps) {
     } finally {
       setLoading(false)
     }
-  }
+  }, [server])
+
+  useEffect(() => {
+    if (server) {
+      loadOnlineUsers()
+    }
+  }, [server, loadOnlineUsers])
 
   const getStatusColor = (status: string) => {
     switch (status) {

diff --git a/src/components/ServerSettingsModal.tsx b/src/components/ServerSettingsModal.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { supabase } from '../integrations/supabase/client'
-import { Server, Channel } from '../integrations/supabase/types'
+import { Server, Channel, ServerMember } from '../integrations/supabase/types'
 import { toast } from 'sonner'
 
 interface ServerSettingsModalProps {
@@ -21,7 +21,7 @@ export default function ServerSettingsModal({
   const [activeTab, setActiveTab] = useState('overview')
   const [loading, setLoading] = useState(false)
   const [channels, setChannels] = useState<Channel[]>([])
-  const [members, setMembers] = useState<any[]>([])
+  const [members, setMembers] = useState<ServerMember[]>([])
   const [loadingMembers, setLoadingMembers] = useState(false)
   const [serverForm, setServerForm] = useState({
     name: '',
@@ -30,19 +30,7 @@ export default function ServerSettingsModal({
   })
   const [newChannelName, setNewChannelName] = useState('')
 
-  useEffect(() => {
-    if (server && isOpen) {
-      setServerForm({
-        name: server.name,
-        description: server.description || '',
-        privacyLevel: server.privacy_level
-      })
-      loadChannels()
-      loadMembers()
-    }
-  }, [server, isOpen])
-
-  const loadChannels = async () => {
+  const loadChannels = useCallback(async () => {
     if (!server) return
     try {
       const { data, error } = await supabase
@@ -57,9 +45,9 @@ export default function ServerSettingsModal({
       console.error('Error loading channels:', error)
       toast.error('Failed to load channels')
     }
-  }
+  }, [server])
 
-  const loadMembers = async () => {
+  const loadMembers = useCallback(async () => {
     if (!server) return
     setLoadingMembers(true)
     try {
@@ -85,14 +73,34 @@ export default function ServerSettingsModal({
       }
 
       console.log('Members loaded successfully:', data)
-      setMembers(data || [])
+      const formattedMembers: ServerMember[] = (data || []).map((item: any) => ({
+        id: item.user_id,
+        server_id: server.id,
+        user_id: item.user_id,
+        role: 'member',
+        joined_at: new Date().toISOString(),
+        user: Array.isArray(item.user) ? item.user[0] : item.user
+      }))
+      setMembers(formattedMembers)
     } catch (error) {
       console.error('Error loading members:', error)
       toast.error('Failed to load members')
     } finally {
       setLoadingMembers(false)
     }
-  }
+  }, [server])
+
+  useEffect(() => {
+    if (server && isOpen) {
+      setServerForm({
+        name: server.name,
+        description: server.description || '',
+        privacyLevel: server.privacy_level
+      })
+      loadChannels()
+      loadMembers()
+    }
+  }, [server, isOpen, loadChannels, loadMembers])
 
   const handleSaveServer = async () => {
     if (!server) return
@@ -110,8 +118,8 @@ export default function ServerSettingsModal({
       if (error) throw error
       toast.success('Server updated successfully!')
       onServerUpdate()
-    } catch (error: any) {
-      toast.error(`Failed to update server: ${error.message}`)
+    } catch (error) {
+      toast.error(`Failed to update server: ${error instanceof Error ? error.message : 'Unknown error'}`)
     } finally {
       setLoading(false)
     }
@@ -133,8 +141,8 @@ export default function ServerSettingsModal({
       setNewChannelName('')
       loadChannels()
       onChannelUpdate()
-    } catch (error: any) {
-      toast.error(`Failed to create channel: ${error.message}`)
+    } catch (error) {
+      toast.error(`Failed to create channel: ${error instanceof Error ? error.message : 'Unknown error'}`)
     }
   }
 
@@ -150,8 +158,8 @@ export default function ServerSettingsModal({
       toast.success('Channel deleted successfully!')
       loadChannels()
       onChannelUpdate()
-    } catch (error: any) {
-      toast.error(`Failed to delete channel: ${error.message}`)
+    } catch (error) {
+      toast.error(`Failed to delete channel: ${error instanceof Error ? error.message : 'Unknown error'}`)
     }
   }
 
@@ -167,8 +175,8 @@ export default function ServerSettingsModal({
       if (error) throw error
       toast.success('Member removed successfully!')
       loadMembers()
-    } catch (error: any) {
-      toast.error(`Failed to remove member: ${error.message}`)
+    } catch (error) {
+      toast.error(`Failed to remove member: ${error instanceof Error ? error.message : 'Unknown error'}`)
     }
   }
 

diff --git a/src/components/ServerSidebar.tsx b/src/components/ServerSidebar.tsx
@@ -3,13 +3,23 @@ import { Server, Channel } from '../integrations/supabase/types'
 import { supabase } from '../integrations/supabase/client'
 import { toast } from 'sonner'
 
+interface AuthUser {
+  id: string
+  email: string
+  username: string
+  display_name: string
+  avatar_url?: string
+  status: string
+  created_at: string
+}
+
 interface ServerSidebarProps {
   servers: Server[]
   currentServer: Server | null
   currentChannel: Channel | null
   onServerSelect: (server: Server) => void
   onChannelSelect: (channel: Channel) => void
-  user: any
+  user: AuthUser
 }
 
 export default function ServerSidebar({
@@ -100,9 +110,9 @@ export default function ServerSidebar({
 
       // Refresh the page to show new server
       window.location.reload()
-    } catch (error: any) {
+    } catch (error) {
       console.error('Full error:', error)
-      toast.error(`Failed to create server: ${error.message}`)
+      toast.error(`Failed to create server: ${error instanceof Error ? error.message : 'Unknown error'}`)
     } finally {
       setLoading(false)
     }
@@ -132,8 +142,8 @@ export default function ServerSidebar({
 
       // Refresh the page to show new channel
       window.location.reload()
-    } catch (error: any) {
-      toast.error(`Failed to create channel: ${error.message}`)
+    } catch (error) {
+      toast.error(`Failed to create channel: ${error instanceof Error ? error.message : 'Unknown error'}`)
     } finally {
       setLoading(false)
     }
@@ -159,8 +169,8 @@ export default function ServerSidebar({
 
       // Refresh the page to show new server
       window.location.reload()
-    } catch (error: any) {
-      toast.error(`Failed to join server: ${error.message}`)
+    } catch (error) {
+      toast.error(`Failed to join server: ${error instanceof Error ? error.message : 'Unknown error'}`)
     } finally {
       setLoading(false)
     }
@@ -181,7 +191,7 @@ export default function ServerSidebar({
       <div className="flex-1 overflow-y-auto p-4 space-y-2">
         {/* Home Button */}
         <button
-          onClick={() => onServerSelect(null as any)}
+          onClick={() => onServerSelect(null as unknown as Server)}
           className={`w-full p-3 rounded-lg transition-colors ${
             !currentServer 
               ? 'bg-discord-primary text-white' 

diff --git a/src/components/UserArea.tsx b/src/components/UserArea.tsx
@@ -1,11 +1,12 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useAuth } from '../hooks/useAuth'
 import OnlineUsers from './OnlineUsers'
 import { supabase } from '../integrations/supabase/client'
 import { toast } from 'sonner'
+import { Server } from '../integrations/supabase/types'
 
 interface UserAreaProps {
-  server?: any
+  server?: Server
 }
 
 interface UserSettings {
@@ -30,13 +31,7 @@ export default function UserArea({ server }: UserAreaProps) {
   })
   const [loading, setLoading] = useState(false)
 
-  useEffect(() => {
-    if (user) {
-      loadUserSettings()
-    }
-  }, [user])
-
-  const loadUserSettings = async () => {
+  const loadUserSettings = useCallback(async () => {
     if (!user) return
     try {
       const { data, error } = await supabase
@@ -73,7 +68,13 @@ export default function UserArea({ server }: UserAreaProps) {
     } catch (error) {
       console.error('Error loading user settings:', error)
     }
-  }
+  }, [user])
+
+  useEffect(() => {
+    if (user) {
+      loadUserSettings()
+    }
+  }, [user, loadUserSettings])
 
   const updateUserStatus = async (status: string) => {
     if (!user) return
@@ -95,8 +96,8 @@ export default function UserArea({ server }: UserAreaProps) {
       setUserSettings(prev => ({ ...prev, status }))
       setShowStatusMenu(false)
       toast.success('Status updated successfully!')
-    } catch (error: any) {
-      toast.error(`Failed to update status: ${error.message}`)
+    } catch (error) {
+      toast.error(`Failed to update status: ${error instanceof Error ? error.message : 'Unknown error'}`)
     } finally {
       setLoading(false)
     }
@@ -121,8 +122,8 @@ export default function UserArea({ server }: UserAreaProps) {
 
       setShowSettings(false)
       toast.success('Settings saved successfully!')
-    } catch (error: any) {
-      toast.error(`Failed to save settings: ${error.message}`)
+    } catch (error) {
+      toast.error(`Failed to save settings: ${error instanceof Error ? error.message : 'Unknown error'}`)
     } finally {
       setLoading(false)
     }
@@ -154,7 +155,7 @@ export default function UserArea({ server }: UserAreaProps) {
     <div className="flex flex-col h-full">
       {/* Online Users */}
       <div className="flex-1 overflow-y-auto">
-        <OnlineUsers server={server} />
+        <OnlineUsers server={server || null} />
       </div>
 
       {/* User Info Bar */}