hide search column in chat view

src/js/views/View.tsx

@@ -4,6 +4,7 @@ import { JSX } from 'preact';
 import Component from '../BaseComponent';
 import ErrorBoundary from '../components/ErrorBoundary';
 import Header from '../components/Header';
+import Show from '../components/helpers/Show';
 
 import Search from './Search';
 
@@ -19,21 +20,24 @@ abstract class View extends Component {
   id = '';
   observer: ResizeObserver | null = null;
   scrollPosition = 0;
+  hideSideBar = false;
 
   abstract renderView(): JSX.Element;
 
   render() {
     return (
       <div className="flex flex-row w-full">
-        <div className="flex flex-col w-full lg:w-2/3">
+        <div className={`flex flex-col w-full ${this.hideSideBar ? '' : 'lg:w-2/3'}`}>
           <Header />
           <div class={this.class} id={this.id}>
             <ErrorBoundary>{this.renderView()}</ErrorBoundary>
           </div>
         </div>
-        <div className="flex-col hidden lg:flex lg:w-1/3">
-          <Search focus={false} />
-        </div>
+        <Show when={!this.hideSideBar}>
+          <div className="flex-col hidden lg:flex lg:w-1/3">
+            <Search focus={false} />
+          </div>
+        </Show>
       </div>
     );
   }

src/js/views/chat/Chat.tsx

@@ -9,6 +9,7 @@ class Chat extends View {
   constructor() {
     super();
     this.id = 'chat-view';
+    this.hideSideBar = true;
   }
 
   renderView() {

src/js/views/chat/ChatList.tsx

@@ -72,7 +72,7 @@ class ChatList extends BaseComponent<ChatListProps, ChatListState> {
 
     return (
       <section
-        className={`h-screen overflow-x-hidden overflow-y-scroll px-2 md:px-0 w-full md:w-64 ${
+        className={`h-screen overflow-x-hidden overflow-y-scroll px-4 md:px-0 w-full md:w-64 ${
           this.props.className || ''
         }`}
       >
@@ -86,7 +86,7 @@ class ChatList extends BaseComponent<ChatListProps, ChatListState> {
             <a>{t('turn_on_desktop_notifications')}</a>
           </div>
         </div>
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-4">
           {this.state.sortedChats.map((pubkey) => (
             <ChatListItem
               active={pubkey === activeChat}

src/js/views/chat/ChatListItem.tsx

@@ -88,7 +88,7 @@ class ChatListItem extends BaseComponent<ChatListItemProps, ChatListItemState> {
         onKeyUp={(e: KeyboardEvent) => this.onKeyUp(e)}
         role="button"
         tabIndex={0}
-        className={`flex flex-row gap-2 ${hasUnseen} ${active}`}
+        className={`flex flex-row gap-4 ${hasUnseen} ${active}`}
         onClick={() => route(`/chat/${npub}`)}
       >
         <Avatar str={npub} width={49} />