Merge pull request #1175 from The-Commit-Company/fixes-on-new-ui

fix: miscellaneous fixes on UI

frontend/src/App.tsx

@@ -24,6 +24,8 @@ const NO_CACHE_KEYS = [
   "raven.api.document_link.get_preview_data"
 ]
 
+const isDesktop = window.innerWidth > 768
+
 const lastWorkspace = localStorage.getItem('ravenLastWorkspace') ?? ''
 const lastChannel = localStorage.getItem('ravenLastChannel') ?? ''
 
@@ -37,7 +39,7 @@ const router = createBrowserRouter(
       <Route path='/forgot-password' lazy={() => import('@/pages/auth/ForgotPassword')} />
       <Route path="/" element={<ProtectedRoute />} errorElement={<ErrorPage />}>
         <Route path="/" element={<WorkspaceSwitcher />}>
-          <Route index element={lastWorkspace && lastChannel ? <Navigate to={`/${lastWorkspace}/${lastChannel}`} replace /> : lastWorkspace ? <Navigate to={`/${lastWorkspace}`} replace /> : <WorkspaceSwitcherGrid />} />
+          <Route index element={lastWorkspace && lastChannel && isDesktop ? <Navigate to={`/${lastWorkspace}/${lastChannel}`} replace /> : lastWorkspace ? <Navigate to={`/${lastWorkspace}`} replace /> : <WorkspaceSwitcherGrid />} />
           <Route path="workspace-explorer" element={<WorkspaceSwitcherGrid />} />
           <Route path="settings" lazy={() => import('./pages/settings/Settings')}>
             <Route index lazy={() => import('./components/feature/userSettings/UserProfile/UserProfile')} />

frontend/src/components/feature/channel-settings/archive-channel/ArchiveChannelModal.tsx

@@ -25,7 +25,7 @@ export const ArchiveChannelModal = ({ onClose, onCloseViewDetails, channelData,
         }).then(() => {
             onClose()
             onCloseViewDetails()
-            navigate('/channel')
+            navigate(`/${channelData.workspace}`)
             toast('Channel archived')
         })
     }
