Listing improvements (#222)

* upgrading dependencies, fixing image placeholder

* improving processing times label and hide when screen width is too low

* aligning run now button

* renaming settings -> general settings

* smaller security and memory improvements

* improving footer

ui/src/components/footer/FredyFooter.less

@@ -5,6 +5,8 @@
   justify-content: space-between;
   align-items: center;
   height: 1.7rem;
+  border-radius: .3rem;
+  border-top: 1px solid #45464b;
 
   &__version {
     padding-left: .5rem;

ui/src/components/navigation/Navigation.jsx

@@ -22,7 +22,7 @@ export default function Navigation({ isAdmin }) {
 
   if (isAdmin) {
     items.push({ itemKey: '/users', text: 'User Management', icon: <IconUser /> });
-    items.push({ itemKey: '/generalSettings', text: 'Settings', icon: <IconSetting /> });
+    items.push({ itemKey: '/generalSettings', text: 'General Settings', icon: <IconSetting /> });
   }
 
   function parsePathName(name) {

ui/src/components/table/listings/ListingsTable.jsx

@@ -14,8 +14,8 @@ import ListingsFilter from './ListingsFilter.jsx';
 
 const columns = [
   {
-    title: '#',
-    width: 100,
+    title: 'Watchlist',
+    width: 110,
     dataIndex: 'isWatched',
     sorter: true,
     render: (id, row) => {
@@ -180,6 +180,7 @@ export default function ListingsTable() {
   const [activityFilter, setActivityFilter] = useState(null);
   const [providerFilter, setProviderFilter] = useState(null);
 
+  const [imageWidth, setImageWidth] = useState('100%');
   const handlePageChange = (_page) => {
     setPage(_page);
   };
@@ -208,14 +209,29 @@ export default function ListingsTable() {
 
   const handleFilterChange = useMemo(() => debounce((value) => setFreeTextFilter(value), 500), []);
 
+  useEffect(() => {
+    return () => {
+      // cleanup debounced handler to avoid memory leaks
+      handleFilterChange.cancel && handleFilterChange.cancel();
+    };
+  }, [handleFilterChange]);
+
   const expandRowRender = (record) => {
     return (
       <div className="listingsTable__expanded">
         <div>
           {record.image_url == null ? (
-            <Image height={200} src={no_image} />
+            <Image height={200} width={180} src={no_image} />
           ) : (
-            <Image height={200} src={record.image_url} />
+            <Image
+              height={200}
+              width={imageWidth}
+              src={record.image_url}
+              onError={() => {
+                setImageWidth('180px');
+              }}
+              fallback={<Image height={200} src={no_image} />}
+            />
           )}
         </div>
         <div>
@@ -226,7 +242,7 @@ export default function ListingsTable() {
               </Tag>
             </Descriptions.Item>
             <Descriptions.Item itemKey="Link">
-              <a href={record.link} target="_blank" rel="noreferrer">
+              <a href={record.link} target="_blank" rel="noopener noreferrer">
                 Link to Listing
               </a>
             </Descriptions.Item>