feat(lists): ui enhancements (#1898)

* feat(web): remove browserslist left over

* fix(web): use string on some Settings section description

* fix(web): parse listType name

* fix(web): lists table aligned with other tables

* fix(web): fix release typo

* fix(web): Lists filter limited to 1

web/package.json

@@ -13,18 +13,6 @@
     "preview": "vite preview",
     "lint:watch": "pnpm run lint -- --watch"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "pnpm": {
     "overrides": {
       "csstype": "3.1.2",

web/src/domain/constants.ts

@@ -452,6 +452,19 @@ export const ListTypeOptions: OptionBasicTyped<ListType>[] = [
   },
 ];
 
+export const ListTypeNameMap: Record<ListType, string> = {
+  "SONARR": "Sonarr",
+  "RADARR": "Radarr",
+  "LIDARR": "Lidarr",
+  "READARR": "Readarr",
+  "WHISPARR": "Whisparr",
+  "MDBLIST": "MDBList",
+  "TRAKT": "Trakt",
+  "METACRITIC": "Metacritic",
+  "STEAM": "Steam",
+  "PLAINTEXT": "Plaintext",
+};
+
 export const NotificationTypeOptions: OptionBasicTyped<NotificationType>[] = [
   {
     label: "Discord",

web/src/forms/settings/ReleaseForms.tsx

@@ -71,7 +71,7 @@ export function ReleaseProfileDuplicateAddForm({ isOpen, toggle }: AddFormProps)
           <TextFieldWide required name="name" label="Name"/>
 
           <SwitchGroupWide name="release_name" label="Release name" description="Full release name" />
-          <SwitchGroupWide name="hash" label="Hash" description="Normalized hash of the release name. Use with Releae name for exact match" />
+          <SwitchGroupWide name="hash" label="Hash" description="Normalized hash of the release name. Use with Release name for exact match" />
           <SwitchGroupWide name="title" label="Title" description="Parsed title" />
           <SwitchGroupWide name="sub_title" label="Sub Title" description="Parsed Sub Title like Episode Name" />
           <SwitchGroupWide name="year" label="Year" />
@@ -171,7 +171,7 @@ export function ReleaseProfileDuplicateUpdateForm({ isOpen, toggle, data: profil
           <TextFieldWide required name="name" label="Name"/>
 
           <SwitchGroupWide name="release_name" label="Release name" description="Full release name" />
-          <SwitchGroupWide name="hash" label="Hash" description="Normalized hash of the release name. Use with Releae name for exact match" />
+          <SwitchGroupWide name="hash" label="Hash" description="Normalized hash of the release name. Use with Release name for exact match" />
           <SwitchGroupWide name="title" label="Title" description="Parsed title" />
           <SwitchGroupWide name="sub_title" label="Sub Title" description="Parsed Sub Title like Episode Name" />
           <SwitchGroupWide name="year" label="Year" />

web/src/screens/settings/Lists.tsx

@@ -18,6 +18,7 @@ import { EmptySimple } from "@components/emptystates";
 import { ListAddForm, ListUpdateForm } from "@forms";
 import { FC } from "react";
 import { Link } from "@tanstack/react-router";
+import { ListTypeNameMap } from "@domain/constants";
 
 function ListsSettings() {
   const [addFormIsOpen, toggleAddList] = useToggle(false);
@@ -28,11 +29,7 @@ function ListsSettings() {
   return (
     <Section
       title="Lists"
-      description={
-        <>
-          Lists can automatically update your filters from arrs or other sources.<br/>
-        </>
-      }
+      description="Lists can automatically update your filters from arrs or other sources."
       rightSide={
         <button
           type="button"
@@ -47,26 +44,26 @@ function ListsSettings() {
       <ListAddForm isOpen={addFormIsOpen} toggle={toggleAddList} />
 
       <div className="flex flex-col">
-        {lists.length ? (
+        {lists.length > 0 ? (
           <ul className="min-w-full relative">
             <li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
               <div
-                className="flex col-span-2 sm:col-span-1 pl-0 sm:pl-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
+                className="col-span-2 sm:col-span-1 pl-0 sm:pl-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
               >
                 Enabled
               </div>
               <div
-                className="col-span-5 sm:col-span-4 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
+                className="col-span-6 sm:col-span-4 lg:col-span-4 pl-10 sm:pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
               >
                 Name
               </div>
               <div
-                className="hidden md:flex col-span-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
+                className="hidden sm:flex col-span-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
               >
                 Filters
               </div>
               <div
-                className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
+                className="hidden sm:flex col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
               >
                 Type
               </div>
@@ -136,26 +133,26 @@ function ListItem({ list }: ListItemProps) {
     <li>
       <ListUpdateForm isOpen={isOpen} toggle={toggleUpdate} data={list} />
 
-      <div className="grid grid-cols-12 items-center py-1.5">
-        <div className="col-span-2 sm:col-span-1 flex pl-1 sm:pl-5 items-center">
+      <div className="grid grid-cols-12 items-center py-2">
+        <div className="col-span-2 sm:col-span-1 pl-1 py-0.5 sm:pl-6 flex items-center">
           <Checkbox value={list.enabled ?? false} setValue={onToggleMutation}/>
         </div>
         <div
-          className="col-span-5 sm:col-span-4 pl-12 sm:pr-6 py-3 block flex-col text-sm font-medium text-gray-900 dark:text-white truncate">
+          className="col-span-8 sm:col-span-4 lg:col-span-4 pl-10 sm:pl-12 pr-6 block flex-col text-sm font-medium text-gray-900 dark:text-white truncate">
           {list.name}
         </div>
         <div
-          className="hidden md:block col-span-4 pr-6 py-3 space-x-1 text-left items-center whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 truncate">
+          className="hidden sm:block col-span-4 pr-6 text-left items-center whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
           {/*{list.filters.map(filter => <FilterPill filter={filter} key={filter.id} />)}*/}
           <ListItemFilters filters={list.filters} />
         </div>
         <div
-          className="hidden md:block col-span-2 pr-6 py-3 text-left items-center whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 truncate">
-          {list.type}
+          className="hidden sm:block col-span-2 text-left items-center text-sm text-gray-600 dark:text-gray-400">
+          {ListTypeNameMap[list.type]}
         </div>
-        <div className="col-span-1 flex first-letter:px-6 py-3 whitespace-nowrap text-right text-sm font-medium">
+        <div className="col-span-1 pl-0.5 whitespace-nowrap text-center text-sm font-medium">
           <span
-            className="col-span-1 px-6 text-blue-600 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-500 cursor-pointer"
+            className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer"
             onClick={toggleUpdate}
           >
             Edit
@@ -175,22 +172,19 @@ const ListItemFilters = ({ filters }: ListItemFiltersProps) => {
     return null;
   }
 
-  const res = filters.slice(2);
+  const res = filters.slice(1);
 
   return (
-    <div className="flex flex-row gap-1">
+    <div className="flex flex-row gap-1 truncate">
       <FilterPill filter={filters[0]} />
       {filters.length > 1 ? (
-        <FilterPill filter={filters[1]} />
-      ) : null}
-      {filters.length > 2 ? (
         <span
           className="mr-2 inline-flex items-center px-2 py-0.5 rounded-md text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400"
-          title={res.map(v => v.name).toString()}
+          title={res.map((v) => v.name).toString()}
         >
-          +{filters.length - 2}
+          +{filters.length - 1}
         </span>
       ) : null}
     </div>
   );
-}
+}

web/src/screens/settings/Proxy.tsx

@@ -81,11 +81,7 @@ function ProxySettings() {
   return (
     <Section
       title="Proxies"
-      description={
-        <>
-          Proxies that can be used with Indexers, feeds and IRC.<br/>
-        </>
-      }
+      description="Proxies that can be used with Indexers, feeds and IRC."
       rightSide={
         <button
           type="button"

web/src/screens/settings/Releases.tsx

@@ -53,10 +53,10 @@ function ReleaseProfileListItem({ profile }: ReleaseProfileProps) {
         </div>
         <div className="col-span-9 sm:col-span-9 lg:col-span-9 pl-4 sm:pl-4 pr-6 py-3 flex gap-x-0.5 flex-row text-sm font-medium text-gray-900 dark:text-white truncate">
           {profile.release_name && <EnabledPill value={profile.release_name} label="RLS" title="Release name" />}
-          {profile.hash && <EnabledPill value={profile.hash} label="Hash" title="Normalized hash of the release name. Use with Releae name for exact match" />}
+          {profile.hash && <EnabledPill value={profile.hash} label="Hash" title="Normalized hash of the release name. Use with Release name for exact match" />}
           {profile.title && <EnabledPill value={profile.title} label="Title" title="Parsed titel" />}
           {profile.sub_title && <EnabledPill value={profile.sub_title} label="Sub Title" title="Parsed sub titel like Episode name" />}
-          {profile.group && <EnabledPill value={profile.group} label="Group" title="Releae group" />}
+          {profile.group && <EnabledPill value={profile.group} label="Group" title="Release group" />}
           {profile.year && <EnabledPill value={profile.year} label="Year" title="Year" />}
           {profile.month && <EnabledPill value={profile.month} label="Month" title="Month" />}
           {profile.day && <EnabledPill value={profile.day} label="Day" title="Day" />}