starting session component

app/client/web/src/App.tsx

@@ -19,9 +19,9 @@ const theme = createTheme({
       '#eef6f2',
       '#cce5d9',
       '#aad4bf',
-      '#88c3a6',
+      '#68c4af',
-      '#66b28c',
+      '#559e83',
-      '#4d9973',
+      '#559e83',
       '#3c7759',
       '#2b5540',
       '#1a3326',
@@ -75,6 +75,36 @@ const theme = createTheme({
       '#888888',
       '#999999',
     ],
+    'dark-databag-green': [
+      '#99bb99',
+      '#559e83',
+    ],
+     'light-databag-green': [
+      '#888888',
+      '#448844',
+    ],
+    'dark-tab': [
+      '#111111',
+      '#222222',
+      '#333333',
+      '#444444',
+    ],
+    'light-tab': [
+      '#dddddd',
+      '#cccccc',
+      '#bbbbbb',
+      '#aaaaaa',
+    ],
+    dbgreen: virtualColor({
+      name: 'dbgreen',
+      dark: 'dark-databag-green',
+      light: 'light-databag-green',
+    }),
+    tab: virtualColor({
+      name: 'tab',
+      dark: 'dark-tab',
+      light: 'light-tab',
+    }),
     surface: virtualColor({
       name: 'surface',
       dark: 'dark-surface',

app/client/web/src/access/Access.tsx

@@ -339,7 +339,7 @@ export function Access() {
           leftSectionPointerEvents="none"
           leftSection={<IconServer />}
           placeholder={state.strings.host}
-          value={state.node}
+          value={state.host}
           onKeyDown={(ev) => {
             if (ev.code === 'Enter') urlClose()
           }}

app/client/web/src/access/useAccess.hook.ts

@@ -19,7 +19,6 @@ export function useAccess() {
     code: '',
     scheme: '',
     language: '',
-    node: '',
     loading: false,
     secure: false,
     host: '',
@@ -46,7 +45,7 @@ export function useAccess() {
     }
 
     const { protocol, host } = location
-    setUrl(`${protocol}//${host}`)
+    updateState({ host, secure: protocol === 'https' });
   }, [])
 
   useEffect(() => {
@@ -57,18 +56,6 @@ export function useAccess() {
     }
   }, [state.mode, state.username, state.token, state.host, state.secure])
 
-  const setUrl = (node: string) => {
-    try {
-      const url = new URL(node)
-      const { protocol, host } = url
-      updateState({ node, host, secure: protocol === 'https:' })
-    } catch (err) {
-      console.log(err)
-      const { protocol, host } = location
-      updateState({ node, host, secure: protocol === 'https:' })
-    }
-  }
-
   const getAvailable = (node: string, secure: boolean) => {
     clearTimeout(debounceAvailable.current)
     debounceAvailable.current = setTimeout(async () => {
@@ -133,8 +120,9 @@ export function useAccess() {
     setCode: (code: string) => {
       updateState({ code })
     },
-    setNode: (node: string) => {
+    setNode: (host: string) => {
-      setUrl(node)
+      const insecure = /^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|:\d+$|$)){4}$/.test(host);
+      updateState({ host, secure: !insecure });
     },
     setLanguage: (code: string) => {
       settings.actions.setLanguage(code)

app/client/web/src/session/Session.module.css

@@ -0,0 +1,52 @@
+.session {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .tabs {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+
+    .activeTabItem {
+      flex: 1;
+      flex-grow: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--mantine-color-tab-2);      
+      color: var(--mantine-color-dbgreen-1);      
+      padding-bottom: 8px;
+      padding-top: 8px;
+      cursor: pointer;
+    }
+
+    .idleTabItem {
+      flex: 1;
+      flex-grow: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--mantine-color-tab-1);      
+      color: var(--mantine-color-dbgreen-0);      
+      padding-bottom: 8px;
+      padding-top: 8px;
+      cursor: pointer;
+
+      &:hover {
+        background: var(--mantine-color-tab-3);      
+      }
+    }
+
+    .tabDivider {
+      width: 2px;
+    }
+
+    .tabIcon {
+      width: 32px;
+      height: 32px;
+    }
+  }
+}

app/client/web/src/session/Session.tsx

@@ -1,10 +1,60 @@
-import React, { useContext } from 'react'
+import React, { useState, useContext } from 'react'
-import { Button } from '@mantine/core'
+import { Text, Button } from '@mantine/core'
 import { AppContext } from '../context/AppContext'
+import { SettingsContext } from '../context/SettingsContext';
 import { ContextType } from '../context/ContextType'
+import classes from './Session.module.css'
+import { IconAddressBook, IconMessages, IconUser, IconSettings } from '@tabler/icons-react'
 
 export function Session() {
+  const [ tab, setTab ] = useState('channels');
   const app = useContext(AppContext) as ContextType
+  const settings = useContext(SettingsContext) as ContextType
 
-  return <Button onClick={app.actions.accountLogout}>Session Logout</Button>
+console.log(tab);
+
+  return (
+    <div className={classes.session}>
+      { settings.state.display === 'small' && (
+        <div className={classes.tabs}>
+          { tab === 'channels' && (
+            <div className={classes.activeTabItem}><IconMessages className={classes.tabIcon} /></div>
+          )}
+          { tab !== 'channels' && (
+            <div className={classes.idleTabItem} onClick={() => setTab('channels')}><IconMessages className={classes.tabIcon} /></div>
+          )}
+          <div className={classes.tabDivider} />
+          { tab === 'contacts' && (
+            <div className={classes.activeTabItem}><IconAddressBook className={classes.tabIcon} /></div>
+          )}
+          { tab !== 'contacts' && (
+            <div className={classes.idleTabItem} onClick={() => setTab('contacts')}><IconAddressBook className={classes.tabIcon} /></div>
+          )}
+          <div className={classes.tabDivider} />
+          { tab === 'profile' && (
+            <div className={classes.activeTabItem}><IconUser className={classes.tabIcon} /></div>
+          )}
+          { tab !== 'profile' && (
+            <div className={classes.idleTabItem} onClick={() => setTab('profile')}><IconUser className={classes.tabIcon} /></div>
+          )}
+          <div className={classes.tabDivider} />
+          { tab === 'settings' && (
+            <div className={classes.activeTabItem}><IconSettings className={classes.tabIcon} /></div>
+          )}
+          { tab !== 'settings' && (
+            <div className={classes.idleTabItem} onClick={() => setTab('settings')}><IconSettings className={classes.tabIcon} /></div>
+          )}
+        </div>
+      )}
+      { settings.state.display === 'medium' && (
+        <div>MEDIUM DISPLAY</div>
+      )}
+      { settings.state.display === 'large' && (
+        <div>LARGE DISPLAY</div>
+      )}
+      <Button onClick={app.actions.accountLogout}>Session Logout</Button>
+    </div>
+  );
 }
+
+