Merge pull request #950 from The-Commit-Company/develop

Release v1.6.1

.github/labeler.yml

@@ -1,16 +1,7 @@
 #  Add 'UI' label to all PRs that touch ts / tsx files in the 'src' directory.
 "UI":
-  - "raven-app/src/**/*.{ts,tsx,css}"
-  - "mobile/src/**/*.{ts,tsx,css}"
+  - "frontend/src/**/*.{ts,tsx,css}"
 
 # Add 'backend' label to all PRs that touch json / py files in the 'raven' directory.
 "backend":
   - "raven/**/*.{json,py}"
-
-# Add '💻 webapp' label to all PRs that files in the 'raven-app' directory.
-"💻 webapp":
-  - "raven-app/src/**/*.{ts,tsx,css}"
-
-# Add '📱 mobile' label to all PRs that files in the 'mobile' directory.
-"📱 mobile app":
-  - "mobile/src/**/*.{ts,tsx,css}"

.gitignore

@@ -10,8 +10,4 @@ mobile/dev-dist
 raven/public/raven
 raven/public/node_modules
 raven/www/raven.html
-raven/www/raven-mobile.html
-raven/public/raven-mobile
-raven/www/raven_mobile.html
-raven/public/raven_mobile
 *.env

README.md

@@ -54,7 +54,6 @@ Raven was born out of a need to have a simple work communication tool that could
 6. Preview image/PDF files 📁
 7. Comprehensive search 🔍 functionality for all your messages, files, channels and users
 8. Don't strain your eyes 👀 - Raven supports dark mode 🌙
-9. Collaborate on the go with the Raven mobile app 📱 (in progress)
 
 <hr>
 
