From 10a18f488b48ae55187d44e8f832c173f72bf433 Mon Sep 17 00:00:00 2001
From: Enrico Lamperti <elamperti@users.noreply.github.com>
Date: Sun, 15 Sep 2024 17:41:43 -0300
Subject: [PATCH] Use context for cleanup pattern and misc changes

---
 public/locales/en.json                        |   2 +-
 public/locales/it.json                        |   1 -
 src/components/ScrobbleItem.css               |   4 +-
 src/components/ScrobbleItem.tsx               |  51 +++----
 src/components/ScrobbleList.tsx               |   8 +-
 .../scrobbleAlbum/CleanupContext.test.ts      | 125 ++++++++++++++++++
 src/domains/scrobbleAlbum/CleanupContext.ts   | 123 +++++++++++++++++
 .../scrobbleAlbum/ScrobbleAlbumTracklist.tsx  |  14 +-
 .../scrobbleAlbum/partials/Tracklist.tsx      |  26 +---
 .../partials/TracklistCleanupForm.tsx         |  50 -------
 .../partials/TracklistFilter.scss             |   5 +
 .../partials/TracklistFilter.tsx              |  48 +++++++
 src/hooks/usePatternSmart.ts                  |  37 ------
 src/utils/common.test.ts                      |  86 +-----------
 src/utils/common.ts                           |  33 -----
 15 files changed, 345 insertions(+), 268 deletions(-)
 create mode 100644 src/domains/scrobbleAlbum/CleanupContext.test.ts
 create mode 100644 src/domains/scrobbleAlbum/CleanupContext.ts
 delete mode 100644 src/domains/scrobbleAlbum/partials/TracklistCleanupForm.tsx
 create mode 100644 src/domains/scrobbleAlbum/partials/TracklistFilter.scss
 create mode 100644 src/domains/scrobbleAlbum/partials/TracklistFilter.tsx
 delete mode 100644 src/hooks/usePatternSmart.ts

diff --git a/public/locales/en.json b/public/locales/en.json
index 26f7bd16..30e88e51 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -20,7 +20,7 @@
   "customTimestamp": "Custom timestamp",
   "albumTimestampLogicDescription": "Scrobbling tracks \"now\" will scrobble the last track at the current time, backdating the previous ones accordingly (as if you had just finished listening). The \"custom timestamp\" will define the timestamp of the first track and add time to the following tracks from there (i.e. you specify the time you started listening to this album).",
   "albumArtist": "Album artist",
-  "albumCleanupPattern": "Removable text pattern from every track name",
+  "filter": "Filter",
   "albumCleanupPatternDescription": "Some albums tracks are displayed with some repeated text (i.e. Demo, Live, Remastered, ...). These are patterns that could be considered annoying to scrobble, for some users. Set the full pattern (including paranthesis, dashes, ...) that you would like to be removed, from the track names.",
   "history": "History",
   "yourProfile": "Your profile",
diff --git a/public/locales/it.json b/public/locales/it.json
index 98077ab8..33f62df2 100644
--- a/public/locales/it.json
+++ b/public/locales/it.json
@@ -20,7 +20,6 @@
   "customTimestamp": "Timestamp personalizzato",
   "albumTimestampLogicDescription": "Scrobblando le canzoni \"adesso\" scrobblerà l'ultima canzone in questo momento, anticipando relativamente le precedenti (come se avessi appena finito di ascoltarle). Il \"timestamp personalizzato\" definirà il timestamp di ascolto della prima traccia ed agginguerà il relativo tempo alle canzoni successive (come se avessi iniziato ad ascoltare l'album nel timestamp selezionato)",
   "albumArtist": "Artista di un Album",
-  "albumCleanupPattern": "Pattern removibile da ogni nome di canzone",
   "albumCleanupPatternDescription": "Alcune canzoni di album sono visualizzate con un certo testo ripetuto (ad esempio Demo, Live, Remastered, ...). Questi sono pattern che potrebbero risultare fastidiosi da scrobblare, per alcuni utenti. Imposta il pattern completo (incluse parentesi, trattini, ...) che desideri venga rimosso dai nomi delle canzoni.",
   "history": "Storico",
   "yourProfile": "Tuo profilo",
diff --git a/src/components/ScrobbleItem.css b/src/components/ScrobbleItem.css
index 0dec2c1f..3ece4ee2 100644
--- a/src/components/ScrobbleItem.css
+++ b/src/components/ScrobbleItem.css
@@ -98,7 +98,7 @@
   padding-right: 1.15rem;
 }
 
