add toast

onejs · Dec 11, 2024 · 3759d93 · 3759d93
1 parent dffe3f1
commit 3759d93
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 6 deletions.
diff --git a/apps/onechat/app/_layout.tsx b/apps/onechat/app/_layout.tsx
@@ -3,11 +3,12 @@ import './fonts.css'
 import './syntax-highlight.css'
 import './tamagui.css'
 
+import { ToastProvider, ToastViewport, useToastState, Toast } from '@tamagui/toast'
 import { ZeroProvider } from '@rocicorp/zero/react'
 import { SchemeProvider, useColorScheme } from '@vxrn/color-scheme'
 import { LoadProgressBar, Slot } from 'one'
 import { useState } from 'react'
-import { TamaguiProvider } from 'tamagui'
+import { TamaguiProvider, YStack } from 'tamagui'
 import config from '~/config/tamagui/tamagui.config'
 import { AuthEffects } from '~/features/auth/AuthEffects'
 import { useZeroInstanceEmitter, zero } from '~/features/zero/zero'
@@ -32,14 +33,45 @@ export default function Layout() {
       <DataProvider>
         <SchemeProvider>
           <ThemeProvider>
-            <Slot />
+            <ToastProvider swipeDirection="horizontal">
+              <Slot />
+              <ToastDisplay />
+              <ToastViewport flexDirection="column-reverse" top={0} left={0} right={0} mx="auto" />
+            </ToastProvider>
           </ThemeProvider>
         </SchemeProvider>
       </DataProvider>
     </>
   )
 }
 
+const ToastDisplay = () => {
+  const currentToast = useToastState()
+
+  if (!currentToast || currentToast.isHandledNatively) {
+    return null
+  }
+
+  return (
+    <Toast
+      key={currentToast.id}
+      duration={currentToast.duration}
+      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
+      exitStyle={{ opacity: 0, scale: 1, y: -20 }}
+      y={0}
+      opacity={1}
+      scale={1}
+      animation="100ms"
+      viewportName={currentToast.viewportName}
+    >
+      <YStack>
+        <Toast.Title>{currentToast.title}</Toast.Title>
+        {!!currentToast.message && <Toast.Description>{currentToast.message}</Toast.Description>}
+      </YStack>
+    </Toast>
+  )
+}
+
 const DataProvider = ({ children }) => {
   const [instance, setInstance] = useState(zero)
 

diff --git a/apps/onechat/app/index.tsx b/apps/onechat/app/index.tsx
@@ -199,7 +199,7 @@ const Main = memo(() => {
     <YStack f={1} shadowColor="$shadowColor" shadowRadius={30} btlr="$3" ov="hidden">
       <RecentThreads />
       <YStack f={1} bg="$background05">
-        <MainChatList />
+        <MainMessagesList />
         <MessageArea />
       </YStack>
     </YStack>
@@ -285,12 +285,21 @@ const MessageArea = () => {
   const channel = useCurrentChannel()
   const server = useCurrentServer()
   const { user } = useAuth()
+  const disabled = !user
 
   return (
     <YStack btw={1} bc="$color4" p="$2">
       <Input
         ref={inputRef}
+        disabled={disabled}
+        placeholder={disabled ? 'Sign in to chat...' : ''}
+        pe={disabled ? 'none' : 'auto'}
         onSubmitEditing={(e) => {
+          if (!user) {
+            console.error('no user')
+            return
+          }
+
           inputRef.current?.clear()
           mutate.message.insert({
             id: randomID(),
@@ -307,7 +316,7 @@ const MessageArea = () => {
   )
 }
 
-const MainChatList = () => {
+const MainMessagesList = () => {
   const messages = useCurrentMessages() || []
   const { user } = useAuth()
 

diff --git a/apps/onechat/features/zero/useServer.ts b/apps/onechat/features/zero/useServer.ts
@@ -24,7 +24,6 @@ export const useUserServers = () => {
 
 export const useServerChannels = () => {
   const [userState] = useUserState()
-  console.log('wtf', userState?.activeServer)
   return (
     useQuery((q) =>
       q.server

diff --git a/apps/onechat/package.json b/apps/onechat/package.json
@@ -26,7 +26,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@docsearch/react": "^3.6.1",
     "@leeoniya/ufuzzy": "^1.0.14",
-    "@rocicorp/zero": "0.7.2024120400",
+    "@rocicorp/zero": "0.8.2024121002",
     "@supabase/supabase-js": "^2.44.4",
     "@tamagui/button": "^1.120.1",
     "@tamagui/input": "^1.120.1",
@@ -35,6 +35,7 @@
     "@tamagui/proxy-tabbable": "^1.120.1",
     "@tamagui/react-native-web": "^1.120.1",
     "@tamagui/themes": "^1.120.1",
+    "@tamagui/toast": "^1.120.1",
     "@tamagui/use-store": "^1.120.1",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-deep-link": "^2.0.1",

diff --git a/next.md b/next.md
@@ -1,5 +1,8 @@
 1.0 ordered from most work to least:
 
+  - react-native-safe-area-context
+    - were using Compat version from react-navigation seems to not work directly on web, need to fix/document
+
   - native
     - large test suite + supports 1000 most popular dependencies
     - better hmr

diff --git a/yarn.lock b/yarn.lock
@@ -8362,6 +8362,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/toast@npm:^1.120.1":
+  version: 1.120.1
+  resolution: "@tamagui/toast@npm:1.120.1"
+  dependencies:
+    "@tamagui/animate-presence": "npm:1.120.1"
+    "@tamagui/compose-refs": "npm:1.120.1"
+    "@tamagui/constants": "npm:1.120.1"
+    "@tamagui/core": "npm:1.120.1"
+    "@tamagui/create-context": "npm:1.120.1"
+    "@tamagui/dismissable": "npm:1.120.1"
+    "@tamagui/helpers": "npm:1.120.1"
+    "@tamagui/polyfill-dev": "npm:1.120.1"
+    "@tamagui/portal": "npm:1.120.1"
+    "@tamagui/stacks": "npm:1.120.1"
+    "@tamagui/start-transition": "npm:1.120.1"
+    "@tamagui/text": "npm:1.120.1"
+    "@tamagui/use-controllable-state": "npm:1.120.1"
+    "@tamagui/visually-hidden": "npm:1.120.1"
+  peerDependencies:
+    react: "*"
+  checksum: 10/21cfd6004f1782569584cec28e5817b3abf85ef13e0a977594e7e81302bae64b6e6ed12364b03663609d62ff005fe297b5421c46b7807126fab483ff02dd6c37
+  languageName: node
+  linkType: hard
+
 "@tamagui/toggle-group@npm:1.120.1":
   version: 1.120.1
   resolution: "@tamagui/toggle-group@npm:1.120.1"
@@ -18828,6 +18852,7 @@ __metadata:
     "@tamagui/proxy-tabbable": "npm:^1.120.1"
     "@tamagui/react-native-web": "npm:^1.120.1"
     "@tamagui/themes": "npm:^1.120.1"
+    "@tamagui/toast": "npm:^1.120.1"
     "@tamagui/use-store": "npm:^1.120.1"
     "@tauri-apps/api": "npm:^2"
     "@tauri-apps/cli": "npm:^2"