chat history tasarımınıı yenile berbat durumda şuanda

components/sidebar.js

@@ -54,28 +54,29 @@ this.shadowRoot.innerHTML = `
                 .new-chat-btn:active {
                     transform: translateY(0);
                 }
-.chat-history-section {
+                .chat-history-section {
                     margin-bottom: 2rem;
+                    padding: 0 1rem;
                 }
                 
                 .nav-title {
-                    font-size: 0.75rem;
+                    font-size: 0.65rem;
                     font-weight: 600;
                     color: #71717a;
                     text-transform: uppercase;
                     letter-spacing: 0.05em;
-                    padding: 0 1.5rem;
-                    margin-bottom: 0.75rem;
+                    padding: 0 0.5rem;
+                    margin-bottom: 0.5rem;
                 }
                 
                 .chat-history {
                     max-height: 400px;
                     overflow-y: auto;
-                    padding-right: 0.5rem;
+                    padding-right: 0.25rem;
                 }
                 
                 .chat-history::-webkit-scrollbar {
-                    width: 4px;
+                    width: 3px;
                 }
                 
                 .chat-history::-webkit-scrollbar-track {
@@ -83,51 +84,86 @@ this.shadowRoot.innerHTML = `
                 }
                 
                 .chat-history::-webkit-scrollbar-thumb {
-                    background: #525252;
-                    border-radius: 2px;
+                    background: rgba(255, 255, 255, 0.2);
+                    border-radius: 3px;
+                }
+                
+                .chat-history::-webkit-scrollbar-thumb:hover {
+                    background: rgba(255, 255, 255, 0.3);
                 }
                 
                 .chat-item {
                     position: relative;
-                    margin-right: 0.75rem;
                     margin-bottom: 0.25rem;
+                    border-radius: 8px;
+                    overflow: hidden;
                 }
                 
                 .chat-item-content {
-                    padding: 0.75rem 1.25rem 0.75rem 1.5rem;
-                    color: #9ca3af;
-                    font-size: 0.875rem;
+                    padding: 0.625rem 0.75rem;
+                    color: #a1a1aa;
+                    font-size: 0.8125rem;
                     cursor: pointer;
-                    transition: all 0.2s ease;
-                    border-radius: 0 8px 8px 0;
+                    transition: all 0.15s ease;
+                    border-radius: 6px;
                     display: flex;
                     align-items: center;
                     gap: 0.5rem;
                     position: relative;
-                    line-height: 1.4;
+                    line-height: 1.3;
+                    border: 1px solid transparent;
+                    background: rgba(255, 255, 255, 0.02);
                 }
                 
                 .chat-item-content:hover {
                     color: #ffffff;
-                    background: rgba(255, 255, 255, 0.06);
+                    background: rgba(255, 255, 255, 0.08);
+                    border-color: rgba(255, 255, 255, 0.1);
+                    transform: translateX(2px);
                 }
                 
                 .chat-item-content.active {
                     color: #ffffff;
-                    background: rgba(255, 255, 255, 0.12);
+                    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
+                    border-color: rgba(255, 255, 255, 0.2);
+                    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
                 }
                 
                 .history-icon {
-                    width: 16px;
-                    height: 16px;
+                    width: 14px;
+                    height: 14px;
+                    opacity: 0.7;
+                    flex-shrink: 0;
+                }
+                
+                .chat-item-content:hover .history-icon {
+                    opacity: 1;
+                }
+                
+                .chat-item-content.active .history-icon {
+                    opacity: 1;
+                    color: #ffffff;
+                }
+                
+                .chat-title {
+                    flex: 1;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                
+                .chat-item-content:hover .chat-title {
+                    white-space: normal;
+                    overflow: visible;
                 }
                 
                 .divider {
                     height: 1px;
-                    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
-                    margin: 1.5rem 1.5rem 1rem;
+                    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08), transparent);
+                    margin: 1.25rem 0.5rem 0.75rem;
+                    opacity: 0.7;
                 }
