Upload 4 files

css/styles.css

@@ -0,0 +1,980 @@
+/* CSS Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Variables (Telegram Web Colors - Refined) */
+:root {
+  --tg-bg-color: #f2f2f2; /* Slightly lighter background */
+  --tg-sidebar-bg-color: #ffffff;
+  --tg-chat-bg-color: #e5ddd5;
+  --tg-text-color: #2a2a2a;
+  --tg-link-color: #0088cc;
+  --tg-sent-message-bg: #d9f0fd;
+  --tg-received-message-bg: #ffffff;
+  --tg-border-color: #e0e0e0;
+  --tg-input-bg-color: #f9f9f9;
+  --tg-input-border-color: #d9d9d9;
+  --tg-input-placeholder-color: #9a9a9a;
+  --tg-active-item-bg: #e8f4fd;
+  --tg-hover-item-bg: #f8f8f8;
+
+  /* Telegram Web Specific Refinements */
+  --tg-message-radius: 12px; /* More rounded message corners */
+  --tg-message-padding-vertical: 10px; /* Adjusted message padding */
+  --tg-message-padding-horizontal: 14px;
+  --tg-chat-item-avatar-size: 42px; /* Slightly larger avatars in chat list */
+  --tg-chat-item-padding-vertical: 10px; /* Adjusted chat item padding */
+  --tg-chat-item-padding-horizontal: 16px;
+  --tg-header-height: 56px; /* Standard Telegram header height */
+  --tg-input-height: 48px; /* Standard Telegram input height */
+  --tg-scrollbar-width: 8px; /* Thinner scrollbar */
+  --tg-scrollbar-color: rgba(0, 0, 0, 0.2); /* Scrollbar color */
+  --tg-scrollbar-track-color: transparent; /* Scrollbar track color */
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  background: var(--tg-bg-color);
+  overflow: hidden;
+}
+
+/* App Layout */
+.app {
+  display: flex;
+  height: 100vh;
+}
+
+/* Chat List (Left Sidebar) */
+.chat-list {
+  width: 320px; /* Wider sidebar for better Telegram clone */
+  background: var(--tg-sidebar-bg-color);
+  border-right: 1px solid var(--tg-border-color);
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-list-header {
+  padding: 14px 16px;
+  background: var(--tg-sidebar-bg-color);
+  border-bottom: 1px solid var(--tg-border-color);
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-list-header h2 {
+  margin-bottom: 7px;
+  font-size: 1.1em;
+  color: var(--tg-text-color);
+  font-weight: 500;
+}
+
+.chat-list-header button.connect-btn {
+  width: 100%;
+  padding: 8px 14px;
+  border: 1px solid var(--tg-input-border-color);
+  border-radius: 24px;
+  outline: none;
+  font-size: 0.95em;
+  background-color: var(--tg-link-color);
+  color: white;
+  margin-bottom: 8px;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.chat-list-header input {
+  width: 100%;
+  padding: 8px 14px;
+  border: 1px solid var(--tg-input-border-color);
+  border-radius: 24px;
+  outline: none;
+  font-size: 0.95em;
+  background-color: var(--tg-input-bg-color);
+  color: var(--tg-text-color);
+  transition: border-color 0.2s;
+}
+
+.chat-list-header input:focus {
+  border-color: var(--tg-link-color);
+  box-shadow: 0 0 0 1px var(--tg-link-color);
+}
+
+.chat-items {
+  list-style: none;
+  overflow-y: auto;
+  flex-grow: 1;
+  scrollbar-width: thin;
+  scrollbar-color: var(--tg-scrollbar-color) var(--tg-scrollbar-track-color);
+}
+.chat-items::-webkit-scrollbar {
+  width: var(--tg-scrollbar-width);
+}
+.chat-items::-webkit-scrollbar-track {
+  background: var(--tg-scrollbar-track-color);
+}
+.chat-items::-webkit-scrollbar-thumb {
+  background-color: var(--tg-scrollbar-color);
+  border-radius: 4px;
+}
+
+.chat-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--tg-chat-item-padding-vertical) var(--tg-chat-item-padding-horizontal);
+  cursor: pointer;
+  transition: background 0.2s;
+  border-bottom: 1px solid var(--tg-border-color);
+}
+
+.chat-item.active {
+  background: var(--tg-active-item-bg);
+}
+
+.chat-item:hover {
+  background-color: var(--tg-hover-item-bg);
+}
+
+.chat-item .avatar {
+  margin-right: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tg-chat-item-avatar-size);
+  height: var(--tg-chat-item-avatar-size);
+  background: var(--tg-border-color);
+  border-radius: 50%;
+  font-weight: 600;
+  font-size: 18px;
+  color: var(--tg-chat-bg-color);
+  overflow: hidden; /* Ensure content inside avatar stays within bounds */
+}
+
+.chat-item .avatar svg {
+  width: 100%;
+  height: 100%;
+}
+
+.chat-item .chat-info {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.chat-name {
+  font-weight: 500;
+  margin-bottom: 3px;
+  color: var(--tg-text-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 1.05em;
+}
+
+.chat-snippet {
+  font-size: 0.9em;
+  color: var(--tg-input-placeholder-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-item .chat-time {
+  font-size: 0.8em;
+  color: var(--tg-input-placeholder-color);
+  align-self: flex-start;
+}
+
+.chat-item .unread-badge {
+  background-color: var(--tg-link-color);
+  color: white;
+  font-size: 0.75em;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-weight: bold;
+  align-self: flex-end;
+}
+
+.chat-item .unread-badge.hidden {
+  display: none;
+}
+
+.chat-item .channel-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.channel-users-count {
+  font-size: 0.8em;
+  color: var(--tg-input-placeholder-color);
+}
+
+/* Chat Window (Right Panel) */
+.chat-window {
+  flex-grow: 1;
+  display: grid;
+  grid-template-columns: 1fr 300px;
+  grid-template-rows: var(--tg-header-height) 1fr auto;
+  background: var(--tg-chat-bg-color);
+  position: relative;
+}
+
+.chat-header {
+  grid-column: 1 / -1;
+  padding: 0 16px;
+  height: var(--tg-header-height);
+  background: var(--tg-sidebar-bg-color);
+  border-bottom: 1px solid var(--tg-border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.chat-header-info {
+  display: flex;
+  align-items: center;
+}
+
+.chat-header .avatar {
+  width: 40px;
+  height: 40px;
+  font-size: 18px;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #5288c1;
+  border-radius: 50%;
+  font-weight: 600;
+  color: white;
+}
+
+.chat-header h2 {
+  font-size: 1.1em;
+  color: var(--tg-text-color);
+  font-weight: 500;
+}
+
+.settings-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  color: var(--tg-input-placeholder-color);
+  transition: transform 0.3s;
+}
+
+.settings-btn:hover {
+  transform: rotate(20deg);
+}
+
+.messages {
+  grid-column: 1;
+  padding-right: 300px;
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--tg-scrollbar-color) var(--tg-scrollbar-track-color);
+}
+.messages::-webkit-scrollbar {
+  width: var(--tg-scrollbar-width);
+}
+.messages::-webkit-scrollbar-track {
+  background: var(--tg-scrollbar-track-color);
+}
+.messages::-webkit-scrollbar-thumb {
+  background-color: var(--tg-scrollbar-color);
+  border-radius: 4px;
+}
+
+/* Message bubbles */
+.message {
+  display: flex;
+  max-width: 78%;
+  animation: fadeIn 0.3s ease-in-out;
+  margin-bottom: 3px;
+}
+.message.sent {
+  align-self: flex-end;
+}
+.message.received {
+  align-self: flex-start;
+}
+.message-bubble {
+  padding: var(--tg-message-padding-vertical) var(--tg-message-padding-horizontal);
+  border-radius: var(--tg-message-radius) calc(var(--tg-message-radius) * 2) calc(var(--tg-message-radius) * 2) var(--tg-message-radius);
+  background: var(--tg-received-message-bg);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  font-size: 0.98em;
+  line-height: 1.3;
+  position: relative;
+  word-wrap: break-word;
+}
+.message.sent .message-bubble {
+  background: var(--tg-sent-message-bg);
+  color: var(--tg-text-color);
+  border-radius: calc(var(--tg-message-radius) * 2) var(--tg-message-radius) var(--tg-message-radius) calc(var(--tg-message-radius) * 2);
+}
+.message.received .message-bubble {
+  background: var(--tg-received-message-bg);
+  padding: var(--tg-message-padding-vertical) var(--tg-message-padding-horizontal);
+  border-radius: var(--tg-message-radius);
+  max-width: 85%;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.message-time {
+  position: absolute;
+  right: 10px;
+  bottom: 6px;
+  font-size: 0.7em;
+  color: var(--tg-input-placeholder-color);
+}
+.message.sent .message-time {
+  right: 10px;
+  left: auto;
+  text-align: right;
+}
+
+/* Message input area */
+.message-input {
+  grid-column: 1;
+  padding-right: 300px;
+  display: flex;
+  padding: 9px 16px;
+  background: var(--tg-sidebar-bg-color);
+  border-top: 1px solid var(--tg-border-color);
+  height: var(--tg-input-height);
+}
+.message-input input {
+  flex-grow: 1;
+  padding: 10px 16px;
+  border: 1px solid var(--tg-input-border-color);
+  border-radius: 24px;
+  outline: none;
+  font-size: 1em;
+  margin-right: 10px;
+  background-color: var(--tg-input-bg-color);
+  color: var(--tg-text-color);
+  height: auto;
+  transition: border-color 0.2s;
+}
+
+.message-input input:focus {
+  border-color: var(--tg-link-color);
+  box-shadow: 0 0 0 1px var(--tg-link-color);
+}
+
+.message-input input::placeholder {
+  color: var(--tg-input-placeholder-color);
+}
+.message-input button {
+  background: transparent;
+  border: none;
+  padding: 0;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--tg-link-color);
+}
+
+/* Bot command buttons */
+.bot-commands {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 10px 0;
+  padding: 0 16px;
+}
+.bot-command {
+  background: var(--tg-sidebar-bg-color);
+  border: none;
+  padding: 8px 16px;
+  border-radius: 18px;
+  cursor: pointer;
+  color: var(--tg-link-color);
+  font-size: 0.95em;
+  transition: background-color 0.2s;
+}
+.bot-command:hover {
+  background: var(--tg-active-item-bg);
+}
+
+/* Bot keyboard and verification badge */
+.bot-keyboard {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 10px;
+}
+.keyboard-row {
+  display: flex;
+  gap: 8px;
+}
+.keyboard-button {
+  flex: 1;
+  background: var(--tg-sidebar-bg-color);
+  border: none;
+  padding: 8px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--tg-link-color);
+  font-size: 0.95em;
+  transition: background-color 0.2s;
+  text-align: center;
+}
+.keyboard-button:hover {
+  background: var(--tg-active-item-bg);
+}
+.bot-badge {
+  background: var(--tg-link-color);
+  color: white;
+  font-size: 0.7em;
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-left: 8px;
+  text-transform: uppercase;
+}
+
+/* Fade In Animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Dialog styles */
+.dialog {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.dialog-content {
+  background: var(--tg-sidebar-bg-color);
+  padding: 24px;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 420px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
+}
+.dialog h3 {
+  margin: 0 0 24px;
+  color: var(--tg-text-color);
+  font-size: 1.3em;
+  font-weight: 500;
+}
+.form-group {
+  margin-bottom: 18px;
+}
+.form-group label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--tg-text-color);
+  font-size: 0.95em;
+}
+.form-group input {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--tg-input-border-color);
+  border-radius: 10px;
+  font-size: 1em;
+  background: var(--tg-input-bg-color);
+  color: var(--tg-text-color);
+  transition: border-color 0.2s;
+}
+
+.form-group input:focus {
+  border-color: var(--tg-link-color);
+  box-shadow: 0 0 0 1px var(--tg-link-color);
+}
+
+.buttons {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 24px;
+}
+.buttons button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 0.95em;
+  transition: background-color 0.2s;
+}
+.buttons button[type="submit"] {
+  background: var(--tg-link-color);
+  color: white;
+}
+.buttons button.cancel {
+  background: var(--tg-hover-item-bg);
+  color: var(--tg-text-color);
+}
+.message-sender {
+  display: block;
+  font-weight: 500;
+  margin-bottom: 4px;
+  color: var(--tg-link-color);
+}
+.message.action {
+  align-self: center;
+  font-style: italic;
+  color: var(--tg-input-placeholder-color);
+}
+.message.system {
+  align-self: center;
+  color: var(--tg-input-placeholder-color);
+  font-size: 0.9em;
+}
+.message.error {
+  align-self: center;
+  color: #ff4444;
+  font-size: 0.9em;
+}
+.header-actions {
+  display: flex;
+  gap: 10px;
+}
+.connect-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  color: var(--tg-input-placeholder-color);
+  transition: transform 0.3s;
+}
+.connect-btn:hover {
+  transform: scale(1.1);
+}
+
+/* User List */
+.user-list {
+  grid-column: 2;
+  grid-row: 2 / span 2;
+  position: relative;
+  width: 300px;
+  background: var(--tg-sidebar-bg-color);
+  border-left: 1px solid var(--tg-border-color);
+  display: flex;
+  flex-direction: column;
+}
+
+.user-list-header {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--tg-border-color);
+  display: flex;
+}
+.user-list-header h3 {
+  font-size: 1em;
+  font-weight: 500;
+  color: var(--tg-text-color);
+}
+.user-list-header input.user-search-input {
+  padding: 8px 14px;
+  border: 1px solid var(--tg-input-border-color);
+  border-radius: 24px;
+  outline: none;
+  font-size: 0.95em;
+  background-color: var(--tg-input-bg-color);
+  color: var(--tg-text-color);
+  margin-left: auto;
+  width: 60%;
+}
+
+.user-list-content {
+  overflow-y: auto;
+  flex-grow: 1;
+  scrollbar-width: thin;
+  scrollbar-color: var(--tg-scrollbar-color) var(--tg-scrollbar-track-color);
+}
+.user-list-content::-webkit-scrollbar {
+  width: var(--tg-scrollbar-width);
+}
+.user-list-content::-webkit-scrollbar-track {
+  background: var(--tg-scrollbar-track-color);
+}
+.user-list-content::-webkit-scrollbar-thumb {
+  background-color: var(--tg-scrollbar-color);
+  border-radius: 4px;
+}
+
+.user-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.user-item:hover {
+  background: var(--tg-hover-item-bg);
+}
+.user-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--tg-link-color);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  font-weight: 500;
+  font-size: 1em;
+  overflow: hidden; /* Ensure content inside avatar stays within bounds */
+}
+
+.user-avatar svg {
+  width: 100%;
+  height: 100%;
+}
+
+.user-name {
+  color: var(--tg-text-color);
+  font-size: 0.95em;
+}
+
+/* Channel Topic */
+.channel-topic {
+  font-size: 0.8em;
+  color: var(--tg-input-placeholder-color);
+  margin-top: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Server Info */
+.server-info {
+  padding: 8px 16px;
+  font-size: 0.8em;
+  color: var(--tg-input-placeholder-color);
+  background: var(--tg-sidebar-bg-color);
+  border-bottom: 1px solid var(--tg-border-color);
+}
+
+/* Connection Status */
+.connection-status {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px 18px;
+  background: var(--tg-link-color);
+  color: white;
+  border-radius: 0 0 10px 10px;
+  font-size: 0.9em;
+  z-index: 1000;
+  transition: transform 0.3s;
+}
+.connection-status.hidden {
+  transform: translateX(-50%) translateY(-100%);
+}
+
+/* Private Message Dialog */
+.pm-dialog {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 320px;
+  background: var(--tg-sidebar-bg-color);
+  border-radius: 16px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+  display: flex; /* Enable flexbox for PM dialog */
+  flex-direction: column; /* Stack header, messages, input vertically */
+  max-height: 80vh; /* Limit height to viewport height */
+}
+.pm-header {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--tg-border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0; /* Prevent header from shrinking */
+}
+.pm-messages {
+  height: auto; /* Adjust height automatically based on content */
+  overflow-y: auto;
+  padding: 14px 16px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--tg-scrollbar-color) var(--tg-scrollbar-track-color);
+  flex-grow: 1; /* Allow messages to take up available space */
+  display: flex;
+  flex-direction: column-reverse; /* Newest messages at bottom */
+}
+.pm-messages::-webkit-scrollbar {
+  width: var(--tg-scrollbar-width);
+}
+.pm-messages::-webkit-scrollbar-track {
+  background: var(--tg-scrollbar-track-color);
+}
+.pm-messages::-webkit-scrollbar-thumb {
+  background-color: var(--tg-scrollbar-color);
+  border-radius: 4px;
+}
+.pm-input {
+  padding: 14px 16px;
+  border-top: 1px solid var(--tg-border-color);
+  flex-shrink: 0; /* Prevent input from shrinking */
+}
+.pm-input input {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--tg-input-border-color);
+  border-radius: 24px;
+  outline: none;
+  font-size: 1em;
+  background-color: var(--tg-input-bg-color);
+  color: var(--tg-text-color);
+  transition: border-color 0.2s;
+}
+
+.pm-input input:focus {
+  border-color: var(--tg-link-color);
+  box-shadow: 0 0 0 1px var(--tg-link-color);
+}
+.pm-message {
+  margin-bottom: 8px; /* Spacing between PM messages */
+}
+
+/* Settings Panel */
+.settings-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 320px;
+  background: var(--tg-sidebar-bg-color);
+  border-left: 1px solid var(--tg-border-color);
+  transform: translateX(100%);
+  transition: transform 0.3s;
+  z-index: 1000;
+}
+.settings-panel.open {
+  transform: translateX(0);
+}
+.settings-header {
+  padding: 16px;
+  border-bottom: 1px solid var(--tg-border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.settings-content {
+  padding: 16px;
+}
+.settings-group {
+  margin-bottom: 20px;
+}
+.settings-group h3 {
+  margin-bottom: 12px;
+  font-size: 1em;
+  font-weight: 500;
+}
+
+/* Utility class to hide elements */
+.hidden {
+  display: none;
+}
+
+/* Channel search improvements */
+.search-results {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--tg-sidebar-bg-color);
+  border: 1px solid var(--tg-border-color);
+  border-radius: 0 0 12px 12px;
+  max-height: 320px;
+  overflow-y: auto;
+  z-index: 1000;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.search-result-item {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--tg-border-color);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.search-result-item:hover {
+  background: var(--tg-hover-item-bg);
+}
+
+.join-button {
+  padding: 8px 16px;
+  background: var(--tg-link-color);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.join-button:hover {
+  opacity: 0.9;
+}
+
+/* Section headers */
+.section-header {
+  padding: 10px 16px;
+  font-weight: 500;
+  color: var(--tg-input-placeholder-color);
+  background: var(--tg-hover-item-bg);
+  font-size: 0.9em;
+}
+
+/* Channel categories */
+.channel-category {
+  margin-bottom: 10px;
+}
+
+/* Loading indicator */
+.loading-spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--tg-border-color);
+  border-radius: 50%;
+  border-top-color: var(--tg-link-color);
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Theme switcher */
+.theme-switcher {
+  padding: 12px 16px;
+  background: var(--tg-sidebar-bg-color);
+  border-top: 1px solid var(--tg-border-color);
+}
+
+.theme-option {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  cursor: pointer;
+}
+
+.theme-option label {
+  font-size: 0.95em;
+}
+
+.theme-option input[type="radio"] {
+  margin-right: 8px;
+}
+
+/* Channel Info Styles */
+.channel-info {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background: var(--tg-sidebar-bg-color);
+  border-top: 1px solid var(--tg-border-color);
+  height: 100%;
+}
+
+.channel-info.hidden {
+  display: none;
+}
+
+.channel-info-header {
+  display: flex;
+  align-items: center;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--tg-border-color);
+}
+
+.channel-info-header h3 {
+  font-size: 1em;
+  font-weight: 500;
+  color: var(--tg-text-color);
+}
+
+.back-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  color: var(--tg-input-placeholder-color);
+  transition: transform 0.3s;
+}
+
+.back-btn:hover {
+  transform: scale(1.1);
+}
+
+.channel-info-content {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 14px;
+  height: calc(100% - 72px); /* Adjust height based on header height */
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--tg-scrollbar-color) var(--tg-scrollbar-track-color);
+}
+.channel-info-content::-webkit-scrollbar {
+  width: var(--tg-scrollbar-width);
+}
+.channel-info-content::-webkit-scrollbar-track {
+  background: var(--tg-scrollbar-track-color);
+}
+.channel-info-content::-webkit-scrollbar-thumb {
+  background-color: var(--tg-scrollbar-color);
+  border-radius: 4px;
+}
+
+.channel-topic {
+  margin-bottom: 10px;
+  font-size: 0.8em;
+  color: var(--tg-input-placeholder-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* User Search Input in Channel Info */
+.user-search-input {
+  padding: 8px 14px;
+  border: 1px solid var(--tg-input-border-color);
+  border-radius: 24px;
+  outline: none;
+  font-size: 0.95em;
+  background-color: var(--tg-input-bg-color);
+  color: var(--tg-text-color);
+  margin-bottom: 10px;
+  width: 100%;
+}

index.html

@@ -1,19 +1,146 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Libera Chat - Telegram Clone</title>
+  <link rel="stylesheet" href="css/styles.css" />
+</head>
+<body>
+  <!-- Global Connection Status (fixed at top center) -->
+  <div id="connectionStatus" class="connection-status hidden"></div>
+
+  <div class="app">
+    <aside class="chat-list">
+      <div class="chat-list-header">
+        <h2>Libera Chat</h2>
+        <input type="text" placeholder="Search channels" id="chatSearch" />
+      </div>
+      <ul class="chat-items">
+        <!-- Joined channels will be populated by JavaScript -->
+      </ul>
+      <div class="channel-info hidden" id="channelInfo">
+        <div class="channel-info-header">
+          <button class="back-btn" id="backBtn">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M5 12h14"></path>
+              <path d="M12 5l7 7-7 7"></path>
+            </svg>
+          </button>
+          <h3 id="channelName">Channel Name</h3>
+        </div>
+        <div class="channel-info-content">
+          <div class="channel-topic" id="channelTopic">Topic: <span id="topicText">No topic set</span></div>
+          <input type="text" placeholder="Search members" id="userSearch" class="user-search-input" />
+          <div class="user-list" id="channelUserList">
+            <!-- Channel users will be populated by JavaScript -->
+          </div>
+        </div>
+      </div>
+    </aside>
+    <main class="chat-window">
+      <header class="chat-header">
+        <div class="chat-header-info">
+          <div class="avatar"></div>
+          <h2 id="channelHeader">Welcome to Libera Chat</h2>
+        </div>
+        <div class="header-actions">
+          <button class="connect-btn" id="connectBtn" title="Connect">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M5 12h14"></path>
+              <path d="M12 5l7 7-7 7"></path>
+            </svg>
+          </button>
+          <button class="settings-btn" id="settingsBtn" title="Settings">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="3"></circle>
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+            </svg>
+          </button>
+        </div>
+      </header>
+      <div class="messages" id="messages">
+        <!-- Channel messages will be populated by JavaScript -->
+      </div>
+      <form class="message-input" id="messageForm">
+        <input type="text" id="messageText" placeholder="Message" disabled />
+        <button type="submit" title="Send" disabled>
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="22" y1="2" x2="11" y2="13"></line>
+            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+          </svg>
+        </button>
+      </form>
+      <!-- User list (for current channel) will be injected dynamically -->
+      <div class="user-list"></div>
+    </main>
+  </div>
+
+  <!-- Connection Dialog -->
+  <div class="dialog" id="connectionDialog">
+    <div class="dialog-content">
+      <h3>Connect to Libera Chat</h3>
+      <form id="connectionForm">
+        <div class="form-group">
+          <label for="nickname">Nickname</label>
+          <input type="text" id="nickname" required />
+        </div>
+        <div class="form-group">
+          <label for="channel">Channel</label>
+          <input type="text" id="channel" value="#libera" required />
+        </div>
+        <div class="buttons">
+          <button type="submit">Connect</button>
+          <button type="button" class="cancel">Cancel</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <!-- Private Message Dialog -->
+  <div class="pm-dialog hidden" id="pmDialog">
+    <div class="pm-header">
+      <span id="pmUserName">Private Chat</span>
+      <button id="pmCloseBtn" title="Close">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+    <div class="pm-messages" id="pmMessages"></div>
+    <div class="pm-input">
+      <input type="text" id="pmInput" placeholder="Message" />
+    </div>
+  </div>
+
+  <!-- Settings Panel -->
+  <div class="settings-panel" id="settingsPanel">
+    <div class="settings-header">
+      <h3>Settings</h3>
+      <button id="closeSettingsBtn" title="Close">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+    <div class="settings-content">
+      <div class="settings-group">
+        <h3>Server Info</h3>
+        <p id="serverInfoText">Loading...</p>
+      </div>
+      <div class="settings-group">
+        <h3>Appearance</h3>
+        <p>Theme: Telegram Clone</p>
+      </div>
+      <div class="settings-group">
+        <h3>Advanced</h3>
+        <p>Reconnection Status: <span id="reconnectStatus">Good</span></p>
+      </div>
+    </div>
+  </div>
+
+  <script src="js/irc.js"></script>
+  <script src="js/main.js"></script>
+</body>
+</html>

js/irc.js

@@ -0,0 +1,285 @@
+class IRCClient {
+  constructor() {
+    this.ws = null;
+    this.nickname = '';
+    this.channels = new Set();
+    this.callbacks = {
+      message: () => {},
+      join: () => {},
+      part: () => {},
+      connected: () => {},
+      error: () => {},
+      channelUsers: () => {},
+      topic: () => {},
+      serverInfo: () => {},
+      channelList: () => {}
+    };
+    this.reconnectAttempts = 0;
+    this.maxReconnectAttempts = 5;
+    this.channelUsers = new Map();
+    this.channelTopics = new Map();
+    this.privateMessages = new Map();
+    this.serverInfo = {
+      network: 'Libera Chat',
+      users: 0,
+      channels: 0,
+      operators: 0
+    };
+    this.pingInterval = null;
+    this.lastPing = Date.now();
+    this.connectionState = 'disconnected';
+    this.globalChannels = new Set();
+  }
+
+  connect(nickname) {
+    this.nickname = nickname;
+    this.connectionState = 'connecting';
+
+    try {
+      this.ws = new WebSocket('wss://web.libera.chat/webirc/websocket/');
+
+      this.pingInterval = setInterval(() => {
+        if (this.ws.readyState === WebSocket.OPEN) {
+          this.send('PING :' + Date.now());
+        }
+      }, 30000);
+
+      this.ws.onopen = () => {
+        this.connectionState = 'registering';
+        this.reconnectAttempts = 0;
+        this.send(`NICK ${this.nickname}`);
+        this.send(`USER ${this.nickname} 0 * :${this.nickname}`);
+        this.send('LUSERS');
+        this.send('LIST');
+      };
+
+      this.ws.onmessage = (event) => this.handleMessage(event.data);
+
+      this.ws.onerror = (error) => {
+        console.error('WebSocket error:', error);
+        let errorMessage = 'Connection error occurred';
+        if (error.message) {
+          errorMessage = error.message;
+        } else if (error.code) {
+          errorMessage = `Error code: ${error.code}`;
+        }
+        this.callbacks.error(errorMessage);
+      };
+
+      this.ws.onclose = (event) => {
+        let closeMessage = 'Connection closed';
+        if (event.code !== 1000) {
+          if (this.reconnectAttempts < this.maxReconnectAttempts) {
+            this.reconnectAttempts++;
+            closeMessage = `Connection lost. Attempting to reconnect (${this.reconnectAttempts}/${this.maxReconnectAttempts})...`;
+            this.callbacks.error(closeMessage);
+            setTimeout(() => this.connect(this.nickname), 2000);
+            return;
+          }
+          closeMessage = 'Connection closed unexpectedly. Please try reconnecting.';
+        }
+        this.callbacks.error(closeMessage);
+      };
+
+    } catch (error) {
+      this.connectionState = 'error';
+      console.error('Connection error:', error);
+      this.callbacks.error('Failed to establish connection: ' + error.message);
+    }
+  }
+
+  disconnect() {
+    if (this.pingInterval) {
+      clearInterval(this.pingInterval);
+    }
+    if (this.ws) {
+      this.ws.close(1000, 'User initiated disconnect');
+    }
+    this.connectionState = 'disconnected';
+  }
+
+  send(message) {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(message + '\r\n');
+    }
+  }
+
+  join(channel) {
+    if (!channel.startsWith('#')) channel = '#' + channel;
+    this.send(`JOIN ${channel}`);
+    this.channels.add(channel);
+  }
+
+  part(channel) {
+    this.send(`PART ${channel}`);
+    this.channels.delete(channel);
+  }
+
+  sendMessage(channel, message) {
+    this.send(`PRIVMSG ${channel} :${message}`);
+  }
+
+  getChannelUsers(channel) {
+    return Array.from(this.channelUsers.get(channel) || new Set());
+  }
+
+  getChannelTopic(channel) {
+    return this.channelTopics.get(channel) || '';
+  }
+
+  sendPrivateMessage(target, message) {
+    this.send(`PRIVMSG ${target} :${message}`);
+    if (!this.privateMessages.has(target)) {
+      this.privateMessages.set(target, []);
+    }
+    this.privateMessages.get(target).push({
+      from: this.nickname,
+      message,
+      timestamp: Date.now()
+    });
+  }
+
+  requestChannelInfo(channel) {
+    this.send(`MODE ${channel}`);
+    this.send(`WHO ${channel}`);
+    this.send(`TOPIC ${channel}`);
+  }
+
+  handleMessage(data) {
+    const lines = data.split('\r\n');
+    for (const line of lines) {
+      if (!line) continue;
+
+      if (line.startsWith('PING')) {
+        this.send('PONG' + line.substring(4));
+        this.lastPing = Date.now();
+        continue;
+      }
+
+      const match = line.match(/^(?::([\w.]+) )?([\w]+)(?: (?!:)(.+?))?(?: :(.+))?$/);
+      if (!match) continue;
+
+      const [, prefix, command, params = '', trailing] = match;
+      const args = params.split(' ').filter(arg => arg);
+      if (trailing) args.push(trailing);
+
+      switch (command) {
+        case '001':
+          this.connectionState = 'connected';
+          this.callbacks.connected();
+          break;
+
+        case '353': {
+          const channel = args[2];
+          const users = args[3].split(' ');
+          if (!this.channelUsers.has(channel)) {
+            this.channelUsers.set(channel, new Set());
+          }
+          users.forEach(user => this.channelUsers.get(channel).add(user));
+          this.callbacks.channelUsers?.({ channel, users: Array.from(this.channelUsers.get(channel)) });
+          break;
+        }
+
+        case '332': {
+          const topicChannel = args[1];
+          const topic = args[2];
+          this.channelTopics.set(topicChannel, topic);
+          this.callbacks.topic?.({ channel: topicChannel, topic });
+          break;
+        }
+        case '333':
+          break;
+
+        case '266': {
+          const match = trailing.match(/(\d+)/);
+          if (match) {
+            this.serverInfo.users = parseInt(match[1]);
+            this.callbacks.serverInfo?.(this.serverInfo);
+          }
+          break;
+        }
+
+        case '322': {
+          const [channel, userCount, topic] = args;
+          this.globalChannels.add(channel);
+          break;
+        }
+
+        case '323': {
+          this.callbacks.channelList?.(Array.from(this.globalChannels));
+          break;
+        }
+
+        case 'PRIVMSG': {
+          const [target, message] = [args[0], args[1]];
+          const nick = prefix.split('!')[0];
+          this.callbacks.message({
+            from: nick,
+            target,
+            message,
+            isAction: message.startsWith('\u0001ACTION') && message.endsWith('\u0001'),
+            timestamp: Date.now()
+          });
+          break;
+        }
+        case 'JOIN':
+          this.callbacks.join({
+            channel: args[0],
+            nick: prefix.split('!')[0]
+          });
+          this.requestChannelInfo(args[0]);
+          break;
+        case 'PART':
+          this.callbacks.part({
+            channel: args[0],
+            nick: prefix.split('!')[0]
+          });
+          break;
+        case 'QUIT':
+          this.channelUsers.forEach((users, channel) => {
+            if (users.delete(prefix.split('!')[0])) {
+              this.callbacks.channelUsers?.({ channel, users: Array.from(users) });
+            }
+          });
+          break;
+        case 'NICK': {
+          const oldNick = prefix.split('!')[0];
+          const newNick = args[0];
+          if (oldNick === this.nickname) {
+            this.nickname = newNick;
+          }
+          this.channelUsers.forEach((users, channel) => {
+            if (users.has(oldNick)) {
+              users.delete(oldNick);
+              users.add(newNick);
+              this.callbacks.channelUsers?.({ channel, users: Array.from(users) });
+            }
+          });
+          break;
+        }
+      }
+    }
+  }
+
+  on(event, callback) {
+    if (this.callbacks.hasOwnProperty(event)) {
+      this.callbacks[event] = callback;
+    }
+  }
+
+  onChannelUsers(callback) {
+    this.callbacks.channelUsers = callback;
+  }
+
+  onTopic(callback) {
+    this.callbacks.topic = callback;
+  }
+
+  onServerInfo(callback) {
+    this.callbacks.serverInfo = callback;
+  }
+
+  onChannelList(callback) {
+    this.callbacks.channelList = callback;
+  }
+}

js/main.js

@@ -0,0 +1,621 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // ...existing code...
+  const irc = new IRCClient();
+  const messageForm = document.getElementById('messageForm');
+  const messageInput = document.getElementById('messageText');
+  const messagesContainer = document.getElementById('messages');
+  const connectBtn = document.getElementById('connectBtn');
+  const connectionDialog = document.getElementById('connectionDialog');
+  const connectionForm = document.getElementById('connectionForm');
+  const chatSearchInput = document.getElementById('chatSearch');
+  const settingsBtn = document.getElementById('settingsBtn');
+  const settingsPanel = document.getElementById('settingsPanel');
+  const closeSettingsBtn = document.getElementById('closeSettingsBtn');
+  const connectionStatusEl = document.getElementById('connectionStatus');
+  const serverInfoText = document.getElementById('serverInfoText');
+  const reconnectStatusEl = document.getElementById('reconnectStatus');
+  const pmDialog = document.getElementById('pmDialog');
+  const pmCloseBtn = document.getElementById('pmCloseBtn');
+  const pmMessagesContainer = document.getElementById('pmMessages');
+  const pmInput = document.getElementById('pmInput');
+  const backBtn = document.getElementById('backBtn');
+
+  let activeChannels = new Set();
+  let selectedChannel = '';
+  let currentChannel = '';
+  let currentPMUser = '';
+  let channelMessages = {};
+  let pmMessages = {};
+  let globalChannels = new Set();
+  let searchTimeout = null;
+
+  // UI Components
+  const channelList = document.querySelector('.chat-items');
+  // Create user list if not already present
+  let userListEl = document.querySelector('.user-list');
+  if (!userListEl) {
+    userListEl = document.createElement('div');
+    userListEl.classList.add('user-list');
+    document.querySelector('.chat-window').appendChild(userListEl);
+  }
+
+  const channelInfoEl = document.getElementById('channelInfo');
+  const channelUserListEl = document.getElementById('channelUserList');
+  const channelNameEl = document.getElementById('channelName');
+  const channelTopicEl = document.getElementById('topicText');
+  const userSearchInput = document.getElementById('userSearch');
+
+  function generateAvatar(name) {
+    const colors = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#77b1a9", "#94d82d", "#a327ff", "#f7e01d", "#e64a19", "#ecf0f1"];
+    const colorIndex = name.charCodeAt(0) % colors.length;
+    const color = colors[colorIndex];
+    const initials = name.substring(0, 2).toUpperCase();
+
+    return `
+      <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="60" cy="60" r="60" fill="${color}"/>
+        <text
+          x="50%"
+          y="50%"
+          text-anchor="middle"
+          dominant-baseline="middle"
+          font-size="48"
+          font-family="sans-serif"
+          fill="white"
+        >${initials}</text>
+      </svg>
+    `;
+  }
+
+  function updateChannelList() {
+    const searchQuery = chatSearchInput.value.toLowerCase();
+    channelList.innerHTML = '';
+
+    // Connected channels section
+    if (activeChannels.size > 0) {
+      const connectedSection = document.createElement('div');
+      connectedSection.className = 'channel-category';
+      connectedSection.innerHTML = `
+        <div class="section-header">Connected Channels</div>
+      `;
+
+      Array.from(activeChannels)
+        .filter(channel => channel.toLowerCase().includes(searchQuery))
+        .forEach(channel => {
+          const li = createChannelListItem(channel);
+          connectedSection.appendChild(li);
+        });
+
+      channelList.appendChild(connectedSection);
+    }
+
+    // Update search results if query exists
+    if (searchQuery.length >= 2) {
+      searchGlobalChannels(searchQuery);
+    }
+  }
+
+  function createChannelListItem(channel) {
+    const li = document.createElement('li');
+    li.classList.add('chat-item');
+    if (channel === selectedChannel) li.classList.add('active');
+
+    li.innerHTML = `
+      <div class="avatar">${generateAvatar(channel)}</div>
+      <div class="chat-info">
+        <div class="chat-name">${channel}</div>
+        <div class="chat-snippet">${
+          channelMessages[channel]?.length ?
+          channelMessages[channel][channelMessages[channel].length - 1].text :
+          irc.getChannelTopic(channel) || 'No topic set'
+        }</div>
+      </div>
+      <div class="unread-badge">${irc.getChannelUsers(channel).length}</div>
+    `;
+
+    li.addEventListener('click', () => {
+      selectedChannel = channel;
+      currentChannel = channel;
+      updateChannelList();
+      updateUserList();
+      updateHeader();
+      displayMessagesForCurrentChannel();
+      channelInfoEl.classList.remove('hidden');
+      showChannelInfo(channel);
+    });
+
+    return li;
+  }
+
+  async function searchGlobalChannels(query) {
+    if (searchTimeout) clearTimeout(searchTimeout);
+
+    searchTimeout = setTimeout(async () => {
+      const searchResults = document.createElement('div');
+      searchResults.className = 'search-results';
+
+      if (query.length < 2) {
+        const existing = document.querySelector('.search-results');
+        if (existing) existing.remove();
+        return;
+      }
+
+      searchResults.innerHTML = '<div class="section-header">Loading channels...</div>';
+      chatSearchInput.parentElement.appendChild(searchResults);
+
+      try {
+        // Request channel list from server
+        irc.send('LIST');
+
+        // Filter channels based on query
+        const filteredChannels = Array.from(globalChannels)
+          .filter(channel => channel.toLowerCase().includes(query.toLowerCase()))
+          .slice(0, 20); // Limit results
+
+        searchResults.innerHTML = `
+          <div class="section-header">Global Channels</div>
+          ${filteredChannels.map(channel => `
+            <div class="search-result-item">
+              <span>${channel}</span>
+              ${!activeChannels.has(channel) ?
+                `<button class="join-button" data-channel="${channel}">Join</button>` :
+                '<span>Joined</span>'
+              }
+            </div>
+          `).join('')}
+        `;
+
+        // Add click handlers for join buttons
+        searchResults.querySelectorAll('.join-button').forEach(btn => {
+          btn.addEventListener('click', () => {
+            const channel = btn.dataset.channel;
+            irc.join(channel);
+            activeChannels.add(channel);
+            selectedChannel = channel;
+            updateChannelList();
+            searchResults.remove();
+          });
+        });
+
+      } catch (error) {
+        searchResults.innerHTML = '<div class="section-header">Error loading channels</div>';
+      }
+    }, 300);
+  }
+
+  function updateUserList() {
+    if (!selectedChannel) {
+      userListEl.innerHTML = '';
+      return;
+    }
+
+    const users = irc.getChannelUsers(selectedChannel);
+    userListEl.innerHTML = `
+      <div class="user-list-header">
+        <h3>Users (${users.length})</h3>
+      </div>
+      <div class="user-list-content">
+        ${users.map(user => `
+          <div class="user-item" data-user="${user}">
+            <div class="user-avatar">${generateAvatar(user)}</div>
+            <div class="user-name">${user}</div>
+          </div>
+        `).join('')}
+      </div>
+    `;
+    userListEl.querySelectorAll('.user-item').forEach(item => {
+      item.addEventListener('click', () => {
+        const user = item.getAttribute('data-user');
+        showPMDialog(user);
+      });
+    });
+  }
+
+  function updateHeader() {
+    const header = document.querySelector('.chat-header h2');
+    const avatar = document.querySelector('.chat-header .avatar');
+    if (selectedChannel) {
+      const topic = irc.getChannelTopic(selectedChannel);
+      header.innerHTML = `
+        ${selectedChannel}
+        ${topic ? `<div class="channel-topic">${topic}</div>` : ''}
+      `;
+      avatar.innerHTML = generateAvatar(selectedChannel);
+    } else {
+      header.textContent = 'Welcome to Libera Chat';
+      avatar.innerHTML = ''; // Clear avatar when no channel selected
+    }
+  }
+
+  function addChannelMessage(channel, message) {
+    if (!channel) return;
+    if (!channelMessages[channel]) {
+      channelMessages[channel] = [];
+    }
+    channelMessages[channel].push(message);
+    if (selectedChannel === channel) {
+      displayMessagesForCurrentChannel();
+    }
+  }
+
+  function displayMessagesForCurrentChannel() {
+    messagesContainer.innerHTML = '';
+    if (!selectedChannel || !channelMessages[selectedChannel]) return;
+    channelMessages[selectedChannel].forEach(msg => {
+      const el = createMessageElement(msg);
+      messagesContainer.appendChild(el);
+    });
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+  }
+
+  function createMessageElement(msg) {
+    const messageWrapper = document.createElement('div');
+    messageWrapper.classList.add('message', msg.type);
+
+    const bubble = document.createElement('div');
+    bubble.classList.add('message-bubble');
+
+    if (msg.from && msg.type !== 'system' && msg.type !== 'error') {
+      const nameSpan = document.createElement('span');
+      nameSpan.classList.add('message-sender');
+      nameSpan.textContent = msg.from;
+      nameSpan.style.cursor = 'pointer';
+      nameSpan.addEventListener('click', () => {
+        showPMDialog(msg.from);
+      });
+      bubble.appendChild(nameSpan);
+    }
+
+    const textSpan = document.createElement('span');
+    textSpan.classList.add('message-text');
+    textSpan.textContent = msg.text;
+    bubble.appendChild(textSpan);
+
+    // Timestamp element
+    const timeSpan = document.createElement('span');
+    timeSpan.classList.add('message-time');
+    const date = new Date(msg.timestamp);
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    timeSpan.textContent = `${hours}:${minutes}`;
+    bubble.appendChild(timeSpan);
+
+    messageWrapper.appendChild(bubble);
+    return messageWrapper;
+  }
+
+  function addPMMessage(user, msg) {
+    if (!user) return;
+    if (!pmMessages[user]) {
+      pmMessages[user] = [];
+    }
+    pmMessages[user].push(msg);
+    if (currentPMUser === user) {
+      displayPMMessages(user);
+    }
+  }
+
+  function displayPMMessages(user) {
+    pmMessagesContainer.innerHTML = '';
+    if (!pmMessages[user]) return;
+    // Display messages in reverse order to show newest at the bottom
+    pmMessages[user].slice().reverse().forEach(msg => {
+      const msgEl = createMessageElement(msg); // Reuse createMessageElement
+      msgEl.classList.add('pm-message'); // Add class for PM styling if needed
+      pmMessagesContainer.appendChild(msgEl);
+    });
+    pmMessagesContainer.scrollTop = pmMessagesContainer.scrollHeight;
+  }
+
+  function showPMDialog(user) {
+    currentPMUser = user;
+    document.getElementById('pmUserName').textContent = `Chat with ${user}`;
+    pmDialog.classList.remove('hidden');
+    displayPMMessages(user);
+    pmInput.focus(); // Focus on input when PM dialog opens
+  }
+
+  function hidePMDialog() {
+    pmDialog.classList.add('hidden');
+    currentPMUser = '';
+  }
+
+  function showConnectionDialog() {
+    connectionDialog.style.display = 'flex';
+  }
+
+  function hideConnectionDialog() {
+    connectionDialog.style.display = 'none';
+  }
+
+  function updateConnectionStatus(status) {
+    connectionStatusEl.textContent = status;
+    if (status.toLowerCase().includes('connected')) {
+      connectionStatusEl.classList.add('hidden');
+    } else {
+      connectionStatusEl.classList.remove('hidden');
+    }
+  }
+
+  function initializeUI() {
+    messageInput.disabled = true;
+    messageForm.querySelector('button').disabled = true;
+  }
+
+  function showChannelInfo(channel) {
+    channelNameEl.textContent = channel;
+    channelTopicEl.textContent = irc.getChannelTopic(channel) || 'No topic set';
+    const users = irc.getChannelUsers(channel);
+    channelUserListEl.innerHTML = `
+      <div class="user-list-header">
+        <h3>Users (${users.length})</h3>
+      </div>
+      <div class="user-list-content">
+        ${users.map(user => `
+          <div class="user-item" data-user="${user}">
+            <div class="user-avatar">${generateAvatar(user)}</div>
+            <div class="user-name">${user}</div>
+          </div>
+        `).join('')}
+      </div>
+    `;
+    channelUserListEl.querySelectorAll('.user-item').forEach(item => {
+      item.addEventListener('click', () => {
+        const user = item.getAttribute('data-user');
+        showPMDialog(user);
+      });
+    });
+  }
+
+  // Event Listeners
+  connectBtn.addEventListener('click', () => {
+    showConnectionDialog();
+  });
+
+  connectionDialog.querySelector('.cancel').addEventListener('click', () => {
+    hideConnectionDialog();
+  });
+
+  connectionForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const nickname = document.getElementById('nickname').value;
+    currentChannel = document.getElementById('channel').value;
+
+    if (!nickname || !currentChannel) {
+      addChannelMessage(currentChannel, { type: 'error', text: 'Please enter both nickname and channel', timestamp: Date.now(), channel: currentChannel });
+      return;
+    }
+
+    hideConnectionDialog();
+    updateConnectionStatus('Connecting to Libera Chat...');
+    addChannelMessage(currentChannel, { type: 'system', text: 'Connecting to Libera Chat...', timestamp: Date.now(), channel: currentChannel });
+
+    try {
+      irc.connect(nickname);
+      activeChannels.add(currentChannel);
+      selectedChannel = currentChannel;
+      updateChannelList();
+    } catch (error) {
+      addChannelMessage(currentChannel, { type: 'error', text: `Failed to connect: ${error.message}`, timestamp: Date.now(), channel: currentChannel });
+    }
+  });
+
+  messageForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const text = messageInput.value.trim();
+    if (!text) return;
+
+    if (text.startsWith('/')) {
+      const [command, ...args] = text.slice(1).split(' ');
+      switch (command.toLowerCase()) {
+        case 'join':
+          if (args[0]) {
+            let channel = args[0];
+            if (!channel.startsWith('#')) channel = '#' + channel;
+            irc.join(channel);
+            activeChannels.add(channel);
+            selectedChannel = channel;
+            currentChannel = channel;
+            updateChannelList();
+          }
+          break;
+        case 'part':
+          if (selectedChannel) {
+            irc.part(selectedChannel);
+            activeChannels.delete(selectedChannel);
+            selectedChannel = '';
+            updateChannelList();
+            messagesContainer.innerHTML = '';
+            updateHeader(); // Clear header when leaving channel
+          }
+          break;
+        case 'me':
+          if (args.length > 0 && currentChannel) {
+            const action = args.join(' ');
+            irc.send(`PRIVMSG ${currentChannel} :\u0001ACTION ${action}\u0001`);
+            addChannelMessage(currentChannel, { type: 'action', from: irc.nickname, text: action, timestamp: Date.now(), channel: currentChannel });
+          }
+          break;
+        case 'msg':
+          if (args.length >= 2) {
+            const [target, ...msgParts] = args;
+            const message = msgParts.join(' ');
+            irc.sendPrivateMessage(target, message);
+            addPMMessage(target, { type: 'sent', from: irc.nickname, text: message, timestamp: Date.now() });
+          }
+          break;
+        default:
+          addChannelMessage(currentChannel, { type: 'system', text: 'Unknown command', timestamp: Date.now(), channel: currentChannel });
+      }
+    } else if (currentChannel) {
+      irc.sendMessage(currentChannel, text);
+      addChannelMessage(currentChannel, { type: 'sent', from: irc.nickname, text, timestamp: Date.now(), channel: currentChannel });
+    }
+
+    messageInput.value = '';
+  });
+
+  // Settings panel toggle
+  settingsBtn.addEventListener('click', () => {
+    settingsPanel.classList.toggle('open');
+  });
+  closeSettingsBtn.addEventListener('click', () => {
+    settingsPanel.classList.remove('open');
+  });
+
+  // Channel search listener
+  chatSearchInput.addEventListener('input', () => {
+    updateChannelList();
+  });
+
+  // PM dialog input listener
+  pmInput.addEventListener('keyup', (e) => {
+    if (e.key === 'Enter' && currentPMUser) {
+      const text = pmInput.value.trim();
+      if (text) {
+        irc.sendPrivateMessage(currentPMUser, text);
+        addPMMessage(currentPMUser, { type: 'sent', from: irc.nickname, text, timestamp: Date.now() });
+        pmInput.value = '';
+      }
+    }
+  });
+  pmCloseBtn.addEventListener('click', hidePMDialog);
+
+  // Back button listener
+  backBtn.addEventListener('click', () => {
+    channelInfoEl.classList.add('hidden');
+  });
+
+  // IRC event handlers
+  irc.on('connected', () => {
+    addChannelMessage(currentChannel, { type: 'system', text: 'Connected to Libera Chat', timestamp: Date.now(), channel: currentChannel });
+    updateConnectionStatus('Connected to Libera Chat');
+    messageInput.disabled = false;
+    messageForm.querySelector('button').disabled = false;
+    if (currentChannel) {
+      irc.join(currentChannel);
+    }
+  });
+
+  irc.on('message', (data) => {
+    if (data.target === irc.nickname) {
+      // Private message
+      const type = data.from === irc.nickname ? 'sent' : 'received';
+      let text = data.message;
+      if (data.isAction) {
+        text = text.replace(/^\u0001ACTION /, '').replace(/\u0001$/, '');
+        addPMMessage(data.from, { type: 'action', from: data.from, text, timestamp: data.timestamp }); // Use timestamp from IRC event
+      } else {
+        addPMMessage(data.from, { type, from: data.from, text, timestamp: data.timestamp }); // Use timestamp from IRC event
+      }
+    } else {
+      const channel = data.target;
+      const type = data.from === irc.nickname ? 'sent' : 'received';
+      let text = data.message;
+      if (data.isAction) {
+        text = text.replace(/^\u0001ACTION /, '').replace(/\u0001$/, '');
+        addChannelMessage(channel, { type: 'action', from: data.from, text, timestamp: data.timestamp, channel }); // Use timestamp from IRC event
+      } else {
+        addChannelMessage(channel, { type, from: data.from, text, timestamp: data.timestamp, channel }); // Use timestamp from IRC event
+      }
+    }
+  });
+
+  irc.on('join', (data) => {
+    addChannelMessage(data.channel, { type: 'system', text: `${data.nick} joined ${data.channel}`, timestamp: Date.now(), channel: data.channel });
+    irc.requestChannelInfo(data.channel); // Request channel info on join
+  });
+
+  irc.on('part', (data) => {
+    addChannelMessage(data.channel, { type: 'system', text: `${data.nick} left ${data.channel}`, timestamp: Date.now(), channel: data.channel });
+    if (data.nick === irc.nickname && selectedChannel === data.channel) {
+      selectedChannel = ''; // Clear selected channel if user parts
+      messagesContainer.innerHTML = ''; // Clear messages
+      updateUserList(); // Clear user list
+      updateHeader(); // Update header
+      channelInfoEl.classList.add('hidden'); // Hide channel info
+    }
+  });
+
+  irc.on('error', (error) => {
+    let errorMessage = error;
+    if (error instanceof Event) {
+      errorMessage = 'Connection error occurred';
+    } else if (typeof error === 'object') {
+      errorMessage = error.message || 'Unknown error occurred';
+    }
+    addChannelMessage(currentChannel, { type: 'error', text: `Error: ${errorMessage}`, timestamp: Date.now(), channel: currentChannel });
+    messageInput.disabled = true;
+    messageForm.querySelector('button').disabled = true;
+  });
+
+  irc.onChannelUsers(({ channel, users }) => {
+    if (channel === selectedChannel) {
+      updateUserList();
+    }
+    updateChannelList();
+  });
+
+  irc.onTopic(({ channel, topic }) => {
+    if (channel === selectedChannel) {
+      updateHeader();
+      channelTopicEl.textContent = topic; // Update topic in channel info as well
+    }
+    updateChannelList();
+  });
+
+  irc.onServerInfo((info) => {
+    if (serverInfoText) {
+      serverInfoText.textContent = `Users: ${info.users} | Channels: ${info.channels}`;
+    }
+  });
+
+  irc.onChannelList((channels) => {
+    globalChannels = new Set(channels);
+  });
+
+  userSearchInput.addEventListener('input', () => {
+    const searchQuery = userSearchInput.value.toLowerCase();
+    const users = irc.getChannelUsers(selectedChannel);
+    const filteredUsers = users.filter(user => user.toLowerCase().includes(searchQuery));
+    channelUserListEl.querySelector('.user-list-content').innerHTML = `
+      ${filteredUsers.map(user => `
+        <div class="user-item" data-user="${user}">
+          <div class="user-avatar">${generateAvatar(user)}</div>
+          <div class="user-name">${user}</div>
+        </div>
+      `).join('')}
+    `;
+    channelUserListEl.querySelectorAll('.user-item').forEach(item => {
+      item.addEventListener('click', () => {
+        const user = item.getAttribute('data-user');
+        showPMDialog(user);
+      });
+    });
+  });
+
+  function initializeThemeSelector() {
+    const themes = [
+      { name: 'Light', class: 'theme-light' },
+      { name: 'Dark', class: 'theme-dark' },
+      { name: 'System', class: 'theme-system' }
+    ];
+
+    const themeSelector = document.createElement('div');
+    themeSelector.className = 'theme-switcher';
+    themeSelector.innerHTML = `
+      <div class="section-header">Theme</div>
+      ${themes.map(theme => `
+        <label class="theme-option">
+          <input type="radio" name="theme" value="${theme.class}">
+          ${theme.name}
+        </label>
+      `).join('')}
+    `;
+
+    document.querySelector('.settings-content').appendChild(themeSelector);
+  }
+
+  initializeUI();
+  initializeThemeSelector();
+});