some chat improvements

apps/onechat/app/index.tsx

@@ -1,4 +1,4 @@
-import { MessageCircle, UserCircle } from '@tamagui/lucide-icons'
+import { MessageCircle, Reply, Smile, UserCircle } from '@tamagui/lucide-icons'
 import { memo, useEffect, useRef, useState } from 'react'
 import {
   Button,
@@ -11,6 +11,8 @@ import {
   Separator,
   SizableText,
   styled,
+  TamaguiElement,
+  XGroup,
   XStack,
   YStack,
 } from 'tamagui'
@@ -299,6 +301,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 +326,10 @@ const MessageArea = () => {
             senderId: user!.id,
             serverId: server.id,
           })
+
+          setTimeout(() => {
+            inputRef.current?.focus()
+          }, 40)
         }}
       />
     </YStack>
@@ -324,14 +339,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 +548,56 @@ 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"
+      group="message"
+      hoverStyle={{
+        bg: '$background025',
+      }}
+    >
+      <XStack
+        pos="absolute"
+        t={-8}
+        r={8}
+        o={0}
+        elevation="$0.5"
+        br="$4"
+        zi={1000}
+        $group-message-hover={{ o: 1 }}
+      >
+        <XGroup bg="$color2">
+          <Button chromeless size="$3">
+            <Smile size={16} />
+          </Button>
+          <Button chromeless size="$3">
+            <Smile size={16} />
+          </Button>
+          <Button chromeless size="$3">
+            <Smile size={16} />
+          </Button>
+          <Button chromeless size="$3">
+            <Reply size={16} />
+          </Button>
+        </XGroup>
+      </XStack>
+
+      <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}

apps/onechat/config/tamagui/tamagui.config.ts

@@ -78,7 +78,7 @@ declare module 'tamagui' {
   interface TamaguiCustomConfig extends Conf {}
 
   interface TypeOverride {
-    groupNames(): 'card'
+    groupNames(): 'message'
   }
 }
 

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)
+}

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

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} />
 }

apps/onechat/interface/ListItem.tsx

@@ -5,12 +5,15 @@ export const ListItem = forwardRef<
   TamaguiElement,
   XStackProps & {
     icon?: any
+    iconAfter?: boolean
     editing?: boolean
     onEditComplete?: (value: string) => void
     onEditCancel?: () => void
     active?: boolean
   }
->(({ active, editing, onEditComplete, onEditCancel, children, icon, ...rest }, ref) => {
+>(({ active, editing, onEditComplete, onEditCancel, children, icon, iconAfter, ...rest }, ref) => {
+  const iconElement = icon ? createElement(icon, { size: 18, opacity: 0.5 }) : null
+
   return (
     <XStack
       ref={ref}
@@ -31,7 +34,7 @@ export const ListItem = forwardRef<
       })}
       {...rest}
     >
-      {icon ? createElement(icon, { size: 18, opacity: 0.5 }) : null}
+      {iconAfter ? null : iconElement}
       {editing ? (
         <Input
           size="$3"
@@ -56,6 +59,7 @@ export const ListItem = forwardRef<
           {children}
         </SizableText>
       )}
+      {iconAfter ? iconElement : null}
     </XStack>
   )
 })

apps/onechat/interface/SidebarServerChannelsList.tsx

@@ -23,6 +23,7 @@ import { useCurrentServer, useServerChannels } from '~/features/state/useServer'
 import { mutate } from '~/features/state/zero'
 import { ListItem } from './ListItem'
 import { useHotkeys } from 'react-hotkeys-hook'
+import { Plus } from '@tamagui/lucide-icons'
 
 export const SidebarServerChannelsList = () => {
   const server = useCurrentServer()
@@ -104,6 +105,8 @@ export const SidebarServerChannelsList = () => {
       </YStack>
 
       <ListItem
+        icon={Plus}
+        iconAfter
         onPress={() => {
           if (!server) {
             alert('no server')
@@ -120,7 +123,7 @@ export const SidebarServerChannelsList = () => {
           })
         }}
       >
-        Create Channel
+        New Channel
       </ListItem>
     </YStack>
   )

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>