favorites list

packages/web/src/appobj/FavoriteFileAppObject.svelte

@@ -0,0 +1,100 @@
+<script lang="ts" context="module">
+  import AppObjectCore from './AppObjectCore.svelte';
+
+  export const extractKey = data => data.file;
+
+  export async function openFavorite(favorite) {
+    const { icon, tabComponent, title, props, tabdata } = favorite;
+    let tabdataNew = tabdata;
+    if (props.savedFile) {
+      const resp = await axiosInstance.post('files/load', {
+        folder: props.savedFolder,
+        file: props.savedFile,
+        format: props.savedFormat,
+      });
+      tabdataNew = {
+        ...tabdata,
+        editor: resp.data,
+      };
+    }
+    openNewTab(
+      {
+        title,
+        icon: icon || 'img favorite',
+        props,
+        tabComponent,
+      },
+      tabdataNew
+    );
+  }
+</script>
+
+<script lang="ts">
+  import axiosInstance from '../utility/axiosInstance';
+  import openNewTab from '../utility/openNewTab';
+  import { copyTextToClipboard } from '../utility/clipboard';
+  import { showModal } from '../modals/modalTools';
+  import ConfirmModal from '../modals/ConfirmModal.svelte';
+  import getElectron from '../utility/getElectron';
+
+  export let data;
+
+  const electron = getElectron();
+
+  const editFavorite = () => {
+    // showModal(modalState => <FavoriteModal modalState={modalState} editingData={data} />);
+  };
+
+  const editFavoriteJson = async () => {
+    const resp = await axiosInstance.post('files/load', {
+      folder: 'favorites',
+      file: data.file,
+      format: 'text',
+    });
+
+    openNewTab(
+      {
+        icon: 'icon favorite',
+        title: data.title,
+        tabComponent: 'FavoriteEditorTab',
+        props: {
+          savedFile: data.file,
+          savedFormat: 'text',
+          savedFolder: 'favorites',
+        },
+      },
+      { editor: JSON.stringify(JSON.parse(resp.data), null, 2) }
+    );
+  };
+
+  const copyLink = () => {
+    copyTextToClipboard(`${document.location.origin}#favorite=${data.urlPath}`);
+  };
+
+  const handleDelete = () => {
+    showModal(ConfirmModal, {
+      message: `Really delete favorite ${data.title}?`,
+      onConfirm: () => {
+        axiosInstance.post('files/delete', { file: data.file, folder: 'favorites' });
+      },
+    });
+  };
+
+  function createMenu() {
+    return [
+      { text: 'Delete', onClick: handleDelete },
+      { text: 'Edit', onClick: editFavorite },
+      { text: 'Edit JSON definition', onClick: editFavoriteJson },
+      !electron && data.urlPath && { text: 'Copy link', onClick: copyLink },
+    ];
+  }
+</script>
+
+<AppObjectCore
+  {...$$restProps}
+  {data}
+  icon={data.icon || 'img favorite'}
+  title={data.title}
+  menu={createMenu}
+  on:click={() => openFavorite(data)}
+/>

packages/web/src/main.ts

@@ -6,7 +6,6 @@ import localStorageGarbageCollector from './utility/localStorageGarbageCollector
 
 localStorageGarbageCollector();
 
-
 const app = new App({
   target: document.body,
   props: {},

packages/web/src/utility/metadataLoaders.ts

@@ -383,7 +383,7 @@ export function useAllFiles(args) {
 export function getFavorites(args) {
   return getCore(favoritesLoader, args);
 }
-export function useFavorites(args) {
+export function useFavorites(args = {}) {
   return useCore(favoritesLoader, args);
 }
 

packages/web/src/widgets/FavoritesWidget.svelte

@@ -3,21 +3,25 @@
 
   import AppObjectList from '../appobj/AppObjectList.svelte';
   import * as closedTabAppObject from '../appobj/ClosedTabAppObject.svelte';
+  import * as favoriteFileAppObject from '../appobj/FavoriteFileAppObject.svelte';
   import { openedTabs } from '../stores';
 
   import hasPermission from '../utility/hasPermission';
+  import { useFavorites } from '../utility/metadataLoaders';
 
   import WidgetColumnBar from './WidgetColumnBar.svelte';
   import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+
+  $: favorites = useFavorites();
 </script>
 
 <WidgetColumnBar>
-  <!-- {#if hasPermission('files/favorites/read')}
+  {#if hasPermission('files/favorites/read')}
     <WidgetColumnBarItem title="Favorites" name="favorites" height="20%">
-      <FavoritesList />
+      <AppObjectList list={$favorites || []} module={favoriteFileAppObject} />
     </WidgetColumnBarItem>
-  {/if} -->
+  {/if}
   <WidgetColumnBarItem title="Recently closed tabs" name="closedTabs">
     <WidgetsInnerContainer>
       <AppObjectList