Merge pull request #924 from The-Commit-Company/make-webapp-responsive

feat: responsive web app
The-Commit-Company · Jun 6, 2024 · 6364144 · 6364144
2 parents b82eaae + 60530d4
commit 6364144
Show file tree

Hide file tree

Showing 120 changed files with 2,974 additions and 2,056 deletions.
diff --git a/raven-app/index.html b/raven-app/index.html
@@ -3,19 +3,20 @@
 
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>{{ app_name }}</title>
   <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="mask-icon" href="/safari-pinned-tab.svg" color="#000000">
   <meta name="msapplication-TileColor" content="#000000">
-  <meta name="theme-color" content="#ffffff">
+  <meta name="theme-color" content="#191919">
 </head>
 
 <body>
-  <div id="root"></div>
+  <div id="root" vaul-drawer-wrapper="true"></div>
   <script>window.csrf_token = '{{ csrf_token }}';
     if (!window.frappe) window.frappe = {};
 

diff --git a/raven-app/package.json b/raven-app/package.json
@@ -46,11 +46,14 @@
     "react-idle-timer": "^5.7.2",
     "react-intersection-observer": "^9.8.1",
     "react-router-dom": "^6.22.0",
+    "react-zoom-pan-pinch": "^3.4.4",
     "sonner": "^1.4.41",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
     "tippy.js": "^6.3.7",
     "turndown": "^7.1.2",
+    "use-double-tap": "^1.3.6",
+    "vaul": "^0.9.1",
     "vite": "^4.5.2",
     "vite-plugin-pwa": "^0.17.5",
     "vite-plugin-svgr": "^4.2.0"
@@ -62,4 +65,4 @@
     "@types/turndown": "^5.0.4",
     "typescript": "^5.3.3"
   }
-}
+}
diff --git a/raven-app/src/App.tsx b/raven-app/src/App.tsx
@@ -8,6 +8,7 @@ import "cal-sans";
 import { ThemeProvider } from './ThemeProvider'
 import { Toaster } from 'sonner'
 import { useStickyState } from './hooks/useStickyState'
