chore: Initial commit of Opencord base state

2026-02-18 02:49:21 +01:00
commit 4fd17084a5
124 changed files with 17955 additions and 0 deletions
@@ -0,0 +1,59 @@
+import React from 'react';
+import { useVoiceStore } from '../../stores/voiceStore';
+
+const EMPTY_VOICE_USERS: string[] = [];
+import { useServerStore } from '../../stores/serverStore';
+import { Avatar } from '../ui/Avatar';
+
+interface VoiceChannelProps {
+  channelId: string;
+  channelName: string;
+  onClick: () => void;
+}
+
+export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelProps) {
+  const voiceUsers = useVoiceStore((s) => s.voiceUsers.get(channelId)) ?? EMPTY_VOICE_USERS;
+  const currentVoiceChannel = useVoiceStore((s) => s.currentVoiceChannelId);
+  const members = useServerStore((s) => s.members);
+  const isActive = currentVoiceChannel === channelId;
+
+  return (
+    <div>
+      <button
+        onClick={onClick}
+        className={`w-full flex items-center gap-1.5 px-2 py-1.5 rounded text-sm group ${
+          isActive
+            ? 'bg-discord-bg-active text-white'
+            : 'text-discord-text-muted hover:text-discord-text-secondary hover:bg-discord-bg-hover'
+        }`}
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" className="flex-shrink-0 opacity-60">
+          <path d="M11 5L6 9H2V15H6L11 19V5ZM15.54 8.46C16.48 9.4 17 10.67 17 12S16.48 14.6 15.54 15.54L14.12 14.12C14.69 13.55 15 12.79 15 12S14.69 10.45 14.12 9.88L15.54 8.46ZM19.07 4.93C20.91 6.77 22 9.28 22 12C22 14.72 20.91 17.23 19.07 19.07L17.66 17.66C19.11 16.21 20 14.21 20 12C20 9.79 19.11 7.79 17.66 6.34L19.07 4.93Z" />
+        </svg>
+        <span className="truncate">{channelName}</span>
+      </button>
+
+      {/* Connected users */}
+      {voiceUsers.length > 0 && (
+        <div className="ml-6 mt-0.5 space-y-0.5">
+          {voiceUsers.map((userId) => {
+            const member = members.find(m => m.userId === userId);
+            if (!member) return null;
+            const displayName = member.user.displayName ?? member.user.username;
+            return (
+              <div key={userId} className="flex items-center gap-2 px-2 py-0.5 rounded hover:bg-discord-bg-hover">
+                <Avatar
+                  src={member.user.avatar}
+                  name={displayName}
+                  size={20}
+                  status={member.user.status}
+                />
+                <span className="text-xs text-discord-text-secondary truncate">{displayName}</span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}