The-Commit-Company · nikkothari22 · Aug 31, 2024 · Aug 28, 2024 · Aug 28, 2024 · Aug 28, 2024
diff --git a/README.md b/README.md
@@ -10,12 +10,12 @@
     <a href="https://frappecloud.com/marketplace/apps/raven"><strong>Install on Frappe Cloud»</strong></a>
     <br />
     <br />
-    <a href="https://ravenapp.info"><strong>Learn More »</strong></a>
+    <a href="https://thecommit.company/products/raven"><strong>Learn More »</strong></a>
     <br />
     <br />
     <a href="https://github.com/The-Commit-Company/Raven/issues">Issues</a>
     ·
-    <a href="https://github.com/The-Commit-Company/Raven/discussions">Discussions</a>
+    <a href="https://community.ravenapp.cloud">Community</a>
      ·
     <a href="https://github.com/sponsors/The-Commit-Company?frequency=one-time">Sponsor Us!</a>
   </p>

diff --git a/frontend/package.json b/frontend/package.json
@@ -2,7 +2,7 @@
   "name": "raven-ui",
   "private": true,
   "license": "AGPL-3.0-only",
-  "version": "1.6.12",
+  "version": "1.6.13",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/frontend/src/components/feature/channel-details/leave-channel/LeaveChannelButton.tsx b/frontend/src/components/feature/channel-details/leave-channel/LeaveChannelButton.tsx
@@ -3,6 +3,8 @@ import { LeaveChannelModal } from './LeaveChannelModal'
 import { useState } from 'react'
 import { AlertDialog, Button } from '@radix-ui/themes'
 import { DIALOG_CONTENT_CLASS } from '@/utils/layout/dialog'
+import { Drawer, DrawerContent, DrawerTrigger } from '@/components/layout/Drawer'
+import { useIsDesktop } from '@/hooks/useMediaQuery'
 
 interface LeaveChannelButtonProps {
     channelData: ChannelListItem,
@@ -16,19 +18,43 @@ export const LeaveChannelButton = ({ channelData, onClose: onParentClose }: Leav
         setOpen(false)
     }
 
-    return (
-        <AlertDialog.Root open={open} onOpenChange={setOpen}>
-            <AlertDialog.Trigger>
-                <Button variant='ghost' className={'text-left text-red-700 hover:bg-red-3 w-fit not-cal'}>
-                    Leave channel
-                </Button>
-            </AlertDialog.Trigger>
-            <AlertDialog.Content className={DIALOG_CONTENT_CLASS}>
-                <LeaveChannelModal
-                    onClose={onClose}
-                    closeDetailsModal={onParentClose}
-                    channelData={channelData} />
-            </AlertDialog.Content>
-        </AlertDialog.Root>
-    )
+    const isDesktop = useIsDesktop()
+
+    if (isDesktop) {
+
+        return (
+            <AlertDialog.Root open={open} onOpenChange={setOpen}>
+                <AlertDialog.Trigger>
+                    <Button variant='ghost' className={'text-left text-red-700 hover:bg-red-3 w-fit not-cal'}>
+                        Leave channel
+                    </Button>
+                </AlertDialog.Trigger>
+                <AlertDialog.Content className={DIALOG_CONTENT_CLASS}>
+                    <LeaveChannelModal
+                        onClose={onClose}
+                        closeDetailsModal={onParentClose}
+                        channelData={channelData} />
+                </AlertDialog.Content>
+            </AlertDialog.Root>
+        )
+    } else {
+        return (
+            <Drawer open={open} onOpenChange={setOpen}>
+                <DrawerTrigger asChild>
+                    <Button variant='ghost' className={'text-left text-red-700 hover:bg-red-3 w-fit not-cal'}>
+                        Leave channel
+                    </Button>
+                </DrawerTrigger>
+                <DrawerContent>
+                    <div className='pb-16 min-h-48 px-1 overflow-auto'>
+                        <LeaveChannelModal
+                            onClose={onClose}
+                            isDrawer
+                            closeDetailsModal={onParentClose}
+                            channelData={channelData} />
+                    </div>
+                </DrawerContent>
+            </Drawer>
+        )
+    }
 }
diff --git a/frontend/src/components/feature/channel-details/leave-channel/LeaveChannelModal.tsx b/frontend/src/components/feature/channel-details/leave-channel/LeaveChannelModal.tsx
@@ -1,22 +1,23 @@
 import { useFrappeDeleteDoc, useFrappeGetCall } from 'frappe-react-sdk'
