feat: implement premium UI, mobile responsiveness, and message status LEDs

client/src/components/ChatLayout.vue

@@ -5,10 +5,11 @@ import MessageList from './MessageList.vue';
 import UserList from './UserList.vue';
 import MusicPlayer from './MusicPlayer.vue';
 import TokenCreator from './TokenCreator.vue';
-import { Hash, Volume2, VolumeX, Settings, X, Coins } from 'lucide-vue-next';
+import { Hash, Volume2, VolumeX, Settings, X, Coins, Menu } from 'lucide-vue-next';
 import { ref } from 'vue';
 
 const showTokenCreator = ref(false);
+const showMobileMenu = ref(false);
 
 const chatStore = useChatStore();
 const { channels, currentChannel, username, walletAddress } = storeToRefs(chatStore);
@@ -34,10 +35,17 @@ const saveSettings = () => {
 </script>
 
 <template>
-  <div class="flex h-screen w-full overflow-hidden relative">
+  <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="absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
-      <div class="bg-crypto-panel border border-white/10 rounded-2xl w-full max-w-md shadow-2xl animate-fade-in-up">
+    <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">
@@ -50,13 +58,13 @@ const saveSettings = () => {
             <input 
               v-model="newUsername" 
               type="text" 
-              class="w-full bg-crypto-dark 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"
+              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-crypto-dark/50 border border-white/5 rounded-xl px-4 py-3 text-gray-500 text-sm truncate">
+            <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>
@@ -79,7 +87,12 @@ const saveSettings = () => {
     </div>
 
     <!-- Channels Sidebar -->
-    <div class="w-64 bg-[#2b2d31] flex flex-col border-r border-black/20">
+    <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">
@@ -91,7 +104,7 @@ const saveSettings = () => {
       <div class="flex-1 overflow-y-auto py-3 space-y-0.5 px-2">
         <!-- Token Creator Link -->
         <button 
-          @click="showTokenCreator = true"
+          @click="showTokenCreator = true; showMobileMenu = false"
           :class="['w-full flex items-center gap-2 px-2 py-1.5 rounded-md transition-all group mb-4',
             showTokenCreator ? 'bg-[#3f4147] text-white' : 'text-gray-400 hover:bg-[#35373c] hover:text-gray-200']"
         >
@@ -102,7 +115,7 @@ const saveSettings = () => {
         <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); showTokenCreator = false"
+            @click="chatStore.setChannel(channel.id); showTokenCreator = false; showMobileMenu = false"
             :class="['w-full flex items-center gap-2 px-2 py-1.5 rounded-md transition-all group', 
               currentChannel === channel.id && !showTokenCreator ? 'bg-[#3f4147] text-white' : 'text-gray-400 hover:bg-[#35373c] hover:text-gray-200']"
           >
@@ -113,7 +126,7 @@ const saveSettings = () => {
       </div>
 
       <!-- Music Player & Profile -->
-      <div class="bg-[#232428] p-2 space-y-2">
+      <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">
@@ -121,7 +134,7 @@ const saveSettings = () => {
             <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-[#232428] rounded-full"></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>
@@ -133,9 +146,15 @@ const saveSettings = () => {
     </div>
 
     <!-- Main Content -->
-    <div class="flex-1 flex flex-col bg-[#313338] relative overflow-hidden">
+    <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-[#313338]/95 backdrop-blur-sm z-10">
+      <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">{{ showTokenCreator ? 'Token Creator' : currentChannel }}</span>
       </div>
@@ -147,7 +166,7 @@ const saveSettings = () => {
         </div>
 
         <!-- Member List (Discord Style) -->
-        <div class="w-60 bg-[#2b2d31] border-l border-black/20 hidden lg:flex flex-col">
+        <div class="w-60 bg-discord-sidebar border-l border-black/20 hidden xl:flex flex-col">
           <UserList />
         </div>
       </div>