merge: branch 'refactor/client-changes'

- Consistency achieved across all pages on header items, icons, and
margins / positions. Kinda hacked together quite a bit, may need to
focus on a consistent style guide across components via utility classes
- Autofocus on MessageInput. Refs were giving problems, ended up using
DOM queries and focus is now achieved on ChatPage load and when replying
to a user. Not ideal and should be changed to Refs again at some point
- CreateChannelModal now loads categories, still fails the actual POST
request though
- Removed extrenuous console.log statements
- Laid groundwork for permissions system
- New more consistent look and feel overall

concord-client/bun.lock

@@ -15,7 +15,7 @@
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-switch": "^1.2.6",
         "@radix-ui/react-tooltip": "^1.2.8",
-        "@tailwindcss/vite": "^4.1.13",
+        "@tailwindcss/vite": "^4.1.14",
         "@tanstack/react-query": "^5.90.2",
         "@tanstack/react-query-devtools": "^5.90.2",
         "class-variance-authority": "^0.7.1",
@@ -23,37 +23,37 @@
         "date-fns": "^4.1.0",
         "lucide-react": "^0.544.0",
         "next-themes": "^0.4.6",
-        "react": "^18.2.0",
+        "react": "^18.3.1",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.3.1",
         "react-markdown": "^10.1.0",
         "react-router": "^7.9.3",
         "react-syntax-highlighter": "^15.6.6",
         "socket.io-client": "^4.8.1",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
-        "tailwindcss": "^4.1.13",
+        "tailwindcss": "^4.1.14",
         "zustand": "^5.0.8",
       },
       "devDependencies": {
         "@types/bcrypt": "^6.0.0",
-        "@types/bun": "^1.2.22",
+        "@types/bun": "^1.2.23",
-        "@types/react": "^18.2.64",
+        "@types/react": "^18.3.26",
-        "@types/react-dom": "^18.2.21",
+        "@types/react-dom": "^18.3.7",
         "@types/react-syntax-highlighter": "^15.5.13",
         "@types/socket.io-client": "^3.0.0",
-        "@typescript-eslint/eslint-plugin": "^7.1.1",
+        "@typescript-eslint/eslint-plugin": "^7.18.0",
-        "@typescript-eslint/parser": "^7.1.1",
+        "@typescript-eslint/parser": "^7.18.0",
-        "@vitejs/plugin-react": "^4.2.1",
+        "@vitejs/plugin-react": "^4.7.0",
-        "electron": "^30.0.1",
+        "electron": "^30.5.1",
         "electron-builder": "^24.13.3",
-        "eslint": "^8.57.0",
+        "eslint": "^8.57.1",
-        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-hooks": "^4.6.2",
-        "eslint-plugin-react-refresh": "^0.4.5",
+        "eslint-plugin-react-refresh": "^0.4.23",
         "tw-animate-css": "^1.4.0",
-        "typescript": "^5.2.2",
+        "typescript": "^5.9.3",
-        "vite": "^5.1.6",
+        "vite": "^5.4.20",
-        "vite-plugin-electron": "^0.28.6",
+        "vite-plugin-electron": "^0.28.8",
-        "vite-plugin-electron-renderer": "^0.14.5",
+        "vite-plugin-electron-renderer": "^0.14.6",
       },
     },
   },
@@ -336,35 +336,35 @@
 
     "@szmarczak/http-timer": ["@szmarczak/http-timer@4.0.6", "", { "dependencies": { "defer-to-connect": "^2.0.0" } }, "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w=="],
 
-    "@tailwindcss/node": ["@tailwindcss/node@4.1.13", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.5.1", "lightningcss": "1.30.1", "magic-string": "^0.30.18", "source-map-js": "^1.2.1", "tailwindcss": "4.1.13" } }, "sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw=="],
+    "@tailwindcss/node": ["@tailwindcss/node@4.1.14", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.0", "lightningcss": "1.30.1", "magic-string": "^0.30.19", "source-map-js": "^1.2.1", "tailwindcss": "4.1.14" } }, "sha512-hpz+8vFk3Ic2xssIA3e01R6jkmsAhvkQdXlEbRTk6S10xDAtiQiM3FyvZVGsucefq764euO/b8WUW9ysLdThHw=="],
 
-    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.13", "", { "dependencies": { "detect-libc": "^2.0.4", "tar": "^7.4.3" }, "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.13", "@tailwindcss/oxide-darwin-arm64": "4.1.13", "@tailwindcss/oxide-darwin-x64": "4.1.13", "@tailwindcss/oxide-freebsd-x64": "4.1.13", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.13", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.13", "@tailwindcss/oxide-linux-arm64-musl": "4.1.13", "@tailwindcss/oxide-linux-x64-gnu": "4.1.13", "@tailwindcss/oxide-linux-x64-musl": "4.1.13", "@tailwindcss/oxide-wasm32-wasi": "4.1.13", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.13", "@tailwindcss/oxide-win32-x64-msvc": "4.1.13" } }, "sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA=="],
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.14", "", { "dependencies": { "detect-libc": "^2.0.4", "tar": "^7.5.1" }, "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.14", "@tailwindcss/oxide-darwin-arm64": "4.1.14", "@tailwindcss/oxide-darwin-x64": "4.1.14", "@tailwindcss/oxide-freebsd-x64": "4.1.14", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.14", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.14", "@tailwindcss/oxide-linux-arm64-musl": "4.1.14", "@tailwindcss/oxide-linux-x64-gnu": "4.1.14", "@tailwindcss/oxide-linux-x64-musl": "4.1.14", "@tailwindcss/oxide-wasm32-wasi": "4.1.14", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.14", "@tailwindcss/oxide-win32-x64-msvc": "4.1.14" } }, "sha512-23yx+VUbBwCg2x5XWdB8+1lkPajzLmALEfMb51zZUBYaYVPDQvBSD/WYDqiVyBIo2BZFa3yw1Rpy3G2Jp+K0dw=="],
 
-    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.1.13", "", { "os": "android", "cpu": "arm64" }, "sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew=="],
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.1.14", "", { "os": "android", "cpu": "arm64" }, "sha512-a94ifZrGwMvbdeAxWoSuGcIl6/DOP5cdxagid7xJv6bwFp3oebp7y2ImYsnZBMTwjn5Ev5xESvS3FFYUGgPODQ=="],
 
-    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.1.13", "", { "os": "darwin", "cpu": "arm64" }, "sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ=="],
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.1.14", "", { "os": "darwin", "cpu": "arm64" }, "sha512-HkFP/CqfSh09xCnrPJA7jud7hij5ahKyWomrC3oiO2U9i0UjP17o9pJbxUN0IJ471GTQQmzwhp0DEcpbp4MZTA=="],
 
-    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.1.13", "", { "os": "darwin", "cpu": "x64" }, "sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw=="],
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.1.14", "", { "os": "darwin", "cpu": "x64" }, "sha512-eVNaWmCgdLf5iv6Qd3s7JI5SEFBFRtfm6W0mphJYXgvnDEAZ5sZzqmI06bK6xo0IErDHdTA5/t7d4eTfWbWOFw=="],
 
-    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.1.13", "", { "os": "freebsd", "cpu": "x64" }, "sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ=="],
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.1.14", "", { "os": "freebsd", "cpu": "x64" }, "sha512-QWLoRXNikEuqtNb0dhQN6wsSVVjX6dmUFzuuiL09ZeXju25dsei2uIPl71y2Ic6QbNBsB4scwBoFnlBfabHkEw=="],
 
-    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.1.13", "", { "os": "linux", "cpu": "arm" }, "sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw=="],
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.1.14", "", { "os": "linux", "cpu": "arm" }, "sha512-VB4gjQni9+F0VCASU+L8zSIyjrLLsy03sjcR3bM0V2g4SNamo0FakZFKyUQ96ZVwGK4CaJsc9zd/obQy74o0Fw=="],
 
-    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.1.13", "", { "os": "linux", "cpu": "arm64" }, "sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ=="],
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.1.14", "", { "os": "linux", "cpu": "arm64" }, "sha512-qaEy0dIZ6d9vyLnmeg24yzA8XuEAD9WjpM5nIM1sUgQ/Zv7cVkharPDQcmm/t/TvXoKo/0knI3me3AGfdx6w1w=="],
 
-    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.1.13", "", { "os": "linux", "cpu": "arm64" }, "sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg=="],
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.1.14", "", { "os": "linux", "cpu": "arm64" }, "sha512-ISZjT44s59O8xKsPEIesiIydMG/sCXoMBCqsphDm/WcbnuWLxxb+GcvSIIA5NjUw6F8Tex7s5/LM2yDy8RqYBQ=="],
 
-    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.1.13", "", { "os": "linux", "cpu": "x64" }, "sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ=="],
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.1.14", "", { "os": "linux", "cpu": "x64" }, "sha512-02c6JhLPJj10L2caH4U0zF8Hji4dOeahmuMl23stk0MU1wfd1OraE7rOloidSF8W5JTHkFdVo/O7uRUJJnUAJg=="],
 
-    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.1.13", "", { "os": "linux", "cpu": "x64" }, "sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ=="],
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.1.14", "", { "os": "linux", "cpu": "x64" }, "sha512-TNGeLiN1XS66kQhxHG/7wMeQDOoL0S33x9BgmydbrWAb9Qw0KYdd8o1ifx4HOGDWhVmJ+Ul+JQ7lyknQFilO3Q=="],
 
-    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.1.13", "", { "dependencies": { "@emnapi/core": "^1.4.5", "@emnapi/runtime": "^1.4.5", "@emnapi/wasi-threads": "^1.0.4", "@napi-rs/wasm-runtime": "^0.2.12", "@tybys/wasm-util": "^0.10.0", "tslib": "^2.8.0" }, "cpu": "none" }, "sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA=="],
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.1.14", "", { "dependencies": { "@emnapi/core": "^1.5.0", "@emnapi/runtime": "^1.5.0", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.0.5", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.4.0" }, "cpu": "none" }, "sha512-uZYAsaW/jS/IYkd6EWPJKW/NlPNSkWkBlaeVBi/WsFQNP05/bzkebUL8FH1pdsqx4f2fH/bWFcUABOM9nfiJkQ=="],
 
-    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.1.13", "", { "os": "win32", "cpu": "arm64" }, "sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg=="],
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.1.14", "", { "os": "win32", "cpu": "arm64" }, "sha512-Az0RnnkcvRqsuoLH2Z4n3JfAef0wElgzHD5Aky/e+0tBUxUhIeIqFBTMNQvmMRSP15fWwmvjBxZ3Q8RhsDnxAA=="],
 
-    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.13", "", { "os": "win32", "cpu": "x64" }, "sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw=="],
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.14", "", { "os": "win32", "cpu": "x64" }, "sha512-ttblVGHgf68kEE4om1n/n44I0yGPkCPbLsqzjvybhpwa6mKKtgFfAzy6btc3HRmuW7nHe0OOrSeNP9sQmmH9XA=="],
 
