link to open favorite

packages/web/src/appobj/FavoriteFileAppObject.js

@@ -3,6 +3,8 @@ import { DropDownMenuItem } from '../modals/DropDownMenu';
 import FavoriteModal from '../modals/FavoriteModal';
 import useShowModal from '../modals/showModal';
 import axios from '../utility/axios';
+import { copyTextToClipboard } from '../utility/clipboard';
+import getElectron from '../utility/getElectron';
 import useOpenNewTab from '../utility/useOpenNewTab';
 import { SavedFileAppObjectBase } from './SavedFileAppObject';
 
@@ -41,10 +43,11 @@ export function useOpenFavorite() {
 }
 
 export function FavoriteFileAppObject({ data, commonProps }) {
-  const { icon, tabComponent, title, props, tabdata } = data;
+  const { icon, tabComponent, title, props, tabdata, urlPath } = data;
   const openNewTab = useOpenNewTab();
   const showModal = useShowModal();
   const openFavorite = useOpenFavorite();
+  const electron = getElectron();
 
   const editFavorite = () => {
     showModal((modalState) => <FavoriteModal modalState={modalState} editingData={data} />);
@@ -72,6 +75,10 @@ export function FavoriteFileAppObject({ data, commonProps }) {
     );
   };
 
+  const copyLink = () => {
+    copyTextToClipboard(`${document.location.origin}#favorite=${urlPath}`);
+  };
+
   return (
     <SavedFileAppObjectBase
       data={data}
@@ -87,6 +94,7 @@ export function FavoriteFileAppObject({ data, commonProps }) {
         <>
           <DropDownMenuItem onClick={editFavorite}>Edit</DropDownMenuItem>
           <DropDownMenuItem onClick={editFavoriteJson}>Edit JSON definition</DropDownMenuItem>
+          {!electron && urlPath && <DropDownMenuItem onClick={copyLink}>Copy link</DropDownMenuItem>}
         </>
       }
     />

packages/web/src/modals/FavoriteModal.js

@@ -9,6 +9,7 @@ import axios from '../utility/axios';
 import uuidv1 from 'uuid/v1';
 import { FontIcon } from '../icons';
 import useHasPermission from '../utility/useHasPermission';
+import _ from 'lodash';
 
 function FontIconPreview() {
   const { values } = useForm();
@@ -22,6 +23,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
       return {
         title: savingTab.title,
         icon: savingTab.icon,
+        urlPath: _.kebabCase(_.deburr(savingTab.title)),
       };
     }
     if (editingData) {
@@ -30,6 +32,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
         icon: editingData.icon,
         showInToolbar: editingData.showInToolbar,
         openOnStartup: editingData.openOnStartup,
+        urlPath: editingData.urlPath,
       };
     }
   }, []);
@@ -99,6 +102,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
           <FormFieldTemplate label="Icon preview" type="icon">
             <FontIconPreview />
           </FormFieldTemplate>
+          <FormTextField label="URL path" name="urlPath" />
           <FormCheckboxField label="Show in toolbar" name="showInToolbar" />
           <FormCheckboxField label="Open on startup" name="openOnStartup" />
         </ModalContent>

packages/web/src/widgets/Toolbar.js

@@ -86,34 +86,21 @@ export default function ToolBar({ toolbarPortalRef }) {
     showModal((modalState) => <FavoriteModal modalState={modalState} savingTab={currentTab} />);
   };
 
-  function openTabFromButton(favorite) {
-    openFavorite(favorite);
-    // if (
-    //   openedTabs.find(
-    //     (x) => x.tabComponent == 'MarkdownViewTab' && x.props && x.props.file == page.file && x.closedTime == null
-    //   )
-    // ) {
-    //   setOpenedTabs((tabs) =>
-    //     tabs.map((tab) => ({
-    //       ...tab,
-    //       selected: tab.tabComponent == 'MarkdownViewTab' && tab.props && tab.props.file == page.file,
-    //     }))
-    //   );
-    // } else {
-    //   openNewTab({
-    //     title: page.button || page.file,
-    //     tabComponent: 'MarkdownViewTab',
-    //     icon: page.icon || 'img markdown',
-    //     props: {
-    //       file: page.file,
-    //     },
-    //   });
-    // }
-  }
-
   React.useEffect(() => {
-    for (const fav of (favorites || []).filter((x) => x.openOnStartup)) {
-      openTabFromButton(fav);
+    const { hash } = document.location;
+    const favname = hash && hash.startsWith('#favorite=') ? hash.substring('#favorite='.length) : null;
+    if (favname) {
+      const open = (favorites || []).find((x) => x.urlPath == favname);
+      if (open) {
+        openFavorite(open);
+        window.history.replaceState(null, null, ' ');
+      }
+    } else {
+      if (!openedTabs.find((x) => x.closedTime == null)) {
+        for (const fav of (favorites || []).filter((x) => x.openOnStartup)) {
+          openFavorite(fav);
+        }
+      }
     }
   }, [favorites]);
 
@@ -124,7 +111,7 @@ export default function ToolBar({ toolbarPortalRef }) {
       {(favorites || [])
         .filter((x) => x.showInToolbar)
         .map((x) => (
-          <ToolbarButton key={x.file} onClick={() => openTabFromButton(x)} icon={x.icon || 'icon favorite'}>
+          <ToolbarButton key={x.file} onClick={() => openFavorite(x)} icon={x.icon || 'icon favorite'}>
             {x.title}
           </ToolbarButton>
         ))}