@@ -75,7 +74,6 @@ The frontend is built using React and the following tools:
 - [Tiptap](https://www.tiptap.dev)
 - [Tailwind CSS](https://tailwindcss.com/)
 
-The mobile app is built using [Ionic](https://ionicframework.com), [Tailwind CSS](tailwindcss.com) and [Capacitor](https://capacitorjs.com).
 
 <br>
 
@@ -127,11 +125,6 @@ The mobile app is built using [Ionic](https://ionicframework.com), [Tailwind CSS
       <figcaption align="center"><b>Light mode</b></figcaption>
   </figure>
 
-  <figure>
-      <img width="1402" src="screenshots/mobile-app.png" alt="Mobile app" />
-      <figcaption align="center"><b>Mobile app</b></figcaption>
-  </figure>
-
 </details>
 
 
@@ -153,7 +146,7 @@ Post this, you can access Raven on your Frappe site at the `/raven` endpoint (e.
 
 To set up your local development environment, make sure that you have enabled [developer mode](https://frappeframework.com/how-to-enable-developer-mode-in-frappe) in your Frappe site config. 
 
-You also need to disable CSRF (add `ignore_csrf: 1` in your `site_config.json`) since the React web server will not have any CSRF token in live reload mode. If you are working on the mobile app, you would also need to allow CORS (add `allow_cors: "*"` in your `site_config.json`). Please note that this is only for the local dev setup - not meant for Production. 
+You also need to disable CSRF (add `ignore_csrf: 1` in your `site_config.json`) since the React web server will not have any CSRF token in live reload mode. Please note that this is only for the local dev setup - not meant for Production. 
 
 You can start the React live web server by:
 
@@ -164,14 +157,6 @@ yarn dev
 
 Your local dev server would be running at `http://localhost:8080`.
 
-You can also run the mobile app on your browser by:
-
-```bash
-cd frappe-bench/apps/raven/mobile
-yarn install
-yarn dev
-```
-
 <hr>
 
 ## Repo Activity

raven-app/package.json → frontend/package.json

@@ -1,7 +1,8 @@
 {
-  "name": "raven-app",
+  "name": "raven",
   "private": true,
-  "version": "1.6.0",
+  "license": "AGPL-3.0-only",
+  "version": "1.6.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,49 +11,49 @@
     "copy-html-entry": "cp ../raven/public/raven/index.html ../raven/www/raven.html"
   },
   "dependencies": {
-    "@radix-ui/themes": "^2.0.3",
-    "@tiptap/extension-code-block-lowlight": "^2.3",
-    "@tiptap/extension-highlight": "^2.3",
-    "@tiptap/extension-image": "^2.3",
-    "@tiptap/extension-link": "^2.3",
-    "@tiptap/extension-mention": "^2.3",
-    "@tiptap/extension-placeholder": "^2.3",
-    "@tiptap/extension-typography": "^2.3",
-    "@tiptap/extension-underline": "^2.3",
-    "@tiptap/pm": "^2.3",
-    "@tiptap/react": "^2.3",
-    "@tiptap/starter-kit": "^2.3",
-    "@tiptap/suggestion": "^2.3",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@radix-ui/themes": "^3.0.5",
+    "@tiptap/extension-code-block-lowlight": "^2.4.0",
+    "@tiptap/extension-highlight": "^2.4.0",
+    "@tiptap/extension-image": "^2.4.0",
+    "@tiptap/extension-link": "^2.4.0",
+    "@tiptap/extension-mention": "^2.4.0",
+    "@tiptap/extension-placeholder": "^2.4.0",
+    "@tiptap/extension-typography": "^2.4.0",
+    "@tiptap/extension-underline": "^2.4.0",
+    "@tiptap/pm": "^2.4.0",
+    "@tiptap/react": "^2.4.0",
+    "@tiptap/starter-kit": "^2.4.0",
+    "@tiptap/suggestion": "^2.4.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.17",
     "cal-sans": "^1.0.1",
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",
     "cva": "npm:class-variance-authority",
-    "dayjs": "^1.11.10",
+    "dayjs": "^1.11.11",
     "downshift": "^8.3.1",
     "emoji-picker-element": "^1.21.0",
     "firebase": "^10.9.0",
     "frappe-react-sdk": "^1.7.0",
     "highlight.js": "^11.9.0",
     "html-react-parser": "^5.1.8",
-    "jotai": "^2.8.0",
+    "jotai": "^2.8.3",
     "js-cookie": "^3.0.5",
     "lowlight": "^3.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.50.1",
+    "react-hook-form": "^7.51.5",
     "react-icons": "^5.2.1",
     "react-idle-timer": "^5.7.2",
-    "react-intersection-observer": "^9.8.1",
-    "react-router-dom": "^6.22.0",
+    "react-intersection-observer": "^9.10.3",
+    "react-router-dom": "^6.23.1",
     "react-zoom-pan-pinch": "^3.4.4",
-    "sonner": "^1.4.41",
-    "tailwindcss": "^3.4.1",
+    "sonner": "^1.5.0",
+    "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",
     "tippy.js": "^6.3.7",
-    "turndown": "^7.1.2",
+    "turndown": "^7.2.0",
     "use-double-tap": "^1.3.6",
     "vaul": "^0.9.1",
     "vite": "^4.5.2",
@@ -61,7 +62,7 @@
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.6",
-    "@types/react": "^18.2.55",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.2.19",
     "@types/turndown": "^5.0.4",
     "typescript": "^5.3.3"

raven-app/src/ThemeProvider.tsx → frontend/src/ThemeProvider.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 import { Theme } from '@radix-ui/themes';
 import React from 'react';
-import { ThemeProps } from '@radix-ui/themes/dist/cjs/theme.js';
+import { ThemeProps } from '@radix-ui/themes/dist/cjs/theme';
 import { PropsWithChildren, useEffect } from 'react';
 
 interface ThemeProviderProps extends ThemeProps {

raven-app/src/components/common/GIFPicker/GIFPicker.tsx → frontend/src/components/common/GIFPicker/GIFPicker.tsx

@@ -32,15 +32,14 @@ const GIFPicker = ({ onSelect }: GIFPickerProps) => {
         <Flex className="w-full justify-center">
             <Flex direction={'column'} gap='2' align='center' pt={'3'} width={'100%'} className="px-0.5 sm:px-4">
                 <Box className="w-full">
-                    <TextField.Root className="w-full mb-1">
-                        <TextField.Slot>
+                    <TextField.Root className="w-full mb-1"
+                        onChange={(e) => setSearchText(e.target.value)}
+                        value={searchText}
+                        type='text'
+                        placeholder='Search GIFs'>
+                        <TextField.Slot side='left'>
                             <BiSearch />
                         </TextField.Slot>
-                        <TextField.Input
-                            onChange={(e) => setSearchText(e.target.value)}
-                            value={searchText}
-                            type='text'
-                            placeholder='Search GIFs' />
                     </TextField.Root>
                 </Box>
                 <ScrollArea className="h-[74vh] sm:h-auto pb-6 sm:pb-10 ">

raven-app/src/components/feature/GlobalSearch/ChannelSearch.tsx → frontend/src/components/feature/GlobalSearch/ChannelSearch.tsx

@@ -43,17 +43,16 @@ export const ChannelSearch = ({ onToggleMyChannels, isOpenMyChannels, input, onC
         <Box>
             <Flex direction='column' gap='2'>
                 <Flex align='center' gap='2'>
-                    <TextField.Root className='min-w-[60%]'>
-                        <TextField.Slot>
+                    <TextField.Root className='min-w-[60%]'
+                        onChange={handleChange}
+                        type='text'
+                        placeholder='Search channels'
+                        value={searchText}
+                        autoFocus>
+                        <TextField.Slot side='left'>
                             <BiSearch />
                         </TextField.Slot>
-                        <TextField.Input
-                            onChange={handleChange}
-                            type='text'
-                            placeholder='Search channels'
-                            value={searchText}
-                            autoFocus />
-                        <TextField.Slot>
+                        <TextField.Slot side='right'>
                             {isLoading && <Loader />}
                         </TextField.Slot>
                     </TextField.Root>
@@ -65,7 +64,7 @@ export const ChannelSearch = ({ onToggleMyChannels, isOpenMyChannels, input, onC
                                 <Select.Label>Channel Type</Select.Label>
                                 <Select.Item value='any'>
                                     <Flex align='center' gap='1'>
-                                        <Box width='4'>
+                                        <Box width='16px'>
                                             🤷🏻‍♀️
                                         </Box>
                                         Any

raven-app/src/components/feature/GlobalSearch/FileSearch.tsx → frontend/src/components/feature/GlobalSearch/FileSearch.tsx

@@ -81,17 +81,17 @@ export const FileSearch = ({ onToggleMyChannels, isOpenMyChannels, onToggleSaved
                 <Flex align='center' gap='2'>
                     <TextField.Root style={{
                         width: '80%'
-                    }}>
-                        <TextField.Slot>
+                    }}
+                        onChange={handleChange}
+                        type='text'
+                        placeholder='Search messages'
+                        value={searchText}
+                        autoFocus
+                    >
+                        <TextField.Slot side='left'>
                             <BiSearch />
                         </TextField.Slot>
-                        <TextField.Input
-                            onChange={handleChange}
-                            type='text'
-                            placeholder='Search messages'
-                            value={searchText}
-                            autoFocus />
-                        <TextField.Slot>
+                        <TextField.Slot side='right'>
                             {isLoading && <Loader />}
                         </TextField.Slot>
                     </TextField.Root>
@@ -102,7 +102,7 @@ export const FileSearch = ({ onToggleMyChannels, isOpenMyChannels, onToggleSaved
                                 <Select.Label>File Type</Select.Label>
                                 <Select.Item value='any'>
                                     <Flex align='center' gap='1'>
-                                        <Box width='4'>
+                                        <Box width='16px'>
                                             🤷🏻‍♀️
                                         </Box>
                                         Any

raven-app/src/components/feature/GlobalSearch/MessageSearch.tsx → frontend/src/components/feature/GlobalSearch/MessageSearch.tsx

@@ -94,17 +94,16 @@ export const MessageSearch = ({ onToggleMyChannels, isOpenMyChannels, onToggleSa
     return (
         <Box>
             <Flex direction='column' gap='2'>
-                <TextField.Root>
-                    <TextField.Slot>
+                <TextField.Root
+                    onChange={handleChange}
+                    type='text'
+                    placeholder='Search messages'
+                    value={searchText}
+                    autoFocus>
+                    <TextField.Slot side='left'>
                         <BiSearch />
                     </TextField.Slot>
-                    <TextField.Input
-                        onChange={handleChange}
-                        type='text'
-                        placeholder='Search messages'
-                        value={searchText}
-                        autoFocus />
-                    <TextField.Slot>
+                    <TextField.Slot side='right'>
                         {isLoading && <Loader />}
                     </TextField.Slot>
                 </TextField.Root>

raven-app/src/components/feature/channel-details/leave-channel/LeaveChannelModal.tsx → frontend/src/components/feature/channel-details/leave-channel/LeaveChannelModal.tsx

@@ -33,7 +33,7 @@ export const LeaveChannelModal = ({ onClose, channelData, closeDetailsModal }: L
     const { mutate } = useContext(ChannelListContext) as ChannelListContextType
 
     const onSubmit = async () => {
-        return deleteDoc('Raven Chnnel Member', channelMember?.message.name).then(() => {
+        return deleteDoc('Raven Channel Member', channelMember?.message.name).then(() => {
             toast('You have left the channel')
             onClose()
             mutate()

raven-app/src/components/feature/channel-details/rename-channel/ChannelRenameModal.tsx → frontend/src/components/feature/channel-details/rename-channel/ChannelRenameModal.tsx

@@ -77,21 +77,18 @@ export const RenameChannelModalContent = ({ channelID, channelName, type, onClos
                                 }
                             }}
                             render={({ field, fieldState: { error } }) => (
-                                <TextField.Root>
-                                    <TextField.Slot>
+                                <TextField.Root maxLength={50}
+                                    required
+                                    autoFocus={isDesktop}
+                                    placeholder='e.g. wedding-gone-wrong, joffrey-tributes'
+                                    color={error ? 'red' : undefined}
+                                    {...field}
+                                    aria-invalid={error ? 'true' : 'false'}
+                                    onChange={handleChange}>
+                                    <TextField.Slot side='left'>
                                         {<ChannelIcon type={type} />}
                                     </TextField.Slot>
-                                    <TextField.Input
-                                        maxLength={50}
-                                        required
-                                        autoFocus={isDesktop}
-                                        placeholder='e.g. wedding-gone-wrong, joffrey-tributes'
-                                        color={error ? 'red' : undefined}
-                                        {...field}
-                                        aria-invalid={error ? 'true' : 'false'}
-                                        onChange={handleChange}
-                                    />
-                                    <TextField.Slot>
+                                    <TextField.Slot side='right'>
                                         <Text size='2' weight='light' color='gray'>{50 - field.value.length}</Text>
                                     </TextField.Slot>
                                 </TextField.Root>

raven-app/src/components/feature/channel-details/rename-channel/EditChannelNameButton.tsx → frontend/src/components/feature/channel-details/rename-channel/EditChannelNameButton.tsx

@@ -1,7 +1,7 @@
 import { RenameChannelModalContent } from '@/components/feature/channel-details/rename-channel/ChannelRenameModal'
 import { ChannelListItem } from '@/utils/channel/ChannelListProvider'
 import { Dialog, IconButton } from '@radix-ui/themes'
-import { BiEdit } from 'react-icons/bi'
+import { AiOutlineEdit } from 'react-icons/ai'
 import { IconButtonProps } from '@radix-ui/themes/dist/cjs/components/icon-button'
 import { useState } from "react"
 import { DIALOG_CONTENT_CLASS } from '@/utils/layout/dialog'
@@ -35,7 +35,7 @@ export const EditChannelNameButton = ({ channelID, channel_name, channelType, ..
                         aria-label="Click to edit channel name"
                         title='Edit channel name'
                         {...props}>
-                        <BiEdit size='14' />
+                        <AiOutlineEdit size='14' />
                     </IconButton>
                 </Dialog.Trigger>
                 <Dialog.Content className={DIALOG_CONTENT_CLASS}>
@@ -57,7 +57,7 @@ export const EditChannelNameButton = ({ channelID, channel_name, channelType, ..
                     aria-label="Click to edit channel name"
                     title='Edit channel name'
                     {...props}>
-                    <BiEdit size='14' />
+                    <AiOutlineEdit size='14' />
                 </IconButton>
             </DrawerTrigger>
             <DrawerContent>

raven-app/src/components/feature/channel-member-details/ChannelMemberDetails.tsx → frontend/src/components/feature/channel-member-details/ChannelMemberDetails.tsx

@@ -35,11 +35,10 @@ export const ChannelMemberDetails = ({ channelData, channelMembers, activeUsers,
         <Flex direction='column' gap='4' className={'h-[66vh] pb-2 sm:h-96'}>
             <Flex gap='2' justify='between'>
                 <div className={'w-full sm:w-full'}>
-                    <TextField.Root>
-                        <TextField.Slot>
+                    <TextField.Root autoFocus placeholder='Find members' onChange={handleChange} value={searchText} >
+                        <TextField.Slot side='left'>
                             <BiSearch />
                         </TextField.Slot>
-                        <TextField.Input autoFocus placeholder='Find members' onChange={handleChange} value={searchText} />
                     </TextField.Root>
                 </div>
                 {/* if current user is a channel member and the channel is not a open channel, user can add more members to the channel */}
@@ -98,7 +97,7 @@ const MemberList = ({ channelData, channelMembers, activeUsers, updateMembers, i
                                 <Flex className={'p-2'} gap='3'>
                                     <UserAvatar src={member.user_image ?? ''} alt={member.full_name} size='2' isActive={activeUsers.includes(member.name)} availabilityStatus={member.availability_status} />
                                     <Flex gap='2' align={'center'}>
-                                        <Text weight='medium'>{member.first_name}</Text>
+                                        <Text size='2' weight='medium'>{member.first_name}</Text>
                                         {activeUsers.includes(member.name) ? (
                                             <BiCircle color='green' />
                                         ) : (