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

Release version 1.3.0

.gitignore

@@ -5,6 +5,8 @@
 tags
 node_modules
 
+dist/
+mobile/dev-dist
 raven/public/raven
 raven/public/node_modules
 raven/www/raven.html

README.md

@@ -53,7 +53,7 @@ The frontend is built using React and the following tools:
 2. [frappe-react-sdk](https://github.com/nikkothari22/frappe-react-sdk) - simple React hooks to interface with a Frappe framework backend - built and maintained by us at The Commit Company.
 3. [react-icons](https://react-icons.github.io) - Icon set
 4. [Framer Motion](https://www.framer.com/motion/) - Animations
-5. [react-quill](https://www.npmjs.com/package/react-quill)
+5. [Tiptap](https://www.tiptap.dev)
 
 The mobile app is built using [Ionic](https://ionicframework.com), [Tailwind CSS](tailwindcss.com) and [Capacitor](https://capacitorjs.com).
 

api_docs/Chat/Get Channel Members.bru

@@ -0,0 +1,21 @@
+meta {
+  name: Get Channel Members
+  type: http
+  seq: 1
+}
+
+get {
+  url: {{url}}:{{port}}/api/method/raven.api.chat.get_channel_members?channel_id=general
+  body: none
+  auth: none
+}
+
+query {
+  channel_id: general
+  ~channel_id: admin-private
+  ~channel_id: does-not-exist
+}
+
+headers {
+  Authorization: token {{api_key}}:{{api_secret}}
+}

api_docs/Preview Links/Get Preview Link.bru

@@ -0,0 +1,20 @@
+meta {
+  name: Get Preview Link
+  type: http
+  seq: 1
+}
+
+get {
+  url: {{url}}:{{port}}/api/method/raven.api.preview_links.get_preview_link?urls=["https://ravenapp.info"]
+  body: none
+  auth: none
+}
+
+query {
+  urls: ["https://ravenapp.info"]
+  ~urls: ["http://192.168.0.0"]
+}
+
+headers {
+  Authorization: token {{api_key}}:{{api_secret}}
+}

api_docs/Raven Users/Get List.bru

@@ -0,0 +1,15 @@
+meta {
+  name: Get List
+  type: http
+  seq: 1
+}
+
+get {
+  url: {{url}}:{{port}}/api/method/raven.api.raven_users.get_list
+  body: none
+  auth: none
+}
+
+headers {
+  Authorization: token {{api_key}}:{{api_secret}}
+}

api_docs/Reactions/React.bru

@@ -0,0 +1,27 @@
+meta {
+  name: React
+  type: http
+  seq: 1
+}
+
+post {
+  url: {{url}}:{{port}}/api/method/raven.api.reactions.react?message_id=7a46635aff&reaction=🐶
+  body: none
+  auth: none
+}
+
+query {
+  message_id: 7a46635aff
+  reaction: 🐶
+  ~message_id: 4ba126d7ba
+}
+
+headers {
+  Authorization: token {{api_key}}:{{api_secret}}
+}
+
+docs {
+  API to toggle a reaction to a Message
+
+  The API first checks if the user has permission for the message. If yes, then it checks if the user has already reacted to the message. If not, it creates a new reaction, else it deletes the existing reaction.
+}

api_docs/User Availability/Get Active Users.bru

@@ -0,0 +1,15 @@
+meta {
+  name: Get Active Users
+  type: http
+  seq: 1
+}
+
+get {
+  url: {{url}}:{{port}}/api/method/raven.api.user_availability.get_active_users
+  body: none
+  auth: none
+}
+
+headers {
+  Authorization: token {{api_key}}:{{api_secret}}
+}

api_docs/User Availability/Refresh User Active State.bru

@@ -0,0 +1,19 @@
+meta {
+  name: Refresh User Active State
+  type: http
+  seq: 2
+}
+
+get {
+  url: {{url}}:{{port}}/api/method/raven.api.user_availability.refresh_user_active_state
+  body: none
+  auth: none
+}
+
+query {
+  ~deactivate: true
+}
+
+headers {
+  Authorization: token {{api_key}}:{{api_secret}}
+}

api_docs/bruno.json

@@ -0,0 +1,5 @@
+{
+  "version": "1",
+  "name": "Raven",
+  "type": "collection"
+}

api_docs/environments/Dev.bru

@@ -0,0 +1,8 @@
+vars {
+  url: http://localhost
+  port: 8000
+  api_key: d0e4a68bf14f25d
+}
+vars:secret [
+  api_secret
+]

mobile/index.html

@@ -6,10 +6,11 @@
   <meta name="viewport"
     content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>Raven</title>
+  <meta name="description" content="Simple, work messaging tool.">
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-  <link rel="manifest" href="/site.webmanifest">
+  <!-- <link rel="manifest" href="/site.webmanifest"> -->
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">
   <meta name="msapplication-TileColor" content="#000000">
   <meta name="apple-touch-fullscreen" content="yes" />
@@ -122,11 +123,10 @@
   <link rel="apple-touch-startup-image"
     media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
     href="/splash_screens/8.3__iPad_Mini_portrait.png">
-
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="dns-prefetch" href="https://fonts.googleapis.com">
+  <link rel="dns-prefetch" href="https://fonts.gstatic.com">
+  <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&display=swap"
     rel="stylesheet">
   <style>

mobile/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mobile",
   "private": true,
-  "version": "1.2.1",
+  "version": "1.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,48 +11,58 @@
   },
   "dependencies": {
     "@capacitor/app": "^5.0.6",
-    "@capacitor/camera": "^5.0.0",
     "@capacitor/core": "^5.0.0",
-    "@capacitor/device": "^5.0.0",
-    "@capacitor/filesystem": "^5.0.0",
     "@capacitor/haptics": "^5.0.0",
-    "@capacitor/keyboard": "^5.0.0",
-    "@capacitor/status-bar": "^5.0.0",
-    "@capawesome/capacitor-file-picker": "^5.1.0",
-    "@ionic/react": "7.3.2",
+    "@ionic/react": "^7.5.2",
     "@ionic/react-router": "^7.3.2",
     "@ionic/storage": "^4.0.0",
+    "@tiptap/extension-code-block-lowlight": "^2.1.12",
+    "@tiptap/extension-highlight": "^2.1.12",
+    "@tiptap/extension-link": "^2.1.12",
+    "@tiptap/extension-mention": "^2.1.12",
+    "@tiptap/extension-placeholder": "^2.1.12",
+    "@tiptap/extension-typography": "^2.1.12",
+    "@tiptap/extension-underline": "^2.1.12",
+    "@tiptap/pm": "^2.1.12",
+    "@tiptap/react": "^2.1.12",
+    "@tiptap/starter-kit": "^2.1.12",
+    "@tiptap/suggestion": "^2.1.12",
     "cal-sans": "^1.0.1",
-    "emoji-picker-react": "^4.4.12",
-    "frappe-react-sdk": "^1.3.7",
+    "emoji-picker-element": "^1.18.4",
+    "frappe-react-sdk": "^1.3.8",
+    "highlight.js": "^11.9.0",
     "ionicons": "^7.1.2",
+    "lowlight": "^3.1.0",
     "prop-types": "^15.8.1",
-    "quill-mention": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.4",
     "react-icons": "^4.10.1",
+    "react-intersection-observer": "^9.5.2",
     "react-markdown": "^8.0.7",
-    "react-quill": "^2.0.0",
     "react-remark": "^2.1.0",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^3.0.1",
-    "swiper": "^10.2.0"
+    "swiper": "^10.2.0",
+    "tippy.js": "^6.3.7",
+    "turndown": "^7.1.2"
   },
   "devDependencies": {
     "@capacitor/cli": "^5.0.0",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@types/react-router": "5.1.11",
-    "@types/react-router-dom": "5.1.7",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/turndown": "^5.0.3",
     "@vitejs/plugin-react": "^4.0.4",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.29",
     "tailwindcss": "^3.2.7",
     "typescript": "^4.9.3",
-    "vite": "^4.4.9"
+    "vite": "^4.4.9",
+    "vite-plugin-pwa": "^0.16.5"
   }
 }

mobile/src/App.tsx

@@ -1,5 +1,5 @@
 import {
-  IonApp, setupIonicReact
+  IonApp, setupIonicReact, AnimationBuilder
 } from '@ionic/react';
 
 import 'tailwindcss/tailwind.css';
@@ -27,10 +27,20 @@ import { Routes } from './utils/auth/Routes';
 import { ChannelListProvider } from './utils/channel/ChannelListProvider';
 import { UserListProvider } from './utils/users/UserListProvider';
 import { ActiveUsersProvider } from './utils/users/ActiveUsersProvider';
+import { createAnimation, iosTransitionAnimation } from '@ionic/core';
+import { isPlatform } from '@ionic/react';
 
+const animationBuilder: AnimationBuilder = (baseEl, opts) => {
+  if (opts.direction === "back") {
+    return createAnimation(); // TODO: not sure if it is correct way to create empty animation
+  }
+
+  return iosTransitionAnimation(baseEl, opts);
+};
 setupIonicReact({
   mode: 'ios',
   swipeBackEnabled: false,
+  navAnimation: isPlatform('ios') ? animationBuilder : undefined,
 })
 
 function App() {
@@ -49,7 +59,6 @@ function App() {
   return (
     <IonApp>
       <FrappeProvider
-        url={import.meta.env.VITE_FRAPPE_PATH ?? ''}
         socketPort={import.meta.env.VITE_SOCKET_PORT ? import.meta.env.VITE_SOCKET_PORT : undefined}
         //@ts-ignore
         siteName={getSiteName()}>

mobile/src/components/common/UserAvatar.tsx

@@ -1,36 +1,45 @@
-import { IonAvatar } from '@ionic/react'
+import { IonSkeletonText } from '@ionic/react'
 import avatar from '@/assets/male-avatar.svg'
-import { StyleReactProps } from '@ionic/react/dist/types/components/react-component-lib/interfaces'
+import { useInView } from 'react-intersection-observer'
 
 interface AvatarProps {
     src?: string,
     alt: string,
     slot?: string,
     isActive?: boolean,
-    className?: StyleReactProps['className']
+    sizeClass?: string,
 }
-
-export const UserAvatar = ({ src, alt, slot, className, isActive }: AvatarProps) => {
-    return <span slot={slot} className="relative inline-block">
-        <img
-            className="h-8 w-8 rounded-md bg-[color:var(--ion-color-light)] object-cover"
+const options = {
+    root: null,
+    rootMargin: "50px",
+    threshold: 0.5,
+    triggerOnce: true
+}
+export const UserAvatar = ({ src, alt, slot, sizeClass = 'w-8 h-8', isActive }: AvatarProps) => {
+    const { ref, inView } = useInView(options)
+    return <span ref={ref} slot={slot} className="relative inline-block">
+        {inView ? <img
+            className={`${sizeClass} rounded-full bg-zinc-900 object-cover`}
             src={src ? src : avatar}
             alt={alt}
-        />
+            loading='lazy'
+        /> : <IonSkeletonText animated className={`${sizeClass} rounded-md`} />}
         {isActive &&
-            <span className="absolute bottom-0 right-0 block translate-x-1/2 translate-y-1/2 transform rounded-full">
+            <span className="absolute bottom-1 right-1 block translate-x-1/2 translate-y-1/2 transform rounded-full">
                 <span className="block h-2 w-2 rounded-full bg-green-500" />
             </span>
         }
     </span>
 }
-export const SquareAvatar = ({ src, alt, className, isActive }: AvatarProps) => {
-    return <span className="relative inline-block">
-        <img
-            className="h-8 w-8 rounded-md bg-[color:var(--ion-color-light)] object-cover"
+export const SquareAvatar = ({ src, alt, slot, sizeClass = 'w-8 h-8', isActive }: AvatarProps) => {
+    const { ref, inView } = useInView(options)
+    return <span ref={ref} slot={slot} className="relative inline-block">
+        {inView ? <img
+            className={`${sizeClass} rounded-md bg-zinc-900 object-cover`}
             src={src ? src : avatar}
             alt={alt}
-        />
+            loading='lazy'
+        /> : <IonSkeletonText animated className={`${sizeClass} rounded-md`} />}
         {isActive &&
             <span className="absolute bottom-0 right-0 block translate-x-1/2 translate-y-1/2 transform rounded-full">
                 <span className="block h-2 w-2 rounded-full bg-green-500" />