some chat improvements

onejs · Dec 11, 2024 · dc927a7 · dc927a7
1 parent f193fb5
commit dc927a7
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 12 deletions.
diff --git a/apps/onechat/app/index.tsx b/apps/onechat/app/index.tsx
@@ -11,6 +11,7 @@ import {
   Separator,
   SizableText,
   styled,
+  TamaguiElement,
   XStack,
   YStack,
 } from 'tamagui'
@@ -299,6 +300,15 @@ const MessageArea = () => {
         disabled={disabled}
         placeholder={disabled ? 'Sign in to chat...' : ''}
         pe={disabled ? 'none' : 'auto'}
+        onKeyPress={(e) => {
+          const key = e.nativeEvent.key
+          console.log('type', key)
+
+          switch (key) {
+            case 'ArrowUp': {
+            }
+          }
+        }}
         onSubmitEditing={(e) => {
           if (!user) {
             console.error('no user')
@@ -315,6 +325,10 @@ const MessageArea = () => {
             senderId: user!.id,
             serverId: server.id,
           })
+
+          setTimeout(() => {
+            inputRef.current?.focus()
+          }, 40)
         }}
       />
     </YStack>
@@ -324,14 +338,30 @@ const MessageArea = () => {
 const MainMessagesList = () => {
   const messages = useCurrentMessages() || []
   const { user } = useAuth()
+  const scrollViewRef = useRef<TamaguiElement>(null)
+
+  useEffect(() => {
+    if (scrollViewRef.current instanceof HTMLElement) {
+      scrollViewRef.current.scrollTop = 100_000
+    }
+  }, [messages])
 
   return (
     <YStack ov="hidden" f={1}>
-      <ScrollView>
-        <YStack p="$4" pt="$10">
+      <YStack f={100} />
+      <ScrollView ref={scrollViewRef as any}>
+        <YStack pt="$10">
           {user
-            ? messages.map((message) => {
-                return <MessageItem key={message.id} message={message} user={user as any} />
+            ? messages.map((message, index) => {
+                const lastMessage = messages[index - 1]
+                return (
+                  <MessageItem
+                    hideUser={lastMessage?.senderId === message.senderId}
+                    key={message.id}
+                    message={message}
+                    user={user as any}
+                  />
+                )
               })
             : null}
         </YStack>
@@ -517,14 +547,29 @@ const CollapsedChats = (props) => {
   )
 }
 
-const MessageItem = ({ message, user }: { message: Message; user: User }) => {
+const MessageItem = ({
+  message,
+  user,
+  hideUser,
+}: { message: Message; user: User; hideUser?: boolean }) => {
   return (
-    <XStack f={1} gap="$3" p="$2">
-      <Avatar image={user.image} />
+    <XStack
+      f={1}
+      gap="$3"
+      py={hideUser ? '$1.5' : '$2.5'}
+      px="$4"
+      hoverStyle={{
+        bg: '$background025',
+      }}
+    >
+      <XStack w={32}>{!hideUser && <Avatar image={user.image} />}</XStack>
+
       <YStack f={1} gap="$1">
-        <SizableText mb={-4} fow="bold">
-          {user.username || user.name}
-        </SizableText>
+        {!hideUser && (
+          <SizableText o={0.5} mb={-4} fow="bold">
+            {user.username || user.name}
+          </SizableText>
+        )}
 
         <SizableText f={1} ov="hidden">
           {message.content}

diff --git a/apps/onechat/features/state/useSessionState.ts b/apps/onechat/features/state/useSessionState.ts
@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import { createEmitter } from '~/helpers/emitter'
+
+type SessionState = {}
+
+const sessionState: SessionState = {}
+
+const [emitter, useEmitter] = createEmitter<SessionState>()
+
+export const useSessionState = () => {
+  const [state, setState] = useState(sessionState)
+
+  useEmitter(setState)
+
+  return state
+}
+
+export const updateSessionState = (next: Partial<SessionState>) => {
+  Object.assign(sessionState, next)
+  emitter.trigger(sessionState)
+}
diff --git a/apps/onechat/features/state/useUserState.ts b/apps/onechat/features/state/useUserState.ts
@@ -9,6 +9,13 @@ type UserState = {
   activeChannels: Record<string, string>
   showSidePanel?: 'user' | 'settings'
   showHotMenu?: boolean
+  channelState?: ChannelState
+}
+
+type ChannelState = {
+  [server_and_channel_id: string]: {
+    focusedMessage: string
+  }
 }
 
 // TODO

diff --git a/apps/onechat/interface/Avatar.tsx b/apps/onechat/interface/Avatar.tsx
@@ -1,3 +1,3 @@
-export const Avatar = ({ image, size = 20 }: { image: string; size?: number }) => {
+export const Avatar = ({ image, size = 32 }: { image: string; size?: number }) => {
   return <img style={{ width: size, height: size, borderRadius: 100 }} src={image} />
 }
diff --git a/apps/onechat/interface/TopBar.tsx b/apps/onechat/interface/TopBar.tsx
@@ -35,7 +35,15 @@ export const TopBar = memo(() => {
           <HotMenu />
         </TooltipSimple>
 
-        <H3 cur="default" userSelect="none" pe="none" m={0} o={0.5} size="$2">
+        <H3
+          data-tauri-drag-region
+          cur="default"
+          userSelect="none"
+          pe="none"
+          m={0}
+          o={0.6}
+          size="$2"
+        >
           {server?.name || '-'} - #{channel?.name || '-'}
         </H3>
       </XStack>