-import { useContext } from 'react'
+import { Fragment, useContext } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { UserContext } from '../../../../utils/auth/UserProvider'
 import { ErrorBanner } from '../../../layout/AlertBanner'
 import { ChannelListContext, ChannelListContextType, ChannelListItem } from '@/utils/channel/ChannelListProvider'
 import { ChannelIcon } from '@/utils/layout/channelIcon'
-import { AlertDialog, Button, Flex, Text } from '@radix-ui/themes'
+import { AlertDialog, Button, Dialog, Flex, Text } from '@radix-ui/themes'
 import { Loader } from '@/components/common/Loader'
 import { toast } from 'sonner'
 import { getErrorMessage } from '@/components/layout/AlertBanner/ErrorBanner'
 
 interface LeaveChannelModalProps {
     onClose: () => void,
     channelData: ChannelListItem,
-    closeDetailsModal: () => void
+    closeDetailsModal: () => void,
+    isDrawer?: boolean
 }
 
-export const LeaveChannelModal = ({ onClose, channelData, closeDetailsModal }: LeaveChannelModalProps) => {
+export const LeaveChannelModal = ({ onClose, channelData, isDrawer, closeDetailsModal }: LeaveChannelModalProps) => {
 
     const { currentUser } = useContext(UserContext)
     const { deleteDoc, loading: deletingDoc, error } = useFrappeDeleteDoc()
@@ -46,15 +47,20 @@ export const LeaveChannelModal = ({ onClose, channelData, closeDetailsModal }: L
         })
     }
 
