Initialize League GUI prototype

src/features/social/SocialSidebar.tsx

@@ -0,0 +1,44 @@
+import { useAppContext } from "../../app/AppContext";
+import { Button } from "../../components/ui";
+import { friends } from "../../data/friends.mock";
+import { getFriendStatusLabel } from "./friendStatus";
+
+export function SocialSidebar() {
+  const { notify } = useAppContext();
+
+  return (
+    <aside className="social-sidebar" aria-label="Friends and social status">
+      <header>
+        <span className="eyebrow">Social</span>
+        <h2>Friends</h2>
+      </header>
+
+      <div className="social-list">
+        {friends.map((friend) => (
+          <article key={friend.id} className="social-card">
+            <span className={`status-dot status-${friend.status}`} />
+            <div>
+              <h3>{friend.displayName}</h3>
+              <p>{getFriendStatusLabel(friend.status)}</p>
+              <span>{friend.activity}</span>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              disabled={friend.status === "offline"}
+              onClick={() =>
+                notify({
+                  title: "Invite sent",
+                  message: `${friend.displayName} received a prototype party invite.`,
+                  variant: "success"
+                })
+              }
+            >
+              Invite
+            </Button>
+          </article>
+        ))}
+      </div>
+    </aside>
+  );
+}