optimizations

resources/js/components/Feed/FeedSidebar.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import axios from 'axios'
+import SuggestedUsersWidget from '../social/SuggestedUsersWidget'
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Helpers
@@ -44,7 +45,7 @@ function SideCard({ title, icon, children, className = '' }) {
 function StatsCard({ stats, followerCount, user, onTabChange }) {
   const items = [
     {
-      label: 'Artworks',
+      label: 'Uploads',
       value: fmt(stats?.uploads_count ?? 0),
       icon: 'fa-solid fa-image',
       color: 'text-sky-400',
@@ -285,67 +286,6 @@ function TrendingHashtagsCard() {
 // Suggested to follow card
 // ─────────────────────────────────────────────────────────────────────────────
 
-function SuggestionsCard({ excludeUsername, isLoggedIn }) {
-  const [users,   setUsers]   = useState([])
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    if (!isLoggedIn) { setLoading(false); return }
-    axios.get('/api/search/users', { params: { q: '', per_page: 5 } })
-      .then(({ data }) => {
-        const list = (data.data ?? []).filter((u) => u.username !== excludeUsername).slice(0, 4)
-        setUsers(list)
-      })
-      .catch(() => {})
-      .finally(() => setLoading(false))
-  }, [excludeUsername, isLoggedIn])
-
-  if (!isLoggedIn) return null
-  if (!loading && users.length === 0) return null
-
-  return (
-    <SideCard title="Discover Creators" icon="fa-solid fa-compass">
-      <div className="px-4 py-3 space-y-2.5">
-        {loading ? (
-          [1, 2, 3, 4].map((i) => (
-            <div key={i} className="flex items-center gap-2.5 animate-pulse">
-              <div className="w-8 h-8 rounded-full bg-white/10 shrink-0" />
-              <div className="flex-1 space-y-1">
-                <div className="h-2.5 bg-white/10 rounded w-24" />
-                <div className="h-2 bg-white/6 rounded w-16" />
-              </div>
-            </div>
-          ))
-        ) : (
-          users.map((u) => (
-            <a
-              key={u.id}
-              href={u.profile_url ?? `/@${u.username}`}
-              className="flex items-center gap-2.5 group"
-            >
-              <img
-                src={u.avatar_url ?? '/images/avatar_default.webp'}
-                alt={u.username}
-                className="w-8 h-8 rounded-full object-cover ring-1 ring-white/10 group-hover:ring-sky-500/40 transition-all shrink-0"
-                loading="lazy"
-              />
-              <div className="flex-1 min-w-0">
-                <p className="text-[13px] font-medium text-slate-300 group-hover:text-white transition-colors truncate leading-tight">
-                  {u.name || u.username}
-                </p>
-                <p className="text-[11px] text-slate-600 truncate">@{u.username}</p>
-              </div>
-              <span className="shrink-0 text-[11px] text-sky-500/80 group-hover:text-sky-400 transition-colors font-medium">
-                View
-              </span>
-            </a>
-          ))
-        )}
-      </div>
-    </SideCard>
-  )
-}
-
 // ─────────────────────────────────────────────────────────────────────────────
 // Main export
 // ─────────────────────────────────────────────────────────────────────────────
@@ -370,6 +310,7 @@ export default function FeedSidebar({
   stats,
   followerCount,
   recentFollowers,
+  suggestedUsers,
   socialLinks,
   countryName,
   isLoggedIn,
@@ -397,9 +338,12 @@ export default function FeedSidebar({
         onTabChange={onTabChange}
       />
 
-      <SuggestionsCard
+      <SuggestedUsersWidget
+        title="Discover Creators"
         excludeUsername={user?.username}
         isLoggedIn={isLoggedIn}
+        initialUsers={suggestedUsers}
+        limit={4}
       />
 
       <TrendingHashtagsCard />