-.scrobbled-item-cleanup {
+.scrobbled-item del {
   color: var(--bs-secondary-color) !important;
-  text-decoration: line-through;
+  background-color: rgba(255, 32, 0, 0.2);
 }
diff --git a/src/components/ScrobbleItem.tsx b/src/components/ScrobbleItem.tsx
index a35aa6b3..06d52ac6 100644
--- a/src/components/ScrobbleItem.tsx
+++ b/src/components/ScrobbleItem.tsx
@@ -10,8 +10,7 @@ import isToday from 'date-fns/isToday';
 import getYear from 'date-fns/getYear';
 
 import { Button, Input, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, FormGroup, Label } from 'reactstrap';
-import { useState } from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
+import { Fragment, useState } from 'react';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
@@ -27,16 +26,16 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { faClock, faCopy } from '@fortawesome/free-regular-svg-icons';
 import { getAmznLink } from 'Constants';
+import { breakStringUsingPattern, cleanTitleWithPattern } from 'domains/scrobbleAlbum/CleanupContext';
 
 import type { Scrobble } from 'utils/types/scrobble';
-import { replaceLastOccurrence } from 'utils/common';
 
 import './ScrobbleItem.css';
 import { useSettings } from 'hooks/useSettings';
 
 interface ScrobbleItemProps {
   scrobble: Scrobble;
-  cleanupPattern?: string;
+  cleanupPattern?: RegExp;
   compact?: boolean;
   hideArtist?: boolean;
   muteArtist?: boolean;
@@ -51,7 +50,7 @@ interface ScrobbleItemProps {
 
 export default function ScrobbleItem({
   scrobble,
-  cleanupPattern = '',
+  cleanupPattern,
   compact = false,
   hideArtist = false,
   muteArtist = false,
@@ -90,8 +89,9 @@ export default function ScrobbleItem({
     enqueueScrobble(dispatch)([
       {
         ...scrobble,
-        title: cleanupPattern ? scrobble.title.replaceAll(cleanupPattern, '').trim() : scrobble.title,
+        title: cleanTitleWithPattern(scrobble.title, cleanupPattern),
         timestamp: useOriginalTimestamp ? scrobble.timestamp : new Date(),
+        cleanupPattern: cleanupPattern || undefined,
       },
     ]);
     setHasScrobbledAgain(true);
@@ -109,20 +109,10 @@ export default function ScrobbleItem({
     });
   };
 
-  const getCompleteItem = (item: string, highlight?: string) => {
-    const parsedItem = item;
-
-    if (!highlight || !item.endsWith(highlight)) {
-      return parsedItem;
-    }
-
-    const parsedComplete = highlight;
-
-    const textComplete = renderToStaticMarkup(<span className="scrobbled-item-cleanup">{parsedComplete}</span>);
-
-    const itemComplete = replaceLastOccurrence(parsedItem, parsedComplete, textComplete);
-
-    return itemComplete;
+  const strikethroughMatch = (text: string, pattern?: RegExp) => {
+    return breakStringUsingPattern(text, pattern).map(({ value, isMatch }, index) => (
+      <Fragment key={index}>{!isMatch ? value : <del>{value}</del>}</Fragment>
+    ));
   };
 
   let albumArt;
@@ -220,18 +210,23 @@ export default function ScrobbleItem({
     </small>
   );
 
+  const formattedTitle = strikethroughMatch(properCase(scrobble.title, true), cleanupPattern);
   if (!hideArtist) {
     if (muteArtist) {
       songFullTitle = (
         <>
-          {properCase(scrobble.title, true)} <span className="text-muted">{properCase(scrobble.artist)}</span>
+          {formattedTitle} <span className="text-muted">{properCase(scrobble.artist)}</span>
         </>
       );
     } else {
-      songFullTitle = `${properCase(scrobble.artist)} - ${properCase(scrobble.title, true)}`;
+      songFullTitle = (
+        <>
+          {properCase(scrobble.artist)} - {formattedTitle}
+        </>
+      );
     }
   } else {
-    songFullTitle = properCase(scrobble.title, true);
+    songFullTitle = formattedTitle;
   }
 
   const scrobbleItemInputId = `ScrobbleItem-checkbox-${scrobble.uuid}`;
@@ -241,10 +236,7 @@ export default function ScrobbleItem({
     songInfo = (
       <Label className="d-flex align-items-center mb-0" htmlFor={scrobbleItemInputId}>
         {!!settings?.showTrackNumbers && scrobble.trackNumber && <span className="me-1">{scrobble.trackNumber}.</span>}
-        <span
-          className="song flex-grow-1 pe-2 truncate"
-          dangerouslySetInnerHTML={{ __html: getCompleteItem(songFullTitle, cleanupPattern) }}
-        ></span>
+        <span className="song flex-grow-1 pe-2 truncate">{songFullTitle}</span>
         {timeOrDuration}
       </Label>
     );
@@ -252,10 +244,7 @@ export default function ScrobbleItem({
     // FULL view
     songInfo = (
       <>
-        <span
-          className="song"
-          dangerouslySetInnerHTML={{ __html: getCompleteItem(songFullTitle, cleanupPattern) }}
-        ></span>
+        <span className="song flex-grow-1 pe-2 truncate">{songFullTitle}</span>
         <Label className="d-flex mb-0" htmlFor={scrobbleItemInputId}>
           <small className="text-muted flex-grow-1 truncate album">
             {scrobble.album && (
diff --git a/src/components/ScrobbleList.tsx b/src/components/ScrobbleList.tsx
index fe20fc5c..ac4db060 100644
--- a/src/components/ScrobbleList.tsx
+++ b/src/components/ScrobbleList.tsx
@@ -1,10 +1,11 @@
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 
 import ScrobbleItem from 'components/ScrobbleItem';
 import Spinner from 'components/Spinner';
 import { ScrobbleCloneContext } from 'domains/scrobbleSong/ScrobbleSong';
 
 import type { ReactNode } from 'react';
+import { CleanupPatternContext } from 'domains/scrobbleAlbum/CleanupContext';
 
 interface ScrobbleListProps {
   analyticsEventForScrobbles?: string;
@@ -16,7 +17,6 @@ interface ScrobbleListProps {
   onSelect?: (scrobble: any) => void;
   selected?: Set<string>;
   scrobbles?: any[];
-  scrobblesCleanupPattern?: string;
 }
 
 export default function ScrobbleList({
@@ -29,9 +29,9 @@ export default function ScrobbleList({
   onSelect,
   selected,
   scrobbles = [],
-  scrobblesCleanupPattern,
 }: ScrobbleListProps) {
   const { cloneFn, setCloneFn } = useContext(ScrobbleCloneContext);
+  const cleanupCtx = useContext(CleanupPatternContext); // this may be undefined
   let albumHasVariousArtists = !isAlbum;
 
   if (loading) {
@@ -54,8 +54,8 @@ export default function ScrobbleList({
       return (
         <ScrobbleItem
           scrobble={scrobble}
-          cleanupPattern={scrobblesCleanupPattern}
           analyticsEvent={analyticsEventForScrobbles}
+          cleanupPattern={cleanupCtx?.cleanupPattern}
           cloneScrobbleTo={setCloneFn ? cloneFn : undefined}
           compact={compact}
           noMenu={noMenu}
diff --git a/src/domains/scrobbleAlbum/CleanupContext.test.ts b/src/domains/scrobbleAlbum/CleanupContext.test.ts
new file mode 100644
index 00000000..c821854c
--- /dev/null
+++ b/src/domains/scrobbleAlbum/CleanupContext.test.ts
@@ -0,0 +1,125 @@
+import { cleanTitleWithPattern, breakStringUsingPattern, strToCleanupPattern } from './CleanupContext';
+
+describe('cleanTitleWithPattern', () => {
+  it('removes pattern from title', () => {
+    const title = 'Song Title live';
+    const pattern = strToCleanupPattern('LIVE');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title');
+  });
+
+  it('returns the original title if pattern is not found', () => {
+    const title = 'Song Title (live)';
+    const pattern = strToCleanupPattern('remix');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title (live)');
+  });
+
+  it('returns the original title if pattern is null', () => {
+    const title = 'Song Title (2024)';
+    expect(cleanTitleWithPattern(title, null)).toBe('Song Title (2024)');
+  });
+
+  it('skips patterns of less than 3 characters', () => {
+    const title = 'Song Title (20)';
+    const pattern = strToCleanupPattern('20');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title (20)');
+  });
+
+  it('removes trailing dashes', () => {
+    const title = 'Song Title - Live';
+    const pattern = strToCleanupPattern('live');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title');
+  });
+
+  it('removes empty parenthesis', () => {
+    const title = 'Song Title (remix)';
+    const pattern = strToCleanupPattern('remix');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title');
+  });
+
+  it('removes empty brackets', () => {
+    const title = 'Song Title [fOoB4r]';
+    const pattern = strToCleanupPattern('fOoB4r');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title');
+  });
+
+  it("doesn't match partial end of words", () => {
+    const title = 'Song Title remix';
+    const pattern = strToCleanupPattern('mix');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title remix');
+  });
+
+  it("doesn't match partial beginning of words", () => {
+    const title = 'Love (Sweet Love) (Dopamine Remix)';
+    const pattern = strToCleanupPattern('dopa');
+    expect(cleanTitleWithPattern(title, pattern)).toBe(title);
+  });
+
+  it('auto-closes parenthesis', () => {
+    const title = 'Song Title (remix) [1984]';
+    const pattern = strToCleanupPattern('(remix');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title [1984]');
+  });
+
+  it('auto-closes brackets', () => {
+    const title = 'Song Title (remix) [1984]';
+    const pattern = strToCleanupPattern('[1984');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title (remix)');
+  });
+
+  it('matches words starting with symbols', () => {
+    const title = 'Song Title $remix';
+    const pattern = strToCleanupPattern('$remix');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title');
+  });
+
+  it('supports several words in the pattern', () => {
+    const title = "I can't quit you baby - Live in paris, 1969";
+    const pattern = strToCleanupPattern('live in paris, 1969');
+    expect(cleanTitleWithPattern(title, pattern)).toBe("I can't quit you baby");
+  });
+});
+
+describe('breakStringUsingPattern', () => {
+  it('breaks down the string into parts matching the pattern', () => {
+    const str = 'Song Title (remix) (live) (2024)';
+    const pattern = /\(remix\)|\(live\)|\(2024\)/gi;
+    const result = breakStringUsingPattern(str, pattern);
+    expect(result).toEqual([
+      { value: 'Song Title', isMatch: false },
+      { value: ' (remix)', isMatch: true },
+      { value: ' (live)', isMatch: true },
+      { value: ' (2024)', isMatch: true },
+    ]);
+  });
+
+  it('marks extra spaces', () => {
+    const str = 'Song Title (remix) - More';
+    const pattern = /\(remix\)/gi;
+    const result = breakStringUsingPattern(str, pattern);
+    expect(result).toEqual([
+      { value: 'Song Title', isMatch: false },
+      { value: ' (remix)', isMatch: true },
+      { value: ' - More', isMatch: false },
+    ]);
+  });
+
+  it('returns the whole string as non-matching if pattern is not found', () => {
+    const str = 'Song Title (remix)';
+    const pattern = /\(live\)/gi;
+    const result = breakStringUsingPattern(str, pattern);
+    expect(result).toEqual([{ value: 'Song Title (remix)', isMatch: false }]);
+  });
+
+  it('returns the whole string as non-matching if pattern is null', () => {
+    const str = 'Song Title (2024)';
+    const result = breakStringUsingPattern(str, null);
+    expect(result).toEqual([{ value: 'Song Title (2024)', isMatch: false }]);
+  });
+
+  it('returns an empty array if the string is empty', () => {
+    const str = '';
+    const pattern = /\(remix\)/gi;
+    const result = breakStringUsingPattern(str, pattern);
+    expect(result).toEqual([]);
+  });
+});
diff --git a/src/domains/scrobbleAlbum/CleanupContext.ts b/src/domains/scrobbleAlbum/CleanupContext.ts
new file mode 100644
index 00000000..eb2be39d
--- /dev/null
+++ b/src/domains/scrobbleAlbum/CleanupContext.ts
@@ -0,0 +1,123 @@
+import { createContext } from 'react';
+import { escapeRegExp } from 'lodash-es';
+
+export type CleanupContext = {
+  // this type represents the content of the context, it's a regexp value (cleanupPattern) and the corresponidng state setter (setCleanupPattern)
+  cleanupPattern: RegExp | null;
+  setCleanupPattern: (pattern?: RegExp) => void;
+};
+
+type BreakStringResult = {
+  value: string;
+  isMatch: boolean;
+};
+
+export const CleanupPatternContext = createContext<CleanupContext>({
+  cleanupPattern: null,
+  setCleanupPattern: () => {},
+});
+
+export function cleanTitleWithPattern(title: string, pattern: RegExp): string {
+  if (!pattern) return title;
+
+  return breakStringUsingPattern(title, pattern)
+    .filter(({ isMatch }) => !isMatch)
+    .reduce((acc, { value }) => acc + value, '')
+    .trim();
+}
+
+/**
+ * Converts a string into a regular expression, to be used as cleanup pattern
+ * @param str string to be converted to pattern
+ * @returns regular expression using the given string
+ */
+export function strToCleanupPattern(str: string): RegExp {
+  if (!str || str.trim().length < 3) return;
+  const startsWithWord = str.match(/^\w/);
+  const prefix = startsWithWord ? '\\s?\\b' : ''; // disallow partial words
+
+  let postfix = '';
+  if (startsWithWord) {
+    // disallow partial words
+    postfix = '\\s?\\b';
+  } else if (str.match(/^[([]/)) {
+    // auto-close parenthesis and brackets
+    postfix = '[\\)\\]]?';
+  }
+  return new RegExp(`${prefix}${escapeRegExp(str)}${postfix}`, 'ig');
+}
+
+/**
+ * Breaks down the given string into pieces that match (or don't match) the given pattern
+ * @param str string to break down into parts
+ * @param pattern pattern to use to break down the string
+ */
+export function breakStringUsingPattern(str: string, pattern: RegExp): BreakStringResult[] {
+  if (!str) return [];
+
+  const __stringCrumble = (value: string, isMatch: boolean): BreakStringResult => ({
+    value,
+    isMatch,
+  });
+
+  if (!pattern) return [__stringCrumble(str, false)];
+
+  const matches = str.matchAll(pattern);
+
+  if (!matches) return [__stringCrumble(str, false)];
+
+  const crumbles = [] as BreakStringResult[];
+  const splitStr = str.split(pattern);
+
+  splitStr.forEach((part, index) => {
+    // This block checks interactions between valid parts for invalid combinations
+    // (extra spaces, empty parenthesis/brackets, more than one dash)
+    if (index > 0) {
+      let previous = splitStr[index - 1];
+
+      if (previous.match(/ +$/) && part.match(/^(\s|$)/)) {
+        // modify the previous crumble to remove the space
+        previous = previous.trimEnd();
+        crumbles[crumbles.length - 2].value = previous;
+        // and add the space to the corresponding match
+        crumbles[crumbles.length - 1].value = ' ' + crumbles[crumbles.length - 1].value;
+      }
+
+      if (previous.endsWith('(') && part.startsWith(')')) {
+        // modify the previous crumble to remove the empty parenthesis
+        crumbles[crumbles.length - 2].value = previous.slice(0, -1);
+        // add it to the corresponding match
+        crumbles[crumbles.length - 1].value = `(${crumbles[crumbles.length - 1].value})`;
+        // and remove it from the part we're currently processing
+        part = part.slice(1);
+      }
+
+      if (previous.endsWith('[') && part.startsWith(']')) {
+        // modify the previous crumble to remove the empty brackets
+        crumbles[crumbles.length - 2].value = previous.slice(0, -1);
+        // add it to the corresponding match
+        crumbles[crumbles.length - 1].value = `[${crumbles[crumbles.length - 1].value}]`;
+        // and remove it from the part we're currently processing
+        part = part.slice(1);
+      }
+
+      if (previous.match(/[-–—]$/) && (!part || part.match(/^\s*[-–—]/))) {
+        const removedChar = previous.at(-1);
+        // modify the previous crumble to remove the extra dash
+        crumbles[crumbles.length - 2].value = previous.slice(0, -1);
+        // and add it to the corresponding match
+        crumbles[crumbles.length - 1].value = removedChar + crumbles[crumbles.length - 1].value;
+      }
+    }
+
+    // Then we add the current part to the crumbles array
+    crumbles.push(__stringCrumble(part, false));
+
+    // And its corresponding match, if there is one
+    const match = matches.next();
+    if (match.done) return;
+    crumbles.push(__stringCrumble(match.value[0], true));
+  });
+
+  return crumbles.filter((crumble) => crumble.value);
+}
diff --git a/src/domains/scrobbleAlbum/ScrobbleAlbumTracklist.tsx b/src/domains/scrobbleAlbum/ScrobbleAlbumTracklist.tsx
index 0b68ec3c..995dd5b9 100644
--- a/src/domains/scrobbleAlbum/ScrobbleAlbumTracklist.tsx
+++ b/src/domains/scrobbleAlbum/ScrobbleAlbumTracklist.tsx
@@ -19,6 +19,7 @@ import { MAX_RECENT_ALBUMS, PROVIDER_DISCOGS, PROVIDER_LASTFM } from 'Constants'
 
 import { albumGetInfo as DiscogsAlbumGetInfo } from 'utils/clients/discogs';
 import { albumGetInfo as LastfmAlbumGetInfo } from 'utils/clients/lastfm';
+import { CleanupPatternContext } from './CleanupContext';
 import useLocalStorage from 'hooks/useLocalStorage';
 
 import type { RootState } from 'store';
@@ -38,6 +39,7 @@ export function ScrobbleAlbumTracklist() {
   const [triedAlternativeProvider, setTriedAlternativeProvider] = useState(false);
   const scrobbles = useSelector((state: RootState) => state.scrobbles.list);
   const [recentAlbums, setRecentAlbums] = useLocalStorage<Album[]>('recentAlbums', []);
+  const [cleanupPattern, setCleanupPattern] = useState<RegExp>();
 
   const albumId = sanitizeParam(params.albumId);
   const discogsId = sanitizeParam(params.discogsId);
@@ -145,11 +147,13 @@ export function ScrobbleAlbumTracklist() {
       />
       <div className="row mb-5">
         <div className="col-md-7 mb-4">
-          {showTracklist ? (
-            <Tracklist tracks={albumInfo.data?.tracks || []} albumInfo={albumInfo.data?.info} />
-          ) : (
-            <Spinner />
-          )}
+          <CleanupPatternContext.Provider value={{ cleanupPattern, setCleanupPattern }}>
+            {showTracklist ? (
+              <Tracklist tracks={albumInfo.data?.tracks || []} albumInfo={albumInfo.data?.info} />
+            ) : (
+              <Spinner />
+            )}
+          </CleanupPatternContext.Provider>
         </div>
         <div className="col-md-5">
           <div className="d-flex flex-row justify-content-between">
diff --git a/src/domains/scrobbleAlbum/partials/Tracklist.tsx b/src/domains/scrobbleAlbum/partials/Tracklist.tsx
index 2426d875..cd4787df 100644
--- a/src/domains/scrobbleAlbum/partials/Tracklist.tsx
+++ b/src/domains/scrobbleAlbum/partials/Tracklist.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, Suspense, useMemo, useCallback, ChangeEventHandler } from 'react';
+import { useState, useEffect, Suspense, useMemo, useCallback, ChangeEventHandler, useContext } from 'react';
 import lazyWithPreload from 'react-lazy-with-preload';
 import { useDispatch } from 'react-redux';
 import { Trans, useTranslation } from 'react-i18next';
@@ -18,14 +18,13 @@ import { enqueueScrobble } from 'store/actions/scrobbleActions';
 
 import { DEFAULT_SONG_DURATION, getAmznLink } from 'Constants';
 
+import { cleanTitleWithPattern, CleanupPatternContext } from '../CleanupContext';
 import { EmptyDiscMessage } from './EmptyDiscMessage';
-import { TracklistCleanupForm } from './TracklistCleanupForm';
+import { TracklistFilter } from './TracklistFilter';
 
-import { cleanupLastEndStringOccurrence } from 'utils/common';
 import type { Album, DiscogsAlbum } from 'utils/types/album';
 import type { Scrobble } from 'utils/types/scrobble';
 import type { Track } from 'utils/types/track';
-import { usePatternSmart } from 'hooks/usePatternSmart';
 
 const DateTimePicker = lazyWithPreload(() => import('components/DateTimePicker'));
 
@@ -41,9 +40,10 @@ export default function Tracklist({ albumInfo, tracks }: { albumInfo: Album | nu
   // ToDo: simplify customTimestamp + useCustomTimestamp
   const [customTimestamp, setCustomTimestamp] = useState(new Date());
   const [useCustomTimestamp, setUseCustomTimestamp] = useState(false);
-  const [useCleanupPattern, setUseCleanupPattern] = useState('');
   const [selectedTracks, setSelectedTracks] = useState<Set<string>>(new Set());
   const [totalDuration, setTotalDuration] = useState(0);
+  const { cleanupPattern } = useContext(CleanupPatternContext);
+
   const albumHasTracks = tracks && tracks.length > 0;
   const hasAlbumInfo = !!albumInfo && Object.keys(albumInfo).length > 0;
   const durationFormat = totalDuration > 3600 ? 'H:mm:ss' : 'mm:ss';
@@ -98,15 +98,6 @@ export default function Tracklist({ albumInfo, tracks }: { albumInfo: Album | nu
     setCanScrobble(true);
   };
 
-  const handleCleanupPatternChange = useCallback<ChangeEventHandler<HTMLInputElement>>((event) => {
-    setUseCleanupPattern(event.target.value);
-  }, []);
-
-  const cleanupPatternSmart = usePatternSmart({
-    pattern: useCleanupPattern,
-    totalTrackNames: Array.from(tracks) as Scrobble[],
-  });
-
   const scrobbleSelectedTracks = () => {
     const userHasNotSelectedTracks = selectedTracks.size < 1;
     const timestampCalculationSubstractsTime = !useCustomTimestamp;
@@ -125,8 +116,7 @@ export default function Tracklist({ albumInfo, tracks }: { albumInfo: Album | nu
       .reduce((result, track) => {
         const newTrack = {
           ...track,
-          title:
-            cleanupPatternSmart !== '' ? cleanupLastEndStringOccurrence(track.title, cleanupPatternSmart) : track.title,
+          title: cleanTitleWithPattern(track.title, cleanupPattern),
           album: albumInfo?.name || '',
           albumArtist: albumInfo?.artist || '',
           timestamp: rollingTimestamp,
@@ -259,20 +249,18 @@ export default function Tracklist({ albumInfo, tracks }: { albumInfo: Album | nu
         </div>
       )}
 
+      <TracklistFilter />
       <ScrobbleList
         compact
         isAlbum
         noMenu
         analyticsEventForScrobbles="Scrobble individual album song"
         scrobbles={tracks || []}
-        scrobblesCleanupPattern={cleanupPatternSmart}
         onSelect={toggleSelectedTrack}
         selected={selectedTracks}
       >
         <EmptyDiscMessage />
       </ScrobbleList>
-
-      <TracklistCleanupForm onCleanupPatternChange={handleCleanupPatternChange} />
     </>
   );
 }
diff --git a/src/domains/scrobbleAlbum/partials/TracklistCleanupForm.tsx b/src/domains/scrobbleAlbum/partials/TracklistCleanupForm.tsx
deleted file mode 100644
index 1af361c8..00000000
--- a/src/domains/scrobbleAlbum/partials/TracklistCleanupForm.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { ChangeEventHandler, useState } from 'react';
-import { Trans } from 'react-i18next';
-import { Alert, FormGroup, Input } from 'reactstrap';
-import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-type TracklistCleanupFormProps = {
-  onCleanupPatternChange: ChangeEventHandler<HTMLInputElement>;
-};
-
-export function TracklistCleanupForm({ onCleanupPatternChange }: TracklistCleanupFormProps) {
-  const [showCleanupPatternCopy, setShowCleanupPatternCopy] = useState(false);
-
-  const toggleCleanupPatternCopy = () => {
-    setShowCleanupPatternCopy(!showCleanupPatternCopy);
-  };
-
-  return (
-    <div className="d-flex flex-column mt-4 album-cleanup-pattern">
-      <FormGroup>
-        <div className="col-12">
-          <label htmlFor="albumCleanupPattern" className="mb-2">
-            <Trans i18nKey="albumCleanupPattern" />:
-          </label>
-          <FontAwesomeIcon
-            id="cleanupPatternInfoIcon"
-            className="px-3"
-            icon={faQuestionCircle}
-            color="var(--bs-gray)"
-            onClick={toggleCleanupPatternCopy}
-          />
-        </div>
-        <div className="col-6">
-          <Input className="form-control-sm form-control" id="albumCleanupPattern" onChange={onCleanupPatternChange} />
-        </div>
-        <div className="col-12">
-          <Alert
-            color="dark"
-            isOpen={showCleanupPatternCopy}
-            toggle={toggleCleanupPatternCopy}
-            className="text-justify mt-3"
-            fade={false}
-          >
-            <Trans i18nKey="albumCleanupPatternDescription" />
-          </Alert>
-        </div>
-      </FormGroup>
-    </div>
-  );
-}
diff --git a/src/domains/scrobbleAlbum/partials/TracklistFilter.scss b/src/domains/scrobbleAlbum/partials/TracklistFilter.scss
new file mode 100644
index 00000000..c2cd6f8c
--- /dev/null
+++ b/src/domains/scrobbleAlbum/partials/TracklistFilter.scss
@@ -0,0 +1,5 @@
+.TracklistFilter {
+  &-container {
+    height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)); // boils down to 32px
+  }
+}
diff --git a/src/domains/scrobbleAlbum/partials/TracklistFilter.tsx b/src/domains/scrobbleAlbum/partials/TracklistFilter.tsx
new file mode 100644
index 00000000..cf73afaf
--- /dev/null
+++ b/src/domains/scrobbleAlbum/partials/TracklistFilter.tsx
@@ -0,0 +1,48 @@
+import { ChangeEventHandler, useCallback, useContext, useState } from 'react';
+import { Trans } from 'react-i18next';
+import { Input } from 'reactstrap';
+import { faFilter, faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { CleanupPatternContext, strToCleanupPattern } from '../CleanupContext';
+
+import './TracklistFilter.scss';
+
+export function TracklistFilter() {
+  const [showCleanupPatternCopy, setShowCleanupPatternCopy] = useState(false);
+  const [showForm, setFormVisible] = useState(false);
+  const { cleanupPattern, setCleanupPattern } = useContext(CleanupPatternContext);
+  const [value, setValue] = useState('');
+
+  const handleCleanupPatternChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+    (event) => {
+      const { value } = event.target;
+      setValue(value);
+      setCleanupPattern(strToCleanupPattern(value));
+    },
+    [setCleanupPattern]
+  );
+
+  return (
+    <div className="d-flex flex-row-reverse align-items-center TracklistFilter-container">
+      <FontAwesomeIcon
+        icon={faFilter}
+        // className={showForm ? 'text-secondary' : 'text-primary'}
+        className="text-secondary"
+        onClick={() => setFormVisible(!showForm)}
+      />
+      {showForm && (
+        <div className="me-2 d-flex flex-row">
+          <label htmlFor="albumCleanupPattern">
+            <Trans i18nKey="filter" />:
+          </label>
+          <Input
+            className="form-control-sm form-control ms-2"
+            id="albumCleanupPattern"
+            onChange={handleCleanupPatternChange}
+            value={value}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/hooks/usePatternSmart.ts b/src/hooks/usePatternSmart.ts
deleted file mode 100644
index 49c1542c..00000000
--- a/src/hooks/usePatternSmart.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useMemo } from 'react';
-import { keyOfLongestArray } from 'utils/common';
-import type { Scrobble } from 'utils/types/scrobble';
-
-export type UsePatternSmartParams = {
-  pattern?: string;
-  totalTrackNames: Scrobble[];
-};
-
-export type UsePatternSmartResult = string;
-
-export type UsePatternSmartHook = (params: UsePatternSmartParams) => UsePatternSmartResult;
-
-const USE_PATTERN_SMART_EXTRA_CHARS = ['-', '- ', '/', '/ '];
-
-export const usePatternSmart: UsePatternSmartHook = ({ pattern, totalTrackNames }) => {
-  const allPatterns = useMemo<Record<string, Scrobble[]>>(() => {
-    const patterns: Record<string, Scrobble[]> = {};
-
-    USE_PATTERN_SMART_EXTRA_CHARS.forEach((extraChar: string) => {
-      totalTrackNames.forEach((track: Scrobble) => {
-        if (track.title.endsWith(extraChar + pattern)) {
-          patterns[extraChar] ??= [];
-          patterns[extraChar].push(track);
-        }
-      });
-    });
-
-    return patterns;
-  }, [pattern, totalTrackNames]);
-
-  if (!pattern) {
-    return '';
-  }
-
-  return Object.keys(allPatterns).length > 0 ? `${keyOfLongestArray(allPatterns)}${pattern}` : pattern;
-};
diff --git a/src/utils/common.test.ts b/src/utils/common.test.ts
index 5acd5e5d..214c16ce 100644
--- a/src/utils/common.test.ts
+++ b/src/utils/common.test.ts
@@ -1,12 +1,4 @@
-import {
-  castArray,
-  usernameIsValid,
-  sanitizeProvider,
-  replaceLastOccurrence,
-  cleanupLastEndStringOccurrence,
-  keyOfLongestArray,
-  sha256,
-} from './common';
+import { castArray, usernameIsValid, sanitizeProvider, sha256 } from './common';
 
 describe('`castArray` helper', () => {
   it('returns an array when given an array', () => {
@@ -57,82 +49,6 @@ describe('`sanitizeProvider` helper', () => {
   });
 });
 
-describe('`replaceLastOccurrence` helper', () => {
-  it('returns full string with unique replacement done', () => {
-    expect(replaceLastOccurrence('A B C D', 'D', 'E')).toBe('A B C E');
-  });
-
-  it('returns full string with only last replacement done', () => {
-    expect(replaceLastOccurrence('A X B C X', 'X', 'E')).toBe('A X B C E');
-  });
-});
-
-describe('`cleanupLastEndStringOccurrence` helper', () => {
-  it('returns full string without the last ending pattern', () => {
-    expect(cleanupLastEndStringOccurrence('cast no shadow live', 'live')).toBe('cast no shadow');
-  });
-
-  it('returns full string without the last ending occurrence', () => {
-    expect(cleanupLastEndStringOccurrence('live forever live', 'live')).toBe('live forever');
-  });
-
-  it('returns full string without the last with extra alphabetic characters', () => {
-    expect(cleanupLastEndStringOccurrence('live forever (remastered)', '(remastered)')).toBe('live forever');
-    expect(
-      cleanupLastEndStringOccurrence('Dazed and Confused - 3/23/69 Top Gear;Remaster', ' - 3/23/69 Top Gear;Remaster')
-    ).toBe('Dazed and Confused');
-  });
-
-  it('returns full string if cleanup pattern is not at end of string', () => {
-    expect(cleanupLastEndStringOccurrence('live forever (live)', 'live')).toBe('live forever (live)');
-  });
-});
-
-describe('`keyOfLongestArray` helper', () => {
-  it('return first array as longest', () => {
-    const objectToAnalyze = {
-      longest: Array(5).fill(null),
-      second: Array(3).fill(null),
-      third: Array(3).fill(null),
-    };
-
-    expect(keyOfLongestArray(objectToAnalyze)).toBe('longest');
-  });
-
-  it('return last array as longest', () => {
-    const objectToAnalyze = {
-      first: Array(1).fill(null),
-      second: Array(3).fill(null),
-      longest: Array(5).fill(null),
-    };
-
-    expect(keyOfLongestArray(objectToAnalyze)).toBe('longest');
-  });
-
-  it('return a central array as longest', () => {
-    const objectToAnalyze = {
-      first: Array(1).fill(null),
-      second: Array(3).fill(null),
-      longest: Array(5).fill(null),
-      fourth: Array(3).fill(null),
-    };
-
-    expect(keyOfLongestArray(objectToAnalyze)).toBe('longest');
-  });
-
-  it('return the last array as one of the longest', () => {
-    const objectToAnalyze = {
-      first: Array(1).fill(null),
-      second: Array(3).fill(null),
-      third: Array(5).fill(null),
-      fourth: Array(3).fill(null),
-      longest: Array(5).fill(null),
-    };
-
-    expect(keyOfLongestArray(objectToAnalyze)).toBe('longest');
-  });
-});
-
 describe('`sha256` digest', () => {
   it('returns the correct SHA-256 hash for a given string', () => {
     const str = 'hello world';
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 3bf9da91..b694bacb 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,5 +1,4 @@
 import { PROVIDER_DISCOGS, PROVIDER_NAME, Provider } from 'Constants';
-import type { Scrobble } from './types/scrobble';
 
 export function castArray(x: any): Array<any> {
   return Array.isArray(x) ? x : [x];
@@ -17,38 +16,6 @@ export function sanitizeProvider(provider: string, defaultProvder: Provider = PR
   return defaultProvder;
 }
 
-export function replaceLastOccurrence(fullString: string, lastString: string, replaceString: string) {
-  const lastStringIndex = fullString.lastIndexOf(lastString);
-
-  if (lastStringIndex === -1) {
-    return fullString;
-  }
-
-  return `${fullString.substring(0, lastStringIndex)}${replaceString}${fullString.substring(lastStringIndex + lastString.length)}`;
-}
-
-export function cleanupLastEndStringOccurrence(fullString: string, pattern: string) {
-  if (fullString.endsWith(pattern)) {
-    return fullString.substring(0, fullString.length - pattern.length).trim();
-  }
-
-  return fullString;
-}
-
-export function keyOfLongestArray(objectOfArrays: Record<string, Scrobble[]>): string {
-  let keyOfLongestArray: string = null;
-  let longestArrayLength = -1;
-
-  for (const [arrayKey, arrayItems] of Object.entries(objectOfArrays)) {
-    if (arrayItems.length >= longestArrayLength) {
-      longestArrayLength = arrayItems.length;
-      keyOfLongestArray = arrayKey;
-    }
-  }
-
-  return keyOfLongestArray;
-}
-
 export async function sha256(str: string) {
   const msgUint8 = new TextEncoder().encode(str); // encode as (utf-8) Uint8Array
   const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8); // hash the message