Merge pull request #3151 from granth23/LB-1722--Part-B-Making-page-mo…

…re-discoverable LB-1722: Part B, making the link listens page more discoverable.
metabrainz · Jan 28, 2025 · 8a85273 · 8a85273
2 parents 1e07bb6 + ec6031d
commit 8a85273
Showing 1 changed file with 97 additions and 56 deletions.
diff --git a/frontend/js/src/common/listens/MBIDMappingModal.tsx b/frontend/js/src/common/listens/MBIDMappingModal.tsx
@@ -6,11 +6,13 @@ import {
   faExchangeAlt,
   faInfoCircle,
   faQuestionCircle,
+  faLink,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as React from "react";
 import { toast } from "react-toastify";
 import Tooltip from "react-tooltip";
+import { Link } from "react-router-dom";
 import ListenCard from "./ListenCard";
 import ListenControl from "./ListenControl";
 import { ToastMsg } from "../../notifications/Notifications";
@@ -200,20 +202,8 @@ export default NiceModal.create(({ listenToMap }: MBIDMappingModalProps) => {
                   data-for="musicbrainz-helptext"
                   size="sm"
                 />{" "}
-                below to link this Listen, as well as your other Listens with
-                the same metadata.
+                below to link this Listen.
               </p>
-              <small className="help-block">
-                <FontAwesomeIcon icon={faInfoCircle} />
-                &nbsp;
-                <a
-                  href="https://listenbrainz.readthedocs.io/en/latest/general/data-update-intervals.html#user-statistics"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  How long until my stats reflect the change?
-                </a>
-              </small>
               <ListenCard
                 listen={listenToMap}
                 showTimestamp={false}
@@ -242,35 +232,22 @@ export default NiceModal.create(({ listenToMap }: MBIDMappingModalProps) => {
               </div>
 
               {listenFromSelectedRecording ? (
-                <>
-                  <ListenCard
-                    listen={listenFromSelectedRecording}
-                    showTimestamp={false}
-                    showUsername={false}
-                    compact
-                    additionalActions={
-                      <ListenControl
-                        buttonClassName="btn-transparent"
-                        text=""
-                        title="Reset"
-                        icon={faTimesCircle}
-                        iconSize="lg"
-                        action={() => setSelectedRecording(undefined)}
-                      />
-                    }
-                  />
-                  <small className="help-block">
-                    Recordings added to MusicBrainz within the last 4 hours may
-                    temporarily look incomplete.
-                    <a
-                      href="https://listenbrainz.readthedocs.io/en/latest/general/data-update-intervals.html#mbid-mapper-musicbrainz-metadata-cache"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      Click here to learn why.
-                    </a>
-                  </small>
-                </>
+                <ListenCard
+                  listen={listenFromSelectedRecording}
+                  showTimestamp={false}
+                  showUsername={false}
+                  compact
+                  additionalActions={
+                    <ListenControl
+                      buttonClassName="btn-transparent"
+                      text=""
+                      title="Reset"
+                      icon={faTimesCircle}
+                      iconSize="lg"
+                      action={() => setSelectedRecording(undefined)}
+                    />
+                  }
+                />
               ) : (
                 <div className="card listen-card">
                   <SearchTrackOrMBID
@@ -285,21 +262,85 @@ export default NiceModal.create(({ listenToMap }: MBIDMappingModalProps) => {
                 </div>
               )}
             </div>
-            <div className="modal-footer">
-              <button
-                type="button"
-                className="btn btn-default"
-                onClick={closeModal}
+            <div className="modal-footer" style={{ textAlign: "left" }}>
+              <div
+                className="mb-10"
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                }}
               >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                className="btn btn-success"
-                disabled={!selectedRecording}
-              >
-                Add mapping
-              </button>
+                <div>
+                  <Link
+                    type="button"
+                    className="btn btn-info"
+                    to="/settings/link-listens"
+                    onClick={closeModal}
+                  >
+                    <span
+                      className="fa-layers fa-fw"
+                      style={{ marginRight: "0.5em" }}
+                    >
+                      <FontAwesomeIcon icon={faLink} />
+                      <FontAwesomeIcon
+                        icon={faLink}
+                        color="#FFFFFFA1"
+                        transform="right-5"
+                      />
+                      <FontAwesomeIcon
+                        icon={faLink}
+                        color="#ffffff42"
+                        transform="right-10"
+                      />
+                    </span>
+                    &nbsp; Mass-link listens tool
+                  </Link>
+                </div>
+                <div style={{ textAlign: "right" }}>
+                  <button
+                    type="button"
+                    className="btn btn-default"
+                    onClick={closeModal}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="btn btn-success"
+                    disabled={!selectedRecording}
+                  >
+                    Add mapping
+                  </button>
+                </div>
+              </div>
+              <div className="small">
+                <FontAwesomeIcon icon={faInfoCircle} />
+                &nbsp;This will also link your other listens with the same
+                metadata.
+              </div>
+              <div className="small">
+                <FontAwesomeIcon icon={faInfoCircle} />
+                &nbsp;
+                <a
+                  href="https://listenbrainz.readthedocs.io/en/latest/general/data-update-intervals.html#user-statistics"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  How long until my stats reflect the change?
+                </a>
+              </div>
+              <div className="small">
+                <FontAwesomeIcon icon={faInfoCircle} />
+                &nbsp;
+                <a
+                  href="https://listenbrainz.readthedocs.io/en/latest/general/data-update-intervals.html#mbid-mapper-musicbrainz-metadata-cache"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Recordings added within the last 4 hours may temporarily look
+                  incomplete.
+                </a>
+              </div>
             </div>
           </form>
         </div>