-                .media-btn {
+.media-btn {
                     display: flex;
                     align-items: center;
                     gap: 0.75rem;
@@ -207,26 +243,43 @@ this.shadowRoot.innerHTML = `
                     color: #9ca3af;
                     font-size: 0.75rem;
                 }
-                @media (max-width: 768px) {
+            @media (max-width: 768px) {
                     .sidebar {
                         position: fixed;
                         transform: translateX(-100%);
+                        z-index: 40;
                     }
                     
                     .sidebar.active {
                         transform: translateX(0);
                     }
                     
-                    .fixed.bottom-0 {
+                    #userCard {
                         position: fixed;
                         transform: translateX(-100%);
+                        width: 280px;
+                        z-index: 40;
                     }
                     
-                    .sidebar.active ~ .fixed.bottom-0,
-                    .fixed.bottom-0.active {
+                    .sidebar.active ~ #userCard,
+                    #userCard.active {
                         transform: translateX(0);
                     }
                 }
+                
+                @media (min-width: 769px) {
+                    #userCard {
+                        position: absolute !important;
+                        bottom: 0 !important;
+                        left: 0 !important;
+                        right: auto !important;
+                        width: 100% !important;
+                        transform: none !important;
+                        border-left: none !important;
+                        border-right: none !important;
+                        border-bottom: none !important;
+                    }
+                }
 </style>
             
             <nav class="sidebar">
@@ -248,14 +301,14 @@ this.shadowRoot.innerHTML = `
                 </button>
                 <!-- Chat History Section -->
                 <div class="chat-history-section">
-                    <div class="nav-title">Today
-<div class="chat-history" id="recentChats">
+                    <div class="nav-title">Today</div>
+                    <div class="chat-history" id="recentChats">
                         <div class="chat-item" data-id="1">
                             <div class="chat-item-content" onclick="loadChatHistory(1)">
                                 <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                     <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
                                 </svg>
-                                <span class="chat-title">Website Redesign Discussion</span>
+                                <span class="chat-title">Website Redesign</span>
                             </div>
                         </div>
                         
@@ -264,7 +317,7 @@ this.shadowRoot.innerHTML = `
                                 <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                     <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
                                 </svg>
-                                <span class="chat-title">JavaScript Performance Tips</span>
+                                <span class="chat-title">JS Performance Tips</span>
                             </div>
                         </div>
                         
@@ -273,7 +326,7 @@ this.shadowRoot.innerHTML = `
                                 <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                     <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
                                 </svg>
-                                <span class="chat-title">React Architecture Planning</span>
+                                <span class="chat-title">React Architecture</span>
                             </div>
                         </div>
                         
@@ -282,7 +335,7 @@ this.shadowRoot.innerHTML = `
                                 <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                     <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
                                 </svg>
-                                <span class="chat-title">Machine Learning Basics</span>
+                                <span class="chat-title">ML Basics</span>
                             </div>
                         </div>
                         
@@ -291,7 +344,7 @@ this.shadowRoot.innerHTML = `
                                 <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                     <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
                                 </svg>
-                                <span class="chat-title">API Best Practices Guide</span>
+                                <span class="chat-title">API Best Practices</span>
                             </div>
                         </div>
                     </div>
@@ -305,7 +358,7 @@ this.shadowRoot.innerHTML = `
                                 <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                     <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
                                 </svg>
-                                <span class="chat-title">Data Analysis Report</span>
+                                <span class="chat-title">Data Analysis</span>
                             </div>
                         </div>
                         
@@ -314,7 +367,7 @@ this.shadowRoot.innerHTML = `
                                 <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                     <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
                                 </svg>
-                                <span class="chat-title">Cloud Architecture Review</span>
+                                <span class="chat-title">Cloud Architecture</span>
                             </div>
                         </div>
                     </div>
@@ -328,7 +381,7 @@ this.shadowRoot.innerHTML = `
                                 <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                     <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
                                 </svg>
-                                <span class="chat-title">Database Optimization Tips</span>
+                                <span class="chat-title">Database Optimization</span>
                             </div>
                         </div>
                         
@@ -346,27 +399,26 @@ this.shadowRoot.innerHTML = `
                                 <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                     <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
                                 </svg>
-                                <span class="chat-title">UI/UX Design Principles</span>
+                                <span class="chat-title">UI/UX Design</span>
                             </div>
                         </div>
                     </div>
                 </div>
-            </nav>
+</nav>
             <!-- User Card at Bottom -->
-            <div class="user-card" id="userCard">
-                <button onclick="openAccount()" class="user-card-btn">
-                    <div class="user-avatar">
+            <div class="fixed bottom-0 left-0 right-0 bg-zinc-900/90 backdrop-blur-xl border-t border-zinc-800/60 p-3 z-30" style="margin-left: 0;" id="userCard">
+                <button onclick="openAccount()" class="w-full flex items-center gap-2.5 p-2 rounded-lg hover:bg-zinc-800/60 transition-colors duration-200">
+                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-semibold">
                         U
                     </div>
-                    <div class="user-info">
-                        <div class="user-name">User Name</div>
-                        <div class="user-email">[email protected]</div>
+                    <div class="flex-1 text-left">
+                        <div class="text-white text-sm font-medium">User Name</div>
+                        <div class="text-zinc-400 text-xs">[email protected]</div>
                     </div>
-                    <svg class="user-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <svg class="w-4 h-4 text-zinc-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <circle cx="12" cy="12" r="1"/>
                         <circle cx="19" cy="12" r="1"/>
                         <circle cx="5" cy="12" r="1"/>
-                        <path d="M19 9v6M5 9v6M19 5v4M5 5v4M19 15v4M5 15v4"/>
                     </svg>
                 </button>
             </div>
@@ -410,6 +462,7 @@ this.shadowRoot.innerHTML = `
             sidebar.classList.toggle('active');
             userCard.classList.toggle('active');
         };
+=======
 document.body.appendChild(menuButton);
     }
 }