diff --git a/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx b/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx index 13659e3..002fa82 100644 --- a/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx +++ b/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx @@ -1,20 +1,22 @@ import MasterLineData from '@nirvana/core/models/masterLineData.model'; -import React, { useMemo, useState } from 'react'; +import React, { useMemo, useCallback } from 'react'; -import { Avatar, Skeleton, Tooltip } from 'antd'; -import { FaPlus, FaSearch } from 'react-icons/fa'; -import { FiActivity, FiPlus, FiSearch, FiSun, FiX } from 'react-icons/fi'; -import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider'; -import useRooms from '../../../../providers/RoomsProvider'; +import { Avatar, Tooltip } from 'antd'; +import { FiActivity, FiSun, FiX } from 'react-icons/fi'; import useAuth from '../../../../providers/AuthProvider'; import LineIcon from '../../../../components/lineIcon'; import moment from 'moment'; +import { useKeyPressEvent } from 'react-use'; +import toast from 'react-hot-toast'; +import { LineMemberState } from '@nirvana/core/models/line.model'; export default React.memo(function LineRow({ + index, line, handleSelectLine, isSelected, }: { + index: number; // the order of this one in the list (for this view to know the shortcut to register) line: MasterLineData; handleSelectLine: (newLineId: string) => void; isSelected: boolean; @@ -26,6 +28,23 @@ export default React.memo(function LineRow({ [line.tunedInMemberIds, user], ); + const isUserToggleTuned = useMemo( + () => line?.currentUserMember?.state === LineMemberState.TUNED, + [line], + ); + + const handleActivateLine = useCallback(() => { + toast('selected channel'); + + handleSelectLine(line.lineDetails._id.toString()); + }, [handleSelectLine, line.lineDetails, index]); + + const hotkeyActivateLine = useCallback(() => { + if (isUserToggleTuned) handleActivateLine(); + }, [isUserToggleTuned, handleActivateLine]); + + useKeyPressEvent((index + 1).toString(), hotkeyActivateLine); + const renderRightActivity = useMemo(() => { if (isSelected) { return ( @@ -105,24 +124,29 @@ export default React.memo(function LineRow({ return (
handleSelectLine(line.lineDetails._id.toString())} + onClick={handleActivateLine} role={'presentation'} className={`flex flex-row items-center justify-start gap-2 px-4 py-4 hover:bg-gray-200 cursor-pointer transition-all relative z-50 rounded ${ isSelected && 'bg-gray-200 scale-110 shadow-2xl translate-x-3' }`} > - {/* status dot */} + {/* channel picture */} {profilePictures && } + {/* channel name */}

{line.lineDetails.name || line.otherUserObjects[0].givenName}

+ {isUserToggleTuned && ( + {`${index + 1}`} + )} +
{renderRightActivity}
); diff --git a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx index 975fa87..d543c72 100644 --- a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx +++ b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx @@ -1,14 +1,9 @@ import { LineMemberState } from '@nirvana/core/models/line.model'; -import MasterLineData from '@nirvana/core/models/masterLineData.model'; -import { Avatar, Skeleton, Tooltip } from 'antd'; -import React, { useCallback, useMemo, useEffect, useState } from 'react'; -import { FaPlus, FaSearch } from 'react-icons/fa'; -import { FiActivity, FiPlus, FiSearch, FiSun, FiX } from 'react-icons/fi'; +import { Skeleton, Tooltip } from 'antd'; +import React, { useCallback, useMemo, useState } from 'react'; +import { FiActivity, FiPlus, FiSearch } from 'react-icons/fi'; import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider'; import useRooms from '../../../../providers/RoomsProvider'; -import useAuth from '../../../../providers/AuthProvider'; -import LineIcon from '../../../../components/lineIcon'; -import moment from 'moment'; import NavBar from '../navbar/Navbar'; import NoTextLogo from '@nirvana/components/logo/NoTextLogo'; import LineRow from '../line/LineRow'; @@ -20,18 +15,31 @@ export default function SidePanel() { const { roomsMap, handleSelectLine, selectedLineId, handleShowNewChannelForm } = useRealTimeRooms(); - const [toggleTunedLines, allLines] = useMemo(() => { - const masterLines: MasterLineData[] = Object.values(roomsMap); + // todo: sort + const allChannels = useMemo(() => { + const channels = Object.values(roomsMap); - const tunedLines: MasterLineData[] = []; - const restLines: MasterLineData[] = []; + channels.sort((channelA, channelB) => { + if ( + channelA.currentUserMember.state === LineMemberState.TUNED && + channelB.currentUserMember.state === LineMemberState.INBOX + ) + return -1; - masterLines.forEach((masterLine) => { - if (masterLine.currentUserMember.state === LineMemberState.TUNED) tunedLines.push(masterLine); - else restLines.push(masterLine); + if ( + channelB.currentUserMember.state === LineMemberState.TUNED && + channelA.currentUserMember.state === LineMemberState.INBOX + ) + return 1; + + if (channelA.lineDetails.createdDate > channelB.lineDetails.createdDate) return 1; + + // sort also by activity + + return -1; }); - return [tunedLines, restLines]; + return channels; }, [roomsMap]); const [searchQuery, setSearchQuery] = useState(''); @@ -66,10 +74,8 @@ export default function SidePanel() { - {/* tuned in lines block */} + {/* tuned in header + general controls */}
- {/* tuned in header + general controls */} -
@@ -77,27 +83,13 @@ export default function SidePanel() {

Tuned In

-

{`${ - toggleTunedLines?.length || 0 - }/3`}

+

{`${allChannels?.length || 0}/3`}

- - {/* list of toggle tuned lines */} -
- {toggleTunedLines.map((masterLineData) => ( - - ))} -
- {!(allLines.length > 0) && !(toggleTunedLines.length > 0) && ( + {!(allChannels.length > 0) && ( You have no lines!
Create one to connect to your team instantly.
@@ -108,8 +100,9 @@ export default function SidePanel() { {initialRoomsFetch.loading ? ( ) : ( - allLines.map((masterLineData) => ( + allChannels.map((masterLineData, index) => (