add SettingsMenu tabs component (WIP)

messages/renderer/en.json

@@ -468,6 +468,9 @@
     "description": "Name to show for an observation when it does not match any preset",
     "message": "Observation"
   },
+  "renderer.components.SettingsView.index.aboutMapeo": {
+    "message": "About Mapeo"
+  },
   "renderer.components.SyncView.Searching.searchingHint": {
     "description": "Hint on sync screen when searching on wifi for devices",
     "message": "Make sure devices are turned on and connected to the same wifi network"

src/renderer/components/Home.js

@@ -18,6 +18,7 @@ import TitleBarShim from './TitleBarShim'
 import { defineMessages, useIntl } from 'react-intl'
 import createPersistedState from '../hooks/createPersistedState'
 import SyncView from './SyncView'
+import { SettingsView } from './SettingsView'
 import { STATES as updateStates, UpdaterView, UpdateTab } from './UpdaterView'
 import useUpdater from './UpdaterView/useUpdater'
 import Loading from './Loading'
@@ -301,6 +302,7 @@ export default function Home ({ onSelectLanguage }) {
           component={SyncView}
           unmountOnExit
         />
+        <TabPanel value={tabIndex} index={3} component={SettingsView} />
       </TabContent>
       <ChangeLanguage
         open={dialog === 'ChangeLanguage'}

src/renderer/components/SettingsView/AboutMapeo.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import Paper from '@material-ui/core/Paper'
+
+export const AboutMapeoMenu = () => {
+  return <Paper></Paper>
+}

src/renderer/components/SettingsView/SettingsMenu.js

@@ -0,0 +1,101 @@
+import * as React from 'react'
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab'
+import { useIntl } from 'react-intl'
+import styled from 'styled-components'
+import { Paper, Typography } from '@material-ui/core'
+
+export const SettingsMenu = ({ tabs, currentTab, onTabChange }) => {
+  const { formatMessage: t } = useIntl()
+
+  return (
+    <Tabs
+      orientation='vertical'
+      value={currentTab}
+      onChange={(e, newValue) => onTabChange(newValue)}
+      style={{
+        maxWidth: '300px'
+      }}
+    >
+      {tabs.map((tab, index) => (
+        <Tab
+          orientation='vertical'
+          key={tab.tabId}
+          value={tab.tabId}
+          component={RenderTab}
+          tab={tab}
+          active={tab.tabId === currentTab}
+        />
+      ))}
+    </Tabs>
+  )
+}
+
+const RenderTab = ({
+  tab: { icon: Icon, label, subtitle },
+  active,
+  ...rest
+}) => {
+  const { formatMessage: t } = useIntl()
+
+  console.log({ active, rest })
+
+  return (
+    <Paper {...rest}>
+      <WrapperRow>
+        <IconContainer>{Icon ? <Icon /> : null}</IconContainer>
+        <TitleContainer>
+          <Typography
+            variant='body1'
+            component='label'
+            style={{
+              textTransform: 'none',
+              textAlign: 'left',
+              cursor: 'pointer'
+            }}
+          >
+            {t(label)}
+          </Typography>
+          <Typography
+            variant='caption'
+            component='label'
+            style={{
+              textTransform: 'none',
+              textAlign: 'left',
+              cursor: 'pointer'
+            }}
+          >
+            {subtitle}
+          </Typography>
+        </TitleContainer>
+      </WrapperRow>
+    </Paper>
+  )
+}
+
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+`
+
+const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const WrapperRow = styled(Row)`
+  padding: 10px;
+  align-items: center;
+`
+
+const IconContainer = styled.div`
+  flex: 1;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+`
+
+const TitleContainer = styled(Column)`
+  justify-content: flex-start;
+  flex: 8;
+`

src/renderer/components/SettingsView/index.js

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import Paper from '@material-ui/core/Paper'
+import InfoIcon from '@material-ui/icons/Info'
+import { SettingsMenu } from './SettingsMenu'
+import { defineMessages } from 'react-intl'
+import { AboutMapeoMenu } from './AboutMapeo'
+
+const m = defineMessages({
+  aboutMapeo: 'About Mapeo'
+})
+
+const tabs = /** @typedef {const} */ [
+  {
+    tabId: 'AboutMapeo',
+    icon: InfoIcon,
+    label: m.aboutMapeo,
+    subtitle: 'Version and build number'
+  }
+]
+
+export const SettingsView = () => {
+  const [menuItem, setMenuItem] = useState(null)
+
+  console.log({ menuItem })
+
+  return (
+    <div>
+      <SettingsMenu
+        tabs={tabs}
+        currentTab={menuItem}
+        onTabChange={setMenuItem}
+      />
+
+      {menuItem === 'AboutMapeo' && (
+        <Paper>
+          <AboutMapeoMenu />
+        </Paper>
+      )}
+    </div>
+  )
+}