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) => (