Feat/mobile optimised UI

.envrc

@@ -0,0 +1 @@
+use nix

shell.nix

@@ -0,0 +1,26 @@
+{ pkgs ? import <nixpkgs> {} }:
+
+pkgs.mkShell {
+
+  name = "session-desktop";
+  packages = with pkgs; [
+    nodejs_20
+    nodeenv
+    python314
+    cmake
+    gnumake
+    nodeenv
+        (pkgs.yarn.override {
+          nodejs = null;
+        })
+  ];
+
+  env = {
+  };
+
+  shellHook = ''
+  '';
+
+  LD_LIBRARY_PATH = with pkgs; pkgs.lib.makeLibraryPath [ nss nspr dbus cups gtk3 libxcomposite libgbm expat libxkbcommon alsa-lib ];
+
+}

stylesheets/_modules.scss

@@ -281,7 +281,7 @@
 // Module: Conversation List Item
 
 .module-conversation-list-item {
-  max-width: 300px;
+  max-width: 100%;
   display: flex;
   flex-direction: row;
   padding-inline-end: 16px;

stylesheets/_session_conversation.scss

@@ -23,8 +23,11 @@
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  width: var(--main-panel-content-width);
+  width: 1px;
   height: 100%;
+  @media screen and (min-width: 680px) {
+    width: var(--main-panel-content-width);
+  }
 
   .selection-mode {
     .messages-container > *:not(.message-selected) {
@@ -34,6 +37,13 @@
   }
 }
 
+.mobile-close-conversation {
+  display: block;
+  @media screen and (min-width: 680px) {
+    display: none;
+  }
+}
+
 .conversation-content {
   display: flex;
   flex-grow: 1;

stylesheets/_session_left_pane.scss

@@ -16,3 +16,20 @@
   flex-grow: 0;
   padding-inline-end: 5px;
 }
+
+.module-session-inbox-view__styled_gutter {
+  transition: none;
+  width: 100%;
+  @media screen and (min-width: 680px) {
+    width: var(--left-panel-width);
+  }
+}
+.mobile-active-conversation {
+  width: 1px;
+  margin-left: -1px;
+  @media screen and (min-width: 680px) {
+    width: 100%;
+    margin-left: 0px;
+    max-width: var(--left-panel-width);
+  }
+}

ts/components/SessionInboxView.tsx

@@ -1,15 +1,26 @@
 import { Provider } from 'react-redux';
-import styled from 'styled-components';
 import { AnimatePresence } from 'framer-motion';
+import { clsx } from 'clsx';
 import { LeftPane } from './leftpane/LeftPane';
 import { SessionMainPanel } from './SessionMainPanel';
 import { SessionTheme } from '../themes/SessionTheme';
 import { Flex } from './basic/Flex';
+import { useSelectedConversationKey } from '../state/selectors/selectedConversation';
 
-const StyledGutter = styled.div`
-  width: var(--left-panel-width) !important;
-  transition: none;
-`;
+const StyledGutter = (props: any) => {
+  const conversationKey = useSelectedConversationKey();
+
+  return (
+    <div
+      {...props}
+      className={clsx(
+        'module-session-inbox-view__styled_gutter',
+        conversationKey && 'mobile-active-conversation'
+
+      )}
+    />
+  );
+};
 
 export const SessionInboxView = () => {
   if (!window.inboxStore) {

ts/components/SplitViewContainer.tsx

@@ -50,7 +50,7 @@ const TopSplitViewPanel = ({
   topHeight: number | undefined;
   setTopHeight: (value: number) => void;
 }) => {
-  const topRef = useRef<HTMLDivElement>(null);
+  const topRef = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
     if (topRef.current) {
       if (!topHeight) {

ts/components/conversation/header/ConversationHeader.tsx

@@ -29,15 +29,21 @@ import { ConversationTypeEnum } from '../../../models/types';
 import { Constants } from '../../../session';
 import { useShowConversationSettingsFor } from '../../menuAndSettingsHooks/useShowConversationSettingsFor';
 import { sectionActions } from '../../../state/ducks/section';
+import { SessionLucideIconButton } from '../../icon/SessionIconButton';
+import { LUCIDE_ICONS_UNICODE } from '../../icon/lucide';
+import { resetConversationExternal } from '../../../state/ducks/conversations';
 
 const StyledConversationHeader = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   height: var(--main-view-header-height);
   position: relative;
-  padding: 0px var(--margins-lg) 0px var(--margins-sm);
   background: var(--background-primary-color);
+  padding: 0px var(--margins-lg) 0px var(--margins-lg);
+  @media screen and (min-width: 680px) {
+    padding: 0px var(--margins-lg) 0px var(--margins-sm);
+  }
 `;
 
 export const ConversationHeaderWithDetails = () => {
@@ -62,6 +68,13 @@ export const ConversationHeaderWithDetails = () => {
         width="100%"
         $flexGrow={1}
       >
+        <div className="mobile-close-conversation">
+          <SessionLucideIconButton
+            iconSize={'large'}
+            unicode={LUCIDE_ICONS_UNICODE.X}
+            onClick={() => window?.inboxStore?.dispatch(resetConversationExternal())}
+          />
+        </div>
         <ConversationHeaderTitle
           showSubtitle={!isOutgoingRequest && !isIncomingRequest && !isBlocked}
         />

ts/components/leftpane/LeftPane.tsx

@@ -11,14 +11,18 @@ import { useIsRtl } from '../../util/i18n/rtlSupport';
 export const leftPaneListWidth = 300; // var(--left-panel-width) without the 80px of the action gutter
 
 const StyledLeftPane = styled.div<{ $isRtl: boolean }>`
-  width: ${() => `${leftPaneListWidth}px`};
-  height: 100%;
+  width: 100%;
+  @media screen and (min-width: 680px) {
+    width: ${() => `${leftPaneListWidth}px`};
+    height: 100%;
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+  }
+  height: calc(100% - 76px);
   display: inline-flex;
   flex-direction: column;
   position: relative;
   flex-shrink: 0;
-  border-left: 1px solid var(--border-color);
-  border-right: 1px solid var(--border-color);
   direction: ${({ $isRtl }) => ($isRtl ? 'rtl' : 'ltr')};
 `;
 
@@ -38,7 +42,13 @@ const CallContainer = () => {
 
 const StyledLeftPaneSession = styled.div`
   display: flex;
+  flex-direction: column-reverse;
   height: 100%;
+  width: 100%;
+
+  @media screen and (min-width: 680px) {
+    flex-direction: row;
+  }
 `;
 
 export const LeftPane = () => {

ts/components/leftpane/LeftPaneSectionContainer.tsx

@@ -1,14 +1,25 @@
 import styled from 'styled-components';
 
 export const LeftPaneSectionContainer = styled.div`
-  width: var(--actions-panel-width);
   display: flex;
-  flex-direction: column;
+  width: 100%;
+  justify-content: space-between;
   align-items: center;
-  overflow-y: auto;
-  flex-shrink: 0;
 
-  .session-icon-button {
-    padding: 30px 20px;
+  @media screen and (min-width: 680px) {
+    width: var(--actions-panel-width);
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
+    flex-shrink: 0;
+
+    .session-icon-button {
+      padding: 30px 20px;
+    }
+  }
+  .mobile-active-conversation & {
+    @media screen and (max-width: 679px) {
+      z-index: -1;
+    }
   }
 `;

ts/components/registration/components/Hero.tsx

@@ -1,13 +1,17 @@
 import styled from 'styled-components';
 
 const StyledHeroContainer = styled.div`
-  width: 40%;
-  height: 100%;
+  display: none;
 
-  div {
-    width: 100%;
+  @media screen and (min-width: 680px) {
+    display: block;
+    width: 40%;
     height: 100%;
-    overflow: hidden;
+    div {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
   }
 `;
 

ts/mains/main_node.ts

@@ -254,7 +254,7 @@ function getDefaultWindowSize() {
   return {
     defaultWidth: 880,
     defaultHeight: openDevToolsTestIntegration() ? 1000 : 820, // the dev tools open at the bottom hide some stuff which should be visible
-    minWidth: 880,
+    minWidth: 380,
     minHeight: 600,
   };
 }