+    const Title = isDrawer ? Dialog.Title : AlertDialog.Title
+    const DialogCancel = isDrawer ? Fragment : AlertDialog.Cancel
+    const DialogAction = isDrawer ? Fragment : AlertDialog.Action
+
     return (
         <>
-            <AlertDialog.Title>
+
+            <Title>
                 <Flex gap='1'>
                     <Text>Leave </Text>
                     <ChannelIcon type={channelData?.type} className={'mt-1'} />
                     <Text>{channelData?.channel_name}?</Text>
                 </Flex>
-            </AlertDialog.Title>
+            </Title>
 
             <Flex direction={'column'} gap='2'>
                 <ErrorBanner error={error} />
@@ -65,17 +71,17 @@ export const LeaveChannelModal = ({ onClose, channelData, closeDetailsModal }: L
             </Flex>
 
             <Flex gap="3" mt="4" justify="end">
-                <AlertDialog.Cancel>
-                    <Button variant="soft" color="gray">
+                <DialogCancel>
+                    <Button variant="soft" color="gray" onClick={onClose}>
                         Cancel
                     </Button>
-                </AlertDialog.Cancel>
-                <AlertDialog.Action>
+                </DialogCancel>
+                <DialogAction>
                     <Button variant="solid" color="red" onClick={onSubmit} disabled={deletingDoc}>
                         {deletingDoc && <Loader />}
                         {deletingDoc ? "Leaving" : "Leave"}
                     </Button>
-                </AlertDialog.Action>
+                </DialogAction>
             </Flex>
         </>
     )

diff --git a/frontend/src/components/feature/channel-settings/archive-channel/ArchiveChannelButton.tsx b/frontend/src/components/feature/channel-settings/archive-channel/ArchiveChannelButton.tsx
@@ -4,6 +4,8 @@ import { ChannelListItem } from "@/utils/channel/ChannelListProvider";
 import { useState } from "react";
 import { AlertDialog, Button } from "@radix-ui/themes";
 import { DIALOG_CONTENT_CLASS } from "@/utils/layout/dialog";
+import { useIsDesktop } from "@/hooks/useMediaQuery";
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/layout/Drawer";
 
 interface ArchiveChannelButtonProps {
     onClose: () => void,
@@ -18,20 +20,46 @@ export const ArchiveChannelButton = ({ onClose: onCloseParent, channelData, allo
         setOpen(false)
     }
 
-    return (
-        <AlertDialog.Root open={open} onOpenChange={setOpen}>
-            <AlertDialog.Trigger>
-                <Button className={'py-6 px-4 bg-transparent text-zinc-900 dark:text-white not-cal hover:bg-gray-3 text-left justify-start rounded-none'} disabled={!allowSettingChange}>
-                    <BiBox />
-                    Archive channel
-                </Button>
-            </AlertDialog.Trigger>
-            <AlertDialog.Content className={DIALOG_CONTENT_CLASS}>
-                <ArchiveChannelModal
-                    onClose={onCloseParent}
-                    onCloseViewDetails={onClose}
-                    channelData={channelData} />
-            </AlertDialog.Content>
-        </AlertDialog.Root>
-    )
+    const isDesktop = useIsDesktop()
+
+    if (isDesktop) {
+        return (
+            <AlertDialog.Root open={open} onOpenChange={setOpen}>
+                <AlertDialog.Trigger>
+                    <Button className={'py-6 px-4 bg-transparent text-zinc-900 dark:text-white not-cal hover:bg-gray-3 text-left justify-start rounded-none'} disabled={!allowSettingChange}>
+                        <BiBox />
+                        Archive channel
+                    </Button>
+                </AlertDialog.Trigger>
+                <AlertDialog.Content className={DIALOG_CONTENT_CLASS}>
+                    <ArchiveChannelModal
+                        onClose={onClose}
+                        onCloseViewDetails={onCloseParent}
+                        channelData={channelData} />
+                </AlertDialog.Content>
+            </AlertDialog.Root>
+        )
+    } else {
+        return (
+            <Drawer open={open} onOpenChange={setOpen}>
+                <DrawerTrigger asChild>
+                    <Button className={'py-6 px-4 bg-transparent text-zinc-900 dark:text-white not-cal hover:bg-gray-3 text-left justify-start rounded-none'} disabled={!allowSettingChange}>
+                        <BiBox />
+                        Archive channel
+                    </Button>
+                </DrawerTrigger>
+                <DrawerContent>
+                    <div className='pb-16 min-h-48 px-1 overflow-auto'>
+                        <ArchiveChannelModal
+                            onClose={onClose}
+                            isDrawer
+                            onCloseViewDetails={onCloseParent}
+                            channelData={channelData} />
+                    </div>
+                </DrawerContent>
+            </Drawer>
+        )
+    }
+
+
 }
diff --git a/frontend/src/components/feature/channel-settings/archive-channel/ArchiveChannelModal.tsx b/frontend/src/components/feature/channel-settings/archive-channel/ArchiveChannelModal.tsx
@@ -2,17 +2,19 @@ import { useFrappeUpdateDoc } from 'frappe-react-sdk'
 import { ErrorBanner } from '../../../layout/AlertBanner'
 import { useNavigate } from 'react-router-dom'
 import { ChannelListItem } from '@/utils/channel/ChannelListProvider'
-import { AlertDialog, Flex, Text, Button } from '@radix-ui/themes'
+import { AlertDialog, Flex, Text, Button, Dialog } from '@radix-ui/themes'
 import { Loader } from '@/components/common/Loader'
 import { toast } from 'sonner'
+import { Fragment } from 'react'
 
 interface ArchiveChannelModalProps {
     onClose: () => void,
     onCloseViewDetails: () => void,
-    channelData: ChannelListItem
+    channelData: ChannelListItem,
+    isDrawer?: boolean
 }
 
-export const ArchiveChannelModal = ({ onClose, onCloseViewDetails, channelData }: ArchiveChannelModalProps) => {
+export const ArchiveChannelModal = ({ onClose, onCloseViewDetails, channelData, isDrawer }: ArchiveChannelModalProps) => {
 
     const { updateDoc, loading: archivingDoc, error } = useFrappeUpdateDoc()
     const navigate = useNavigate()
@@ -23,14 +25,21 @@ export const ArchiveChannelModal = ({ onClose, onCloseViewDetails, channelData }
         }).then(() => {
             onClose()
             onCloseViewDetails()
-            navigate('/channel/general')
+            navigate('/channel')
             toast('Channel archived')
         })
     }
+    const Title = isDrawer ? Dialog.Title : AlertDialog.Title
+    const DialogCancel = isDrawer ? Fragment : AlertDialog.Cancel
+    const DialogAction = isDrawer ? Fragment : AlertDialog.Action
 
     return (
         <>
-            <AlertDialog.Title>Archive this channel? </AlertDialog.Title>
+            {isDrawer ?
+                <Title>Archive this channel? </Title>
+                :
+                <AlertDialog.Title>Archive this channel? </AlertDialog.Title>
+            }
 
             <Flex direction='column' gap='4'>
                 <ErrorBanner error={error} />
@@ -45,17 +54,17 @@ export const ArchiveChannelModal = ({ onClose, onCloseViewDetails, channelData }
             </Flex>
 
             <Flex gap="3" mt="4" justify="end">
-                <AlertDialog.Cancel>
+                <DialogCancel>
                     <Button variant="soft" color="gray">
                         Cancel
                     </Button>
-                </AlertDialog.Cancel>
-                <AlertDialog.Action>
+                </DialogCancel>
+                <DialogAction>
                     <Button variant="solid" color="red" onClick={archiveChannel} disabled={archivingDoc}>
                         {archivingDoc && <Loader />}
                         {archivingDoc ? "Archiving" : "Archive"}
                     </Button>
-                </AlertDialog.Action>
+                </DialogAction>
             </Flex>
         </>
     )