Cleanup

Author: singiamtel

src/UI/components/pages/ChatRoom.tsx

@@ -1,13 +1,13 @@
-import { twMerge } from 'tailwind-merge';
 import ChatBox from '../single/chatbox';
 import UserList from '../single/UserList';
 import Chat from '../single/chat';
+import { cn } from '@/lib/utils';
 
 export default function ChatRoom(props: any) {
     return (
         <div
             id="big-panel"
-            className={twMerge(
+            className={cn(
                 props.className,
                 'flex break-normal h-screen',
             )}
@@ -17,9 +17,7 @@ export default function ChatRoom(props: any) {
                     <Chat
                     />
                 </div>
-                <div className="flex-grow">
-                    <ChatBox />
-                </div>
+                <ChatBox />
             </div>
             <div className="w-64">
                 <UserList

src/UI/components/single/BigPanel.tsx

@@ -1,10 +1,7 @@
 import {
     HTMLAttributes,
     useContext,
-    useRef,
-    useState,
 } from 'react';
-import { twMerge } from 'tailwind-merge';
 
 import { PS_context } from './PS_context';
 import UserList from './UserList';
@@ -13,6 +10,7 @@ import ChatBox from './chatbox';
 import Chat from './chat';
 import Home from '../../Home';
 import SettingsPage from '../../SettingsPage';
+import { cn } from '@/lib/utils';
 
 export default function BigPanel(props: Readonly<HTMLAttributes<'div'>>) {
     const { selectedPage: room, rooms } = useContext(PS_context);
@@ -27,7 +25,7 @@ export default function BigPanel(props: Readonly<HTMLAttributes<'div'>>) {
             return <SettingsPage className={props.className} />;
         } else {
             return (
-                <div className={twMerge(props.className, 'flex flex-col text-red-400')}>
+                <div className={cn(props.className, 'flex flex-col text-red-400')}>
           Unknown room type: "{roomType}"
                 </div>
             );
@@ -37,7 +35,7 @@ export default function BigPanel(props: Readonly<HTMLAttributes<'div'>>) {
     return (
         <div
             id="big-panel"
-            className={twMerge(
+            className={cn(
                 props.className,
                 'flex break-normal h-screen',
             )}

src/UI/components/single/UserList.tsx

@@ -35,7 +35,13 @@ export default function UserList() {
 
     return (
         <div className="bg-gray-sidebar-light dark:bg-gray-600 w-full h-full p-2 overflow-y-auto whitespace-nowrap">
-            <input className="w-full text-sm h-10 py-1 mb-2 px-2 bg-gray-251 placeholder:text-gray-150 dark:bg-gray-700 rounded-md" type="text" placeholder="Search users" value={search} onChange={(e) => setSearch(e.target.value)} />
+            <input
+                className="w-full text-sm h-10 py-1 mb-2 px-2 bg-gray-251 placeholder:text-gray-150 dark:bg-gray-700 rounded-md"
+                type="text"
+                placeholder="Search users"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+            />
             {staff.length > 0 && <h2 className="text-sm font-bold text-gray-500 dark:text-gray-175 mb-2">Staff</h2>}
             {staff.map((user, index) => (
                 <div key={index}>

src/UI/components/single/chat.tsx

@@ -1,7 +1,6 @@
 import {
     createRef,
     Fragment,
-    MouseEvent,
     useCallback,
     useContext,
     useLayoutEffect,

src/UI/components/single/sidebar.tsx

@@ -1,7 +1,6 @@
 import { HTMLAttributes, useContext } from 'react';
 import { PS_context } from './PS_context';
 import { RoomListComponent } from '../RoomListComponent';
-import { twMerge } from 'tailwind-merge';
 import {
     restrictToParentElement,
     restrictToVerticalAxis,
@@ -23,6 +22,7 @@ import {
     verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import SortableItem from '../../../utils/Sortable';
+import { cn } from '@/lib/utils';
 
 export default function Sidebar(props: Readonly<HTMLAttributes<'div'>>) {
     const { rooms, setRooms } = useContext(PS_context);
@@ -63,7 +63,7 @@ export default function Sidebar(props: Readonly<HTMLAttributes<'div'>>) {
         >
             <div
                 id='sidebar'
-                className={twMerge(
+                className={cn(
                     'bg-gray-sidebar-light dark:bg-gray-600 h-screen flex flex-col justify-between',
                     props.className,
                 )}