-    "@tailwindcss/vite": ["@tailwindcss/vite@4.1.13", "", { "dependencies": { "@tailwindcss/node": "4.1.13", "@tailwindcss/oxide": "4.1.13", "tailwindcss": "4.1.13" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-0PmqLQ010N58SbMTJ7BVJ4I2xopiQn/5i6nlb4JmxzQf8zcS5+m2Cv6tqh+sfDwtIdjoEnOvwsGQ1hkUi8QEHQ=="],
+    "@tailwindcss/vite": ["@tailwindcss/vite@4.1.14", "", { "dependencies": { "@tailwindcss/node": "4.1.14", "@tailwindcss/oxide": "4.1.14", "tailwindcss": "4.1.14" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-BoFUoU0XqgCUS1UXWhmDJroKKhNXeDzD7/XwabjkDIAbMnc4ULn5e2FuEuBbhZ6ENZoSYzKlzvZ44Yr6EUDUSA=="],
 
     "@tanstack/query-core": ["@tanstack/query-core@5.90.2", "", {}, "sha512-k/TcR3YalnzibscALLwxeiLUub6jN5EDLwKDiO7q5f4ICEoptJ+n9+7vcEFy5/x/i6Q+Lb/tXrsKCggf5uQJXQ=="],
 
@@ -386,7 +386,7 @@
 
     "@types/bcrypt": ["@types/bcrypt@6.0.0", "", { "dependencies": { "@types/node": "*" } }, "sha512-/oJGukuH3D2+D+3H4JWLaAsJ/ji86dhRidzZ/Od7H/i8g+aCmvkeCc6Ni/f9uxGLSQVCRZkX2/lqEFG2BvWtlQ=="],
 
-    "@types/bun": ["@types/bun@1.2.22", "", { "dependencies": { "bun-types": "1.2.22" } }, "sha512-5A/KrKos2ZcN0c6ljRSOa1fYIyCKhZfIVYeuyb4snnvomnpFqC0tTsEkdqNxbAgExV384OETQ//WAjl3XbYqQA=="],
+    "@types/bun": ["@types/bun@1.2.23", "", { "dependencies": { "bun-types": "1.2.23" } }, "sha512-le8ueOY5b6VKYf19xT3McVbXqLqmxzPXHsQT/q9JHgikJ2X22wyTW3g3ohz2ZMnp7dod6aduIiq8A14Xyimm0A=="],
 
     "@types/cacheable-request": ["@types/cacheable-request@6.0.3", "", { "dependencies": { "@types/http-cache-semantics": "*", "@types/keyv": "^3.1.4", "@types/node": "*", "@types/responselike": "^1.0.0" } }, "sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw=="],
 
@@ -414,7 +414,7 @@
 
     "@types/prop-types": ["@types/prop-types@15.7.15", "", {}, "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw=="],
 
-    "@types/react": ["@types/react@18.3.24", "", { "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" } }, "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A=="],
+    "@types/react": ["@types/react@18.3.26", "", { "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" } }, "sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA=="],
 
     "@types/react-dom": ["@types/react-dom@18.3.7", "", { "peerDependencies": { "@types/react": "^18.0.0" } }, "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ=="],
 
@@ -526,7 +526,7 @@
 
     "builder-util-runtime": ["builder-util-runtime@9.2.4", "", { "dependencies": { "debug": "^4.3.4", "sax": "^1.2.4" } }, "sha512-upp+biKpN/XZMLim7aguUyW8s0FUpDvOtK6sbanMFDAMBzpHDqdhgVYm6zc9HJ6nWo7u2Lxk60i2M6Jd3aiNrA=="],
 
-    "bun-types": ["bun-types@1.2.22", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-hwaAu8tct/Zn6Zft4U9BsZcXkYomzpHJX28ofvx7k0Zz2HNz54n1n+tDgxoWFGB4PcFvJXJQloPhaV2eP3Q6EA=="],
+    "bun-types": ["bun-types@1.2.23", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-R9f0hKAZXgFU3mlrA0YpE/fiDvwV0FT9rORApt2aQVWSuJDzZOyB5QLc0N/4HF57CS8IXJ6+L5E4W1bW6NS2Aw=="],
 
     "cacheable-lookup": ["cacheable-lookup@5.0.4", "", {}, "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA=="],
 
@@ -692,7 +692,7 @@
 
     "eslint-plugin-react-hooks": ["eslint-plugin-react-hooks@4.6.2", "", { "peerDependencies": { "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0" } }, "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ=="],
 
-    "eslint-plugin-react-refresh": ["eslint-plugin-react-refresh@0.4.22", "", { "peerDependencies": { "eslint": ">=8.40" } }, "sha512-atkAG6QaJMGoTLc4MDAP+rqZcfwQuTIh2IqHWFLy2TEjxr0MOK+5BSG4RzL2564AAPpZkDRsZXAUz68kjnU6Ug=="],
+    "eslint-plugin-react-refresh": ["eslint-plugin-react-refresh@0.4.23", "", { "peerDependencies": { "eslint": ">=8.40" } }, "sha512-G4j+rv0NmbIR45kni5xJOrYvCtyD3/7LjpVH8MPPcudXDcNu8gv+4ATTDXTtbRR8rTCM5HxECvCSsRmxKnWDsA=="],
 
     "eslint-scope": ["eslint-scope@7.2.2", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg=="],
 
@@ -1238,7 +1238,7 @@
 
     "tailwind-merge": ["tailwind-merge@3.3.1", "", {}, "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g=="],
 
-    "tailwindcss": ["tailwindcss@4.1.13", "", {}, "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w=="],
+    "tailwindcss": ["tailwindcss@4.1.14", "", {}, "sha512-b7pCxjGO98LnxVkKjaZSDeNuljC4ueKUddjENJOADtubtdo8llTaJy7HwBMeLNSSo2N5QIAgklslK1+Ir8r6CA=="],
 
     "tapable": ["tapable@2.2.3", "", {}, "sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg=="],
 
@@ -1272,7 +1272,7 @@
 
     "type-fest": ["type-fest@0.20.2", "", {}, "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="],
 
-    "typescript": ["typescript@5.9.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A=="],
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
 
     "undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
 
@@ -1386,12 +1386,14 @@
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.1.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ=="],
 
-    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@0.2.12", "", { "dependencies": { "@emnapi/core": "^1.4.3", "@emnapi/runtime": "^1.4.3", "@tybys/wasm-util": "^0.10.0" }, "bundled": true }, "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ=="],
+    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.0.6", "", { "dependencies": { "@emnapi/core": "^1.5.0", "@emnapi/runtime": "^1.5.0", "@tybys/wasm-util": "^0.10.1" }, "bundled": true }, "sha512-DXj75ewm11LIWUk198QSKUTxjyRjsBwk09MuMk5DGK+GDUtyPhhEHOGP/Xwwj3DjQXXkivoBirmOnKrLfc0+9g=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],
 
     "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "@types/react-syntax-highlighter/@types/react": ["@types/react@18.3.24", "", { "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" } }, "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A=="],
+
     "@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
 
     "app-builder-lib/minimatch": ["minimatch@5.1.6", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g=="],
@@ -1402,6 +1404,8 @@
 
     "clone-response/mimic-response": ["mimic-response@1.0.1", "", {}, "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="],
 
+    "config-file-ts/typescript": ["typescript@5.9.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A=="],
+
     "decode-named-character-reference/character-entities": ["character-entities@2.0.2", "", {}, "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ=="],
 
     "engine.io-client/debug": ["debug@4.3.7", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ=="],

concord-client/package.json

@@ -22,7 +22,7 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@tailwindcss/vite": "^4.1.13",
+    "@tailwindcss/vite": "^4.1.14",
     "@tanstack/react-query": "^5.90.2",
     "@tanstack/react-query-devtools": "^5.90.2",
     "class-variance-authority": "^0.7.1",
@@ -30,37 +30,37 @@
     "date-fns": "^4.1.0",
     "lucide-react": "^0.544.0",
     "next-themes": "^0.4.6",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-markdown": "^10.1.0",
     "react-router": "^7.9.3",
     "react-syntax-highlighter": "^15.6.6",
     "socket.io-client": "^4.8.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.13",
+    "tailwindcss": "^4.1.14",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@types/bcrypt": "^6.0.0",
-    "@types/bun": "^1.2.22",
+    "@types/bun": "^1.2.23",
-    "@types/react": "^18.2.64",
+    "@types/react": "^18.3.26",
-    "@types/react-dom": "^18.2.21",
+    "@types/react-dom": "^18.3.7",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/socket.io-client": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.7.0",
-    "electron": "^30.0.1",
+    "electron": "^30.5.1",
     "electron-builder": "^24.13.3",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-react-refresh": "^0.4.23",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5.2.2",
+    "typescript": "^5.9.3",
-    "vite": "^5.1.6",
+    "vite": "^5.4.20",
-    "vite-plugin-electron": "^0.28.6",
+    "vite-plugin-electron": "^0.28.8",
-    "vite-plugin-electron-renderer": "^0.14.5"
+    "vite-plugin-electron-renderer": "^0.14.6"
   },
   "main": "dist-electron/main.js"
 }

concord-client/src/components/channel/ChannelItem.tsx

@@ -38,11 +38,6 @@ const ChannelItem: React.FC<ChannelItemProps> = ({ channel }) => {
       if (isConnectedToThisChannel) {
         leaveChannel();
       } else if (currentUser && token) {
-        console.log({
-          channelId: channel.id,
-          currentUser: currentUser.id,
-          token: token,
-        });
         joinChannel(channel.id, currentUser.id, token);
       }
     }
@@ -52,7 +47,7 @@ const ChannelItem: React.FC<ChannelItemProps> = ({ channel }) => {
   const connectedUserIds = Array.from(remoteStreams.keys());
 
   return (
-    <div>
+    <div className={`${isActive ?? "visible"}`}>
       <button
         onClick={handleChannelClick}
         className={`w-full flex items-center p-1.5 rounded-md text-left transition-colors ${

concord-client/src/components/channel/ChannelList.tsx

@@ -1,13 +1,6 @@
 import React, { useState } from "react";
-import { ChevronDown, ChevronRight, Plus, Edit } from "lucide-react";
+import { ChevronDown, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import { CategoryWithChannels } from "@/types/api";
 import ChannelItem from "@/components/channel/ChannelItem";
 
@@ -23,48 +16,22 @@ const CategoryHeader: React.FC<CategoryHeaderProps> = ({
   onToggle,
 }) => {
   return (
-    <DropdownMenu>
+    <Button
-      <DropdownMenuTrigger asChild>
+      variant="ghost"
-        <Button
+      className="w-full justify-between p-4 h-6 text-md text-concord-primary font-semibold interactive-hover uppercase tracking-wide group"
-          variant="ghost"
+      onClick={() => {
-          className="w-full justify-between px-1 py-1 h-6 text-xs font-semibold text-gray-400 uppercase tracking-wide hover:text-gray-300 group"
+        onToggle();
-          onClick={(e) => {
+      }}
-            // Only toggle if not right-clicking (which opens dropdown)
+    >
-            if (e.button === 0) {
+      <div className="flex items-center">
-              onToggle();
+        {isExpanded ? (
-            }
+          <ChevronDown size={12} className="mr-1" />
-          }}
+        ) : (
-        >
+          <ChevronRight size={12} className="mr-1" />
-          <div className="flex items-center">
+        )}
-            {isExpanded ? (
+        <span className="truncate">{category.name}</span>
-              <ChevronDown size={12} className="mr-1" />
+      </div>
-            ) : (
+    </Button>
-              <ChevronRight size={12} className="mr-1" />
-            )}
-            <span className="truncate">{category.name}</span>
-          </div>
-          <Plus
-            size={12}
-            className="opacity-0 group-hover:opacity-100 transition-opacity"
-          />
-        </Button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent align="start">
-        <DropdownMenuItem>
-          <Plus size={14} className="mr-2" />
-          Create Channel
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <Edit size={14} className="mr-2" />
-          Edit Category
-        </DropdownMenuItem>
-        <DropdownMenuItem className="text-red-400 focus:text-red-400">
-          Delete Category
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
   );
 };
 
@@ -114,16 +81,17 @@ const ChannelList: React.FC<ChannelListProps> = ({ categories }) => {
                 onToggle={() => toggleCategory(category.id)}
               />
 
-              {/* Channels */}
+              <div
-              {isExpanded && (
+                className={`ml-2 space-y-0.5 transition-all duration-300 ease-in-out overflow-hidden ${
-                <div className="ml-2 space-y-0.5">
+                  isExpanded ? "max-h-screen opacity-100" : "max-h-0 opacity-0"
-                  {category.channels
+                }`}
-                    .sort((a, b) => a.position - b.position)
+              >
-                    .map((channel) => (
+                {category.channels
-                      <ChannelItem key={channel.id} channel={channel} />
+                  .sort((a, b) => a.position - b.position)
-                    ))}
+                  .map((channel) => (
-                </div>
+                    <ChannelItem key={channel.id} channel={channel} />
-              )}
+                  ))}
+              </div>
             </div>
           );
         })}

concord-client/src/components/common/ErrorBoundary.tsx

@@ -2,6 +2,7 @@ import { Component, ErrorInfo, ReactNode } from "react";
 import { AlertTriangle, RotateCcw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Card } from "../ui/card";
 
 interface Props {
   children: ReactNode;
@@ -48,8 +49,8 @@ class ErrorBoundary extends Component<Props, State> {
       }
 
       return (
-        <div className="min-h-screen bg-gray-900 flex items-center justify-center p-4">
+        <div className="min-h-screen bg-concord-primary flex items-center justify-center p-4">
-          <div className="max-w-md w-full space-y-4">
+          <Card className="max-w-md bg-concord-secondary border-concord w-full space-y-4">
             <Alert className="border-red-500 bg-red-950/50">
               <AlertTriangle className="h-4 w-4 text-red-500" />
               <AlertTitle className="text-red-400">
@@ -82,7 +83,7 @@ class ErrorBoundary extends Component<Props, State> {
 
             {/* Error details in development */}
             {process.env.NODE_ENV === "development" && this.state.error && (
-              <details className="mt-4 p-3 bg-gray-800 rounded-lg text-sm">
+              <details className="mt-4 p-3 bg-concord-secondary rounded-lg text-sm">
                 <summary className="cursor-pointer text-red-400 font-medium mb-2">
                   Error Details (Development)
                 </summary>
@@ -107,7 +108,7 @@ class ErrorBoundary extends Component<Props, State> {
                 </div>
               </details>
             )}
-          </div>
+          </Card>
         </div>
       );
     }

concord-client/src/components/layout/AppLayout.tsx

@@ -34,12 +34,12 @@ const AppLayout: React.FC = () => {
   }
 
   return (
-    <div className="flex h-screen overflow-hidden bg-concord-primary text-concord-primary">
+    <div className="flex h-screen overflow-y-auto bg-concord-primary text-concord-primary">
       {/* This component handles playing audio from remote users */}
       <VoiceConnectionManager />
 
       {/* Server List Sidebar - Always visible on desktop, overlay on mobile */}
-      <div className="relative w-[72px] sidebar-primary flex-shrink-0">
+      <div className="relative min-w-1/16 sidebar-primary flex-shrink-0">
         <ServerSidebar />
       </div>
       {/* Channel Sidebar - Only shown when in a server context and not collapsed */}
@@ -68,7 +68,7 @@ const AppLayout: React.FC = () => {
       </div>
       {/* Member List - Only shown when in a channel and member list is enabled */}
       {showMemberList && shouldShowChannelSidebar && (
-        <div className="flex-0 sidebar-secondary order-l border-sidebar">
+        <div className="flex-0 min-w-1/7 sidebar-secondary order-l border-sidebar">
           <MemberList />
         </div>
       )}

concord-client/src/components/layout/ChannelSidebar.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { useParams } from "react-router";
-import { ChevronDown, Plus, Users } from "lucide-react";
+import { ChevronDown, Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useInstanceDetails } from "@/hooks/useServers";
 import { useUiStore } from "@/stores/uiStore";
 import ChannelList from "@/components/channel/ChannelList";
-import { CreateCategoryModal, CreateChannelModal } from "../server/ServerIcon";
+import { CreateChannelModal } from "@/components/modals/CreateChannelModal";
 
 const ChannelSidebar: React.FC = () => {
   const { instanceId } = useParams();
@@ -14,8 +14,8 @@ const ChannelSidebar: React.FC = () => {
     useInstanceDetails(instanceId);
   const categories = instance?.categories;
   const {
-    toggleMemberList,
+    showCreateChannel,
-    showMemberList,
+    closeCreateChannel,
     openCreateChannel,
     openServerSettings,
   } = useUiStore();
@@ -45,11 +45,11 @@ const ChannelSidebar: React.FC = () => {
     <div className="sidebar-secondary flex-1">
       <ScrollArea className="">
         {/* Server Header */}
-        <div className="flex items-center justify-between border-b border-concord-primary shadow-sm px-4 py-3">
+        <div className="flex items-center justify-between border-b border-concord-primary shadow-sm px-6 py-4">
           <div className="flex items-center space-x-2 flex-1 min-w-0">
             <Button
               variant="ghost"
-              className="flex items-center justify-between w-full h-8 font-semibold text-concord-primary hover:bg-concord-tertiary"
+              className="flex items-center justify-between w-full h-8 font-semibold text-concord-primary text-xl hover:bg-concord-tertiary"
               onClick={openServerSettings}
             >
               <span className="truncate">{instance.name}</span>
@@ -73,30 +73,25 @@ const ChannelSidebar: React.FC = () => {
 
         {/* Bottom Actions */}
         <div className="border-t border-sidebar px-2 py-2">
-          <div className="flex items-center justify-between">
+          <div className="flex items-center">
             <Button
               variant="ghost"
               size="sm"
-              className="interactive-hover"
+              className="justify-start interactive-hover flex-grow-1"
               onClick={openCreateChannel}
             >
               <Plus size={16} className="mr-1" />
               Add Channel
             </Button>
-
-            <Button
-              variant="ghost"
-              size="icon"
-              className={`h-8 w-8 ${showMemberList ? "text-interactive-active" : "interactive-hover"}`}
-              onClick={toggleMemberList}
-            >
-              <Users size={16} />
-            </Button>
           </div>
         </div>
       </ScrollArea>
-      <CreateChannelModal />
+      <CreateChannelModal
-      <CreateCategoryModal />
+        isOpen={showCreateChannel}
+        onClose={closeCreateChannel}
+        categories={categories}
+        instanceId={instance.id}
+      />
     </div>
   );
 };

concord-client/src/components/layout/MemberList.tsx

@@ -4,12 +4,10 @@ import { Crown, Shield, UserIcon } from "lucide-react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
-import { Role } from "@/types/database";
+import { Role, User } from "@/types/database";
 import { useInstanceMembers } from "@/hooks/useServers";
 import { useAuthStore } from "@/stores/authStore";
-import { User } from "@/types/database";
 
-// Status color utility
 const getStatusColor = (status: string) => {
   switch (status) {
     case "online":
@@ -27,23 +25,30 @@ interface MemberItemProps {
   member: User;
   instanceId: string;
   isOwner?: boolean;
-  currentUserRole: "member" | "mod" | "admin";
+  currentUserRolePriority: number;
 }
 
-// Get the user's role for this specific instance
+const getUserRoleForInstance = (roles: Role[], instanceId: string): string => {
-const getUserRoleForInstance = (roles: Role[], instanceId: string) => {
+  if (!instanceId) return "member";
-  return roles.find((r) => r.instanceId === instanceId)?.role || "member";
+  const roleEntry = roles.find((r) => r.instanceId === instanceId);
+  return roleEntry?.role || "member";
 };
 
-// Define role colors and priorities
 const getRoleInfo = (role: string) => {
-  switch (role) {
+  const lowerRole = role.toLowerCase();
+  switch (lowerRole) {
     case "admin":
       return { color: "#ff6b6b", priority: 3, name: "Admin" };
     case "mod":
       return { color: "#4ecdc4", priority: 2, name: "Moderator" };
-    default:
+    case "member":
       return { color: null, priority: 1, name: "Member" };
+    default:
+      return {
+        color: null,
+        priority: 0,
+        name: role.charAt(0).toUpperCase() + role.slice(1),
+      };
   }
 };
 
@@ -51,78 +56,99 @@ const MemberItem: React.FC<MemberItemProps> = ({
   member,
   instanceId,
   isOwner = false,
+  currentUserRolePriority,
 }) => {
-  const userRole = getUserRoleForInstance(member.roles, instanceId || "");
+  // Determine the role for this specific instance
+  const userRole = getUserRoleForInstance(member.roles, instanceId);
   const roleInfo = getRoleInfo(userRole);
+  const memberRolePriority = roleInfo.priority;
+
+  // Consider if this member is a global admin as well
+  const isGlobalAdmin = member.admin || false;
+  let effectiveRoleInfo = roleInfo;
+  let effectiveMemberRolePriority = memberRolePriority;
+
+  if (isGlobalAdmin && roleInfo.priority < 3) {
+    effectiveRoleInfo = getRoleInfo("admin");
+    effectiveMemberRolePriority = 3;
+  }
 
   return (
-    <>
+    <Button
-      <Button
+      variant="ghost"
-        variant="ghost"
+      className="w-full justify-start p-2 h-auto hover:bg-concord-tertiary/50"
-        className="w-full justify-start p-2 h-auto hover:bg-concord-tertiary/50"
+      // disable if the current member is an admin
-        disabled={member.admin}
+      disabled={currentUserRolePriority < 3 || effectiveMemberRolePriority >= 3}
-      >
+    >
-        <div className="flex items-center gap-3 w-full">
+      <div className="flex items-center gap-3 w-full">
-          <div className="relative">
+        <div className="relative">
-            <Avatar className="h-8 w-8">
+          <Avatar className="h-8 w-8">
-              <AvatarImage
+            <AvatarImage
-                src={member.picture || undefined}
+              src={member.picture || undefined}
-                alt={member.username}
+              alt={member.username}
-              />
-              <AvatarFallback className="text-xs bg-primary text-primary-foreground">
-                {member.username.slice(0, 2).toUpperCase()}
-              </AvatarFallback>
-            </Avatar>
-            {/* Status indicator */}
-            <div
-              className={`absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-sidebar ${getStatusColor(member.status)}`}
             />
-          </div>
+            <AvatarFallback className="text-xs bg-primary text-primary-foreground">
-
+              {member.username?.slice(0, 2).toUpperCase() || "???"}
-          <div className="flex-1 min-w-0 text-left">
+            </AvatarFallback>
-            <div className="flex items-center gap-1">
+          </Avatar>
-              {isOwner && (
+          {/* Status indicator */}
-                <Crown size={12} className="text-yellow-500 flex-shrink-0" />
+          <div
-              )}
+            className={`absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-sidebar ${getStatusColor(member.status)}`}
-              {!isOwner && userRole !== "member" && (
+          />
-                <Shield
-                  size={12}
-                  className="flex-shrink-0"
-                  style={{ color: roleInfo.color || "var(--background)" }}
-                />
-              )}
-              <span
-                className="text-sm font-medium truncate"
-                style={{ color: roleInfo.color || "var(--color-text-primary)" }}
-              >
-                {member.nickname || member.username}
-              </span>
-            </div>
-            {member.bio && (
-              <div className="text-xs text-concord-secondary truncate">
-                {member.bio}
-              </div>
-            )}
-          </div>
         </div>
-      </Button>
+
-    </>
+        <div className="flex-1 min-w-0 text-left">
+          <div className="flex items-center gap-1">
+            {isOwner && (
+              <Crown size={12} className="text-yellow-500 flex-shrink-0" />
+            )}
+            {/* Display Shield for Admins and Mods, not for Members */}
+            {!isOwner && effectiveMemberRolePriority > 1 && (
+              <Shield
+                size={12}
+                className="flex-shrink-0"
+                style={{
+                  color: effectiveRoleInfo.color || "var(--background)",
+                }}
+              />
+            )}
+            <span
+              className="text-sm font-medium truncate"
+              style={{
+                color: effectiveRoleInfo.color || "var(--color-text-primary)",
+              }}
+            >
+              {member.nickname || member.username}
+            </span>
+          </div>
+          {member.bio && (
+            <div className="text-xs text-concord-secondary truncate">
+              {member.bio}
+            </div>
+          )}
+        </div>
+      </div>
+    </Button>
   );
 };
 
 const MemberList: React.FC = () => {
-  const { instanceId } = useParams();
+  const { instanceId } = useParams<{ instanceId: string }>();
   const { data: members, isLoading } = useInstanceMembers(instanceId);
   const { user: currentUser } = useAuthStore();
 
-  const currentUserRole = React.useMemo(() => {
+  const currentUserRoleInfo = React.useMemo(() => {
-    if (!currentUser || !instanceId) return "member";
+    if (!currentUser || !instanceId) {
-    if (currentUser.admin) return "admin";
+      return { role: "member", priority: 1, name: "Member", color: null };
+    }
 
-    const userRole = currentUser.roles.find(
+    // If the current user is a global admin, they are effectively an admin of any instance.
-      (role) => role.instanceId === instanceId,
+    if (currentUser.admin) {
-    );
+      return { role: "admin", priority: 3, name: "Admin", color: "#ff6b6b" };
-    return userRole?.role || "member";
+    }
+
+    const role = getUserRoleForInstance(currentUser.roles, instanceId);
+    return { ...getRoleInfo(role), role: role };
   }, [currentUser, instanceId]);
 
   if (!instanceId) {
@@ -140,17 +166,26 @@ const MemberList: React.FC = () => {
   if (!members || members.length === 0) {
     return (
       <div className="flex items-center justify-center h-full">
-        <div className="text-concord-secondary text-sm">No members</div>
+        <div className="text-concord-secondary text-sm">No members found</div>
       </div>
     );
   }
 
-  // Group members by role
+  // Group members by their role for the current instance.
   const groupedMembers = members.reduce(
     (acc, member) => {
-      const userRole =
+      // Determine the effective role for this instance.
-        member.roles.find((r) => r.instanceId === instanceId)?.role || "member";
+      let effectiveRoleName = getUserRoleForInstance(
-      const roleInfo = getRoleInfo(userRole);
+        member.roles as Role[],
+        instanceId,
+      );
+
+      // Global admin is instance admin
+      if (member.admin && effectiveRoleName !== "admin") {
+        effectiveRoleName = "admin";
+      }
+
+      const roleInfo = getRoleInfo(effectiveRoleName);
 
       if (!acc[roleInfo.name]) {
         acc[roleInfo.name] = [];
@@ -161,53 +196,66 @@ const MemberList: React.FC = () => {
     {} as Record<string, User[]>,
   );
 
-  // Sort role groups by priority (admin > mod > member)
+  // Get all unique role names present and sort them by priority.
-  const sortedRoleGroups = Object.entries(groupedMembers).sort(
+  const sortedRoleNames = Object.keys(groupedMembers).sort(
-    ([roleNameA], [roleNameB]) => {
+    (roleNameA, roleNameB) => {
-      const priorityA = getRoleInfo(roleNameA.toLowerCase())?.priority || 1;
+      const priorityA = getRoleInfo(roleNameA).priority;
-      const priorityB = getRoleInfo(roleNameB.toLowerCase())?.priority || 1;
+      const priorityB = getRoleInfo(roleNameB).priority;
       return priorityB - priorityA;
     },
   );
 
   return (
-    <div className="flex flex-col flex-1 border-l border-concord-primary h-full bg-concord-secondary">
+    <div className="flex flex-col flex-grow-1 w-full border-l border-concord h-full sidebar-secondary">
       {/* Header */}
-      <div className="px-4 py-3 border-b border-concord-primary flex items-center justify-between">
+      <div className="px-6 py-4 pb-5 border-b border-concord flex items-center justify-between">
-        <UserIcon size={20} className="text-concord-primary h-8" />
+        <div className="flex items-center space-x-2">
-        <p className="text-sm font-semibold text-concord-secondary tracking-wide">
+          <UserIcon size={20} className="h-5 w-5 text-concord-secondary" />
-          {members.length} Members
+          <p className="font-semibold text-xl text-concord-primary tracking-wide">
+            Members
+          </p>
+        </div>
+        <p className="font-medium text-concord-secondary tracking-wide">
+          {members.length}
         </p>
       </div>
 
       {/* Member List */}
       <ScrollArea className="flex-1">
         <div className="py-2">
-          {sortedRoleGroups.map(([roleName, roleMembers]) => (
+          {sortedRoleNames.map((roleName) => {
-            <div key={roleName} className="mb-4">
+            const roleMembers = groupedMembers[roleName];
-              {/* Role Header */}
+            // Sort members within each role group alphabetically by username.
-              <div className="px-4 py-1">
+            const sortedMembers = roleMembers.sort((a, b) =>
-                <h4 className="text-xs font-semibold text-concord-secondary uppercase tracking-wide">
+              (a.nickname || a.username).localeCompare(
-                  {roleName} — {roleMembers.length}
+                b.nickname || b.username,
-                </h4>
+              ),
-              </div>
+            );
 
-              {/* Role Members */}
+            return (
-              <div className="space-y-1">
+              <div key={roleName} className="mb-4">
-                {roleMembers
+                {/* Role Header */}
-                  .sort((a, b) => a.username.localeCompare(b.username))
+                <div className="px-4 py-1">
-                  .map((member) => (
+                  <h4 className="text-xs font-semibold text-concord-secondary uppercase tracking-wide">
+                    {roleName} — {roleMembers.length}
+                  </h4>
+                </div>
+
+                {/* Role Members */}
+                <div className="space-y-1">
+                  {sortedMembers.map((member) => (
                     <MemberItem
                       key={member.id}
                       member={member}
                       instanceId={instanceId}
-                      currentUserRole={currentUserRole}
+                      currentUserRolePriority={currentUserRoleInfo.priority}
                       isOwner={false}
                     />
                   ))}
+                </div>
               </div>
-            </div>
+            );
-          ))}
+          })}
         </div>
       </ScrollArea>
     </div>

concord-client/src/components/layout/ServerSidebar.tsx

@@ -51,31 +51,29 @@ const ServerSidebar: React.FC = () => {
 
   return (
     <TooltipProvider>
-      <div className="sidebar-primary flex flex-col items-center h-full py-2 space-y-2">
+      <div className="sidebar-primary flex flex-col items-center h-full space-y-2 w-full">
         {/* Home/DM Button */}
-        <Tooltip>
+        <Tooltip key={"home-server"}>
           <TooltipTrigger asChild>
             <Button
               variant="ghost"
               size="icon"
-              className={`w-12 h-12 ml-0 rounded-2xl hover:rounded-xl transition-all duration-200 ${
+              className={`w-12 h-12 mt-2 transition-all duration-200 ${
                 !instanceId || instanceId === "@me"
-                  ? "bg-primary text-primary-foreground rounded-xl"
+                  ? "rounded-xl border-primary bg-primary/10 border-2"
-                  : "hover:bg-primary/10"
+                  : "rounded-2xl hover:rounded-xl border hover:border-primary/50"
               }`}
               onClick={handleHomeClick}
             >
-              <Home size={24} />
+              <Home size={4} />
             </Button>
           </TooltipTrigger>
           <TooltipContent side="right">
             <p>{isGlobalAdmin(currentUser) ? "Admin Dashboard" : "Home"}</p>
           </TooltipContent>
         </Tooltip>
-
         {/* Separator */}
-        <div className="w-8 h-0.5 bg-border rounded-full" />
+        <div className="w-full h-0.5 bg-border rounded-full" />{" "}
-
         {/* Server List */}
         <div className="flex-1 flex flex-col overflow-y-auto scrollbar-thin scrollbar-thumb-border space-y-2">
           {isLoading ? (
@@ -116,26 +114,25 @@ const ServerSidebar: React.FC = () => {
               )}
             </div>
           ) : null}
+          {/* Add Server Button - Only show if user can create servers */}
+          {canCreateServer && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="w-12 mb-4 h-12 rounded-2xl hover:rounded-xl bg-concord-secondary hover:bg-green-600 text-green-500 hover:text-white transition-all duration-200"
+                  onClick={handleCreateServer}
+                >
+                  <Plus size={24} />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                <p>Add a Server</p>
+              </TooltipContent>
+            </Tooltip>
+          )}
         </div>
-
-        {/* Add Server Button - Only show if user can create servers */}
-        {canCreateServer && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="w-12 h-12 ml-3 rounded-2xl hover:rounded-xl bg-concord-secondary hover:bg-green-600 text-green-500 hover:text-white transition-all duration-200"
-                onClick={handleCreateServer}
-              >
-                <Plus size={24} />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right">
-              <p>Add a Server</p>
-            </TooltipContent>
-          </Tooltip>
-        )}
       </div>
     </TooltipProvider>
   );

concord-client/src/components/layout/UserPanel.tsx

@@ -8,18 +8,10 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 
 import { useAuthStore } from "@/stores/authStore";
-import { useUiStore } from "@/stores/uiStore";
-import { useLogout } from "@/hooks/useAuth";
 import { useVoiceStore } from "@/stores/voiceStore";
+import { useNavigate } from "react-router";
 
 // Status color utility
 const getStatusColor = (status: string) => {
@@ -35,70 +27,12 @@ const getStatusColor = (status: string) => {
   }
 };
 
-// User Status Dropdown Component
-interface UserStatusDropdownProps {
-  currentStatus: string;
-  onStatusChange: (status: string) => void;
-  children: React.ReactNode;
-}
-
-const UserStatusDropdown: React.FC<UserStatusDropdownProps> = ({
-  // currentStatus,
-  onStatusChange,
-  children,
-}) => {
-  const { mutate: logout } = useLogout();
-
-  const statusOptions = [
-    { value: "online", label: "Online", color: "bg-status-online" },
-    { value: "away", label: "Away", color: "bg-status-away" },
-    { value: "busy", label: "Do Not Disturb", color: "bg-status-busy" },
-    { value: "offline", label: "Invisible", color: "bg-status-offline" },
-  ];
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger className="checkchekchek" asChild>
-        {children}
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="center" className="w-48">
-        {statusOptions.map((status) => (
-          <DropdownMenuItem
-            key={status.value}
-            onClick={() => onStatusChange(status.value)}
-          >
-            <div className="flex items-center space-x-2">
-              <div className={`w-3 h-3 rounded-full ${status.color}`} />
-              <span>{status.label}</span>
-            </div>
-          </DropdownMenuItem>
-        ))}
-        <DropdownMenuSeparator />
-        <DropdownMenuItem
-          onClick={() => useUiStore.getState().openUserSettings()}
-        >
-          <Settings size={16} className="mr-2" />
-          User Settings
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem
-          onClick={() => logout()}
-          className="text-destructive focus:text-destructive"
-        >
-          Log Out
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
-
 // Voice Controls Component
 interface VoiceControlsProps {
   isMuted: boolean;
   isDeafened: boolean;
   onMuteToggle: () => void;
   onDeafenToggle: () => void;
-  onSettingsClick: () => void;
 }
 
 const VoiceControls: React.FC<VoiceControlsProps> = ({
@@ -106,7 +40,6 @@ const VoiceControls: React.FC<VoiceControlsProps> = ({
   isDeafened,
   onMuteToggle,
   onDeafenToggle,
-  onSettingsClick,
 }) => {
   return (
     <div className="flex items-center space-x-1">
@@ -146,21 +79,6 @@ const VoiceControls: React.FC<VoiceControlsProps> = ({
         </Tooltip>
 
         {/* Settings */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 interactive-hover"
-              onClick={onSettingsClick}
-            >
-              <Settings size={18} />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>User Settings</p>
-          </TooltipContent>
-        </Tooltip>
       </TooltipProvider>
     </div>
   );
@@ -207,40 +125,25 @@ const UserAvatar: React.FC<UserAvatarProps> = ({
   );
 };
 
-// Main UserPanel Component
 const UserPanel: React.FC = () => {
   const { user } = useAuthStore();
-  const { openUserSettings } = useUiStore();
+  const navigate = useNavigate();
 
   const { isConnected, isMuted, isDeafened, toggleMute, toggleDeafen } =
     useVoiceStore();
 
-  const handleStatusChange = (newStatus: string) => {
-    console.log("Status change to:", newStatus);
-  };
-
   return (
-    <div className="user-panel flex items-center p-2 bg-concord-tertiary border-t border-sidebar">
+    <div className="user-panel flex items-center p-3 bg-concord-tertiary border-t border-sidebar min-h-16 rounded-xl m-2">
-      {/* User Info with Dropdown */}
+      {/* User Info */}
-      <UserStatusDropdown
+      <UserAvatar user={user} size="md" />
-        currentStatus={user?.status as string}
+      <div className="ml-2 flex-1 min-w-0 text-left">
-        onStatusChange={handleStatusChange}
+        <div className="text-sm font-medium text-concord-primary truncate">
-      >
+          {user?.nickname || user?.username}
-        <Button
+        </div>
-          variant="ghost"
+        <div className="text-xs text-concord-secondary truncate capitalize">
-          className="flex-1 flex items-center h-auto p-1 rounded-md hover:bg-concord-secondary"
+          {user?.status}
-        >
+        </div>
-          <UserAvatar user={user} size="md" />
+      </div>
-          <div className="ml-2 flex-1 min-w-0 text-left">
-            <div className="text-sm font-medium text-concord-primary truncate">
-              {user?.nickname || user?.username}
-            </div>
-            <div className="text-xs text-concord-secondary truncate capitalize">
-              {user?.status}
-            </div>
-          </div>
-        </Button>
-      </UserStatusDropdown>
 
       {/* Voice Controls */}
       {isConnected && (
@@ -249,9 +152,26 @@ const UserPanel: React.FC = () => {
           isDeafened={isDeafened}
           onMuteToggle={toggleMute}
           onDeafenToggle={toggleDeafen}
-          onSettingsClick={openUserSettings}
         />
       )}
+
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 interactive-hover"
+              onClick={() => navigate("/settings")}
+            >
+              <Settings size={18} />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>User Settings</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     </div>
   );
 };

concord-client/src/components/message/Message.tsx

@@ -1,254 +0,0 @@
-import React, { useState } from "react";
-import { formatDistanceToNow } from "date-fns";
-import Avatar from "@/components/common/Avatar";
-import { Button } from "@/components/ui/button";
-import { Copy, Edit, Trash2, Reply, MoreHorizontal } from "lucide-react";
-import { Message, User } from "@/types/database";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-
-interface MessageProps {
-  message: Message;
-  user: any;
-  currentUser?: any;
-  isGrouped?: boolean | null;
-  onEdit?: (messageId: string) => void;
-  onDelete?: (messageId: string) => void;
-  onReply?: (messageId: string) => void;
-  replyTo?: Message | null;
-  replyToUser?: User | null;
-}
-
-const MessageComponent: React.FC<MessageProps> = ({
-  message,
-  user,
-  currentUser,
-  isGrouped = false,
-  onEdit,
-  onDelete,
-  onReply,
-}) => {
-  const [isHovered, setIsHovered] = useState(false);
-
-  const formatTimestamp = (timestamp: string) => {
-    return formatDistanceToNow(new Date(timestamp), { addSuffix: true });
-  };
-
-  const renderContent = (content: string) => {
-    // Simple code block detection
-    const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
-    const parts = [];
-    let lastIndex = 0;
-    let match;
-
-    while ((match = codeBlockRegex.exec(content)) !== null) {
-      // Add text before code block
-      if (match.index > lastIndex) {
-        parts.push(
-          <span key={lastIndex}>{content.slice(lastIndex, match.index)}</span>,
-        );
-      }
-
-      // Add code block
-      const language = match[1] || "text";
-      const code = match[2];
-      parts.push(
-        <div key={match.index} className="my-2">
-          <div className="bg-concord-tertiary rounded-md p-3 border border-border">
-            <div className="text-xs text-concord-secondary mb-2 font-mono">
-              {language}
-            </div>
-            <pre className="text-sm font-mono text-concord-primary overflow-x-auto">
-              <code>{code}</code>
-            </pre>
-          </div>
-        </div>,
-      );
-
-      lastIndex = codeBlockRegex.lastIndex;
-    }
-
-    // Add remaining text
-    if (lastIndex < content.length) {
-      parts.push(<span key={lastIndex}>{content.slice(lastIndex)}</span>);
-    }
-
-    return parts.length > 0 ? parts : content;
-  };
-
-  const isOwnMessage = currentUser?.id === message.userId;
-
-  return (
-    <div
-      className={`group relative px-4 py-2 hover:bg-concord-secondary/50 transition-colors ${
-        isGrouped ? "mt-0.5" : "mt-4"
-      }`}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <div className="flex gap-3">
-        {/* Avatar - only show if not grouped */}
-        <div className="w-10 flex-shrink-0">
-          {!isGrouped && <Avatar user={user} size="md" showStatus={true} />}
-        </div>
-
-        {/* Message content */}
-        <div className="flex-1 min-w-0">
-          {/* Header - only show if not grouped */}
-          {!isGrouped && (
-            <div className="flex items-baseline gap-2 mb-1">
-              <span className="font-semibold text-concord-primary">
-                {user.nickname || user.username}
-              </span>
-              <span className="text-xs text-concord-secondary">
-                {formatTimestamp(message.createdAt)}
-              </span>
-            </div>
-          )}
-
-          {/* Message content */}
-          <div className="text-concord-primary leading-relaxed">
-            {renderContent(message.content)}
-          </div>
-
-          {/* Reactions */}
-        </div>
-
-        {/* Message actions */}
-        {isHovered && (
-          <div className="absolute top-0 right-4 bg-concord-secondary border border-border rounded-md shadow-md flex">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-8 w-8 p-0 interactive-hover"
-              onClick={() => onReply?.(message.id)}
-            >
-              <Reply className="h-4 w-4" />
-            </Button>
-
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-8 w-8 p-0 interactive-hover"
-                >
-                  <MoreHorizontal className="h-4 w-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem
-                  onClick={() => navigator.clipboard.writeText(message.content)}
-                >
-                  <Copy className="h-4 w-4 mr-2" />
-                  Copy Text
-                </DropdownMenuItem>
-                {isOwnMessage && (
-                  <>
-                    <DropdownMenuItem onClick={() => onEdit?.(message.id)}>
-                      <Edit className="h-4 w-4 mr-2" />
-                      Edit Message
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem
-                      onClick={() => onDelete?.(message.id)}
-                      className="text-destructive focus:text-destructive"
-                    >
-                      <Trash2 className="h-4 w-4 mr-2" />
-                      Delete Message
-                    </DropdownMenuItem>
-                  </>
-                )}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-// Message Input Component
-interface MessageInputProps {
-  channelName?: string;
-  onSendMessage: (content: string) => void;
-  replyingTo?: Message;
-  onCancelReply?: () => void;
-}
-
-const MessageInput: React.FC<MessageInputProps> = ({
-  channelName,
-  onSendMessage,
-  replyingTo,
-  onCancelReply,
-}) => {
-  const [content, setContent] = useState("");
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (content.trim()) {
-      onSendMessage(content.trim());
-      setContent("");
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit(e);
-    }
-  };
-
-  return (
-    <div className="px-4 pb-4">
-      {replyingTo && (
-        <div className="mb-2 p-2 bg-concord-tertiary rounded-t-lg border border-b-0 border-border">
-          <div className="flex items-center justify-between">
-            <span className="text-xs text-concord-secondary">
-              Replying to {replyingTo.userId}
-            </span>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-auto p-1"
-              onClick={onCancelReply}
-            >
-              ×
-            </Button>
-          </div>
-          <div className="text-sm text-concord-primary truncate">
-            {replyingTo.content}
-          </div>
-        </div>
-      )}
-
-      <form onSubmit={handleSubmit}>
-        <div className="relative">
-          <textarea
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder={`Message #${channelName || "channel"}`}
-            className="w-full bg-concord-tertiary border border-border rounded-lg px-4 py-3 text-concord-primary placeholder-concord-muted resize-none focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
-            rows={1}
-            style={{
-              minHeight: "44px",
-              maxHeight: "200px",
-              resize: "none",
-            }}
-          />
-          <div className="absolute right-3 bottom-3 text-xs text-concord-secondary">
-            Press Enter to send
-          </div>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export { type MessageProps, MessageComponent, MessageInput };

concord-client/src/components/message/MessageActionsDropdown.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Copy, Reply, MoreHorizontal } from "lucide-react";
+import { Message } from "@/lib/api-client";
+
+interface MessageActionsModalProps {
+  message: Message;
+  // isOwnMessage?: boolean;
+  onReply?: (messageId: string) => void;
+}
+
+export const MessageActionsDropdown: React.FC<MessageActionsModalProps> = ({
+  message,
+  onReply,
+  // isOwnMessage,
+}) => {
+  const handleReply = () => {
+    onReply?.(message.id);
+  };
+
+  const handleCopyText = () => {
+    navigator.clipboard.writeText(message.text);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 p-0 data-[state=open]:bg-muted"
+        >
+          <MoreHorizontal className="h-4 w-4" />
+          <span className="sr-only">Open menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="center">
+        <DropdownMenuItem onSelect={handleReply}>
+          <Reply className="h-4 w-4 mr-2" />
+          <span>Reply</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={handleCopyText}>
+          <Copy className="h-4 w-4 mr-2" />
+          <span>Copy Text</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

concord-client/src/components/message/MessageComponent.tsx

@@ -0,0 +1,244 @@
+import { Copy, Reply, Pin } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import ReactMarkdown from "react-markdown";
+import { formatDistanceToNow, isValid, parseISO } from "date-fns";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import {
+  dark,
+  solarizedLight,
+} from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { useTheme } from "@/components/theme-provider";
+import { Message } from "@/lib/api-client";
+import { useState } from "react";
+
+// User type for message component
+interface MessageUser {
+  id: string;
+  username?: string;
+  nickname?: string | null;
+  picture?: string | null;
+}
+
+// Message Props interface
+interface MessageProps {
+  message: Message;
+  user: MessageUser;
+  replyTo?: Message;
+  replyToUser?: MessageUser;
+  onReply?: (messageId: string) => void;
+}
+
+export const MessageComponent: React.FC<MessageProps> = ({
+  message,
+  user,
+  replyTo,
+  replyToUser,
+  onReply,
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const formatTimestamp = (timestamp: string) => {
+    try {
+      // First try parsing as ISO string
+      let date = parseISO(timestamp);
+
+      // If that fails, try regular Date constructor
+      if (!isValid(date)) {
+        date = new Date(timestamp);
+      }
+
+      // Final check if date is valid
+      if (!isValid(date)) {
+        console.error("Invalid timestamp:", timestamp);
+        return "Invalid date";
+      }
+
+      return formatDistanceToNow(date, { addSuffix: true });
+    } catch (error) {
+      console.error("Error formatting timestamp:", timestamp, error);
+      return "Invalid date";
+    }
+  };
+  // const isOwnMessage = currentUser?.id === message.userId;
+  const { mode } = useTheme();
+
+  // Get username with fallback
+  const username = user.username || user.username || "Unknown User";
+  const displayName = user.nickname || user.nickname || username;
+
+  const isDeleted = message.deleted;
+
+  if (isDeleted) {
+    return (
+      <div className="px-4 py-2 opacity-50">
+        <div className="flex gap-3">
+          <div className="w-10 flex-shrink-0" />
+          <div className="flex-1 min-w-0">
+            <div className="text-sm text-concord-secondary italic border border-border rounded px-3 py-2 bg-concord-tertiary/50">
+              This message has been deleted
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div
+        className="group relative px-4 py-2 hover:bg-concord-secondary/50 transition-colors"
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <div className="flex gap-3">
+          {/* Avatar - always show */}
+          <div className="w-10 flex-shrink-0">
+            <Avatar className="h-10 w-10">
+              <AvatarImage src={user.picture || undefined} alt={username} />
+              <AvatarFallback className="text-sm bg-primary text-primary-foreground">
+                {username.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+          </div>
+
+          {/* Message content */}
+          <div className="flex-1 min-w-0">
+            {/* Reply line and reference */}
+            {replyTo && replyToUser && (
+              <div className="flex items-center gap-2 mb-2 text-xs text-concord-secondary">
+                <div className="w-6 h-3 border-l-2 border-t-2 border-concord-secondary/50 rounded-tl-md ml-2" />
+                <span className="font-medium text-concord-primary">
+                  {replyToUser.nickname || replyToUser.username}
+                </span>
+                <span className="truncate max-w-xs opacity-75">
+                  {replyTo.text.replace(/```[\s\S]*?```/g, "[code]")}
+                </span>
+              </div>
+            )}
+
+            {/* Header - always show */}
+            <div className="flex items-baseline gap-2 mb-1">
+              <span className="font-semibold text-concord-primary">
+                {displayName}
+              </span>
+              <span className="text-xs text-concord-secondary">
+                {formatTimestamp(message.createdAt)}
+              </span>
+              {message.edited && (
+                <span className="text-xs text-concord-secondary opacity-60">
+                  (edited)
+                </span>
+              )}
+              {(message as any).pinned && (
+                <Pin className="h-3 w-3 text-concord-primary" />
+              )}
+            </div>
+
+            {/* Message content with markdown */}
+            <div className="text-concord-primary leading-relaxed prose prose-sm max-w-none dark:prose-invert">
+              <ReactMarkdown
+                components={{
+                  code: ({ className, children }) => {
+                    const match = /language-(\w+)/.exec(className || "");
+                    return match ? (
+                      <div className="flex flex-row flex-1 max-w-2/3 flex-wrap !bg-transparent">
+                        <SyntaxHighlighter
+                          PreTag="div"
+                          children={String(children).replace(/\n$/, "")}
+                          language={match[1]}
+                          style={mode === "light" ? solarizedLight : dark}
+                          className="!bg-concord-secondary p-2 border-2 concord-border rounded-xl"
+                        />
+                      </div>
+                    ) : (
+                      <code className={className}>{children}</code>
+                    );
+                  },
+                  blockquote: ({ children }) => (
+                    <blockquote className="border-l-4 border-primary pl-4 my-2 italic text-concord-secondary bg-concord-secondary/30 py-2 rounded-r">
+                      {children}
+                    </blockquote>
+                  ),
+                  p: ({ children }) => (
+                    <p className="my-1 text-concord-primary">{children}</p>
+                  ),
+                  strong: ({ children }) => (
+                    <strong className="font-semibold text-concord-primary">
+                      {children}
+                    </strong>
+                  ),
+                  em: ({ children }) => (
+                    <em className="italic text-concord-primary">{children}</em>
+                  ),
+                  ul: ({ children }) => (
+                    <ul className="list-disc list-inside my-2 text-concord-primary">
+                      {children}
+                    </ul>
+                  ),
+                  ol: ({ children }) => (
+                    <ol className="list-decimal list-inside my-2 text-concord-primary">
+                      {children}
+                    </ol>
+                  ),
+                  h1: ({ children }) => (
+                    <h1 className="text-xl font-bold my-2 text-concord-primary">
+                      {children}
+                    </h1>
+                  ),
+                  h2: ({ children }) => (
+                    <h2 className="text-lg font-bold my-2 text-concord-primary">
+                      {children}
+                    </h2>
+                  ),
+                  h3: ({ children }) => (
+                    <h3 className="text-base font-bold my-2 text-concord-primary">
+                      {children}
+                    </h3>
+                  ),
+                  a: ({ children, href }) => (
+                    <a
+                      href={href}
+                      className="text-primary hover:underline"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {children}
+                    </a>
+                  ),
+                }}
+              >
+                {message.text}
+              </ReactMarkdown>
+            </div>
+          </div>
+
+          {/* Message actions */}
+          {isHovered && (
+            <div className="absolute top-0 right-4 bg-concord-secondary border border-border rounded-md shadow-md flex">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0 interactive-hover"
+                onClick={() => onReply?.(message.id)}
+              >
+                <Reply className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                className="h-8 w-8 p-0 interactive-hover"
+                onClick={() => navigator.clipboard.writeText(message.text)}
+              >
+                <Copy className="h-4 w-4" />
+              </Button>
+              {/*<MessageActionsDropdown
+                message={message}
+                onReply={() => onReply?.(message.id)}
+              />*/}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};

concord-client/src/components/message/MessageInput.tsx

@@ -0,0 +1,108 @@
+import { Message } from "@/lib/api-client";
+import { useState, useRef, useEffect } from "react";
+import { useSendMessage } from "@/hooks/useMessages";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+
+interface MessageUser {
+  id: string;
+  username?: string;
+  nickname?: string | null;
+  picture?: string | null;
+}
+interface MessageInputProps {
+  channelId: string;
+  channelName?: string;
+  replyingTo?: Message | null;
+  onCancelReply?: () => void;
+  replyingToUser: MessageUser | null;
+}
+
+export const MessageInput: React.FC<MessageInputProps> = ({
+  channelId,
+  channelName,
+  replyingTo,
+  onCancelReply,
+  replyingToUser,
+}) => {
+  const [content, setContent] = useState("");
+  const formRef = useRef<HTMLFormElement>(null);
+
+  // Use the API hook for sending messages
+  const sendMessageMutation = useSendMessage();
+
+  // Auto-resize textarea (using direct DOM access as a fallback, no ref needed)
+  useEffect(() => {
+    const textarea = document.getElementById(
+      "message-input-textarea",
+    ) as HTMLTextAreaElement | null;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, [content]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (content.trim() && !sendMessageMutation.isPending) {
+      try {
+        await sendMessageMutation.mutateAsync({
+          channelId,
+          content: content.trim(),
+          repliedMessageId: replyingTo?.id || null,
+        });
+        setContent("");
+        onCancelReply?.();
+      } catch (error) {
+        console.error("Failed to send message:", error);
+      }
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      formRef.current?.requestSubmit();
+    }
+  };
+
+  return (
+    <div className="px-2 pb-2">
+      {replyingTo && replyingToUser && (
+        <div className="mb-2 p-3 bg-concord-secondary rounded-lg border border-b-0 border-border">
+          <div className="flex items-center justify-between mb-1">
+            <div className="flex items-center gap-2">
+              <div className="w-6 h-4 border-l-2 border-t-2 border-concord-secondary/50 rounded-tl-md ml-2" />
+              <span className="font-medium text-concord-primary">
+                {replyingToUser.nickname || replyingToUser.username}
+              </span>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-auto p-1 text-concord-secondary hover:text-concord-primary"
+              onClick={onCancelReply}
+            >
+              ×
+            </Button>
+          </div>
+          <div className="text-sm text-concord-primary truncate pl-2">
+            {replyingTo.text.replace(/```[\s\S]*?```/g, "[code]")}
+          </div>
+        </div>
+      )}
+
+      <form ref={formRef} onSubmit={handleSubmit}>
+        <Textarea
+          id="message-input-textarea" // Unique ID for DOM targeting
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={`Message #${channelName || "channel"}`}
+          disabled={sendMessageMutation.isPending}
+          className="w-full bg-concord-tertiary border border-border rounded-lg px-4 py-3 text-concord-primary placeholder-concord-muted resize-none focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent disabled:opacity-50 min-h-8 max-h-56"
+        />
+      </form>
+    </div>
+  );
+};

concord-client/src/components/modals/CreateChannelModal.tsx

@@ -11,39 +11,58 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Hash, Volume2, Loader2 } from "lucide-react";
 import { useCreateChannel } from "@/hooks/useServers";
+import { CategoryWithChannels } from "@/types";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { toast } from "sonner";
 
 interface CreateChannelModalProps {
   isOpen: boolean;
   onClose: () => void;
-  instanceId: string; // Changed to use instanceId instead of categories prop
+  instanceId: string;
-  defaultCategoryId?: string;
+  categories: CategoryWithChannels[] | undefined;
 }
 
 export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
   isOpen,
   onClose,
-  defaultCategoryId,
+  categories,
 }) => {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [type, setType] = useState<"text" | "voice">("text");
-  const [categoryId, setCategoryId] = useState(defaultCategoryId || "");
+  const [categoryId, setCategoryId] = useState("");
 
   const createChannelMutation = useCreateChannel();
 
-  // Reset form when modal opens/closes
+  // Reset form when modal opens or closes
   useEffect(() => {
     if (!isOpen) {
       setName("");
       setDescription("");
       setType("text");
-      setCategoryId(defaultCategoryId || "");
+      setCategoryId("");
+    } else {
+      setCategoryId("");
     }
-  }, [isOpen, defaultCategoryId]);
+  }, [isOpen]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!name.trim() || !categoryId) return;
+    // Basic validation: ensure name is not empty and a category is selected
+    if (!name.trim() || !categoryId || categoryId === "no-categories") {
+      console.warn("Channel name and a valid category are required.");
+      toast("Error", {
+        description: "Channel name and a valid category are required.",
+      });
+      return;
+    }
 
     try {
       await createChannelMutation.mutateAsync({
@@ -53,17 +72,25 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
         categoryId,
       });
 
-      // Reset form
+      // Reset form after successful creation
       setName("");
       setDescription("");
       setType("text");
-      setCategoryId(defaultCategoryId || "");
+      setCategoryId(""); // Reset to default or empty
       onClose();
     } catch (error) {
       console.error("Failed to create channel:", error);
+      toast("Error", { description: <p>{`${error}`}</p> });
     }
   };
 
+  // Helper to determine if the form is in a valid state for submission
+  const isFormInvalid =
+    !name.trim() || // Name is required and cannot be just whitespace
+    !categoryId || // Category must be selected
+    categoryId === "no-categories" || // Handle the "no categories available" placeholder
+    createChannelMutation.isPending; // Disable while mutation is in progress
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="sm:max-w-[400px]">
@@ -72,12 +99,13 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
         </DialogHeader>
 
         <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Channel Type Selection */}
           <div className="space-y-2">
             <Label>Channel Type</Label>
             <div className="flex gap-2">
               <Button
                 type="button"
-                variant={type === "text" ? "default" : "outline"}
+                variant={type === "text" ? "secondary" : "ghost"}
                 onClick={() => setType("text")}
                 className="flex-1"
               >
@@ -86,7 +114,7 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
               </Button>
               <Button
                 type="button"
-                variant={type === "voice" ? "default" : "outline"}
+                variant={type === "voice" ? "secondary" : "ghost"}
                 onClick={() => setType("voice")}
                 className="flex-1"
               >
@@ -96,6 +124,7 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
             </div>
           </div>
 
+          {/* Channel Name Input */}
           <div className="space-y-2">
             <Label htmlFor="channel-name">Channel Name</Label>
             <Input
@@ -107,6 +136,35 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
             />
           </div>
 
+          {/* Category Selection */}
+          <div className="space-y-2">
+            <Label htmlFor="channel-category">Category</Label>
+            <Select
+              value={categoryId}
+              onValueChange={(value) => setCategoryId(value)}
+              required
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select a category" />
+              </SelectTrigger>
+              <SelectContent>
+                {categories && categories.length > 0 ? (
+                  categories.map((category) => (
+                    <SelectItem key={category.id} value={category.id}>
+                      {category.name}
+                    </SelectItem>
+                  ))
+                ) : (
+                  // Display this option if there are no categories
+                  <SelectItem value="no-categories" disabled>
+                    No categories available
+                  </SelectItem>
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Channel Description Textarea */}
           <div className="space-y-2">
             <Label htmlFor="channel-description">Description</Label>
             <Textarea
@@ -118,20 +176,12 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
             />
           </div>
 
+          {/* Action Buttons */}
           <div className="flex justify-end gap-2">
             <Button type="button" variant="outline" onClick={onClose}>
               Cancel
             </Button>
-            <Button
+            <Button type="submit" disabled={isFormInvalid}>
-              type="submit"
-              disabled={
-                !name.trim() ||
-                !categoryId ||
-                createChannelMutation.isPending ||
-                categoryId === "loading" ||
-                categoryId === "no-categories"
-              }
-            >
               {createChannelMutation.isPending ? (
                 <div className="flex items-center gap-2">
                   <Loader2 className="h-4 w-4 animate-spin" />

concord-client/src/components/modals/MessageActionsModal.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Copy, Reply } from "lucide-react";
-import { Message } from "@/lib/api-client";
-
-interface MessageActionsModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  message: Message;
-  isOwnMessage: boolean;
-  onReply?: (messageId: string) => void;
-}
-
-export const MessageActionsModal: React.FC<MessageActionsModalProps> = ({
-  isOpen,
-  onClose,
-  message,
-  onReply,
-}) => {
-  const handleAction = (action: () => void) => {
-    action();
-    onClose();
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-[300px]">
-        <DialogHeader>
-          <DialogTitle>Message Actions</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-2">
-          <Button
-            variant="ghost"
-            className="w-full justify-start"
-            onClick={() => handleAction(() => onReply?.(message.id))}
-          >
-            <Reply className="h-4 w-4 mr-2" />
-            Reply
-          </Button>
-
-          <Button
-            variant="ghost"
-            className="w-full justify-start"
-            onClick={() =>
-              handleAction(() => navigator.clipboard.writeText(message.text))
-            }
-          >
-            <Copy className="h-4 w-4 mr-2" />
-            Copy Text
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};

concord-client/src/components/server/ServerIcon.tsx

@@ -1,30 +1,6 @@
-import React, { useState } from "react";
+import React from "react";
 import { Button } from "@/components/ui/button";
 import { Instance } from "@/types/database";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-} from "../ui/dialog";
-import { DialogDescription, DialogTitle } from "@radix-ui/react-dialog";
-import { Label } from "../ui/label";
-import { Input } from "../ui/input";
-import { Textarea } from "../ui/textarea";
-import { Category } from "@/types";
-import { useUiStore } from "@/stores/uiStore";
-import {
-  useCreateCategory,
-  useCreateChannel,
-  useCreateInstance,
-} from "@/hooks/useServers";
-import {
-  Select,
-  SelectContent,
-  SelectTrigger,
-  SelectItem,
-  SelectValue,
-} from "../ui/select";
 
 interface ServerIconProps {
   server: Instance;
@@ -47,17 +23,17 @@ const ServerIcon: React.FC<ServerIconProps> = ({
   };
 
   return (
-    <div className="relative group">
+    <div className="relative group w-12">
-      {/* Active indicator */}
+      {/* Active indicator - Positioned outside to the left */}
       <div
-        className={`absolute left-0 top-1/2 transform -translate-y-1/2 w-1 bg-accent-foreground rounded transition-all duration-200 ${
+        className={`absolute -left-2 top-1/2 transform -translate-y-1/2 w-1 bg-accent-foreground rounded transition-all duration-200 ${
           isActive ? "h-10 rounded-xl" : "rounded-r h-2 group-hover:h-5"
         }`}
       />
       <Button
         variant="ghost"
         size="icon"
-        className={`w-12 h-12 ml-3 transition-all duration-200 ${
+        className={`w-12 h-12 transition-all duration-200 ${
           isActive
             ? "rounded-xl border-primary bg-primary/10 border-2"
             : "rounded-2xl hover:rounded-xl border hover:border-primary/50"
@@ -80,308 +56,4 @@ const ServerIcon: React.FC<ServerIconProps> = ({
   );
 };
 
-// Create Server Modal
-export const CreateServerModal: React.FC = () => {
-  const { showCreateServer, closeCreateServer } = useUiStore();
-  const { mutate: createInstance, isPending } = useCreateInstance();
-
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
-  const [icon, setIcon] = useState("");
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (name.trim()) {
-      createInstance(
-        {
-          name: name.trim(),
-          icon: icon.trim() || undefined,
-          // description: description.trim() || undefined,
-        },
-        {
-          onSuccess: () => {
-            setName("");
-            setDescription("");
-            setIcon("");
-            closeCreateServer();
-          },
-          onError: (error) => {
-            console.error("Failed to create server:", error);
-          },
-        },
-      );
-    }
-  };
-
-  const handleClose = () => {
-    setName("");
-    setDescription("");
-    setIcon("");
-    closeCreateServer();
-  };
-
-  return (
-    <Dialog open={showCreateServer} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Create a Server</DialogTitle>
-          <DialogDescription>
-            Create a new server to chat with friends and communities.
-          </DialogDescription>
-        </DialogHeader>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="server-name">Server Name</Label>
-            <Input
-              id="server-name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="Enter server name"
-              required
-            />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="server-description">Description (Optional)</Label>
-            <Textarea
-              id="server-description"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder="What's this server about?"
-              rows={3}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="server-icon">Server Icon URL (Optional)</Label>
-            <Input
-              id="server-icon"
-              type="url"
-              value={icon}
-              onChange={(e) => setIcon(e.target.value)}
-              placeholder="https://example.com/icon.png"
-            />
-          </div>
-
-          <DialogFooter>
-            <Button type="button" variant="outline" onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button type="submit" disabled={isPending || !name.trim()}>
-              {isPending ? "Creating..." : "Create Server"}
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-// Create Channel Modal
-export const CreateChannelModal: React.FC = () => {
-  const { showCreateChannel, closeCreateChannel } = useUiStore();
-  const { mutate: createChannel, isPending } = useCreateChannel();
-
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
-  const [type, setType] = useState<"text" | "voice">("text");
-  const [categoryId, setCategoryId] = useState("");
-
-  // You'd need to get categories for the current instance
-  // This is a simplified version
-  const categories: Category[] = []; // Get from context or props
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (name.trim() && categoryId) {
-      createChannel(
-        {
-          name: name.trim(),
-          description: description.trim(),
-          type,
-          categoryId,
-        },
-        {
-          onSuccess: () => {
-            setName("");
-            setDescription("");
-            setType("text");
-            setCategoryId("");
-            closeCreateChannel();
-          },
-          onError: (error) => {
-            console.error("Failed to create channel:", error);
-          },
-        },
-      );
-    }
-  };
-
-  const handleClose = () => {
-    setName("");
-    setDescription("");
-    setType("text");
-    setCategoryId("");
-    closeCreateChannel();
-  };
-
-  return (
-    <Dialog open={showCreateChannel} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Create a Channel</DialogTitle>
-          <DialogDescription>
-            Create a new text or voice channel in this server.
-          </DialogDescription>
-        </DialogHeader>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="channel-type">Channel Type</Label>
-            <Select
-              value={type}
-              onValueChange={(value: "text" | "voice") => setType(value)}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="Select channel type" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="text">Text Channel</SelectItem>
-                <SelectItem value="voice">Voice Channel</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="channel-category">Category</Label>
-            <Select value={categoryId} onValueChange={setCategoryId}>
-              <SelectTrigger>
-                <SelectValue placeholder="Select a category" />
-              </SelectTrigger>
-              <SelectContent>
-                {categories.map((category) => (
-                  <SelectItem key={category.id} value={category.id}>
-                    {category.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="channel-name">Channel Name</Label>
-            <Input
-              id="channel-name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="Enter channel name"
-              required
-            />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="channel-description">Description (Optional)</Label>
-            <Textarea
-              id="channel-description"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder="What's this channel for?"
-              rows={3}
-            />
-          </div>
-
-          <DialogFooter>
-            <Button type="button" variant="outline" onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button type="submit" disabled={isPending || !name.trim()}>
-              {isPending ? "Creating..." : "Create Channel"}
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-// Create Category Modal
-export const CreateCategoryModal: React.FC = () => {
-  const [open, setOpen] = useState(false);
-  const { mutate: createCategory, isPending } = useCreateCategory();
-
-  const [name, setName] = useState("");
-  const [instanceId, setInstanceId] = useState("");
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (name.trim() && instanceId) {
-      createCategory(
-        {
-          name: name.trim(),
-          instanceId,
-          position: 0,
-        },
-        {
-          onSuccess: () => {
-            setName("");
-            setInstanceId("");
-            setOpen(false);
-          },
-          onError: (error) => {
-            console.error("Failed to create category:", error);
-          },
-        },
-      );
-    }
-  };
-
-  const handleClose = () => {
-    setName("");
-    setInstanceId("");
-    setOpen(false);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Create a Category</DialogTitle>
-          <DialogDescription>
-            Create a new category to organize your channels.
-          </DialogDescription>
-        </DialogHeader>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="category-name">Category Name</Label>
-            <Input
-              id="category-name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="Enter category name"
-              required
-            />
-          </div>
-
-          <DialogFooter>
-            <Button type="button" variant="outline" onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button type="submit" disabled={isPending || !name.trim()}>
-              {isPending ? "Creating..." : "Create Category"}
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export const AdminModals: React.FC = () => {
-  return (
-    <>
-      <CreateServerModal />
-      <CreateChannelModal />
-      <CreateCategoryModal />
-    </>
-  );
-};
 export default ServerIcon;

concord-client/src/components/theme-selector.tsx

@@ -1,485 +0,0 @@
-import React, { useState } from "react";
-import {
-  Moon,
-  Sun,
-  Monitor,
-  Palette,
-  Plus,
-  Trash2,
-  Settings,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Badge } from "@/components/ui/badge";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Separator } from "@/components/ui/separator";
-import {
-  useTheme,
-  ThemeDefinition,
-  ThemeColors,
-} from "@/components/theme-provider";
-
-// Theme color input component for OKLCH values
-const ColorInput: React.FC<{
-  label: string;
-  value: string;
-  onChange: (value: string) => void;
-}> = ({ label, value, onChange }) => {
-  return (
-    <div className="grid grid-cols-4 items-center gap-4">
-      <Label htmlFor={label} className="text-right text-sm">
-        {label}
-      </Label>
-      <Input
-        id={label}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        className="col-span-3 font-mono text-sm"
-        placeholder="oklch(0.5 0.1 180)"
-      />
-    </div>
-  );
-};
-
-// Custom theme creation modal
-const CreateThemeModal: React.FC<{
-  isOpen: boolean;
-  onClose: () => void;
-  onSave: (theme: Omit<ThemeDefinition, "id" | "isCustom">) => void;
-}> = ({ isOpen, onClose, onSave }) => {
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
-  const [mode, setMode] = useState<"light" | "dark">("dark");
-  const [colors, setColors] = useState<ThemeColors>({
-    background: "oklch(0.145 0 0)",
-    foreground: "oklch(0.985 0 0)",
-    card: "oklch(0.205 0 0)",
-    cardForeground: "oklch(0.985 0 0)",
-    popover: "oklch(0.205 0 0)",
-    popoverForeground: "oklch(0.985 0 0)",
-    primary: "oklch(0.922 0 0)",
-    primaryForeground: "oklch(0.205 0 0)",
-    secondary: "oklch(0.269 0 0)",
-    secondaryForeground: "oklch(0.985 0 0)",
-    muted: "oklch(0.269 0 0)",
-    mutedForeground: "oklch(0.708 0 0)",
-    accent: "oklch(0.269 0 0)",
-    accentForeground: "oklch(0.985 0 0)",
-    destructive: "oklch(0.704 0.191 22.216)",
-    border: "oklch(1 0 0 / 10%)",
-    input: "oklch(1 0 0 / 15%)",
-    ring: "oklch(0.556 0 0)",
-    chart1: "oklch(0.488 0.243 264.376)",
-    chart2: "oklch(0.696 0.17 162.48)",
-    chart3: "oklch(0.769 0.188 70.08)",
-    chart4: "oklch(0.627 0.265 303.9)",
-    chart5: "oklch(0.645 0.246 16.439)",
-    sidebar: "oklch(0.205 0 0)",
-    sidebarForeground: "oklch(0.985 0 0)",
-    sidebarPrimary: "oklch(0.488 0.243 264.376)",
-    sidebarPrimaryForeground: "oklch(0.985 0 0)",
-    sidebarAccent: "oklch(0.269 0 0)",
-    sidebarAccentForeground: "oklch(0.985 0 0)",
-    sidebarBorder: "oklch(1 0 0 / 10%)",
-    sidebarRing: "oklch(0.556 0 0)",
-  });
-
-  const handleSave = () => {
-    if (!name.trim()) return;
-
-    onSave({
-      name: name.trim(),
-      description: description.trim() || undefined,
-      mode,
-      colors,
-    });
-
-    // Reset form
-    setName("");
-    setDescription("");
-    setMode("dark");
-    onClose();
-  };
-
-  const updateColor = (key: keyof ThemeColors, value: string) => {
-    setColors((prev) => ({ ...prev, [key]: value }));
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle>Create Custom Theme</DialogTitle>
-          <DialogDescription>
-            Create a custom theme by defining colors in OKLCH format (e.g.,
-            "oklch(0.5 0.1 180)")
-          </DialogDescription>
-        </DialogHeader>
-
-        <ScrollArea className="max-h-96">
-          <div className="space-y-6 pr-4">
-            {/* Basic Info */}
-            <div className="space-y-4">
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="theme-name" className="text-right">
-                  Name
-                </Label>
-                <Input
-                  id="theme-name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  className="col-span-3"
-                  placeholder="My Custom Theme"
-                />
-              </div>
-
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="theme-description" className="text-right">
-                  Description
-                </Label>
-                <Textarea
-                  id="theme-description"
-                  value={description}
-                  onChange={(e) => setDescription(e.target.value)}
-                  className="col-span-3"
-                  placeholder="Optional description"
-                  rows={2}
-                />
-              </div>
-
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="theme-mode" className="text-right">
-                  Mode
-                </Label>
-                <Select
-                  value={mode}
-                  onValueChange={(v: "light" | "dark") => setMode(v)}
-                >
-                  <SelectTrigger className="col-span-3">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="light">Light</SelectItem>
-                    <SelectItem value="dark">Dark</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-
-            <Separator />
-
-            {/* Color sections */}
-            <div className="space-y-4">
-              <h4 className="font-medium">Basic Colors</h4>
-              <div className="space-y-3">
-                <ColorInput
-                  label="Background"
-                  value={colors.background}
-                  onChange={(v) => updateColor("background", v)}
-                />
-                <ColorInput
-                  label="Foreground"
-                  value={colors.foreground}
-                  onChange={(v) => updateColor("foreground", v)}
-                />
-                <ColorInput
-                  label="Primary"
-                  value={colors.primary}
-                  onChange={(v) => updateColor("primary", v)}
-                />
-                <ColorInput
-                  label="Secondary"
-                  value={colors.secondary}
-                  onChange={(v) => updateColor("secondary", v)}
-                />
-              </div>
-
-              <Separator />
-
-              <h4 className="font-medium">Sidebar Colors</h4>
-              <div className="space-y-3">
-                <ColorInput
-                  label="Sidebar"
-                  value={colors.sidebar}
-                  onChange={(v) => updateColor("sidebar", v)}
-                />
-                <ColorInput
-                  label="Sidebar Primary"
-                  value={colors.sidebarPrimary}
-                  onChange={(v) => updateColor("sidebarPrimary", v)}
-                />
-                <ColorInput
-                  label="Sidebar Accent"
-                  value={colors.sidebarAccent}
-                  onChange={(v) => updateColor("sidebarAccent", v)}
-                />
-              </div>
-            </div>
-          </div>
-        </ScrollArea>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button onClick={handleSave} disabled={!name.trim()}>
-            Create Theme
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-// Main theme selector component as modal
-export function ThemeSelector() {
-  const {
-    mode,
-    currentTheme,
-    setMode,
-    setTheme,
-    addCustomTheme,
-    removeCustomTheme,
-    getThemesForMode,
-  } = useTheme();
-
-  const [isMainModalOpen, setIsMainModalOpen] = useState(false);
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
-
-  const lightThemes = getThemesForMode("light");
-  const darkThemes = getThemesForMode("dark");
-
-  const getCurrentModeIcon = () => {
-    switch (mode) {
-      case "light":
-        return <Sun className="h-4 w-4" />;
-      case "dark":
-        return <Moon className="h-4 w-4" />;
-      default:
-        return <Monitor className="h-4 w-4" />;
-    }
-  };
-
-  return (
-    <>
-      <Dialog open={isMainModalOpen} onOpenChange={setIsMainModalOpen}>
-        <DialogTrigger asChild>
-          <Button variant="outline" size="sm">
-            <Settings className="h-4 w-4 mr-2" />
-            Theme
-          </Button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              {getCurrentModeIcon()}
-              Appearance Settings
-            </DialogTitle>
-            <DialogDescription>
-              Choose your preferred theme and color scheme
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="space-y-6">
-            {/* Current Theme Display */}
-            <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
-              <div>
-                <p className="font-medium">{currentTheme.name}</p>
-                {currentTheme.description && (
-                  <p className="text-sm text-muted-foreground">
-                    {currentTheme.description}
-                  </p>
-                )}
-              </div>
-              <Badge variant="secondary">Active</Badge>
-            </div>
-
-            {/* Mode Selection */}
-            <div className="space-y-3">
-              <Label className="text-sm font-medium">Display Mode</Label>
-              <div className="grid grid-cols-3 gap-2">
-                <Button
-                  variant={mode === "light" ? "default" : "outline"}
-                  size="sm"
-                  onClick={() => setMode("light")}
-                  className="flex flex-col gap-1 h-auto py-3"
-                >
-                  <Sun className="h-4 w-4" />
-                  <span className="text-xs">Light</span>
-                </Button>
-                <Button
-                  variant={mode === "dark" ? "default" : "outline"}
-                  size="sm"
-                  onClick={() => setMode("dark")}
-                  className="flex flex-col gap-1 h-auto py-3"
-                >
-                  <Moon className="h-4 w-4" />
-                  <span className="text-xs">Dark</span>
-                </Button>
-                <Button
-                  variant={mode === "system" ? "default" : "outline"}
-                  size="sm"
-                  onClick={() => setMode("system")}
-                  className="flex flex-col gap-1 h-auto py-3"
-                >
-                  <Monitor className="h-4 w-4" />
-                  <span className="text-xs">System</span>
-                </Button>
-              </div>
-            </div>
-
-            {/* Theme Selection */}
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <Label className="text-sm font-medium">Themes</Label>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setIsCreateModalOpen(true)}
-                >
-                  <Plus className="h-4 w-4 mr-1" />
-                  Create
-                </Button>
-              </div>
-
-              <ScrollArea className="max-h-64">
-                <div className="space-y-3">
-                  {/* Light Themes */}
-                  {lightThemes.length > 0 && (
-                    <div className="space-y-2">
-                      <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-                        Light Themes
-                      </p>
-                      {lightThemes.map((theme) => (
-                        <div
-                          key={theme.id}
-                          className="flex items-center justify-between p-2 rounded-md hover:bg-muted/50 cursor-pointer"
-                          onClick={() => setTheme(theme.id)}
-                        >
-                          <div className="flex items-center gap-3">
-                            <Palette className="h-4 w-4 text-muted-foreground" />
-                            <div>
-                              <p className="text-sm font-medium">
-                                {theme.name}
-                              </p>
-                              {theme.description && (
-                                <p className="text-xs text-muted-foreground">
-                                  {theme.description}
-                                </p>
-                              )}
-                            </div>
-                          </div>
-                          <div className="flex items-center gap-2">
-                            {currentTheme.id === theme.id && (
-                              <Badge variant="secondary" className="text-xs">
-                                Active
-                              </Badge>
-                            )}
-                            {theme.isCustom && (
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                className="h-6 w-6 p-0 hover:text-destructive"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  removeCustomTheme(theme.id);
-                                }}
-                              >
-                                <Trash2 className="h-3 w-3" />
-                              </Button>
-                            )}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-
-                  {/* Dark Themes */}
-                  {darkThemes.length > 0 && (
-                    <div className="space-y-2">
-                      {lightThemes.length > 0 && <Separator />}
-                      <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-                        Dark Themes
-                      </p>
-                      {darkThemes.map((theme) => (
-                        <div
-                          key={theme.id}
-                          className="flex items-center justify-between p-2 rounded-md hover:bg-muted/50 cursor-pointer"
-                          onClick={() => setTheme(theme.id)}
-                        >
-                          <div className="flex items-center gap-3">
-                            <Palette className="h-4 w-4 text-muted-foreground" />
-                            <div>
-                              <p className="text-sm font-medium">
-                                {theme.name}
-                              </p>
-                              {theme.description && (
-                                <p className="text-xs text-muted-foreground">
-                                  {theme.description}
-                                </p>
-                              )}
-                            </div>
-                          </div>
-                          <div className="flex items-center gap-2">
-                            {currentTheme.id === theme.id && (
-                              <Badge variant="secondary" className="text-xs">
-                                Active
-                              </Badge>
-                            )}
-                            {theme.isCustom && (
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                className="h-6 w-6 p-0 hover:text-destructive"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  removeCustomTheme(theme.id);
-                                }}
-                              >
-                                <Trash2 className="h-3 w-3" />
-                              </Button>
-                            )}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              </ScrollArea>
-            </div>
-          </div>
-
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setIsMainModalOpen(false)}>
-              Close
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <CreateThemeModal
-        isOpen={isCreateModalOpen}
-        onClose={() => setIsCreateModalOpen(false)}
-        onSave={addCustomTheme}
-      />
-    </>
-  );
-}

concord-client/src/components/ui/dropdown-menu.tsx

@@ -1,13 +1,13 @@
-import * as React from "react";
+import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
 }
 
 function DropdownMenuPortal({
@@ -15,7 +15,7 @@ function DropdownMenuPortal({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
   return (
     <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  );
+  )
 }
 
 function DropdownMenuTrigger({
@@ -26,7 +26,7 @@ function DropdownMenuTrigger({
       data-slot="dropdown-menu-trigger"
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuContent({
@@ -41,12 +41,12 @@ function DropdownMenuContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className,
+          className
         )}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
-  );
+  )
 }
 
 function DropdownMenuGroup({
@@ -54,7 +54,7 @@ function DropdownMenuGroup({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
   return (
     <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  );
+  )
 }
 
 function DropdownMenuItem({
@@ -63,8 +63,8 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean;
+  inset?: boolean
-  variant?: "default" | "destructive";
+  variant?: "default" | "destructive"
 }) {
   return (
     <DropdownMenuPrimitive.Item
@@ -73,11 +73,11 @@ function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuCheckboxItem({
@@ -91,7 +91,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       checked={checked}
       {...props}
@@ -103,7 +103,7 @@ function DropdownMenuCheckboxItem({
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
-  );
+  )
 }
 
 function DropdownMenuRadioGroup({
@@ -114,7 +114,7 @@ function DropdownMenuRadioGroup({
       data-slot="dropdown-menu-radio-group"
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuRadioItem({
@@ -127,7 +127,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     >
@@ -138,7 +138,7 @@ function DropdownMenuRadioItem({
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
-  );
+  )
 }
 
 function DropdownMenuLabel({
@@ -146,7 +146,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <DropdownMenuPrimitive.Label
@@ -154,11 +154,11 @@ function DropdownMenuLabel({
       data-inset={inset}
       className={cn(
         "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuSeparator({
@@ -171,7 +171,7 @@ function DropdownMenuSeparator({
       className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuShortcut({
@@ -183,17 +183,17 @@ function DropdownMenuShortcut({
       data-slot="dropdown-menu-shortcut"
       className={cn(
         "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuSub({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
 }
 
 function DropdownMenuSubTrigger({
@@ -202,22 +202,22 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
-  );
+  )
 }
 
 function DropdownMenuSubContent({
@@ -229,11 +229,11 @@ function DropdownMenuSubContent({
       data-slot="dropdown-menu-sub-content"
       className={cn(
         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -252,4 +252,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-};
+}

concord-client/src/hooks/useMessages.ts

@@ -156,12 +156,6 @@ export const useEditMessage = () => {
       }
 
       // TODO: Replace with actual API call when available
-      console.log(
-        "Editing message:",
-        data.messageId,
-        "New content:",
-        data.content,
-      );
 
       return {
         success: true,
@@ -207,10 +201,6 @@ export const usePinMessage = () => {
       }
 
       // TODO: Replace with actual API call when available
-      console.log(
-        `${data.pinned ? "Pinning" : "Unpinning"} message:`,
-        data.messageId,
-      );
 
       return {
         success: true,

concord-client/src/hooks/usePermissions.ts

@@ -0,0 +1,108 @@
+import { useAuthStore } from "@/stores/authStore";
+import { Role } from "@/types/database";
+import { useMemo } from "react";
+import { useParams } from "react-router";
+
+type PermissionsRole = "admin" | "member" | "mod";
+
+const getUserRoleForInstance = (
+  roles: Role[],
+  instanceId: string,
+): PermissionsRole => {
+  if (!instanceId) return "member";
+  const roleEntry = roles.find((r) => r.instanceId === instanceId);
+  return roleEntry?.role || "member";
+};
+
+const getRoleInfo = (role: PermissionsRole) => {
+  const lowerRole = role.toLowerCase();
+  switch (lowerRole) {
+    case "admin":
+      return { color: "#ff6b6b", priority: 3, name: "Admin" };
+    case "mod":
+      return { color: "#4ecdc4", priority: 2, name: "Moderator" };
+    case "member":
+      return { color: null, priority: 1, name: "Member" };
+    default:
+      return {
+        color: null,
+        priority: 0,
+        name: role.charAt(0).toUpperCase() + role.slice(1),
+      };
+  }
+};
+
+interface InstancePermissions {
+  currentUserRole: PermissionsRole;
+  currentUserRolePriority: number;
+  canManageMembers: boolean; // Can kick/ban/promote/demote members
+  canViewAdminPanel: boolean;
+}
+
+export const useInstancePermissions = (): InstancePermissions => {
+  const { instanceId } = useParams<{ instanceId: string }>();
+  const { user: currentUser } = useAuthStore();
+
+  const permissions = useMemo(() => {
+    let currentUserRole: PermissionsRole = "member";
+    let currentUserRolePriority = 1;
+    let canManageMembers = false;
+    let canViewAdminPanel = false;
+
+    if (!currentUser || !instanceId) {
+      // If no user or instance, user has no permissions within an instance
+      return {
+        currentUserRole,
+        currentUserRolePriority,
+        canManageMembers,
+        canViewAdminPanel,
+      };
+    }
+
+    // If they are a global admin
+    if (currentUser.admin) {
+      currentUserRole = "admin";
+      currentUserRolePriority = 3;
+      canManageMembers = true;
+      canViewAdminPanel = true;
+      return {
+        currentUserRole: "admin",
+        currentUserRolePriority: 3,
+        canManageMembers: true,
+        canManageRoles: true,
+        canViewAdminPanel: true,
+      };
+    }
+
+    // Instance-Specific Role Check
+    const instanceRole = getUserRoleForInstance(currentUser.roles, instanceId);
+    const roleInfo = getRoleInfo(instanceRole as PermissionsRole);
+
+    currentUserRole = instanceRole;
+    currentUserRolePriority = roleInfo.priority;
+
+    // Define permissions based on role priority
+    if (roleInfo.priority >= 3) {
+      // Admin
+      canManageMembers = true;
+      canViewAdminPanel = true;
+    } else if (roleInfo.priority === 2) {
+      // Moderator
+      canManageMembers = true;
+      canViewAdminPanel = false;
+    } else {
+      // Member (priority 1 or 0)
+      canManageMembers = false;
+      canViewAdminPanel = false;
+    }
+
+    return {
+      currentUserRole,
+      currentUserRolePriority,
+      canManageMembers,
+      canViewAdminPanel,
+    };
+  }, [currentUser, instanceId]);
+
+  return permissions as InstancePermissions;
+};

concord-client/src/lib/api-client.ts

@@ -256,6 +256,8 @@ export class ApiClient {
     requestingUserId: string;
     requestingUserToken: string;
   }): Promise<Channel> {
+    console.log(data);
+
     return this.request<Channel>("/api/channel", {
       method: "POST",
       body: JSON.stringify(data),

concord-client/src/main.tsx

@@ -4,30 +4,10 @@ import App from "./App.tsx";
 import { io } from "socket.io-client";
 import "./index.css";
 
-function printPayload(data: unknown) {
-  console.log(data);
-}
-
 const socket = io("http://localhost:3000");
-socket.on("connect", () => {
-  console.log("connected!");
-  socket.emit("ping", "world");
-});
-socket.on("pong", () => {
-  console.log("pong");
-});
-
-socket.on("joined-voicechannel", printPayload);
-socket.on("user-joined-voicechannel", printPayload);
-socket.on("error-voicechannel", printPayload);
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App socket={socket} />
   </React.StrictMode>,
 );
-
-// Use contextBridge
-window.ipcRenderer.on("main-process-message", (_event, message) => {
-  console.log(message);
-});

concord-client/src/pages/ChatPage.tsx

@@ -1,419 +1,21 @@
 import React, { useState, useEffect, useRef } from "react";
 import { useNavigate, useParams } from "react-router";
-import ReactMarkdown from "react-markdown";
+import { Hash, Volume2, Users } from "lucide-react";
-import {
-  Hash,
-  Volume2,
-  Users,
-  Pin,
-  MoreHorizontal,
-  Reply,
-  Plus,
-} from "lucide-react";
-import { formatDistanceToNow, isValid, parseISO } from "date-fns";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { MessageComponent } from "@/components/message/MessageComponent";
-import SyntaxHighlighter from "react-syntax-highlighter";
-import {
-  dark,
-  solarizedLight,
-} from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { useTheme } from "@/components/theme-provider";
-
-// Updated imports for API integration
 import { useInstanceDetails, useInstanceMembers } from "@/hooks/useServers";
-import {
+import { useChannelMessages, useLoadMoreMessages } from "@/hooks/useMessages";
-  useChannelMessages,
-  useLoadMoreMessages,
-  useSendMessage,
-} from "@/hooks/useMessages";
 import { useUiStore } from "@/stores/uiStore";
 import { useAuthStore } from "@/stores/authStore";
 import { Message } from "@/lib/api-client";
-
+import { MessageInput } from "@/components/message/MessageInput";
-// Modal imports
-import { MessageActionsModal } from "@/components/modals/MessageActionsModal";
-
-// User type for message component
-interface MessageUser {
-  id: string;
-  username?: string;
-  userName?: string;
-  nickname?: string | null;
-  nickName?: string | null;
-  picture?: string | null;
-}
-
-// Message Props interface
-interface MessageProps {
-  message: Message;
-  user: MessageUser;
-  currentUser: any;
-  replyTo?: Message;
-  replyToUser?: MessageUser;
-  onReply?: (messageId: string) => void;
-}
-
-const MessageComponent: React.FC<MessageProps> = ({
-  message,
-  user,
-  currentUser,
-  replyTo,
-  replyToUser,
-  onReply,
-}) => {
-  const [isHovered, setIsHovered] = useState(false);
-  const [showActionsModal, setShowActionsModal] = useState(false);
-
-  const formatTimestamp = (timestamp: string) => {
-    try {
-      // First try parsing as ISO string
-      let date = parseISO(timestamp);
-
-      // If that fails, try regular Date constructor
-      if (!isValid(date)) {
-        date = new Date(timestamp);
-      }
-
-      // Final check if date is valid
-      if (!isValid(date)) {
-        console.error("Invalid timestamp:", timestamp);
-        return "Invalid date";
-      }
-
-      return formatDistanceToNow(date, { addSuffix: true });
-    } catch (error) {
-      console.error("Error formatting timestamp:", timestamp, error);
-      return "Invalid date";
-    }
-  };
-  const isOwnMessage = currentUser?.id === message.userId;
-  const { mode } = useTheme();
-
-  // Get username with fallback
-  const username = user.username || user.userName || "Unknown User";
-  const displayName = user.nickname || user.nickName || username;
-
-  const isDeleted = message.deleted;
-
-  if (isDeleted) {
-    return (
-      <div className="px-4 py-2 opacity-50">
-        <div className="flex gap-3">
-          <div className="w-10 flex-shrink-0" />
-          <div className="flex-1 min-w-0">
-            <div className="text-sm text-concord-secondary italic border border-border rounded px-3 py-2 bg-concord-tertiary/50">
-              This message has been deleted
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div
-        className="group relative px-4 py-2 hover:bg-concord-secondary/50 transition-colors"
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        <div className="flex gap-3">
-          {/* Avatar - always show */}
-          <div className="w-10 flex-shrink-0">
-            <Avatar className="h-10 w-10">
-              <AvatarImage src={user.picture || undefined} alt={username} />
-              <AvatarFallback className="text-sm bg-primary text-primary-foreground">
-                {username.slice(0, 2).toUpperCase()}
-              </AvatarFallback>
-            </Avatar>
-          </div>
-
-          {/* Message content */}
-          <div className="flex-1 min-w-0">
-            {/* Reply line and reference */}
-            {replyTo && replyToUser && (
-              <div className="flex items-center gap-2 mb-2 text-xs text-concord-secondary">
-                <div className="w-6 h-3 border-l-2 border-t-2 border-concord-secondary/50 rounded-tl-md ml-2" />
-                <span className="font-medium text-concord-primary">
-                  {replyToUser.nickname ||
-                    replyToUser.nickName ||
-                    replyToUser.username ||
-                    replyToUser.userName}
-                </span>
-                <span className="truncate max-w-xs opacity-75">
-                  {replyTo.text.replace(/```[\s\S]*?```/g, "[code]")}
-                </span>
-              </div>
-            )}
-
-            {/* Reply line and reference */}
-            {replyTo && replyToUser && (
-              <div className="flex items-center gap-2 mb-2 text-xs text-concord-secondary">
-                <div className="w-6 h-3 border-l-2 border-t-2 border-concord-secondary/50 rounded-tl-md ml-2" />
-                <span className="font-medium text-concord-primary">
-                  {replyToUser.nickname ||
-                    replyToUser.nickName ||
-                    replyToUser.username ||
-                    replyToUser.userName}
-                </span>
-                <span className="truncate max-w-xs opacity-75">
-                  {replyTo.text.replace(/```[\s\S]*?```/g, "[code]")}
-                </span>
-              </div>
-            )}
-
-            {/* Header - always show */}
-            <div className="flex items-baseline gap-2 mb-1">
-              <span className="font-semibold text-concord-primary">
-                {displayName}
-              </span>
-              <span className="text-xs text-concord-secondary">
-                {formatTimestamp(message.createdAt)}
-              </span>
-              {message.edited && (
-                <span className="text-xs text-concord-secondary opacity-60">
-                  (edited)
-                </span>
-              )}
-              {(message as any).pinned && (
-                <Pin className="h-3 w-3 text-yellow-500" />
-              )}
-            </div>
-
-            {/* Message content with markdown */}
-            <div className="text-concord-primary leading-relaxed prose prose-sm max-w-none dark:prose-invert">
-              <ReactMarkdown
-                components={{
-                  code: ({ className, children }) => {
-                    const match = /language-(\w+)/.exec(className || "");
-                    return match ? (
-                      <div className="flex flex-row flex-1 max-w-2/3 flex-wrap !bg-transparent">
-                        <SyntaxHighlighter
-                          PreTag="div"
-                          children={String(children).replace(/\n$/, "")}
-                          language={match[1]}
-                          style={mode === "light" ? solarizedLight : dark}
-                          className="!bg-concord-secondary p-2 border-2 concord-border rounded-xl"
-                        />
-                      </div>
-                    ) : (
-                      <code className={className}>{children}</code>
-                    );
-                  },
-                  blockquote: ({ children }) => (
-                    <blockquote className="border-l-4 border-primary pl-4 my-2 italic text-concord-secondary bg-concord-secondary/30 py-2 rounded-r">
-                      {children}
-                    </blockquote>
-                  ),
-                  p: ({ children }) => (
-                    <p className="my-1 text-concord-primary">{children}</p>
-                  ),
-                  strong: ({ children }) => (
-                    <strong className="font-semibold text-concord-primary">
-                      {children}
-                    </strong>
-                  ),
-                  em: ({ children }) => (
-                    <em className="italic text-concord-primary">{children}</em>
-                  ),
-                  ul: ({ children }) => (
-                    <ul className="list-disc list-inside my-2 text-concord-primary">
-                      {children}
-                    </ul>
-                  ),
-                  ol: ({ children }) => (
-                    <ol className="list-decimal list-inside my-2 text-concord-primary">
-                      {children}
-                    </ol>
-                  ),
-                  h1: ({ children }) => (
-                    <h1 className="text-xl font-bold my-2 text-concord-primary">
-                      {children}
-                    </h1>
-                  ),
-                  h2: ({ children }) => (
-                    <h2 className="text-lg font-bold my-2 text-concord-primary">
-                      {children}
-                    </h2>
-                  ),
-                  h3: ({ children }) => (
-                    <h3 className="text-base font-bold my-2 text-concord-primary">
-                      {children}
-                    </h3>
-                  ),
-                  a: ({ children, href }) => (
-                    <a
-                      href={href}
-                      className="text-primary hover:underline"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {children}
-                    </a>
-                  ),
-                }}
-              >
-                {message.text}
-              </ReactMarkdown>
-            </div>
-          </div>
-
-          {/* Message actions */}
-          {isHovered && (
-            <div className="absolute top-0 right-4 bg-concord-secondary border border-border rounded-md shadow-md flex">
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-8 w-8 p-0 interactive-hover"
-                onClick={() => onReply?.(message.id)}
-              >
-                <Reply className="h-4 w-4" />
-              </Button>
-
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-8 w-8 p-0 interactive-hover"
-                onClick={() => setShowActionsModal(true)}
-              >
-                <MoreHorizontal className="h-4 w-4" />
-              </Button>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Message Actions Modal */}
-      <MessageActionsModal
-        isOpen={showActionsModal}
-        onClose={() => setShowActionsModal(false)}
-        message={message}
-        isOwnMessage={isOwnMessage}
-        onReply={onReply}
-      />
-    </>
-  );
-};
-
-// Message Input Component
-interface MessageInputProps {
-  channelId: string;
-  channelName?: string;
-  replyingTo?: Message | null;
-  onCancelReply?: () => void;
-  replyingToUser: MessageUser | null;
-}
-
-const MessageInput: React.FC<MessageInputProps> = ({
-  channelId,
-  channelName,
-  replyingTo,
-  onCancelReply,
-  replyingToUser,
-}) => {
-  const [content, setContent] = useState("");
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const formRef = useRef<HTMLFormElement>(null);
-
-  // Use the API hook for sending messages
-  const sendMessageMutation = useSendMessage();
-
-  // Auto-resize textarea
-  useEffect(() => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = "auto";
-      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
-    }
-  }, [content]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (content.trim() && !sendMessageMutation.isPending) {
-      try {
-        await sendMessageMutation.mutateAsync({
-          channelId,
-          content: content.trim(),
-          repliedMessageId: replyingTo?.id || null,
-        });
-        setContent("");
-        onCancelReply?.();
-      } catch (error) {
-        console.error("Failed to send message:", error);
-      }
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      formRef.current?.requestSubmit();
-    }
-  };
-
-  return (
-    <div className="px-4 pb-4">
-      {replyingTo && replyingToUser && (
-        <div className="mb-2 p-3 bg-concord-secondary rounded-lg border border-b-0 border-border">
-          <div className="flex items-center justify-between mb-1">
-            <div className="flex items-center gap-2">
-              <div className="w-6 h-4 border-l-2 border-t-2 border-concord-secondary/50 rounded-tl-md ml-2" />
-              <span className="font-medium text-concord-primary">
-                {replyingToUser.nickname ||
-                  replyingToUser.nickName ||
-                  replyingToUser.username ||
-                  replyingToUser.userName}
-              </span>
-            </div>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-auto p-1 text-concord-secondary hover:text-concord-primary"
-              onClick={onCancelReply}
-            >
-              ×
-            </Button>
-          </div>
-          <div className="text-sm text-concord-primary truncate pl-2">
-            {replyingTo.text.replace(/```[\s\S]*?```/g, "[code]")}
-          </div>
-        </div>
-      )}
-
-      <form ref={formRef} onSubmit={handleSubmit}>
-        <div className="relative">
-          <textarea
-            ref={textareaRef}
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder={`Message #${channelName || "channel"}`}
-            disabled={sendMessageMutation.isPending}
-            className="w-full bg-concord-tertiary border border-border rounded-lg px-4 py-3 text-concord-primary placeholder-concord-muted resize-none focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent disabled:opacity-50"
-            style={{
-              minHeight: "44px",
-              maxHeight: "200px",
-            }}
-          />
-          <div className="absolute right-3 bottom-3 text-xs text-concord-secondary">
-            {sendMessageMutation.isPending
-              ? "Sending..."
-              : "Press Enter to send • Shift+Enter for new line"}
-          </div>
-        </div>
-      </form>
-    </div>
-  );
-};
 
 const ChatPage: React.FC = () => {
   const { instanceId, channelId } = useParams();
   const navigate = useNavigate();
 
-  // ALL HOOKS MUST BE CALLED BEFORE ANY CONDITIONAL LOGIC
-  // API hooks - called unconditionally
   const {
     data: instance,
     isLoading: instanceLoading,
@@ -437,6 +39,7 @@ const ChatPage: React.FC = () => {
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const messagesStartRef = useRef<HTMLDivElement>(null);
+  const scrollAreaRef = useRef<HTMLDivElement>(null); // Ref for the ScrollArea content wrapper
 
   // API mutation hooks - called unconditionally
   const loadMoreMessagesMutation = useLoadMoreMessages(channelId);
@@ -469,9 +72,48 @@ const ChatPage: React.FC = () => {
 
   // Effects - called unconditionally
   useEffect(() => {
+    // Scroll to bottom when messages load or update
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [channelMessages]);
 
+  // Auto-focus on channel change or initial load (using DOM query)
+  useEffect(() => {
+    if (!currentUser) return; // Skip if input isn't rendered
+
+    let retryCount = 0;
+    const maxRetries = 10;
+    const retryInterval = 100; // ms
+
+    const focusInput = () => {
+      retryCount++;
+      const textarea = document.getElementById(
+        "message-input-textarea",
+      ) as HTMLTextAreaElement | null;
+      if (textarea) {
+        textarea.focus();
+      } else if (retryCount < maxRetries) {
+        setTimeout(focusInput, retryInterval);
+      }
+    };
+
+    focusInput();
+  }, [channelId, currentUser]);
+
+  useEffect(() => {
+    if (!replyingTo) return; // Skip if no reply
+
+    const focusInput = () => {
+      const textarea = document.getElementById(
+        "message-input-textarea",
+      ) as HTMLTextAreaElement | null;
+      if (textarea) {
+        textarea.focus();
+      }
+    };
+
+    focusInput();
+  }, [replyingTo]);
+
   // Event handlers
   const handleLoadMore = React.useCallback(async () => {
     if (!channelMessages || channelMessages.length === 0 || isLoadingMore)
@@ -500,6 +142,33 @@ const ChatPage: React.FC = () => {
     [channelMessages],
   );
 
+  // Effect for scroll to top and load more
+  useEffect(() => {
+    const scrollAreaElement = scrollAreaRef.current;
+
+    const handleScroll = () => {
+      if (
+        scrollAreaElement &&
+        scrollAreaElement.scrollTop === 0 &&
+        channelMessages &&
+        channelMessages.length > 0 &&
+        !isLoadingMore
+      ) {
+        handleLoadMore();
+      }
+    };
+
+    if (scrollAreaElement) {
+      scrollAreaElement.addEventListener("scroll", handleScroll);
+    }
+
+    return () => {
+      if (scrollAreaElement) {
+        scrollAreaElement.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [channelMessages, isLoadingMore, handleLoadMore]);
+
   // Handle loading states
   if (instanceLoading || messagesLoading || usersLoading) {
     return (
@@ -583,10 +252,10 @@ const ChatPage: React.FC = () => {
   return (
     <div className="flex flex-col flex-shrink h-full bg-concord-primary">
       {/* Channel Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-concord bg-concord-secondary">
+      <div className="flex items-center justify-between px-6 py-4 border-b border-concord bg-concord-secondary">
         <div className="flex items-center space-x-2">
           <ChannelIcon size={20} className="text-concord-secondary" />
-          <span className="font-semibold text-concord-primary">
+          <span className="font-semibold text-xl text-concord-primary">
             {currentChannel?.name}
           </span>
           {currentChannel?.description && (
@@ -618,88 +287,64 @@ const ChatPage: React.FC = () => {
       </div>
 
       {/* Chat Content */}
-      <div className="flex-1 flex flex-col overflow-hidden">
+      <div className="flex-1 flex flex-col overflow-y-auto">
         {/* Messages Area */}
         <ScrollArea className="flex-1 min-h-0">
-          {/* Load More Button */}
+          {/* Attach ref to the actual scrollable content */}
-          {channelMessages && channelMessages.length > 0 && (
+          <div ref={scrollAreaRef} className="h-full overflow-y-auto">
-            <div className="flex justify-center py-2">
+            <div ref={messagesStartRef} />
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleLoadMore}
-                disabled={isLoadingMore}
-                className="text-xs"
-              >
-                {isLoadingMore ? (
-                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary mr-2"></div>
-                ) : (
-                  <Plus className="h-4 w-4 mr-2" />
-                )}
-                {isLoadingMore ? "Loading..." : "Load older messages"}
-              </Button>
-            </div>
-          )}
 
-          <div ref={messagesStartRef} />
+            {/* Welcome Message */}
-
+            <div className="px-4 py-6 border-b border-concord/50 flex-shrink-0">
-          {/* Welcome Message */}
+              <div className="flex items-center space-x-3 mb-3">
-          <div className="px-4 py-6 border-b border-concord/50 flex-shrink-0">
+                <div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center">
-            <div className="flex items-center space-x-3 mb-3">
+                  <ChannelIcon size={24} className="text-primary-foreground" />
-              <div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center">
+                </div>
-                <ChannelIcon size={24} className="text-primary-foreground" />
+                <div>
-              </div>
+                  <h3 className="text-2xl font-bold text-concord-primary">
-              <div>
+                    Welcome to #{currentChannel?.name}!
-                <h3 className="text-2xl font-bold text-concord-primary">
+                  </h3>
-                  Welcome to #{currentChannel?.name}!
-                </h3>
-              </div>
-            </div>
-            {currentChannel?.description && (
-              <div className="text-concord-secondary bg-concord-secondary/50 p-3 rounded border-l-4 border-primary">
-                {currentChannel.description}
-              </div>
-            )}
-          </div>
-
-          <div className="pb-4">
-            {/* Messages */}
-            {sortedMessages && sortedMessages.length > 0 ? (
-              <div>
-                {sortedMessages.map((message) => {
-                  console.log(message);
-                  const user = users?.find((u) => u.id === message.userId);
-                  const replyToMessage = channelMessages?.find(
-                    (m) => m.id === (message as any).repliedMessageId,
-                  );
-                  const replyToUser = replyToMessage
-                    ? users?.find((u) => u.id === replyToMessage.userId)
-                    : undefined;
-
-                  if (!user) return null;
-
-                  return (
-                    <MessageComponent
-                      key={message.id}
-                      message={message}
-                      user={user}
-                      currentUser={currentUser}
-                      replyTo={replyToMessage}
-                      onReply={handleReply}
-                      replyToUser={replyToUser}
-                    />
-                  );
-                })}
-              </div>
-            ) : (
-              <div className="flex items-center justify-center h-64">
-                <div className="text-center text-concord-secondary">
-                  <p>No messages yet. Start the conversation!</p>
                 </div>
               </div>
-            )}
+            </div>
 
-            <div ref={messagesEndRef} />
+            <div className="pb-4">
+              {/* Messages */}
+              {sortedMessages && sortedMessages.length > 0 ? (
+                <div>
+                  {sortedMessages.map((message) => {
+                    const user = users?.find((u) => u.id === message.userId);
+                    const replyToMessage = channelMessages?.find(
+                      (m) => m.id === message.replies?.repliesToId,
+                    );
+                    const replyToUser = replyToMessage
+                      ? users?.find((u) => u.id === replyToMessage.userId)
+                      : undefined;
+
+                    if (!user) return null;
+
+                    return (
+                      <MessageComponent
+                        key={message.id}
+                        message={message}
+                        user={user}
+                        replyTo={replyToMessage}
+                        onReply={handleReply}
+                        replyToUser={replyToUser}
+                      />
+                    );
+                  })}
+                </div>
+              ) : (
+                <div className="flex items-center justify-center h-64">
+                  <div className="text-center text-concord-secondary">
+                    <p>No messages yet. Start the conversation!</p>
+                  </div>
+                </div>
+              )}
+
+              <div ref={messagesEndRef} />
+            </div>
           </div>
         </ScrollArea>
 

concord-client/src/pages/SettingsPage.tsx

@@ -1,21 +1,18 @@
 import React, { useState } from "react";
-import { useParams } from "react-router";
+import { useNavigate, useParams } from "react-router";
 import {
   Palette,
   User,
-  Shield,
   Mic,
   Settings,
   ChevronRight,
   Moon,
   Sun,
   Monitor,
-  Lock,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
 import { Separator } from "@/components/ui/separator";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
@@ -26,7 +23,6 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { ThemeSelector } from "@/components/theme-selector";
 import { useTheme } from "@/components/theme-provider";
 import { useAuthStore } from "@/stores/authStore";
 import { Slider } from "@/components/ui/slider";
@@ -45,12 +41,6 @@ const SETTINGS_SECTIONS: SettingsSection[] = [
     icon: User,
     description: "Profile, privacy, and account settings",
   },
-  // {
-  //   id: "security",
-  //   title: "Security",
-  //   icon: Lock,
-  //   description: "Password and security settings",
-  // },
   {
     id: "appearance",
     title: "Appearance",
@@ -65,207 +55,8 @@ const SETTINGS_SECTIONS: SettingsSection[] = [
   },
 ];
 
-const SecuritySettings: React.FC = () => {
-  const { user } = useAuthStore();
-  const [currentPassword, setCurrentPassword] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [isChangingPassword, setIsChangingPassword] = useState(false);
-  const [passwordError, setPasswordError] = useState("");
-  const [passwordSuccess, setPasswordSuccess] = useState("");
-  const [twoFactorEnabled, setTwoFactorEnabled] = useState(false);
-
-  const handlePasswordChange = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setPasswordError("");
-    setPasswordSuccess("");
-
-    if (!currentPassword || !newPassword || !confirmPassword) {
-      setPasswordError("All password fields are required");
-      return;
-    }
-
-    if (newPassword !== confirmPassword) {
-      setPasswordError("New passwords do not match");
-      return;
-    }
-
-    if (newPassword.length < 8) {
-      setPasswordError("New password must be at least 8 characters long");
-      return;
-    }
-
-    setIsChangingPassword(true);
-
-    try {
-      // TODO: Implement actual password change API call
-      await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate API call
-
-      console.log("Changing password for user:", user?.id);
-      // const result = await authClient.changePassword({
-      //   userId: user.id,
-      //   currentPassword,
-      //   newPassword,
-      //   token: authStore.token
-      // });
-
-      setPasswordSuccess("Password changed successfully");
-      setCurrentPassword("");
-      setNewPassword("");
-      setConfirmPassword("");
-    } catch (error) {
-      setPasswordError(
-        "Failed to change password. Please check your current password.",
-      );
-    } finally {
-      setIsChangingPassword(false);
-    }
-  };
-
-  return (
-    <div className="space-y-6 flex flex-col justify-center self-center items-stretch w-2/3">
-      <Card className="w-full p-6">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Lock className="h-5 w-5" />
-            Change Password
-          </CardTitle>
-          <CardDescription>
-            Update your password to keep your account secure.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {passwordError && (
-            <Alert variant="destructive">
-              <AlertDescription>{passwordError}</AlertDescription>
-            </Alert>
-          )}
-
-          {passwordSuccess && (
-            <Alert>
-              <AlertDescription>{passwordSuccess}</AlertDescription>
-            </Alert>
-          )}
-
-          <form onSubmit={handlePasswordChange} className="space-y-4">
-            <div className="grid gap-4">
-              <div className="grid gap-2">
-                <Label htmlFor="current-password">Current Password</Label>
-                <Input
-                  id="current-password"
-                  type="password"
-                  value={currentPassword}
-                  onChange={(e) => setCurrentPassword(e.target.value)}
-                  className="max-w-sm"
-                  required
-                />
-              </div>
-
-              <div className="grid gap-2">
-                <Label htmlFor="new-password">New Password</Label>
-                <Input
-                  id="new-password"
-                  type="password"
-                  value={newPassword}
-                  onChange={(e) => setNewPassword(e.target.value)}
-                  className="max-w-sm"
-                  minLength={8}
-                  required
-                />
-                <p className="text-xs text-muted-foreground">
-                  Must be at least 8 characters long
-                </p>
-              </div>
-
-              <div className="grid gap-2">
-                <Label htmlFor="confirm-password">Confirm New Password</Label>
-                <Input
-                  id="confirm-password"
-                  type="password"
-                  value={confirmPassword}
-                  onChange={(e) => setConfirmPassword(e.target.value)}
-                  className="max-w-sm"
-                  required
-                />
-              </div>
-            </div>
-
-            <div className="mt-6">
-              <Button
-                type="submit"
-                disabled={
-                  isChangingPassword ||
-                  !currentPassword ||
-                  !newPassword ||
-                  !confirmPassword
-                }
-              >
-                {isChangingPassword
-                  ? "Changing Password..."
-                  : "Change Password"}
-              </Button>
-            </div>
-          </form>
-        </CardContent>
-      </Card>
-
-      <Card className="w-full p-6">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Shield className="h-5 w-5" />
-            Security Options
-          </CardTitle>
-          <CardDescription>
-            Additional security features for your account.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <Label className="text-base font-medium">
-                Two-Factor Authentication
-              </Label>
-              <p className="text-sm text-muted-foreground">
-                Add an extra layer of security to your account
-              </p>
-            </div>
-            <Switch
-              checked={twoFactorEnabled}
-              onCheckedChange={setTwoFactorEnabled}
-            />
-          </div>
-
-          <Separator />
-
-          <div className="space-y-2">
-            <Label className="text-base font-medium">Active Sessions</Label>
-            <p className="text-sm text-muted-foreground mb-4">
-              Manage devices that are currently logged into your account
-            </p>
-            <Button variant="outline" size="sm">
-              View Active Sessions
-            </Button>
-          </div>
-
-          <Separator />
-
-          <div className="space-y-2">
-            <Label className="text-base font-medium">Account Backup</Label>
-            <p className="text-sm text-muted-foreground mb-4">
-              Download a copy of your account data
-            </p>
-            <Button variant="outline" size="sm">
-              Request Data Export
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
 const AccountSettings: React.FC = () => {
-  const { user, updateUser } = useAuthStore();
+  const { user } = useAuthStore();
   const [username, setUsername] = useState(user?.username || "");
   const [nickname, setNickname] = useState(user?.nickname || "");
   const [bio, setBio] = useState(user?.bio || "");
@@ -281,24 +72,14 @@ const AccountSettings: React.FC = () => {
 
     try {
       // TODO: Implement actual profile update API call
-      await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate API call
 
-      console.log("Updating profile:", { username, nickname, bio });
+      // Update local state
-      // const updatedUser = await userClient.updateProfile({
+      // updateUser({
-      //   userId: user.id,
       //   username: username.trim(),
       //   nickname: nickname.trim() || null,
       //   bio: bio.trim() || null,
-      //   token: authStore.token
       // });
 
-      // Update local state
-      updateUser({
-        username: username.trim(),
-        nickname: nickname.trim() || null,
-        bio: bio.trim() || null,
-      });
-
       setSaveSuccess("Profile updated successfully");
       setIsChanged(false);
     } catch (error) {
@@ -315,7 +96,7 @@ const AccountSettings: React.FC = () => {
   };
 
   return (
-    <div className="space-y-6 flex flex-col justify-center self-center items-stretch w-2/3">
+    <div className="space-y-6 flex flex-col justify-center self-center items-stretch w-full">
       <Card className="w-full p-6">
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
@@ -404,50 +185,10 @@ const AccountSettings: React.FC = () => {
           </div>
         </CardContent>
       </Card>
-
-      <Card className="w-full p-6">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Shield className="h-5 w-5" />
-            Privacy
-          </CardTitle>
-          <CardDescription>
-            Control who can contact you and see your information.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <Label className="text-base font-medium">
-                Allow Direct Messages
-              </Label>
-              <p className="text-sm text-muted-foreground">
-                Let other users send you direct messages
-              </p>
-            </div>
-            <Switch defaultChecked />
-          </div>
-
-          <Separator />
-
-          <div className="flex items-center justify-between">
-            <div>
-              <Label className="text-base font-medium">
-                Show Online Status
-              </Label>
-              <p className="text-sm text-muted-foreground">
-                Display when you're online to other users
-              </p>
-            </div>
-            <Switch defaultChecked />
-          </div>
-        </CardContent>
-      </Card>
     </div>
   );
 };
 
-// Appearance Settings Component (keeping existing implementation)
 const AppearanceSettings: React.FC = () => {
   const {
     currentLightTheme,
@@ -559,18 +300,6 @@ const AppearanceSettings: React.FC = () => {
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <Label className="text-base font-medium">
-                Quick Theme Selector
-              </Label>
-              <p className="text-sm text-muted-foreground">
-                Access the theme selector with custom theme creation
-              </p>
-            </div>
-            <ThemeSelector />
-          </div>
-
           {/* Current Theme Display */}
           <div className="grid grid-cols-2 gap-4">
             <div className="rounded-lg border p-4">
@@ -727,14 +456,9 @@ const AppearanceSettings: React.FC = () => {
   );
 };
 
-// Voice Settings Component
 const VoiceSettings: React.FC = () => {
   const [inputVolume, setInputVolume] = useState(75);
   const [outputVolume, setOutputVolume] = useState(100);
-  const [pushToTalk, setPushToTalk] = useState(false);
-  const [noiseSuppression, setNoiseSuppression] = useState(true);
-  const [echoCancellation, setEchoCancellation] = useState(true);
-  const [autoGainControl, setAutoGainControl] = useState(true);
 
   return (
     <div className="space-y-6 flex flex-col justify-center self-center items-stretch w-full">
@@ -774,69 +498,6 @@ const VoiceSettings: React.FC = () => {
           </div>
 
           <Separator />
-
-          <div className="flex items-center justify-between">
-            <div>
-              <Label className="text-base font-medium">Push to Talk</Label>
-              <p className="text-sm text-muted-foreground">
-                Use a key to transmit voice instead of voice activity
-              </p>
-            </div>
-            <Switch checked={pushToTalk} onCheckedChange={setPushToTalk} />
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card className="w-full p-6">
-        <CardHeader>
-          <CardTitle>Audio Processing</CardTitle>
-          <CardDescription>
-            Advanced audio processing features to improve call quality.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <Label className="text-base font-medium">Noise Suppression</Label>
-              <p className="text-sm text-muted-foreground">
-                Reduce background noise during calls
-              </p>
-            </div>
-            <Switch
-              checked={noiseSuppression}
-              onCheckedChange={setNoiseSuppression}
-            />
-          </div>
-
-          <Separator />
-
-          <div className="flex items-center justify-between">
-            <div>
-              <Label className="text-base font-medium">Echo Cancellation</Label>
-              <p className="text-sm text-muted-foreground">
-                Prevent audio feedback and echo
-              </p>
-            </div>
-            <Switch
-              checked={echoCancellation}
-              onCheckedChange={setEchoCancellation}
-            />
-          </div>
-
-          <Separator />
-
-          <div className="flex items-center justify-between">
-            <div>
-              <Label className="text-base font-medium">Auto Gain Control</Label>
-              <p className="text-sm text-muted-foreground">
-                Automatically adjust microphone sensitivity
-              </p>
-            </div>
-            <Switch
-              checked={autoGainControl}
-              onCheckedChange={setAutoGainControl}
-            />
-          </div>
         </CardContent>
       </Card>
     </div>
@@ -846,13 +507,12 @@ const VoiceSettings: React.FC = () => {
 const SettingsPage: React.FC = () => {
   const { section } = useParams();
   const currentSection = section || "account";
+  const navigate = useNavigate();
 
   const renderSettingsContent = () => {
     switch (currentSection) {
       case "account":
         return <AccountSettings />;
-      case "security":
-        return <SecuritySettings />;
       case "appearance":
         return <AppearanceSettings />;
       case "voice":
@@ -882,10 +542,11 @@ const SettingsPage: React.FC = () => {
                 <Button
                   key={settingsSection.id}
                   variant={isActive ? "secondary" : "ghost"}
+                  onClick={() => navigate(`/settings/${settingsSection.id}`)}
                   className="w-full justify-start mb-1 h-auto p-2"
                   asChild
                 >
-                  <a href={`/settings/${settingsSection.id}`}>
+                  <div>
                     <Icon className="mr-2 h-4 w-4" />
                     <div className="flex-1 text-left">
                       <div className="font-medium">{settingsSection.title}</div>
@@ -896,7 +557,7 @@ const SettingsPage: React.FC = () => {
                       )}
                     </div>
                     <ChevronRight className="h-4 w-4" />
-                  </a>
+                  </div>
                 </Button>
               );
             })}
@@ -924,7 +585,7 @@ const SettingsPage: React.FC = () => {
         </div>
 
         {/* Content */}
-        <ScrollArea className="min-h-0 w-full">
+        <ScrollArea className="min-h-0 w-full bg-concord-primary h-full">
           <div className="p-6 flex w-full">{renderSettingsContent()}</div>
         </ScrollArea>
       </div>

concord-client/src/stores/voiceStore.ts

@@ -71,7 +71,6 @@ export const useVoiceStore = create<VoiceState & VoiceActions>((set, get) => {
    * @returns The configured RTCPeerConnection instance.
    */
   const createPeerConnection = (targetUserId: string): RTCPeerConnection => {
-    console.log(`Creating peer connection for: ${targetUserId}`);
     const { iceServers, localStream, socket, peerConnections } = get();
 
     const peerConnection = new RTCPeerConnection({ iceServers });
@@ -95,7 +94,6 @@ export const useVoiceStore = create<VoiceState & VoiceActions>((set, get) => {
 
     // Handle incoming remote tracks
     peerConnection.ontrack = (event) => {
-      console.log(`Received remote track from: ${targetUserId}`);
       set((state) => {
         const newStreams = new Map(state.remoteStreams);
         newStreams.set(targetUserId, event.streams[0]);
@@ -105,9 +103,6 @@ export const useVoiceStore = create<VoiceState & VoiceActions>((set, get) => {
 
     // For debugging connection state
     peerConnection.onconnectionstatechange = () => {
-      console.log(
-        `Connection state change for ${targetUserId}: ${peerConnection.connectionState}`,
-      );
       if (
         peerConnection.connectionState === "disconnected" ||
         peerConnection.connectionState === "failed"
@@ -128,10 +123,6 @@ export const useVoiceStore = create<VoiceState & VoiceActions>((set, get) => {
     connectedUserIds: string[];
     iceServers: IceServerConfig[];
   }) => {
-    console.log(
-      "Successfully joined voice channel. Users:",
-      data.connectedUserIds,
-    );
     set({
       iceServers: data.iceServers,
       isConnecting: false,
@@ -150,7 +141,6 @@ export const useVoiceStore = create<VoiceState & VoiceActions>((set, get) => {
   };
 
   const onUserLeft = (data: { userId: string }) => {
-    console.log(`User ${data.userId} left the channel.`);
     cleanupPeerConnection(data.userId);
   };
 
@@ -158,7 +148,6 @@ export const useVoiceStore = create<VoiceState & VoiceActions>((set, get) => {
     senderUserId: string;
     sdp: RTCSessionDescriptionInit;
   }) => {
-    console.log("Received WebRTC offer from:", data.senderUserId);
     const peerConnection = createPeerConnection(data.senderUserId);
     await peerConnection.setRemoteDescription(
       new RTCSessionDescription(data.sdp),
@@ -175,7 +164,6 @@ export const useVoiceStore = create<VoiceState & VoiceActions>((set, get) => {
     senderUserId: string;
     sdp: RTCSessionDescriptionInit;
   }) => {
-    console.log("Received WebRTC answer from:", data.senderUserId);
     const peerConnection = get().peerConnections.get(data.senderUserId);
     if (peerConnection) {
       await peerConnection.setRemoteDescription(
@@ -271,7 +259,6 @@ export const useVoiceStore = create<VoiceState & VoiceActions>((set, get) => {
         get();
       if (!socket || !activeVoiceChannelId) return;
 
-      console.log(`Leaving voice channel: ${activeVoiceChannelId}`);
       socket.emit("leave-voicechannel", { channelId: activeVoiceChannelId });
 
       // Clean up all event listeners