feat(playlist): default to unformatted track id copying

src/components/SettingsModal.tsx

@@ -21,15 +21,23 @@ export const SettingsModal: React.FC<ISettingsModalProps> = ({
   const [distinctKmstVersion, setDistinctKmstVersion] = useState(
     settings.distinctKmstVersion
   );
+  const [jsonOptimizedTrackIdCopy, setJsonOptimizedTrackIdCopy] = useState(
+    settings.jsonOptimizedTrackIdCopy
+  );
 
   const onModalSave = () => {
-    setSettings({ hideMinorTracks, distinctKmstVersion });
+    setSettings({
+      hideMinorTracks,
+      distinctKmstVersion,
+      jsonOptimizedTrackIdCopy,
+    });
     onModalClose();
   };
 
   const onModalShow = () => {
     setHideMinorTracks(settings.hideMinorTracks);
     setDistinctKmstVersion(settings.distinctKmstVersion);
+    setJsonOptimizedTrackIdCopy(settings.jsonOptimizedTrackIdCopy);
   };
 
   return (
@@ -64,6 +72,15 @@ export const SettingsModal: React.FC<ISettingsModalProps> = ({
                   setDistinctKmstVersion((prev) => !prev);
                 }}
               />
+              <SettingsModalToggle
+                id="jsonOptimizedTrackIdCopy"
+                label="JSON Optimized Track ID Copy"
+                checked={jsonOptimizedTrackIdCopy}
+                tooltip="Wrap track ID in JSON compatible syntax"
+                onChange={() => {
+                  setJsonOptimizedTrackIdCopy((prev) => !prev);
+                }}
+              />
             </div>
           </>
         </Form>

src/components/renderers/TrackIdRenderer.tsx

@@ -1,13 +1,15 @@
 /** @jsxImportSource @emotion/react */
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { ICellRendererParams } from 'ag-grid-community';
 import { css } from '@emotion/react';
 import { getKey } from '../utils/PlaylistUtils';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { useAtom } from 'jotai';
 import { trackExportSetAtom } from '../../state/playlist';
+import { useSettings } from '../../context/SettingsContext';
 
 export const TrackIdRenderer: React.FC<ICellRendererParams> = (params) => {
+  const { settings } = useSettings();
   const { data } = params;
   const key = useMemo(() => getKey(data.source.structure, data.filename), [
     data.source.structure,
@@ -19,6 +21,14 @@ export const TrackIdRenderer: React.FC<ICellRendererParams> = (params) => {
     trackExportSet,
   ]);
 
+  const onCopyTrackId = useCallback(() => {
+    if (settings.jsonOptimizedTrackIdCopy) {
+      navigator.clipboard.writeText(`"${key}",\n`);
+    } else {
+      navigator.clipboard.writeText(key);
+    }
+  }, [key, settings.jsonOptimizedTrackIdCopy]);
+
   const onExportSetChange = () => {
     if (trackInExportSet) {
       trackExportSet.delete(key);
@@ -40,9 +50,7 @@ export const TrackIdRenderer: React.FC<ICellRendererParams> = (params) => {
         css={css`
           margin: 0 5px;
         `}
-        onClick={() => {
-          navigator.clipboard.writeText(`"${key}",\n`);
-        }}
+        onClick={onCopyTrackId}
       >
         <OverlayTrigger
           delay={{ show: 1000, hide: 100 }}

src/context/SettingsContext.tsx

@@ -5,6 +5,7 @@ const LOCAL_STORAGE_KEY = 'site-preferences';
 interface ISettings {
   hideMinorTracks: boolean;
   distinctKmstVersion: boolean;
+  jsonOptimizedTrackIdCopy: boolean;
 }
 
 type SettingsContextOutput = {
@@ -19,6 +20,7 @@ const SettingsContext = React.createContext<SettingsContextOutput | undefined>(
 const defaultSettings: ISettings = {
   hideMinorTracks: false,
   distinctKmstVersion: false,
+  jsonOptimizedTrackIdCopy: false,
 };
 
 function getDefaultSettings(): ISettings {