'init'

app/components/Topbar/Topbar.module.css

@@ -0,0 +1,3 @@
+.drag {
+    app-region: drag;
+}

app/components/Topbar/Topbar.tsx

@@ -0,0 +1,43 @@
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { Box, Flex, Loader, Text } from "@mantine/core";
+import classes from './Topbar.module.css'
+import { useProtocolState } from "@/app/providers/ProtocolProvider/useProtocolState";
+import { ProtocolState } from "@/app/providers/ProtocolProvider/ProtocolProvider";
+import { WindowsFrameButtons } from "../WindowsFrameButtons/WindowsFrameButtons";
+import { MacFrameButtons } from "../MacFrameButtons/MacFrameButtons";
+
+export function Topbar() {
+    const colors = useRosettaColors();
+    const protocolState = useProtocolState(); 
+
+
+    return (
+        <Box className={classes.drag} ta={'center'} p={3} bg={colors.mainColor}>
+            {window.platform == 'win32' && <WindowsFrameButtons></WindowsFrameButtons>}
+            {window.platform == 'darwin' && <MacFrameButtons></MacFrameButtons>}
+            {window.platform == 'linux' && <WindowsFrameButtons></WindowsFrameButtons>}
+            {(protocolState == ProtocolState.CONNECTED || !window.location.hash.includes("main")) && 
+                <Flex align={'center'} justify={'center'}>
+                    <Text fw={'bolder'} fz={13} c={'gray'}>
+                        Rosetta Messenger
+                    </Text>
+                </Flex>
+            }
+            {(protocolState != ProtocolState.CONNECTED && protocolState != ProtocolState.DEVICE_VERIFICATION_REQUIRED && window.location.hash.includes("main")) && 
+                <Flex align={'center'} gap={5} justify={'center'}>
+                    <Loader size={12} color={colors.chevrons.active}></Loader>
+                    <Text fw={'bolder'} fz={13} c={'gray'}>
+                        Connecting...
+                    </Text>
+                </Flex>
+            }
+            {(protocolState == ProtocolState.DEVICE_VERIFICATION_REQUIRED && window.location.hash.includes("main")) && 
+                <Flex align={'center'} gap={5} justify={'center'}>
+                    <Text fw={'bolder'} fz={13} c={'gray'}>
+                        Device verification required
+                    </Text>
+                </Flex>
+            }
+        </Box>
+    )
+}