fix(social): remove auto-loading API calls that cause 404 errors

- Remove hx-trigger='load' from social sidebar sections
- Replace loading placeholders with static empty state messages
- Add empty-state CSS styling
- Prevents page from breaking when backend APIs are not available

ui/suite/social/social.css

@@ -290,20 +290,39 @@
 }
 
 @keyframes spin {
-    to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 .loading-placeholder {
     height: 60px;
-    background: linear-gradient(90deg, var(--bg) 25%, var(--surface-hover) 50%, var(--bg) 75%);
+    background: linear-gradient(
+        90deg,
+        var(--bg) 25%,
+        var(--surface-hover) 50%,
+        var(--bg) 75%
+    );
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
     border-radius: 6px;
 }
 
 @keyframes shimmer {
-    0% { background-position: 200% 0; }
+    0% {
-    100% { background-position: -200% 0; }
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}
+
+.empty-state {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    text-align: center;
+    padding: 1rem;
+    margin: 0;
 }
 
 .modal {

ui/suite/social/social.html

@@ -86,36 +86,21 @@
     <div class="social-layout">
         <aside class="social-sidebar">
             <div class="sidebar-section">
-                <h3 data-i18n="social-my-communities">My Communities</h3>
+                <h3>My Communities</h3>
-                <div
+                <div id="my-communities">
-                    id="my-communities"
+                    <p class="empty-state">No communities yet</p>
-                    hx-get="/api/ui/social/my-communities"
-                    hx-trigger="load"
-                    hx-swap="innerHTML"
-                >
-                    <div class="loading-placeholder"></div>
                 </div>
             </div>
             <div class="sidebar-section">
-                <h3 data-i18n="social-trending">Trending</h3>
+                <h3>Trending</h3>
-                <div
+                <div id="trending-topics">
-                    id="trending-topics"
+                    <p class="empty-state">No trending topics</p>
-                    hx-get="/api/ui/social/trending"
-                    hx-trigger="load"
-                    hx-swap="innerHTML"
-                >
-                    <div class="loading-placeholder"></div>
                 </div>
             </div>
             <div class="sidebar-section">
-                <h3 data-i18n="social-suggested">Suggested Communities</h3>
+                <h3>Suggested Communities</h3>
-                <div
+                <div id="suggested-communities">
-                    id="suggested-communities"
+                    <p class="empty-state">No suggestions</p>
-                    hx-get="/api/ui/social/suggested"
-                    hx-trigger="load"
-                    hx-swap="innerHTML"
-                >
-                    <div class="loading-placeholder"></div>
                 </div>
             </div>
         </aside>
@@ -183,40 +168,24 @@
                 </div>
             </div>
 
-            <div
+            <div id="social-content">
-                id="social-content"
+                <div class="empty-feed">
-                hx-get="/api/ui/social/feed"
+                    <p>No posts yet. Be the first to share something!</p>
-                hx-trigger="load"
-                hx-swap="innerHTML"
-            >
-                <div class="loading-state">
-                    <div class="spinner"></div>
-                    <span data-i18n="loading">Loading...</span>
                 </div>
             </div>
         </main>
 
         <aside class="social-right-sidebar">
             <div class="sidebar-section">
-                <h3 data-i18n="social-recent-activity">Recent Activity</h3>
+                <h3>Recent Activity</h3>
-                <div
+                <div id="recent-activity">
-                    id="recent-activity"
+                    <p class="empty-state">No recent activity</p>
-                    hx-get="/api/ui/social/activity"
-                    hx-trigger="load"
-                    hx-swap="innerHTML"
-                >
-                    <div class="loading-placeholder"></div>
                 </div>
             </div>
             <div class="sidebar-section">
-                <h3 data-i18n="social-people">People to Follow</h3>
+                <h3>People to Follow</h3>
-                <div
+                <div id="people-suggestions">
-                    id="people-suggestions"
+                    <p class="empty-state">No suggestions</p>
-                    hx-get="/api/ui/social/people"
-                    hx-trigger="load"
-                    hx-swap="innerHTML"
-                >
-                    <div class="loading-placeholder"></div>
                 </div>
             </div>
         </aside>