All modals using dedicated /modal URL for routing

src/js/App.js

@@ -28,20 +28,7 @@ import Search from './views/Search';
 import Settings from './views/Settings';
 import Discover from './views/Discover/Discover';
 import Library from './views/Library/Library';
-
-import EditPlaylist from './views/modals/EditPlaylist';
-import CreatePlaylist from './views/modals/CreatePlaylist';
-import EditRadio from './views/modals/EditRadio';
-import AddToQueue from './views/modals/AddToQueue';
-import InitialSetup from './views/modals/InitialSetup';
-import KioskMode from './views/modals/KioskMode';
-import ShareConfiguration from './views/modals/ShareConfiguration';
-import AddToPlaylist from './views/modals/AddToPlaylist';
-import ImageZoom from './views/modals/ImageZoom';
-import HotkeysInfo from './views/modals/HotkeysInfo';
-import EditCommand from './views/modals/EditCommand';
-import Reset from './views/modals/Reset';
-import Servers from './views/modals/Servers';
+import Modals from './views/Modals/Modals';
 
 import { scrollTo, isTouchDevice } from './util/helpers';
 import * as uiActions from './services/ui/actions';
@@ -177,7 +164,7 @@ const App = () => {
         dispatch(snapcastActions.connect());
       }
       if (!initial_setup_complete) {
-        history.push('/initial-setup');
+        history.push('/modal/initial-setup');
       }
     }
   }, [isReady]);
