nice hotkey selection of a channel

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 (
     <div
-      onClick={() => 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 && <LineIcon grayscale={!isUserTunedIn} sourceImages={profilePictures} />}
 
+      {/* channel name */}
       <h2
-        className={`text-inherit text-md max-w-[220px] truncate text-slate-800 ${
+        className={`text-inherit text-md max-w-[180px] truncate text-slate-800 ${
           line.currentUserMember.lastVisitDate ? 'font-semibold' : ''
         }`}
       >
         {line.lineDetails.name || line.otherUserObjects[0].givenName}
       </h2>
 
+      {isUserToggleTuned && (
+        <span className="ml-2 text-gray-300 text-xs p-1 px-2 bg-gray-100">{`${index + 1}`}</span>
+      )}
+
       <div className="ml-auto flex-shrink-0">{renderRightActivity}</div>
     </div>
   );

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<string>('');
@@ -66,10 +74,8 @@ export default function SidePanel() {
         </Tooltip>
       </div>
 
-      {/* tuned in lines block */}
+      {/* tuned in header + general controls */}
       <div className="flex flex-col shadow-xl bg-gray-100">
-        {/* tuned in header + general controls */}
-
         <Tooltip placement="right" title={'These are your active rooms...'}>
           <div className="flex flex-row items-center py-3 px-4 pb-0">
             <span className="flex flex-row gap-2 items-center justify-start text-gray-400 animate-pulse">
@@ -77,27 +83,13 @@ export default function SidePanel() {
 
               <h2 className="text-inherit text-xs">Tuned In</h2>
 
-              <p className="text-slate-300 text-xs ml-auto">{`${
-                toggleTunedLines?.length || 0
-              }/3`}</p>
+              <p className="text-slate-300 text-xs ml-auto">{`${allChannels?.length || 0}/3`}</p>
             </span>
           </div>
         </Tooltip>
-
-        {/* list of toggle tuned lines */}
-        <div className="flex flex-col mt-2">
-          {toggleTunedLines.map((masterLineData) => (
-            <LineRow
-              key={`terminalListLines-${masterLineData.lineDetails._id.toString()}`}
-              line={masterLineData}
-              handleSelectLine={handleSelectLine}
-              isSelected={masterLineData.lineDetails._id.toString() === selectedLineId}
-            />
-          ))}
-        </div>
       </div>
 
-      {!(allLines.length > 0) && !(toggleTunedLines.length > 0) && (
+      {!(allChannels.length > 0) && (
         <span className="text-gray-300 text-sm my-5 text-center">
           You have no lines! <br /> Create one to connect to your team instantly.
         </span>
@@ -108,8 +100,9 @@ export default function SidePanel() {
         {initialRoomsFetch.loading ? (
           <Skeleton />
         ) : (
-          allLines.map((masterLineData) => (
+          allChannels.map((masterLineData, index) => (
             <LineRow
+              index={index}
               key={`terminalListLines-${masterLineData.lineDetails._id.toString()}`}
               line={masterLineData}
               handleSelectLine={handleSelectLine}