feat: moved to user settings the App version info details

also cleanup remaining of the settings state in redux

Author: Bilb

ts/components/SessionMainPanel.tsx

@@ -1,24 +1,14 @@
-import { useSelector } from 'react-redux';
 import { useAppIsFocused } from '../hooks/useAppFocused';
-import { getFocusedSettingsSection } from '../state/selectors/section';
 
 import { SmartSessionConversation } from '../state/smart/SessionConversation';
-import { SessionSettingsView } from './settings/SessionSettings';
 import { useHTMLDirection } from '../util/i18n/rtlSupport';
 
-const FilteredSettingsView = SessionSettingsView as any;
-
 export const SessionMainPanel = () => {
-  const focusedSettingsSection = useSelector(getFocusedSettingsSection);
-  const isSettingsView = focusedSettingsSection !== undefined;
   const htmlDirection = useHTMLDirection();
 
   // even if it looks like this does nothing, this does update the redux store.
   useAppIsFocused();
 
-  if (isSettingsView) {
-    return <FilteredSettingsView category={focusedSettingsSection} />;
-  }
   return (
     <div className="session-conversation">
       <SmartSessionConversation htmlDirection={htmlDirection} />

ts/components/dialog/user-settings/pages/DefaultSettingsPage.tsx

@@ -24,7 +24,7 @@ import { ProIconButton } from '../../../buttons/ProButton';
 import { type SessionIconProps, SessionIcon } from '../../../icon';
 import { LUCIDE_ICONS_UNICODE } from '../../../icon/lucide';
 import { type LucideIconProps, LucideIcon } from '../../../icon/LucideIcon';
-import { SessionLucideIconButton } from '../../../icon/SessionIconButton';
+import { SessionIconButton, SessionLucideIconButton } from '../../../icon/SessionIconButton';
 import { QRView } from '../../../qrview/QrView';
 import { ModalBasicHeader, SessionWrapperModal } from '../../../SessionWrapperModal';
 import { showLinkVisitWarningDialog } from '../../OpenUrlModal';
@@ -34,6 +34,7 @@ import { ProfileHeader, ProfileName } from '../components';
 import type { ProfileDialogModes } from '../ProfileDialogModes';
 import { tr } from '../../../../localization/localeTools';
 import { useIsProAvailable } from '../../../../hooks/useIsProAvailable';
+import { setDebugMode } from '../../../../state/ducks/debug';
 
 const handleKeyQRMode = (mode: ProfileDialogModes, setMode: (mode: ProfileDialogModes) => void) => {
   switch (mode) {
@@ -252,6 +253,74 @@ function AdminSection() {
   );
 }
 
+const StyledVersionInfo = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--margins-xs);
+  background: none;
+  font-size: var(--font-size-sm);
+`;
+
+const StyledSpanSessionInfo = styled.span<{ opacity?: number }>`
+  opacity: ${props => props.opacity ?? 0.5};
+  transition: var(--default-duration);
+  user-select: text;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+const SessionInfo = () => {
+  const [clickCount, setClickCount] = useState(0);
+
+  const dispatch = useDispatch();
+
+  return (
+    <StyledVersionInfo>
+      <SessionIconButton
+        iconSize="medium"
+        iconType="sessionTokenLogoWithText"
+        onClick={() => {
+          showLinkVisitWarningDialog('https://token.getsession.org/', dispatch);
+        }}
+        // disable transition here as the transition does the opposite that usual (hovering makes it more opaque/bright)
+        style={{ transition: 'none' }}
+      />
+      <Flex
+        $container={true}
+        $flexDirection="row"
+        $alignItems="center"
+        $flexGap="var(--margins-sm)"
+      >
+        <StyledSpanSessionInfo
+          onClick={() => {
+            showLinkVisitWarningDialog(
+              `https://github.com/session-foundation/session-desktop/releases/tag/v${window.versionInfo.version}`,
+              dispatch
+            );
+          }}
+        >
+          v{window.versionInfo.version}
+        </StyledSpanSessionInfo>
+        <StyledSpanSessionInfo
+          onClick={() => {
+            setClickCount(clickCount + 1);
+            if (clickCount === 10) {
+              dispatch(setDebugMode(true));
+              setClickCount(0);
+            }
+          }}
+        >
+          {window.versionInfo.commitHash?.slice(0, 8)}
+        </StyledSpanSessionInfo>
+      </Flex>
+    </StyledVersionInfo>
+  );
+};
+
 export const DefaultSettingPage = () => {
   const dispatch = useDispatch();
 
@@ -344,6 +413,7 @@ export const DefaultSettingPage = () => {
           <MiscSection />
           <SettingsSection />
           <AdminSection />
+          <SessionInfo />
         </Flex>
       </SessionWrapperModal>
     </StyledUserSettingsDialog>

ts/components/leftpane/LeftPane.tsx

@@ -9,7 +9,6 @@ import { IncomingCallDialog } from '../calling/IncomingCallDialog';
 import { ModalContainer } from '../dialog/ModalContainer';
 import { ActionsPanel } from './ActionsPanel';
 import { LeftPaneMessageSection } from './LeftPaneMessageSection';
-import { LeftPaneSettingSection } from './LeftPaneSettingSection';
 import { useIsRtl } from '../../util/i18n/rtlSupport';
 
 export const leftPaneListWidth = 300; // var(--left-panel-width) without the 80px of the action gutter
@@ -33,9 +32,6 @@ const LeftPaneSection = () => {
     return <LeftPaneMessageSection />;
   }
 
-  if (focusedSection === SectionType.Settings) {
-    return <LeftPaneSettingSection />;
-  }
   return null;
 };
 

ts/components/leftpane/LeftPaneSectionHeader.tsx

@@ -18,6 +18,7 @@ import { searchActions } from '../../state/ducks/search';
 import { LUCIDE_ICONS_UNICODE } from '../icon/lucide';
 import { SessionLucideIconButton } from '../icon/SessionIconButton';
 import { tr } from '../../localization/localeTools';
+import { userSettingsModal } from '../../state/ducks/modalDialog';
 
 const StyledLeftPaneSectionHeader = styled(Flex)`
   height: var(--main-view-header-height);
@@ -114,8 +115,7 @@ export const LeftPaneBanner = () => {
 
   const showRecoveryPhraseModal = () => {
     dispatch(disableRecoveryPhrasePrompt());
-    dispatch(sectionActions.showLeftPaneSection(SectionType.Settings));
-    dispatch(sectionActions.showSettingsSection('recovery-password'));
+    dispatch(userSettingsModal({ userSettingsPage: 'recovery-password' }));
   };
 
   if (section !== SectionType.Message || isSignInWithRecoveryPhrase || hideRecoveryPassword) {