177 lines
7.8 KiB
Vue
177 lines
7.8 KiB
Vue
<script setup>
|
|
import { useChatStore } from '../stores/chat';
|
|
import { storeToRefs } from 'pinia';
|
|
import MessageList from './MessageList.vue';
|
|
import UserList from './UserList.vue';
|
|
import UserList from './UserList.vue';
|
|
import MusicPlayer from './MusicPlayer.vue';
|
|
import { Hash, Volume2, VolumeX, Settings, X, Coins, Menu, User } from 'lucide-vue-next';
|
|
import { ref } from 'vue';
|
|
|
|
const showProfile = ref(false);
|
|
const selectedProfileAddress = ref(null);
|
|
const showMobileMenu = ref(false);
|
|
|
|
const chatStore = useChatStore();
|
|
const { channels, currentChannel, username, walletAddress } = storeToRefs(chatStore);
|
|
|
|
const isMuted = ref(true);
|
|
const showSettings = ref(false);
|
|
const newUsername = ref(username.value);
|
|
const emit = defineEmits(['toggleMute']);
|
|
|
|
const toggleMute = () => {
|
|
isMuted.value = !isMuted.value;
|
|
emit('toggleMute', isMuted.value);
|
|
};
|
|
|
|
const saveSettings = () => {
|
|
if (newUsername.value.trim()) {
|
|
chatStore.username = newUsername.value;
|
|
// In a real app, we would emit a socket event to update the DB
|
|
chatStore.socket.emit('join', { walletAddress: walletAddress.value, username: newUsername.value });
|
|
showSettings.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex h-screen w-full overflow-hidden relative bg-discord-dark">
|
|
<!-- Mobile Menu Overlay -->
|
|
<div
|
|
v-if="showMobileMenu"
|
|
@click="showMobileMenu = false"
|
|
class="fixed inset-0 bg-black/60 z-40 md:hidden backdrop-blur-sm transition-opacity"
|
|
></div>
|
|
|
|
<!-- Settings Modal -->
|
|
<div v-if="showSettings" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
|
|
<div class="bg-discord-sidebar border border-white/10 rounded-2xl w-full max-w-md shadow-2xl animate-pop-in">
|
|
<div class="p-6 border-b border-white/5 flex items-center justify-between">
|
|
<h2 class="text-xl font-bold text-white">Profile Settings</h2>
|
|
<button @click="showSettings = false" class="text-gray-400 hover:text-white transition-colors">
|
|
<X size="24" />
|
|
</button>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<div>
|
|
<label class="block text-xs font-bold text-crypto-muted uppercase tracking-wider mb-2">Username</label>
|
|
<input
|
|
v-model="newUsername"
|
|
type="text"
|
|
class="w-full bg-discord-black border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-violet-500/50 transition-all"
|
|
placeholder="Enter new username"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-bold text-crypto-muted uppercase tracking-wider mb-2">Wallet Address</label>
|
|
<div class="w-full bg-discord-black/50 border border-white/5 rounded-xl px-4 py-3 text-gray-500 text-sm truncate">
|
|
{{ walletAddress }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 border-t border-white/5 flex gap-3">
|
|
<button
|
|
@click="showSettings = false"
|
|
class="flex-1 px-4 py-2.5 rounded-xl border border-white/10 text-white font-medium hover:bg-white/5 transition-all"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
@click="saveSettings"
|
|
class="flex-1 px-4 py-2.5 rounded-xl bg-violet-600 text-white font-medium hover:bg-violet-500 shadow-lg shadow-violet-600/20 transition-all"
|
|
>
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Channels Sidebar -->
|
|
<div
|
|
:class="[
|
|
'fixed inset-y-0 left-0 w-64 bg-discord-sidebar flex flex-col border-r border-black/20 z-50 transition-transform duration-300 md:relative md:translate-x-0',
|
|
showMobileMenu ? 'translate-x-0' : '-translate-x-full'
|
|
]"
|
|
>
|
|
<div class="h-12 px-4 flex items-center justify-between border-b border-black/20 shadow-sm">
|
|
<h1 class="font-bold text-white truncate">Plexus Server</h1>
|
|
<button @click="toggleMute" class="text-gray-400 hover:text-gray-200 transition-colors">
|
|
<VolumeX v-if="isMuted" size="18" />
|
|
<Volume2 v-else size="18" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto py-3 space-y-0.5 px-2">
|
|
<!-- Profile Link -->
|
|
<button
|
|
@click="selectedProfileAddress = walletAddress; showProfile = true; showMobileMenu = false"
|
|
:class="['w-full flex items-center gap-2 px-2 py-1.5 rounded-md transition-all group mb-4',
|
|
showProfile && selectedProfileAddress === walletAddress ? 'bg-[#3f4147] text-white' : 'text-gray-400 hover:bg-[#35373c] hover:text-gray-200']"
|
|
>
|
|
<User size="18" class="text-violet-400" />
|
|
<span class="text-sm font-medium">My Profile</span>
|
|
</button>
|
|
|
|
<div class="px-2 mb-2 text-[11px] font-bold text-gray-500 uppercase tracking-wider">Text Channels</div>
|
|
<div v-for="channel in channels" :key="channel.id">
|
|
<button
|
|
@click="chatStore.setChannel(channel.id); showProfile = false; showMobileMenu = false"
|
|
:class="['w-full flex items-center gap-2 px-2 py-1.5 rounded-md transition-all group',
|
|
currentChannel === channel.id && !showProfile ? 'bg-[#3f4147] text-white' : 'text-gray-400 hover:bg-[#35373c] hover:text-gray-200']"
|
|
>
|
|
<Hash size="18" :class="currentChannel === channel.id && !showProfile ? 'text-gray-200' : 'text-gray-500 group-hover:text-gray-400'" />
|
|
<span class="text-sm font-medium">{{ channel.name }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Music Player & Profile -->
|
|
<div class="bg-discord-black p-2 space-y-2">
|
|
<MusicPlayer />
|
|
|
|
<div class="flex items-center gap-2 p-1.5 rounded-md hover:bg-[#35373c] transition-all group cursor-pointer" @click="showSettings = true">
|
|
<div class="relative">
|
|
<div class="w-8 h-8 rounded-full bg-violet-600 flex items-center justify-center text-white text-xs font-bold">
|
|
{{ username?.substring(0, 2).toUpperCase() }}
|
|
</div>
|
|
<div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-discord-black rounded-full"></div>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-xs font-bold text-white truncate">{{ username }}</div>
|
|
<div class="text-[10px] text-gray-400 truncate">#{{ walletAddress?.slice(-4) }}</div>
|
|
</div>
|
|
<Settings size="14" class="text-gray-400 group-hover:text-gray-200" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex-1 flex flex-col bg-discord-dark relative overflow-hidden">
|
|
<!-- Header -->
|
|
<div class="h-12 px-4 flex items-center border-b border-black/20 shadow-sm bg-discord-dark/95 backdrop-blur-sm z-10">
|
|
<button
|
|
@click="showMobileMenu = true"
|
|
class="md:hidden mr-3 text-gray-400 hover:text-white transition-colors"
|
|
>
|
|
<Menu size="24" />
|
|
</button>
|
|
<Hash size="20" class="text-gray-400 mr-2" />
|
|
<span class="font-bold text-white mr-4">{{ showProfile ? (selectedProfileAddress === walletAddress ? 'My Profile' : 'User Profile') : currentChannel }}</span>
|
|
</div>
|
|
|
|
<div class="flex-1 flex overflow-hidden">
|
|
<div class="flex-1 flex flex-col relative overflow-hidden">
|
|
<UserProfile v-if="showProfile" :address="selectedProfileAddress" />
|
|
<MessageList v-else @view-profile="(addr) => { selectedProfileAddress = addr; showProfile = true; }" />
|
|
</div>
|
|
|
|
<!-- Member List (Discord Style) -->
|
|
<div class="w-60 bg-discord-sidebar border-l border-black/20 hidden xl:flex flex-col">
|
|
<UserList @view-profile="(addr) => { selectedProfileAddress = addr; showProfile = true; }" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|