From 1109adb6a58b75b6a3f082a7aceda9b4402ab64e Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Wed, 26 Jul 2023 16:53:50 +0300
Subject: [PATCH] hide search column in chat view

---
 src/js/views/View.tsx              | 12 ++++++++----
 src/js/views/chat/Chat.tsx         |  1 +
 src/js/views/chat/ChatList.tsx     |  4 ++--
 src/js/views/chat/ChatListItem.tsx |  2 +-
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/js/views/View.tsx b/src/js/views/View.tsx
index f01fa1fb..a99b7836 100644
--- a/src/js/views/View.tsx
+++ b/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>
     );
   }
diff --git a/src/js/views/chat/Chat.tsx b/src/js/views/chat/Chat.tsx
index 374d123e..8ab400db 100644
--- a/src/js/views/chat/Chat.tsx
+++ b/src/js/views/chat/Chat.tsx
@@ -9,6 +9,7 @@ class Chat extends View {
   constructor() {
     super();
     this.id = 'chat-view';
+    this.hideSideBar = true;
   }
 
   renderView() {
diff --git a/src/js/views/chat/ChatList.tsx b/src/js/views/chat/ChatList.tsx
index 94a54322..18f2f9c8 100644
--- a/src/js/views/chat/ChatList.tsx
+++ b/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}
diff --git a/src/js/views/chat/ChatListItem.tsx b/src/js/views/chat/ChatListItem.tsx
index 202ae503..25ed64fd 100644
--- a/src/js/views/chat/ChatListItem.tsx
+++ b/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} />