add create server modal

apps/onechat/app/_layout.tsx

@@ -12,7 +12,7 @@ import { TamaguiProvider, YStack } from 'tamagui'
 import config from '~/config/tamagui/tamagui.config'
 import { AuthEffects } from '~/features/auth/AuthEffects'
 import { useZeroInstanceEmitter, zero } from '~/features/state/zero'
-import { Dialogs } from '~/interface/Dialogs'
+import { Dialogs } from '~/interface/dialogs/Dialogs'
 
 export default function Layout() {
   return (

apps/onechat/interface/SidebarServersRow.tsx

@@ -5,7 +5,7 @@ import { randomID } from '~/features/state/randomID'
 import { useUserServers } from '~/features/state/useServer'
 import { updateUserState, useUserState } from '~/features/state/useUserState'
 import { mutate } from '~/features/state/zero'
-import { confirmDialog } from './Dialogs'
+import { dialogCreateServer } from './dialogs/DialogCreateServer'
 
 export const SidebarServersRow = () => {
   const servers = useUserServers()
@@ -34,47 +34,42 @@ export const SidebarServersRow = () => {
 
           <Circle
             onPress={async () => {
-              if (
-                await confirmDialog({
-                  title: 'test',
-                  description: 'ok',
-                })
-              ) {
-                if (!user) {
-                  console.error('not signed in')
-                  return
-                }
+              // if (await dialogCreateServer()) {
+              if (!user) {
+                console.error('not signed in')
+                return
+              }
 
-                const serverId = randomID()
+              const serverId = randomID()
 
-                await mutate.server.insert({
-                  id: serverId,
-                  createdAt: new Date().getTime(),
-                  description: '',
-                  icon: Math.random() > 0.5 ? 'red' : 'pink',
-                  name: 'Lorem',
-                  ownerId: user.id,
-                })
+              await mutate.server.insert({
+                id: serverId,
+                createdAt: new Date().getTime(),
+                description: '',
+                icon: Math.random() > 0.5 ? 'red' : 'pink',
+                name: 'Lorem',
+                ownerId: user.id,
+              })
 
-                await mutate.serverMember.insert({
-                  joinedAt: new Date().getTime(),
-                  serverId,
-                  userId: user.id,
-                })
+              await mutate.serverMember.insert({
+                joinedAt: new Date().getTime(),
+                serverId,
+                userId: user.id,
+              })
 
-                await mutate.channel.insert({
-                  id: randomID(),
-                  createdAt: new Date().getTime(),
-                  description: '',
-                  name: 'Welcome',
-                  private: false,
-                  serverId,
-                })
+              await mutate.channel.insert({
+                id: randomID(),
+                createdAt: new Date().getTime(),
+                description: '',
+                name: 'Welcome',
+                private: false,
+                serverId,
+              })
 
-                updateUserState({
-                  activeServer: serverId,
-                })
-              }
+              updateUserState({
+                activeServer: serverId,
+              })
+              // }
             }}
             size={42}
             bg="$color9"

apps/onechat/interface/dialogs/DialogConfirm.tsx

@@ -0,0 +1,73 @@
+import { useState } from 'react'
+import { Dialog, H3, Paragraph, XStack, YStack } from 'tamagui'
+import { createEmitter } from '~/helpers/emitter'
+import { Button } from '../Button'
+import { DialogContent, dialogEmitter, DialogOverlay, useDialogEmitter } from './shared'
+import type { DialogConfirmType } from './types'
+
+const [dialogConfirmEmitter] = createEmitter<boolean>()
+
+export const dialogConfirm = async (props: Omit<DialogConfirmType, 'type'>) => {
+  dialogEmitter.trigger({
+    type: 'confirm',
+    ...props,
+  })
+
+  return new Promise((res) => {
+    const dispose = dialogConfirmEmitter.listen((val) => {
+      dispose()
+      res(val)
+    })
+  })
+}
+
+export const DialogConfirm = () => {
+  const [state, setState] = useState<DialogConfirmType | null>(null)
+
+  useDialogEmitter((next) => {
+    if (next.type === 'confirm') {
+      setState(next)
+    }
+  })
+
+  return (
+    <Dialog modal open={!!state}>
+      <Dialog.Portal>
+        <DialogOverlay
+          onPress={() => {
+            setState(null)
+          }}
+        />
+
+        <DialogContent>
+          <YStack f={1}>
+            <H3>{state?.title}</H3>
+            <Paragraph>{state?.description}</Paragraph>
+          </YStack>
+
+          <XStack jc="flex-end" gap="$2">
+            <Dialog.Close asChild>
+              <Button
+                onPress={() => {
+                  dialogConfirmEmitter.trigger(false)
+                  setState(null)
+                }}
+              >
+                Cancel
+              </Button>
+            </Dialog.Close>
+
+            <Button
+              onPress={() => {
+                dialogConfirmEmitter.trigger(true)
+                setState(null)
+              }}
+            >
+              Accept
+            </Button>
+          </XStack>
+        </DialogContent>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}

apps/onechat/interface/dialogs/DialogCreateServer.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react'
+import { Dialog, H3, XStack, YStack } from 'tamagui'
+import { createEmitter } from '~/helpers/emitter'
+import { Button } from '../Button'
+import { DialogContent, dialogEmitter, DialogOverlay, useDialogEmitter } from './shared'
+
+const [dialogCreateServerEmitter] = createEmitter<boolean>()
+
+export const dialogCreateServer = async () => {
+  dialogEmitter.trigger({
+    type: 'create-server',
+  })
+
+  return new Promise((res) => {
+    const dispose = dialogCreateServerEmitter.listen((val) => {
+      dispose()
+      res(val)
+    })
+  })
+}
+
+export const DialogCreateServer = () => {
+  const [show, setShow] = useState(false)
+
+  useDialogEmitter((next) => {
+    if (next.type === 'create-server') {
+      setShow(true)
+    }
+  })
+
+  return (
+    <Dialog modal open={!!show}>
+      <Dialog.Portal>
+        <DialogOverlay
+          onPress={() => {
+            setShow(false)
+          }}
+        />
+
+        <DialogContent>
+          <YStack f={1}>
+            <H3>Create Server</H3>
+          </YStack>
+
+          <XStack jc="flex-end" gap="$2">
+            <Dialog.Close asChild>
+              <Button
+                onPress={() => {
+                  setShow(false)
+                }}
+              >
+                Cancel
+              </Button>
+            </Dialog.Close>
+
+            <Button
+              onPress={() => {
+                setShow(false)
+              }}
+            >
+              Accept
+            </Button>
+          </XStack>
+        </DialogContent>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}

apps/onechat/interface/dialogs/Dialogs.tsx

@@ -0,0 +1,11 @@
+import { DialogConfirm } from './DialogConfirm'
+import { DialogCreateServer } from './DialogCreateServer'
+
+export const Dialogs = () => {
+  return (
+    <>
+      <DialogConfirm />
+      <DialogCreateServer />
+    </>
+  )
+}