feat: add filter by filesystem location + bonus tooltip on overflowed filter names (#518)

Author: FinalDoom

client/src/javascript/components/sidebar/LocationFilters.tsx

@@ -0,0 +1,62 @@
+import {FC, KeyboardEvent, MouseEvent, ReactNode, TouchEvent} from 'react';
+import {observer} from 'mobx-react';
+import {useLingui} from '@lingui/react';
+import {LocationTreeNode} from '@shared/types/Taxonomy';
+
+import SidebarFilter from './SidebarFilter';
+import TorrentFilterStore from '../../stores/TorrentFilterStore';
+
+const buildLocationFilterTree = (location: LocationTreeNode): ReactNode => {
+  if (location.children.length === 1 && location.containedCount === location.children[0].containedCount) {
+    const onlyChild = location.children[0];
+    const separator = onlyChild.fullPath.includes('/') ? '/' : '\\';
+    return buildLocationFilterTree({
+      ...onlyChild,
+      directoryName: location.directoryName + separator + onlyChild.directoryName,
+    });
+  }
+
+  const children = location.children.map(buildLocationFilterTree);
+
+  return (
+    <SidebarFilter
+      handleClick={(filter: string | '', event: KeyboardEvent | MouseEvent | TouchEvent) =>
+        TorrentFilterStore.setLocationFilters(filter, event)
+      }
+      count={location.containedCount}
+      key={location.fullPath}
+      isActive={
+        (location.fullPath === '' && !TorrentFilterStore.locationFilter.length) ||
+        TorrentFilterStore.locationFilter.includes(location.fullPath)
+      }
+      name={location.directoryName}
+      slug={location.fullPath}
+      size={location.containedSize}
+    >
+      {(children.length && children) || undefined}
+    </SidebarFilter>
+  );
+};
+
+const LocationFilters: FC = observer(() => {
+  const {i18n} = useLingui();
+
+  if (TorrentFilterStore.taxonomy.locationTree.containedCount === 0) {
+    return null;
+  }
+
+  const filterElements = buildLocationFilterTree(TorrentFilterStore.taxonomy.locationTree);
+
+  const title = i18n._('filter.location.title');
+
+  return (
+    <ul aria-label={title} className="sidebar-filter sidebar__item" role="menu">
+      <li className="sidebar-filter__item sidebar-filter__item--heading" role="none">
+        {title}
+      </li>
+      {filterElements}
+    </ul>
+  );
+});
+
+export default LocationFilters;

client/src/javascript/components/sidebar/Sidebar.tsx

@@ -4,6 +4,7 @@ import {OverlayScrollbarsComponent} from 'overlayscrollbars-react';
 import DiskUsage from './DiskUsage';
 import FeedsButton from './FeedsButton';
 import LogoutButton from './LogoutButton';
+import LocationFilters from './LocationFilters';
 import NotificationsButton from './NotificationsButton';
 import SearchBox from './SearchBox';
 import SettingsButton from './SettingsButton';
@@ -44,6 +45,7 @@ const Sidebar: FC = () => (
       <StatusFilters />
       <TagFilters />
       <TrackerFilters />
+      <LocationFilters />
       <DiskUsage />
       <div style={{flexGrow: 1}} />
       <SidebarActions>

client/src/javascript/components/sidebar/SidebarFilter.tsx

@@ -1,11 +1,26 @@
 import classnames from 'classnames';
-import {FC, ReactNode, KeyboardEvent, MouseEvent, TouchEvent} from 'react';
+import {createRef, FC, ReactNode, KeyboardEvent, MouseEvent, RefObject, TouchEvent, useEffect, useState} from 'react';
 import {useLingui} from '@lingui/react';
+import {Start} from '@client/ui/icons';
 
 import Badge from '../general/Badge';
 import Size from '../general/Size';
 
+const useRefTextOverflowed = (ref: RefObject<HTMLElement>) => {
+  const [overflowed, setOverflowed] = useState(false);
+
+  useEffect(() => {
+    if (ref.current) {
+      const {current} = ref;
+      setOverflowed(current.scrollWidth > current.clientWidth);
+    }
+  }, [ref, ref?.current?.scrollWidth, ref?.current?.clientWidth]);
+
+  return overflowed;
+};
+
 interface SidebarFilterProps {
+  children?: ReactNode[];
   name: string;
   icon?: ReactNode;
   isActive: boolean;
@@ -16,6 +31,7 @@ interface SidebarFilterProps {
 }
 
 const SidebarFilter: FC<SidebarFilterProps> = ({
+  children,
   name: _name,
   icon,
   isActive,
@@ -24,11 +40,32 @@ const SidebarFilter: FC<SidebarFilterProps> = ({
   size,
   handleClick,
 }: SidebarFilterProps) => {
+  const nameSpanRef = createRef<HTMLSpanElement>();
+  const overflowed = useRefTextOverflowed(nameSpanRef);
+
   const {i18n} = useLingui();
 
+  const [expanded, setExpanded] = useState(false);
+
   const classNames = classnames('sidebar-filter__item', {
     'is-active': isActive,
   });
+  const expanderClassNames = classnames('sidebar-filter__expander', {
+    'is-active': isActive,
+    expanded: expanded,
+  });
+
+  const flexCss = children
+    ? {
+        display: 'flex',
+      }
+    : {};
+  const focusCss = {
+    ':focus': {
+      outline: 'none',
+      WebkitTapHighlightColor: 'transparent',
+    },
+  };
 
   let name = _name;
   if (name === '') {
@@ -48,23 +85,35 @@ const SidebarFilter: FC<SidebarFilterProps> = ({
 
   return (
     <li>
-      <button
-        className={classNames}
-        css={{
-          ':focus': {
-            outline: 'none',
-            WebkitTapHighlightColor: 'transparent',
-          },
-        }}
-        type="button"
-        onClick={(event) => handleClick(slug, event)}
-        role="menuitem"
-      >
-        {icon}
-        <span className="name">{name}</span>
-        <Badge>{count}</Badge>
-        {size != null && <Size value={size} className="size" />}
-      </button>
+      <div css={flexCss}>
+        {children && (
+          <button
+            className={expanderClassNames}
+            css={focusCss}
+            type="button"
+            onClick={() => setExpanded(!expanded)}
+            role="switch"
+            aria-checked={expanded}
+          >
+            <Start />
+          </button>
+        )}
+        <button
+          className={classNames}
+          css={focusCss}
+          type="button"
+          onClick={(event) => handleClick(slug, event)}
+          role="menuitem"
+        >
+          {icon}
+          <span className="name" ref={nameSpanRef} title={overflowed ? name || '' : undefined}>
+            {name}
+          </span>
+          <Badge>{count}</Badge>
+          {size != null && <Size value={size} className="size" />}
+        </button>
+      </div>
+      {children && expanded && <ul className="sidebar-filter__nested">{children}</ul>}
     </li>
   );
 };

client/src/javascript/i18n/strings/en.json

@@ -139,6 +139,7 @@
   "filter.status.seeding": "Seeding",
   "filter.status.stopped": "Stopped",
   "filter.status.title": "Filter by Status",
+  "filter.location.title": "Filter by Location",
   "filter.tag.title": "Filter by Tag",
   "filter.tracker.title": "Filter by Tracker",
   "filter.untagged": "Untagged",

client/src/javascript/stores/TorrentFilterStore.ts

@@ -6,6 +6,7 @@ import type {Taxonomy} from '@shared/types/Taxonomy';
 import torrentStatusMap, {TorrentStatus} from '@shared/constants/torrentStatusMap';
 
 class TorrentFilterStore {
+  locationFilter: Array<string> = [];
   searchFilter = '';
   statusFilter: Array<TorrentStatus> = [];
   tagFilter: Array<string> = [];
@@ -14,6 +15,7 @@ class TorrentFilterStore {
   filterTrigger = false;
 
   taxonomy: Taxonomy = {
+    locationTree: {directoryName: '', fullPath: '', children: [], containedCount: 0, containedSize: 0},
     statusCounts: {},
     tagCounts: {},
     tagSizes: {},
@@ -22,14 +24,21 @@ class TorrentFilterStore {
   };
 
   @computed get isFilterActive() {
-    return this.searchFilter !== '' || this.statusFilter.length || this.tagFilter.length || this.trackerFilter.length;
+    return (
+      this.locationFilter.length ||
+      this.searchFilter !== '' ||
+      this.statusFilter.length ||
+      this.tagFilter.length ||
+      this.trackerFilter.length
+    );
   }
 
   constructor() {
     makeAutoObservable(this);
   }
 
   clearAllFilters() {
+    this.locationFilter = [];
     this.searchFilter = '';
     this.statusFilter = [];
     this.tagFilter = [];
@@ -50,6 +59,12 @@ class TorrentFilterStore {
     this.filterTrigger = !this.filterTrigger;
   }
 
+  setLocationFilters(filter: string | '', event: KeyboardEvent | MouseEvent | TouchEvent) {
+    // keys: [] to disable shift-clicking as it doesn't make sense in a tree
+    this.computeFilters([], this.locationFilter, filter, event);
+    this.filterTrigger = !this.filterTrigger;
+  }
+
   setStatusFilters(filter: TorrentStatus | '', event: KeyboardEvent | MouseEvent | TouchEvent) {
     this.computeFilters(torrentStatusMap, this.statusFilter, filter, event);
     this.filterTrigger = !this.filterTrigger;
@@ -85,7 +100,7 @@ class TorrentFilterStore {
   ) {
     if (newFilter === ('' as T)) {
       currentFilters.splice(0);
-    } else if (event.shiftKey) {
+    } else if (event.shiftKey && keys.length) {
       if (currentFilters.length) {
         const lastKey = currentFilters[currentFilters.length - 1];
         const lastKeyIndex = keys.indexOf(lastKey);

client/src/javascript/stores/TorrentStore.ts

@@ -24,10 +24,17 @@ class TorrentStore {
   }
 
   @computed get filteredTorrents(): Array<TorrentProperties> {
-    const {searchFilter, statusFilter, tagFilter, trackerFilter} = TorrentFilterStore;
+    const {locationFilter, searchFilter, statusFilter, tagFilter, trackerFilter} = TorrentFilterStore;
 
     let filteredTorrents = Object.assign([], this.sortedTorrents) as Array<TorrentProperties>;
 
+    if (locationFilter.length) {
+      filteredTorrents = filterTorrents(filteredTorrents, {
+        type: 'location',
+        filter: locationFilter,
+      });
+    }
+
     if (searchFilter !== '') {
       filteredTorrents = termMatch(filteredTorrents, (properties) => properties.name, searchFilter);
     }

client/src/javascript/util/filterTorrents.ts

@@ -1,6 +1,11 @@
 import type {TorrentProperties} from '@shared/types/Torrent';
 import type {TorrentStatus} from '@shared/constants/torrentStatusMap';
 
+interface LocationFilter {
+  type: 'location';
+  filter: string[];
+}
+
 interface StatusFilter {
   type: 'status';
   filter: TorrentStatus[];
@@ -18,9 +23,13 @@ interface TagFilter {
 
 function filterTorrents(
   torrentList: TorrentProperties[],
-  opts: StatusFilter | TrackerFilter | TagFilter,
+  opts: LocationFilter | StatusFilter | TrackerFilter | TagFilter,
 ): TorrentProperties[] {
   if (opts.filter.length) {
+    if (opts.type === 'location') {
+      return torrentList.filter((torrent) => opts.filter.some((directory) => torrent.directory.startsWith(directory)));
+    }
+
     if (opts.type === 'status') {
       return torrentList.filter((torrent) => torrent.status.some((status) => opts.filter.includes(status)));
     }

client/src/sass/components/_sidebar-filter.scss

@@ -8,6 +8,7 @@
     padding-top: 0;
   }
 
+  &__expander,
   &__item {
     @include themes.theme('color', 'sidebar-filter--foreground');
     cursor: pointer;
@@ -75,9 +76,24 @@
 
     .size {
       margin-left: auto;
+      white-space: nowrap;
     }
   }
 
+  &__expander {
+    display: block;
+    width: 14px;
+    padding: 0 0 0 20px;
+
+    &.expanded svg {
+      transform: rotate(90deg);
+    }
+  }
+
+  &__nested {
+    margin-left: 8px;
+  }
+
   .badge {
     @include themes.theme('background', 'sidebar-filter--count--background');
     @include themes.theme('color', 'sidebar-filter--count--foreground');

server/.jest/rtorrent.setup.js

@@ -30,7 +30,9 @@ process.argv.push('--test');
 process.argv.push('--assets', 'false');
 
 afterAll((done) => {
-  process.kill(Number(fs.readFileSync(`${temporaryRuntimeDirectory}/rtorrent.pid`).toString()));
+  if (fs.existsSync(`${temporaryRuntimeDirectory}/rtorrent.pid`)) {
+    process.kill(Number(fs.readFileSync(`${temporaryRuntimeDirectory}/rtorrent.pid`).toString()));
+  }
   if (process.env.CI !== 'true') {
     // TODO: This leads to test flakiness caused by ENOENT error
     // NeDB provides no method to close database connection