@@ -46,8 +46,8 @@ export const ArchiveChannelModal = ({ onClose, onCloseViewDetails, channelData,
                 <Text size='2'>Please understand that when you archive <strong>{channelData?.channel_name}</strong>:</Text>
                 <Flex direction='column'>
                     <ul className={'list-inside'}>
-                        <li><Text size='1'>It will be removed from your channel list</Text></li>
-                        <li><Text size='1'>No one will be able to send messages to this channel</Text></li>
+                        <li><Text size='2'>It will be removed from your channel list</Text></li>
+                        <li><Text size='2'>No one will be able to send messages to this channel</Text></li>
                     </ul>
                 </Flex>
                 <Text size='2'>You will still be able to find the channel’s contents via search. And you can always unarchive the channel in the future, if you want.</Text>

frontend/src/components/feature/chat-header/ChannelHeader.tsx

@@ -16,10 +16,12 @@ export const ChannelHeader = ({ channelData }: ChannelHeaderProps) => {
 
     // The channel header has the channel name, the channel type icon, edit channel name button, and the view or add members button
 
+    const lastWorkspace = localStorage.getItem('ravenLastWorkspace')
+
     return (
         <PageHeader>
             <Flex align='center'>
-                <Link to='/channel' className="block bg-transparent hover:bg-transparent active:bg-transparent sm:hidden">
+                <Link to={`/${lastWorkspace}`} className="block bg-transparent hover:bg-transparent active:bg-transparent sm:hidden">
                     <BiChevronLeft size='24' className="block text-gray-12" />
                 </Link>
                 <Flex gap='4' align={'center'} className="group animate-fadein pr-4">

frontend/src/components/feature/chat/ChatMessage/Renderers/FileMessage.tsx

@@ -68,23 +68,29 @@ export const FileMessageBlock = memo(({ message, user, ...props }: FileMessageBl
                 <Flex align='center' gap='2'>
                     {isPDF && isDesktop && <PDFPreviewButton message={message} user={user} />}
                     <IconButton
-                        size='1'
+                        size={{
+                            md: '1',
+                            sm: '2',
+                        }}
                         title="Copy link"
                         color='gray'
                         onClick={copyLink}
                         variant="soft"
                     >
-                        <BiLink />
+                        <BiLink className="text-lg sm:text-base" />
                     </IconButton>
                     <IconButton
-                        size='1'
+                        size={{
+                            md: '1',
+                            sm: '2',
+                        }}
                         asChild
                         title="Download"
                         color='gray'
                         variant="soft"
                     >
                         <Link className='no-underline' href={message.file} download>
-                            {isDesktop ? <BiDownload /> : <BiShow />}
+                            {isDesktop ? <BiDownload className="text-lg sm:text-base" /> : <BiShow className="text-lg sm:text-base" />}
                         </Link>
                     </IconButton>
                 </Flex>
@@ -107,12 +113,15 @@ const PDFPreviewButton = ({ message, user }: {
         <Dialog.Root>
             <Dialog.Trigger>
                 <IconButton
-                    size='1'
+                    size={{
+                        md: '1',
+                        sm: '2',
+                    }}
                     color='gray'
                     variant="soft"
                     title='Preview'
                 >
-                    <BiShow />
+                    <BiShow className="text-lg sm:text-base" />
                 </IconButton>
             </Dialog.Trigger>
             <Dialog.Content className={clsx(DIALOG_CONTENT_CLASS, 'min-w-[64rem]')} size='4'>
@@ -129,7 +138,7 @@ const PDFPreviewButton = ({ message, user }: {
                 <Flex justify='end' gap='2' mt='3'>
                     <Button variant='soft' color='gray' asChild>
                         <Link className='no-underline' href={message.file} download>
-                            <BiDownload />
+                            <BiDownload size='18' />
                             Download
                         </Link>
                     </Button>

frontend/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/LinkPreview.tsx

@@ -86,28 +86,29 @@ const LinkPreview = memo(({ messageID }: { messageID: string }) => {
     if (linkPreview && linkPreview.site_name && linkPreview.description) {
 
         const image = linkPreview.absolute_image || linkPreview.image
-        return <Box pt='2' width="580px" position='relative' className='group/linkpreview'>
-            <Card asChild>
-                <a href={href} target='_blank' className='flex items-center gap-4 pr-4'>
+        return <Box pt='2' width={{
+            md: '580px',
+        }} position='relative' className='group/linkpreview sm:max-w-[580px] max-w-[356px]'>
+            <Card asChild className='p-0 sm:p-3'>
+                <a href={href} target='_blank' className='flex sm:items-center flex-col sm:flex-row sm:gap-4 gap-0 sm:pr-4'>
                     {image && <img src={image} alt={linkPreview.title}
+                        className='sm:w-[220px] w-full h-full object-cover sm:object-center sm:h-auto sm:-ml-3 sm:-mt-3 sm:-mb-3'
                         style={{
                             display: "block",
-                            objectFit: "cover",
-                            objectPosition: 'center',
-                            marginLeft: '-12px',
-                            marginTop: '-12px',
-                            marginBottom: '-12px',
-                            width: "220px",
-                            height: "auto",
+                            // marginLeft: '-12px',
+                            // marginTop: '-12px',
+                            // marginBottom: '-12px',
+                            // width: "220px",
+                            // height: "auto",
                             backgroundColor: "var(--gray-5)",
                         }} />
                     }
-                    <Stack className='gap-1.5'>
-                        <Stack className='gap-1'>
+                    <Stack className='gap-1.5 sm:p-0 py-3 px-3'>
+                        <Stack className='sm:gap-1 gap-0.5'>
                             <Text weight='bold' className='block' size='2'>{linkPreview.title}</Text>
                             <Text size='1'>{linkPreview.site_name}</Text>
                         </Stack>
-                        <Text as='p' size='1' className='line-clamp-2'>{linkPreview.description}</Text>
+                        <Text as='p' size='1' className='line-clamp-3'>{linkPreview.description}</Text>
                     </Stack>
                 </a>
 
@@ -119,7 +120,7 @@ const LinkPreview = memo(({ messageID }: { messageID: string }) => {
                         size='1'
                         color='gray'
                         aria-label='Hide link preview'
-                        className='bg-black/60 text-white rounded-md'
+                        className='bg-black/40 text-white rounded-md'
                         variant='ghost'
                         // variant='soft'
                         onClick={hidePreviewLink}

frontend/src/components/feature/chat/ChatStream/ChatBoxBody.tsx

@@ -92,25 +92,41 @@ export const ChatBoxBody = ({ channelData }: ChatBoxBodyProps) => {
 
     const { canUserSendMessage, shouldShowJoinBox } = useMemo(() => {
 
-        let canUserSendMessage = false
-        let shouldShowJoinBox = false
-
-        const isDM = channelData?.is_direct_message === 1 || channelData?.is_self_message === 1
+        if (channelData.is_archived) {
+            return {
+                canUserSendMessage: false,
+                shouldShowJoinBox: false
+            }
+        }
 
 
-        if (channelData.type === 'Open' || channelMemberProfile && channelData.is_archived === 0) {
-            canUserSendMessage = true
+        if (channelData.type === 'Open') {
+            return {
+                canUserSendMessage: true,
+                shouldShowJoinBox: false
+            }
         }
 
-        if (channelData.is_archived === 0 && !channelMemberProfile && channelData.type !== 'Open' && !isDM) {
-            shouldShowJoinBox = true
+        if (channelMemberProfile) {
+            return {
+                canUserSendMessage: true,
+                shouldShowJoinBox: false
+            }
         }
 
-        return { canUserSendMessage, shouldShowJoinBox }
+        const isDM = channelData?.is_direct_message === 1 || channelData?.is_self_message === 1
 
-    }, [channelMemberProfile, channelData])
+        // If the channel data is loaded and the member profile is loaded, then check for this, else don't show anything.
+        if (!channelMemberProfile && !isDM && channelData && !isLoading) {
+            return {
+                shouldShowJoinBox: true,
+                canUserSendMessage: false
+            }
+        }
 
+        return { canUserSendMessage: false, shouldShowJoinBox: false }
 
+    }, [channelMemberProfile, channelData, isLoading])
 
 
     const { threadID } = useParams()

frontend/src/components/feature/chat/chat-footer/ArchivedChannelBox.tsx

@@ -27,7 +27,7 @@ const ArchiveChannelBoxContent = ({ channelID, isMemberAdmin }: { channelID: str
         <Flex
             direction='column'
             align='center'
-            className="border-2 rounded-md bg-surface animate-fadein"
+            className="border border-gray-6 rounded-md bg-surface animate-fadein sm:mb-0 mb-2"
             p='4'>
             <Stack justify='center' align='center'>
                 <Text as='span' color='gray'>This channel has been archived.</Text>
@@ -53,7 +53,7 @@ const UnArchiveButton = ({ channelID }: { channelID: string }) => {
 
     return (
         <Button
-            size='1'
+            size='2'
             disabled={loading}
             color='gray'
             variant="soft"

frontend/src/components/feature/chat/chat-footer/JoinChannelBox.tsx

@@ -32,7 +32,7 @@ export const JoinChannelBox = ({ channelData, user }: JoinChannelBoxProps) => {
                 direction='column'
                 align='center'
                 gap={channelData ? '3' : '2'}
-                className="border-2 rounded-md bg-surface border-accent-a6 animate-fadein"
+                className="border border-gray-6 rounded-md bg-surface animate-fadein sm:mb-0 mb-2"
                 p={channelData ? '4' : '3'}>
                 <ErrorBanner error={error} />
                 <Text as='span' size={'2'}>You are not a member of this {channelData ? 'channel' : 'thread'}.</Text>
@@ -41,7 +41,7 @@ export const JoinChannelBox = ({ channelData, user }: JoinChannelBoxProps) => {
                     size={channelData ? '2' : '1'}
                     disabled={loading}>
                     {loading && <Loader className="text-white" />}
-                    {loading ? 'Joining' : <span className="inline-flex gap-1">Join {channelData ? `${channelData?.channel_name}` : "Conversation"}
+                    {loading ? 'Joining' : <span className="inline-flex gap-1 not-cal font-medium">Join {channelData ? `${channelData?.channel_name}` : "Conversation"}
                     </span>}
                 </Button>
             </Flex>

frontend/src/components/layout/Heading/PageHeader.tsx

@@ -10,7 +10,7 @@ export const PageHeader = ({ children }: PropsWithChildren) => {
     return (
         <header className='dark:bg-gray-2 bg-white fixed top-0' style={{ zIndex: 999 }}>
             <Box
-                py='3'
+                py='2'
                 className={clsx('border-gray-4 sm:dark:border-gray-6 border-b px-4 sm:px-0 sm:ml-4',
                     threadID ? 'sm:w-[calc((100vw-var(--sidebar-width)-var(--space-8))/2)] w-screen' :
                         'sm:w-[calc(100vw-var(--sidebar-width)-var(--space-6))] w-screen')}>

frontend/src/components/layout/Sidebar/WorkspacesSidebar.tsx

@@ -3,7 +3,7 @@ import { HStack, Stack } from '../Stack'
 import useFetchWorkspaces, { WorkspaceFields } from '@/hooks/fetchers/useFetchWorkspaces'
 import { SidebarFooter } from './SidebarFooter'
 import AddWorkspaceSidebarButton from '@/components/feature/workspaces/AddWorkspaceSidebarButton'
-import { Link, useParams } from 'react-router-dom'
+import { Link, useLocation, useParams } from 'react-router-dom'
 import clsx from 'clsx'
 import { useContext, useMemo } from 'react'
 import useUnreadMessageCount from '@/hooks/useUnreadMessageCount'
@@ -40,7 +40,7 @@ const WorkspacesSidebar = () => {
     }, [data, channels, unreadCounts])
 
     return (
-        <Stack className='sm:w-20 w-20 sm:p-0 px-2 pb-4 border-r border-gray-4 dark:border-gray-6 h-screen' justify='between'>
+        <Stack className='w-20 p-0 pb-4 border-r border-gray-4 dark:border-gray-6 h-screen' justify='between'>
             <ScrollArea className='h-[calc(100vh-7rem)]' type="hover" scrollbars="vertical">
                 <Stack align='center' className='px-1 py-2' gap='3'>
                     {myWorkspaces.map((workspace) => (
@@ -68,41 +68,50 @@ const WorkspaceItem = ({ workspace }: { workspace: WorkspaceFields & { unread_co
         logo = '/assets/raven/raven-logo.png'
     }
 
+    const location = useLocation()
+
+    const path = isSelected ? location.pathname : `/${workspace.name}`
+
     const openWorkspace = () => {
         localStorage.setItem('ravenLastWorkspace', workspace.name)
         localStorage.removeItem('ravenLastChannel')
     }
 
     return <HStack position='relative' align='center' className='group'>
-        <Box className={clsx('w-1 h-0 bg-gray-12 rounded-r-full dark:bg-gray-12 absolute -left-3 group-hover:h-4 transition-all duration-200 ease-ease-out-cubic',
-            isSelected && 'h-[90%] group-hover:h-[90%]',
+        <Box className={clsx('w-1 bg-gray-12 rounded-r-full dark:bg-gray-12 absolute sm:-left-3 -left-3.5 group-hover:h-4 transition-all duration-200 ease-ease-out-cubic',
+            isSelected ? 'h-[90%] group-hover:h-[90%] group-active:h-[90%]' : 'group-active:h-4',
             workspace.unread_count > 0 && 'h-1.5'
         )} />
         <Flex align='center' gap='2' width='100%' justify='between' asChild>
             <Tooltip content={workspace.workspace_name} side='right'>
                 <Link aria-label={`Switch to ${workspace.workspace_name} workspace`}
                     className={'cursor-pointer'}
-                    to={`/${workspace.name}`}
+                    to={path}
                     onClick={openWorkspace}
                 >
-                    <Box>
-                        <Avatar
-                            size={{ sm: '3', md: '3' }}
-                            className={clsx('hover:shadow-sm transition-all duration-200')}
-                            color='gray'
-                            fallback={workspace.workspace_name.charAt(0)}
-                            src={logo}
-                        />
-                    </Box>
+                    <WorkspaceLogo workspace_name={workspace.workspace_name} logo={logo} />
                 </Link>
             </Tooltip>
         </Flex>
         {workspace.unread_count > 0 &&
-            <Box className='rounded-full absolute -right-2 -bottom-1 bg-red-11 text-white w-4 h-4 flex items-center justify-center'>
+            <Box className='rounded-full absolute -right-2 -bottom-1 bg-red-11 dark:bg-red-9 text-white w-4 h-4 flex items-center justify-center'>
                 <Text as='span' size='1' weight='medium'>{workspace.unread_count}</Text>
             </Box>
         }
     </HStack>
 }
 
+const WorkspaceLogo = ({ workspace_name, logo }: { workspace_name: string, logo: string }) => {
+    return <Box>
+        <Avatar
+            size={{ sm: '3', md: '3' }}
+            className={clsx('hover:shadow-sm transition-all duration-200')}
+            color='gray'
+            loading='eager'
+            fallback={workspace_name.charAt(0)}
+            src={logo}
+        />
+    </Box>
+}
+
 export default WorkspacesSidebar

frontend/src/components/layout/WorkspaceSwitcherGrid.tsx

@@ -30,7 +30,7 @@ const WorkspaceSwitcherGrid = () => {
     }, [data])
 
     return (
-        <Stack className='sm:p-28 py-16 px-8 gap-16 animate-fadein'>
+        <Stack className='sm:p-28 py-16 sm:px-8 px-4 gap-16 animate-fadein'>
             <div className='container flex mx-auto flex-col gap-5 max-w-screen-lg'>
                 <Stack gap='1'>
                     <Heading className='not-cal' size='4'>My Workspaces</Heading>

frontend/src/main.tsx

@@ -24,7 +24,7 @@ const registerServiceWorker = () => {
           .then((registration) => {
             // @ts-ignore
             window.frappePushNotification.initialize(registration).then(() => {
-              console.log("Frappe Push Notification initialized")
+              console.info("Frappe Push Notification initialized")
             })
           })
       })

frontend/src/pages/settings/Settings.tsx

@@ -1,11 +1,9 @@
 import { SettingsSidebar } from '@/components/feature/userSettings/SettingsSidebar'
-import { PageHeader } from '@/components/layout/Heading/PageHeader'
 import { useIsDesktop } from '@/hooks/useMediaQuery'
 import { ChannelListProvider } from '@/utils/channel/ChannelListProvider'
 import { __ } from '@/utils/translations'
 import { UserListProvider } from '@/utils/users/UserListProvider'
 import { Box, Flex, Heading } from '@radix-ui/themes'
-import clsx from 'clsx'
 import { BiChevronLeft } from 'react-icons/bi'
 import { Link } from 'react-router-dom'
 import { Outlet } from "react-router-dom"
@@ -18,7 +16,7 @@ const Settings = () => {
 
     let path = '../'
 
-    if (lastWorkspace && lastChannel) {
+    if (lastWorkspace && lastChannel && isDesktop) {
         path = `/${lastWorkspace}/${lastChannel}`
     } else if (lastWorkspace) {
         path = `/${lastWorkspace}`

raven/raven_channel_management/doctype/raven_channel/raven_channel.py

@@ -147,7 +147,7 @@ def validate(self):
 					frappe.throw(_("You don't have permission to modify this channel"), frappe.PermissionError)
 
 		# Check if this channel exists in the current workspace
-		if self.workspace:
+		if self.workspace and self.flags.in_insert:
 			if frappe.db.exists(
 				"Raven Channel", {"channel_name": self.channel_name, "workspace": self.workspace}
 			):