nice little search stuff for searching quickly

packages/desktop/src/tree/protected/terminal/line/LineRow.tsx

@@ -8,6 +8,7 @@ import LineIcon from '../../../../components/lineIcon';
 import moment from 'moment';
 import { useKeyPressEvent } from 'react-use';
 import useElectron from '../../../../providers/ElectronProvider';
+import { maxToggleTunedChannelCount } from '../rules';
 
 export default React.memo(function LineRow({
   index,
@@ -131,7 +132,7 @@ export default React.memo(function LineRow({
         {line.lineDetails.name || line.otherUserObjects[0].givenName}
       </h2>
 
-      {line.isUserToggleTuned && isWindowFocused && (
+      {index < maxToggleTunedChannelCount && (
         <span className="ml-2 text-gray-300 text-xs p-1 px-2 bg-gray-100">{`${index + 1}`}</span>
       )}
 

packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx

@@ -12,6 +12,7 @@ import useSockets from '../../../../providers/SocketProvider';
 import useElectron from '../../../../providers/ElectronProvider';
 import useStreams from '../../../../providers/StreamProvider';
 import { maxToggleTunedChannelCount } from '../rules';
+import { useKeyPressEvent } from 'react-use';
 
 export default function SidePanel() {
   // using merely for loading state...better to add to realtimeroom context?
@@ -37,6 +38,14 @@ export default function SidePanel() {
     handleShowNewChannelForm('show');
   }, [handleShowNewChannelForm]);
 
+  const omniSearchBarRef = useRef<HTMLInputElement>();
+
+  const focusSearch = useCallback(() => {
+    if (omniSearchBarRef.current) omniSearchBarRef.current.focus();
+  }, [omniSearchBarRef]);
+
+  useKeyPressEvent('Tab', focusSearch);
+
   return (
     <div
       className={`flex flex-col w-[350px] group 
@@ -88,7 +97,10 @@ export default function SidePanel() {
                 className="flex-1 bg-transparent placeholder-gray-400 text-gray-500 placeholder:text-xs focus:outline-none"
                 onChange={(e) => setSearchQuery(e.target.value)}
                 value={searchQuery}
+                ref={omniSearchBarRef}
               />
+
+              <span className="ml-auto text-gray-300 text-xs p-1 bg-gray-100">tab</span>
             </div>
 
             <Tooltip title={'New channel'}>