add topbar, messages and members to web

apps/vite/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@status-im/components": "*",
+    "@status-im/icons": "*",
     "@tamagui/core": "1.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

apps/vite/src/app.tsx

@@ -5,6 +5,7 @@ import {
   Code,
   Heading,
   Label,
+  Messages,
   Paragraph,
   Shape,
   Sidebar,
@@ -12,11 +13,13 @@ import {
 import { Stack, TamaguiProvider } from '@tamagui/core'
 
 import tamaguiConfig from '../tamagui.config'
+import { Topbar } from './components/topbar'
 
 type ThemeVars = 'light' | 'dark'
 
 function App() {
   const [theme, setTheme] = useState<ThemeVars>('light')
+  const [showMembers, setShowMembers] = useState(false)
 
   return (
     <TamaguiProvider config={tamaguiConfig} defaultTheme={theme}>
@@ -30,14 +33,13 @@ function App() {
         </div>
 
         <main id="main">
-          <Stack
+          <Topbar
-            backgroundColor="$background"
+            membersVisisble={showMembers}
-            justifyContent="center"
+            onMembersPress={() => setShowMembers(show => !show)}
-            alignItems="center"
+          />
-          >
+          <div id="content">
-            <Paragraph weight="semibold">Topbar</Paragraph>
+            <Messages />
-          </Stack>
+
-          <div>
             <Stack width="100%" height="100%" backgroundColor="$background">
               <Stack
                 flexDirection="column"
@@ -77,6 +79,8 @@ function App() {
             <Paragraph weight="semibold">Composer</Paragraph>
           </Stack>
         </main>
+
+        {showMembers && <div id="members">members</div>}
       </div>
     </TamaguiProvider>
   )

apps/vite/src/components/circle.tsx

@@ -1,42 +0,0 @@
-import { Stack, styled } from '@tamagui/core'
-
-export const Circle = styled(Stack, {
-  // access your tokens and theme values easily with $ props
-
-  backgroundColor: 'red',
-  borderRadius: '100%',
-  width: 100,
-  height: 100
-  // borderRadius: '$4',
-  // // media and pseudo styles - this would take 15+ lines of brittle JS in RN
-
-  // $gtSm: {
-  //   pressStyle: {
-  //     borderRadius: '$6'
-  //   }
-  // },
-  // variants: {
-  //   // define variants <Circle pin="top" />
-
-  //   // these will flatten, even when nesting multiple styled() calls
-
-  //   pin: {
-  //     top: {
-  //       position: 'absolute',
-
-  //       top: 0
-  //     }
-  //   },
-  //   size: {
-  //     // functional variants give incredible power and save bundle size
-
-  //     '...size': (size, { tokens }) => {
-  //       return {
-  //         width: tokens.size[size] ?? size,
-
-  //         height: tokens.size[size] ?? size
-  //       }
-  //     }
-  //   }
-  // } as const
-})

apps/vite/src/components/topbar.tsx

@@ -0,0 +1,42 @@
+import { Divider, IconButton, Paragraph } from '@status-im/components'
+import { LockedIcon, MembersIcon, OptionsIcon } from '@status-im/icons'
+import { Stack } from '@tamagui/core'
+
+type Props = {
+  membersVisisble: boolean
+  onMembersPress: () => void
+}
+
+export const Topbar = (props: Props) => {
+  const { membersVisisble, onMembersPress } = props
+
+  return (
+    <Stack
+      flexDirection="row"
+      height={56}
+      alignItems="center"
+      justifyContent="space-between"
+      padding={16}
+    >
+      <Stack flexDirection="row" alignItems="center">
+        <Paragraph weight="semibold" marginRight={4}>
+          # random
+        </Paragraph>
+        <LockedIcon color="rgba(27, 39, 61, 0.4)" size={16} />
+        <Divider height={16} />
+        <Paragraph weight="medium" color="$neutral-80-opa-50" variant="smaller">
+          Share random funny stuff with the community. Play nice.
+        </Paragraph>
+      </Stack>
+
+      <Stack space={12} flexDirection="row">
+        <IconButton
+          icon={<MembersIcon />}
+          selected={membersVisisble}
+          onPress={onMembersPress}
+        />
+        <IconButton icon={<OptionsIcon />} />
+      </Stack>
+    </Stack>
+  )
+}

apps/vite/styles/app.css

@@ -8,15 +8,18 @@ body,
 #app {
   height: 100%;
   display: grid;
-  grid-template-columns: 352px 1fr;
+  grid-template-columns: 352px 1fr auto;
 }
 
 #main {
   display: grid;
   grid-template-rows: 56px 1fr 100px;
+  height: 100vh;
 }
 
 #main,
+#sidebar,
+#members,
 #main > div {
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
@@ -25,3 +28,13 @@ body,
   overflow: auto;
   height: 100vh;
 }
+
+#content {
+  overflow: auto;
+  padding: 8px;
+}
+
+#members {
+  width: 352px;
+  color: #000;
+}