+import MobileTabsPage from './pages/MobileTabsPage'
 
 
 const router = createBrowserRouter(
@@ -20,7 +21,7 @@ const router = createBrowserRouter(
       <Route path="/" element={<ProtectedRoute />}>
         <Route path="/" element={<ChannelRedirect />}>
           <Route path="channel" element={<MainPage />} >
-            <Route index element={<ChannelRedirect />} />
+            <Route index element={<MobileTabsPage />} />
             <Route path="saved-messages" lazy={() => import('./components/feature/saved-messages/SavedMessages')} />
             <Route path=":channelID" lazy={() => import('@/pages/ChatSpace')} />
           </Route>

diff --git a/raven-app/src/ThemeProvider.tsx b/raven-app/src/ThemeProvider.tsx
@@ -9,11 +9,14 @@ interface ThemeProviderProps extends ThemeProps {
 }
 export const ThemeProvider: React.FC<PropsWithChildren<ThemeProviderProps>> = ({ children, toggleTheme, ...props }) => {
     useEffect(() => {
+        const metaThemeColor = document.querySelector("meta[name=theme-color]");
         switch (props.appearance) {
             case 'light': {
                 if (document?.body) {
                     document.body.classList.remove('light', 'dark');
                     document.body.classList.add('light');
+                    metaThemeColor?.setAttribute('content', '#FFFFFF');
+
                 }
 
                 break;
@@ -22,6 +25,7 @@ export const ThemeProvider: React.FC<PropsWithChildren<ThemeProviderProps>> = ({
                 if (document?.body) {
                     document.body.classList.remove('light', 'dark');
                     document.body.classList.add('dark');
+                    metaThemeColor?.setAttribute('content', '#191919');
                 }
 
                 break;

diff --git a/raven-app/src/components/common/GIFPicker/GIFFeaturedResults.tsx b/raven-app/src/components/common/GIFPicker/GIFFeaturedResults.tsx
@@ -48,7 +48,7 @@ export const GIFFeaturedResults = ({ onSelect }: Props) => {
   }, [data]);
 
   return (
-    <div className="overflow-y-auto h-[455px] w-[420px]">
+    <div className="overflow-y-auto sm:h-[455px] w-full">
       {isLoading ? <GIFGallerySkeleton /> :
         <div className="w-full columns-2 gap-2">
           {GIFS && GIFS?.results?.map((gif: Result, index: number) => (

diff --git a/raven-app/src/components/common/GIFPicker/GIFGallerySkeleton.tsx b/raven-app/src/components/common/GIFPicker/GIFGallerySkeleton.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from "../Skeleton"
 
 export const GIFGallerySkeleton = () => {
     return (
-        <div className="grid grid-cols-2 gap-2">
+        <div className="grid grid-cols-2 gap-2 sm:min-w-[420px] min-w-full">
             <div className="grid gap-2">
                 <Skeleton
                     style={{ height: '170px' }}

diff --git a/raven-app/src/components/common/GIFPicker/GIFPicker.tsx b/raven-app/src/components/common/GIFPicker/GIFPicker.tsx
@@ -1,5 +1,5 @@
 import { useDebounce } from "@/hooks/useDebounce"
-import { Box, Flex, TextField } from "@radix-ui/themes"
+import { Box, Flex, ScrollArea, TextField } from "@radix-ui/themes"
 import { useState } from "react"
 import { BiSearch } from "react-icons/bi"
 import { GIFSearchResults } from "./GIFSearchResults"
@@ -20,7 +20,7 @@ export interface GIFPickerProps {
  * GIF Picker component (in-house) to search and select GIFs
  * @param onSelect - callback function to handle GIF selection
  */
-export const GIFPicker = ({ onSelect }: GIFPickerProps) => {
+const GIFPicker = ({ onSelect }: GIFPickerProps) => {
     // Get GIFs from Tenor API and display them
     // show a search bar to search for GIFs
     // on select, call onSelect with the gif URL
@@ -29,10 +29,10 @@ export const GIFPicker = ({ onSelect }: GIFPickerProps) => {
     const debouncedText = useDebounce(searchText, 200)
 
     return (
-        <Flex className="h-[550px] w-[450px] justify-center">
-            <Flex direction={'column'} gap='2' align='center' pt={'3'}>
-                <Box>
-                    <TextField.Root className="w-[425px] mb-1">
+        <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>
                             <BiSearch />
                         </TextField.Slot>
@@ -43,14 +43,17 @@ export const GIFPicker = ({ onSelect }: GIFPickerProps) => {
                             placeholder='Search GIFs' />
                     </TextField.Root>
                 </Box>
+                <ScrollArea className="h-[74vh] sm:h-auto pb-6 sm:pb-10 ">
+                    {debouncedText.length >= 2 ? (
+                        <GIFSearchResults query={debouncedText} onSelect={onSelect} />
+                    ) : (
+                        <GIFFeaturedResults onSelect={onSelect} />
+                    )}
 
-                {debouncedText.length >= 2 ? (
-                    <GIFSearchResults query={debouncedText} onSelect={onSelect} />
-                ) : (
-                    <GIFFeaturedResults onSelect={onSelect} />
-                )}
+                </ScrollArea>
 
-                <Box position={'fixed'} className="bottom-0 pb-2 bg-inherit">
+
+                <Box position={'fixed'} className="bottom-0 py-2 bg-background w-full text-center">
                     <img
                         src="https://www.gstatic.com/tenor/web/attribution/PB_tenor_logo_blue_horizontal.png"
                         alt="Powered by Tenor"
@@ -60,4 +63,6 @@ export const GIFPicker = ({ onSelect }: GIFPickerProps) => {
             </Flex>
         </Flex>
     )
-}
+}
+
+export default GIFPicker
diff --git a/raven-app/src/components/common/GIFPicker/GIFSearchResults.tsx b/raven-app/src/components/common/GIFPicker/GIFSearchResults.tsx
@@ -47,7 +47,7 @@ export const GIFSearchResults = ({ query, onSelect }: Props) => {
     }, [data]);
 
     return (
-        <div className="overflow-y-auto h-[455px] w-[420px]">
+        <div className="overflow-y-auto sm:h-[455px] w-full">
             {isLoading ? <GIFGallerySkeleton /> :
                 <div className="w-full columns-2 gap-2">
                     {GIFS && GIFS?.results?.map((gif: Result, index: number) => (

diff --git a/raven-app/src/components/common/ImageViewer.tsx b/raven-app/src/components/common/ImageViewer.tsx
@@ -0,0 +1,19 @@
+import { PropsWithChildren } from 'react'
+import { TransformWrapper, TransformComponent, ReactZoomPanPinchProps } from "react-zoom-pan-pinch";
+
+
+interface ImageViewerProps extends ReactZoomPanPinchProps {
+    children: React.ReactNode
+
+}
+const ImageViewer = ({ children, ...props }: PropsWithChildren) => {
+    return (
+        <TransformWrapper centerOnInit centerZoomedOut limitToBounds {...props}>
+            <TransformComponent>
+                {children}
+            </TransformComponent>
+        </TransformWrapper>
+    )
+}
+
+export default ImageViewer
diff --git a/raven-app/src/components/common/UserAvatar.tsx b/raven-app/src/components/common/UserAvatar.tsx
@@ -5,10 +5,12 @@ import { clsx } from 'clsx'
 import { generateAvatarColor } from '../feature/select-member/GenerateAvatarColor'
 import { RiRobot2Fill } from 'react-icons/ri'
 import { useMemo } from 'react'
+import { AvailabilityStatus } from '../feature/userSettings/SetUserAvailabilityMenu'
 
 interface UserAvatarProps extends Partial<AvatarProps> {
     alt?: string,
     isActive?: boolean,
+    availabilityStatus?: AvailabilityStatus,
     isBot?: boolean,
     skeletonSize?: BoxProps['width'] | BoxProps['height'],
 }
@@ -45,17 +47,32 @@ const getIconSize = (size: AvatarProps['size']) => {
     }
 }
 
-export const UserAvatar = ({ src, alt, size = '1', radius = 'medium', isActive, skeletonSize = '5', fallback, isBot, className, ...props }: UserAvatarProps) => {
+export const UserAvatar = ({ src, alt, size = '1', radius = 'medium', isActive, availabilityStatus, skeletonSize = '5', fallback, isBot, className, ...props }: UserAvatarProps) => {
     const color = useMemo(() => generateAvatarColor(alt), [alt])
+
     return <Theme accentColor={color}><span className="relative inline-block">
         <Avatar src={src} alt={alt}
             loading='lazy'
             fallback={fallback ?? getInitials(alt)} size={size} radius={radius} className={className} {...props} />
-        {isActive &&
+
+        {availabilityStatus && availabilityStatus === 'Away' &&
+            <span className={clsx("absolute block translate-x-1/2 translate-y-1/2 transform rounded-full", radius === 'full' ? 'bottom-1 right-1' : 'bottom-0.5 right-0.5')}>
+                <span className="block h-2 w-2 rounded-full border border-slate-2 bg-[#FFAA33] shadow-md" />
+            </span>
+        }
+
+        {availabilityStatus && availabilityStatus === 'Do not disturb' &&
+            <span className={clsx("absolute block translate-x-1/2 translate-y-1/2 transform rounded-full", radius === 'full' ? 'bottom-1 right-1' : 'bottom-0.5 right-0.5')}>
+                <span className="block h-2 w-2 rounded-full border border-slate-2 bg-[#D22B2B] shadow-md" />
+            </span>
+        }
+
+        {availabilityStatus !== 'Away' && availabilityStatus !== 'Do not disturb' && isActive &&
             <span className={clsx("absolute block translate-x-1/2 translate-y-1/2 transform rounded-full", radius === 'full' ? 'bottom-1 right-1' : 'bottom-0.5 right-0.5')}>
                 <span className="block h-2 w-2 rounded-full border border-slate-2 bg-green-600 shadow-md" />
             </span>
         }
+
         {isBot && <span className={clsx("absolute block translate-x-1/2 translate-y-1/2 transform rounded-full", radius === 'full' ? 'bottom-1 right-1' : 'bottom-0.5 right-0.5')}>
             <RiRobot2Fill className="text-accent-11 dark:text-accent-11" size={getIconSize(size)} />
         </span>}

diff --git a/raven-app/src/components/feature/CommandMenu/ChannelItem.tsx b/raven-app/src/components/feature/CommandMenu/ChannelItem.tsx
@@ -13,8 +13,8 @@ const ChannelItem = ({ channel }: { channel: ChannelListItem }) => {
     const setOpen = useSetAtom(commandMenuOpenAtom)
 
     const onSelect = () => {
-        navigate(`/channel/${channel.name}`)
         setOpen(false)
+        navigate(`/channel/${channel.name}`)
     }
 
     return <Command.Item

diff --git a/raven-app/src/components/feature/CommandMenu/CommandMenu.tsx b/raven-app/src/components/feature/CommandMenu/CommandMenu.tsx
@@ -9,11 +9,11 @@ import clsx from 'clsx'
 import { BiCog, BiFile, BiMoon, BiSearch, BiSmile } from 'react-icons/bi'
 import ArchivedChannelList from './ArchivedChannelList'
 import { atom, useAtom } from 'jotai'
+import { useIsDesktop } from '@/hooks/useMediaQuery'
+import { Drawer, DrawerContent } from '@/components/layout/Drawer'
 
 export const commandMenuOpenAtom = atom(false)
 
-const ICON_SIZE = '18'
-
 const CommandMenu = () => {
     const [open, setOpen] = useAtom(commandMenuOpenAtom)
 
@@ -31,53 +31,76 @@ const CommandMenu = () => {
         return () => document.removeEventListener('keydown', down)
     }, [])
 
+    const isDesktop = useIsDesktop()
+
+    if (isDesktop) {
+        return (
+            <Dialog.Root open={open} onOpenChange={setOpen}>
+                <Dialog.Content className={clsx(DIALOG_CONTENT_CLASS, 'p-4 rounded-md')}>
+                    <CommandList />
+                </Dialog.Content>
+            </Dialog.Root>
+        )
+    } else {
+        return <Drawer open={open} onOpenChange={setOpen}>
+            <DrawerContent>
+                <div className='min-h-[80vh]'>
+                    <CommandList />
+                </div>
+
+            </DrawerContent>
+        </Drawer>
+    }
+
+
+
+
+
+
+}
+
+export const CommandList = () => {
+    const isDesktop = useIsDesktop()
+    return <Command label="Global Command Menu" className='command-menu'>
+        <Command.Input
+            autoFocus={isDesktop}
+            placeholder='Search or type a command' />
+        <Command.List>
+            <Command.Empty>No results found.</Command.Empty>
+            <ChannelList />
+            <UserList />
+
+            {/* TODO: Make these commands work */}
+            {/* <Command.Group heading="Commands">
+            <Command.Item>
+                <BiSearch size={ICON_SIZE} />
+                Search
+            </Command.Item>
+            <Command.Item>
+                <BiSearch size={ICON_SIZE} />
+                Search in #general
+            </Command.Item>
+            <Command.Item>
+                <BiFile size={ICON_SIZE} />
+                View files in #general
+            </Command.Item>
+            <Command.Item>
+                <BiSmile size={ICON_SIZE} />
+                Set status
+            </Command.Item>
+            <Command.Item>
+                <BiMoon size={ICON_SIZE} />
+                Toggle Theme
+            </Command.Item>
+            <Command.Item>
+                <BiCog size={ICON_SIZE} />
+                Settings
+            </Command.Item>
+        </Command.Group> */}
 
-    return (
-        <Dialog.Root open={open} onOpenChange={setOpen}>
-            <Dialog.Content className={clsx(DIALOG_CONTENT_CLASS, 'p-4 rounded-md')}>
-                <Command label="Global Command Menu" className='command-menu'>
-                    <Command.Input
-                        autoFocus
-                        placeholder='Search or type a command' />
-                    <Command.List>
-                        <Command.Empty>No results found.</Command.Empty>
-                        <ChannelList />
-                        <UserList />
-
-                        {/* TODO: Make these commands work
-                        <Command.Group heading="Commands">
-                            <Command.Item>
-                                <BiSearch size={ICON_SIZE}/>
-                                Search
-                            </Command.Item>
-                            <Command.Item>
-                                <BiSearch size={ICON_SIZE}/>
-                                Search in #general
-                            </Command.Item>
-                            <Command.Item>
-                                <BiFile size={ICON_SIZE}/>
-                                View files in #general
-                            </Command.Item>
-                            <Command.Item>
-                                <BiSmile size={ICON_SIZE}/>
-                                Set status
-                            </Command.Item>
-                            <Command.Item>
-                                <BiMoon size={ICON_SIZE} />
-                                Toggle Theme
-                            </Command.Item>
-                            <Command.Item>
-                                <BiCog size={ICON_SIZE} />
-                                Settings
-                            </Command.Item>
-                        </Command.Group> */}
-
-                        {/* <ArchivedChannelList /> */}
-                    </Command.List>
-                </Command>
-            </Dialog.Content>
-        </Dialog.Root>
-    )
+            {/* <ArchivedChannelList /> */}
+        </Command.List>
+    </Command>
 }
 
 export default CommandMenu