@@ -267,21 +254,10 @@ const App = () => {
     >
       <div className="body">
         <Switch>
-          <Route path="/initial-setup" component={InitialSetup} />
-          <Route path="/kiosk-mode" component={KioskMode} />
-          <Route path="/add-to-playlist/:uris" component={AddToPlaylist} />
-          <Route path="/image-zoom" component={ImageZoom} />
-          <Route path="/hotkeys" component={HotkeysInfo} />
-          <Route path="/share-configuration" component={ShareConfiguration} />
-          <Route path="/reset" component={Reset} />
-          <Route path="/servers" component={Servers} />
-          <Route path="/edit-command/:id?" component={EditCommand} />
-
-          <Route path="/queue/radio" component={EditRadio} />
-          <Route path="/queue/add-uri" component={AddToQueue} />
-          <Route path="/playlist/create/:uris?" component={CreatePlaylist} />
-          <Route path="/playlist/:uri/edit" component={EditPlaylist} />
-
+          <Route
+            path="/modal"
+            component={Modals}
+          />
           <Route>
             <div>
               <Sidebar tabIndex="3" />

src/js/components/ContextMenu.js

@@ -819,7 +819,7 @@ class ContextMenu extends React.Component {
           </a>
         </div>
         <div className="context-menu__item context-menu__item--functional">
-          <Link className="context-menu__item__link" to={`/playlist/create/${encodedUris}`}>
+          <Link className="context-menu__item__link" to={`/modal/create-playlist/${encodedUris}`}>
             <span className="context-menu__item__label">
               <Icon name="add" />
               <span>
@@ -1108,7 +1108,7 @@ class ContextMenu extends React.Component {
       <div className="context-menu__item">
         <Link
           className="context-menu__item__link"
-          to={`${buildLink(context.item.uri, 'playlist')}/edit`}
+          to={`modal/edit-playlist/${encodeUri(context.item.uri)}`}
         >
           <span className="context-menu__item__label">
             <I18n path="actions.edit" />

src/js/components/Fields/Commands.js

@@ -68,7 +68,7 @@ export default class Commands extends React.Component {
                           <a className="commands-setup__item__run-button action" onClick={(e) => this.props.runCommand(command.id, true)}>
                             <Icon name="play_arrow" />
                           </a>
-                          <Link className="commands-setup__item__edit-button action" to={`/edit-command/${command.id}`}>
+                          <Link className="commands-setup__item__edit-button action" to={`/modal/edit-command/${command.id}`}>
                             <Icon name="edit" />
                           </Link>
                         </div>

src/js/components/Fields/Dropzones.js

@@ -53,10 +53,10 @@ const Dropzones = () => {
         dispatch(mopidyActions.enqueueURIs(uris, from_uri, true));
         break;
       case 'add_to_playlist':
-        history.push(`/add-to-playlist/${encodeUri(uris.join(','))}`);
+        history.push(`/modal/add-to-playlist/${encodeUri(uris.join(','))}`);
         break;
       case 'create_playlist_and_add':
-        history.push(`/playlist/create/${encodeUri(uris.join(','))}`);
+        history.push(`/modal/create-playlist/${encodeUri(uris.join(','))}`);
         break;
       default:
         break;

src/js/components/Hotkeys.js

@@ -95,7 +95,7 @@ const Hotkeys = () => {
       e,
       label: 'Hotkey info',
       callback: () => {
-        history.push('/hotkeys');
+        history.push('/modal/hotkeys');
       },
     });
   });

src/js/components/PlaybackControls.js

@@ -155,7 +155,7 @@ const PlaybackControls = () => {
             tabIndex="-1"
             key={currentTrack.tlid}
           >
-            <Link className="thumbnail-wrapper" to="/kiosk-mode" tabIndex="-1">
+            <Link className="thumbnail-wrapper" to="/modal/kiosk-mode" tabIndex="-1">
               <Thumbnail size="small" images={currentTrack.images} type="track" />
             </Link>
             <div className="text">
@@ -181,7 +181,7 @@ const PlaybackControls = () => {
             onTouchEnd={handleTouchEnd}
             tabIndex="-1"
           >
-            <Link className="thumbnail-wrapper" to="/kiosk-mode" tabIndex="-1">
+            <Link className="thumbnail-wrapper" to="/modal/kiosk-mode" tabIndex="-1">
               <Thumbnail size="small" type="track" />
             </Link>
             <div className="text">

src/js/components/Thumbnail.js

@@ -83,7 +83,7 @@ export default memo((props) => {
         {props.canZoom && image && (
           <Link
             className="thumbnail__actions__item thumbnail__actions__item--zoom"
-            to={`/image-zoom?url=${image}`}
+            to={`/modal/image-zoom?url=${image}`}
           >
             <Icon name="search" />
           </Link>

src/js/views/Discover/Discover.js

@@ -6,34 +6,32 @@ import Categories from './Categories';
 import Category from './Category';
 import NewReleases from './NewReleases';
 
-export default () => {
-  return (
-    <Switch>
-      <Route
-        exact
-        path="/discover/recommendations/:uri?"
-        component={Recommendations}
-      />
-      <Route
-        exact
-        path="/discover/featured"
-        component={Featured}
-      />
-      <Route
-        exact
-        path="/discover/categories/:uri"
-        component={Category}
-      />
-      <Route
-        exact
-        path="/discover/categories"
-        component={Categories}
-      />
-      <Route
-        exact
-        path="/discover/new-releases"
-        component={NewReleases}
-      />
-    </Switch>
-  );
-}
+export default () => (
+  <Switch>
+    <Route
+      exact
+      path="/discover/recommendations/:uri?"
+      component={Recommendations}
+    />
+    <Route
+      exact
+      path="/discover/featured"
+      component={Featured}
+    />
+    <Route
+      exact
+      path="/discover/categories/:uri"
+      component={Category}
+    />
+    <Route
+      exact
+      path="/discover/categories"
+      component={Categories}
+    />
+    <Route
+      exact
+      path="/discover/new-releases"
+      component={NewReleases}
+    />
+  </Switch>
+);

src/js/views/Library/Library.js

@@ -7,39 +7,37 @@ import Playlists from './Playlists';
 import Browse from './Browse';
 import BrowseDirectory from './BrowseDirectory';
 
-export default () => {
-  return (
-    <Switch>
-      <Route
-        exact
-        path="/library/artists"
-        component={Artists}
-      />
-      <Route
-        exact
-        path="/library/albums"
-        component={Albums}
-      />
-      <Route
-        exact
-        path="/library/tracks"
-        component={Tracks}
-      />
-      <Route
-        exact
-        path="/library/playlists"
-        component={Playlists}
-      />
-      <Route
-        exact
-        path="/library/browse"
-        component={Browse}
-      />
-      <Route
-        exact
-        path="/library/browse/:name/:uri"
-        component={BrowseDirectory}
-      />
-    </Switch>
-  );
-}
+export default () => (
+  <Switch>
+    <Route
+      exact
+      path="/library/artists"
+      component={Artists}
+    />
+    <Route
+      exact
+      path="/library/albums"
+      component={Albums}
+    />
+    <Route
+      exact
+      path="/library/tracks"
+      component={Tracks}
+    />
+    <Route
+      exact
+      path="/library/playlists"
+      component={Playlists}
+    />
+    <Route
+      exact
+      path="/library/browse"
+      component={Browse}
+    />
+    <Route
+      exact
+      path="/library/browse/:name/:uri"
+      component={BrowseDirectory}
+    />
+  </Switch>
+);

src/js/views/Modals/Modals.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import EditPlaylist from './EditPlaylist';
+import CreatePlaylist from './CreatePlaylist';
+import EditRadio from './EditRadio';
+import AddToQueue from './AddToQueue';
+import InitialSetup from './InitialSetup';
+import KioskMode from './KioskMode';
+import ShareConfiguration from './ShareConfiguration';
+import AddToPlaylist from './AddToPlaylist';
+import ImageZoom from './ImageZoom';
+import HotkeysInfo from './HotkeysInfo';
+import EditCommand from './EditCommand';
+import Reset from './Reset';
+import Servers from './Servers';
+
+export default () => (
+  <Switch>
+    <Route path="/modal/initial-setup" component={InitialSetup} />
+    <Route path="/modal/kiosk-mode" component={KioskMode} />
+    <Route path="/modal/add-to-playlist/:uris" component={AddToPlaylist} />
+    <Route path="/modal/image-zoom" component={ImageZoom} />
+    <Route path="/modal/hotkeys" component={HotkeysInfo} />
+    <Route path="/modal/share-configuration" component={ShareConfiguration} />
+    <Route path="/modal/reset" component={Reset} />
+    <Route path="/modal/servers" component={Servers} />
+    <Route path="/modal/edit-command/:id?" component={EditCommand} />
+    <Route path="/modal/radio" component={EditRadio} />
+    <Route path="/modal/add-uri" component={AddToQueue} />
+    <Route path="/modal/create-playlist/:uris?" component={CreatePlaylist} />
+    <Route path="/modal/edit-playlist/:uri" component={EditPlaylist} />
+  </Switch>
+);

src/js/views/Playlist.js

@@ -51,7 +51,7 @@ const Actions = ({
             <I18n path="actions.play" />
           </Button>
           <Button
-            to={`/playlist/${encodedUri}/edit`}
+            to={`/modal/edit-playlist/${encodedUri}`}
             tracking={{ category: 'Playlist', action: 'Edit' }}
           >
             <I18n path="actions.edit" />
@@ -73,7 +73,7 @@ const Actions = ({
               <I18n path="actions.play" />
             </Button>
             <Button
-              to={`/playlist/${encodedUri}/edit`}
+              to={`/modal/edit-playlist/${encodedUri}`}
               tracking={{ category: 'Playlist', action: 'Edit' }}
             >
               <I18n path="actions.edit" />

src/js/views/Queue.js

@@ -38,7 +38,7 @@ const Artwork = ({
   return (
     <div className="current-track__artwork">
       <Thumbnail glow image={image} type="track">
-        <Link to="/kiosk-mode" className="thumbnail__actions__item">
+        <Link to="/modal/kiosk-mode" className="thumbnail__actions__item">
           <Icon name="expand" type="fontawesome" />
         </Link>
         <URILink type="album" uri={album_uri} className="thumbnail__actions__item">
@@ -162,7 +162,7 @@ const Queue = ({
   const options = (
     <>
       {spotify_enabled && (
-        <Button noHover discrete to="/queue/radio">
+        <Button noHover discrete to="/modal/radio">
           <Icon name="radio" />
           <I18n path="now_playing.context_actions.radio" />
         </Button>
@@ -171,7 +171,7 @@ const Queue = ({
         <Icon name="history" />
         <I18n path="now_playing.context_actions.history" />
       </Button>
-      <Button noHover discrete to="/queue/add-uri">
+      <Button noHover discrete to="/modal/add-uri">
         <Icon name="playlist_add" />
         <I18n path="actions.add" />
       </Button>

src/js/views/Settings.js

@@ -376,7 +376,7 @@ class Settings extends React.Component {
                 runCommand={(id, notify) => runCommand(id, notify)}
                 onChange={(commands) => setCommands(commands)}
               />
-              <Button to="/edit-command">
+              <Button to="/modal/edit-command">
                 <I18n path="actions.add" />
               </Button>
             </div>
@@ -499,7 +499,7 @@ class Settings extends React.Component {
 
           <div className="field">
             {this.renderLocalScanButton()}
-            <Button to="/share-configuration">
+            <Button to="/modal/share-configuration">
               <I18n path="settings.advanced.share_configuration" />
             </Button>
           </div>
@@ -523,7 +523,7 @@ class Settings extends React.Component {
               <I18n path="settings.advanced.restart" />
             </Button>
             <Button
-              to="/reset"
+              to="/modal/reset"
               type="destructive"
             >
               <I18n path="settings.advanced.reset" />