closed tabs

packages/web/src/appobj/ClosedTabAppObject.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" context="module">
+  export const extractKey = data => data.tabid;
+</script>
+
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { openedTabs } from '../stores';
+  import { setSelectedTabFunc } from '../utility/common';
+  import moment from 'moment';
+
+  import AppObjectCore from './AppObjectCore.svelte';
+
+  export let data;
+
+  const handleDelete = () => {
+    openedTabs.update(tabs => tabs.filter(x => x.tabid != data.tabid));
+  };
+  const handleDeleteOlder = () => {
+    openedTabs.update(tabs => tabs.filter(x => !x.closedTime || x.closedTime >= data.closedTime));
+  };
+
+  const onClick = () => {
+    openedTabs.update(files =>
+      setSelectedTabFunc(
+        files.map(x => ({
+          ...x,
+          closedTime: x.tabid == data.tabid ? undefined : x.closedTime,
+        })),
+        data.tabid
+      )
+    );
+  };
+
+  function createMenu() {
+    return [
+      { text: 'Delete', onClick: handleDelete },
+      { text: 'Delete older', onClick: handleDeleteOlder },
+    ];
+  }
+</script>
+
+<AppObjectCore
+  {...$$restProps}
+  {data}
+  title={`${data.title} ${moment(data.closedTime).fromNow()}`}
+  icon={data.icon}
+  isBold={!!data.selected}
+  on:click={onClick}
+  isBusy={data.busy}
+  menu={createMenu}
+>
+  {#if data.props && data.props.database}
+    <div class="info">
+      <FontIcon icon="icon database" />
+      {data.props.database}
+    </div>
+  {/if}
+  {#if data.contentPreview}
+    <div class="info">
+      {data.contentPreview}
+    </div>
+  {/if}
+</AppObjectCore>
+
+<style>
+  .info {
+    margin-left: 30px;
+    color: var(--theme-font-3);
+  }
+</style>

packages/web/src/widgets/FavoritesWidget.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import AppObjectList from '../appobj/AppObjectList.svelte';
+  import * as closedTabAppObject from '../appobj/ClosedTabAppObject.svelte';
+  import { openedTabs } from '../stores';
+
+  import hasPermission from '../utility/hasPermission';
+
+  import WidgetColumnBar from './WidgetColumnBar.svelte';
+  import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+</script>
+
+<WidgetColumnBar>
+  <!-- {#if hasPermission('files/favorites/read')}
+    <WidgetColumnBarItem title="Favorites" name="favorites" height="20%">
+      <FavoritesList />
+    </WidgetColumnBarItem>
+  {/if} -->
+  <WidgetColumnBarItem title="Recently closed tabs" name="closedTabs">
+    <WidgetsInnerContainer>
+      <AppObjectList
+        list={_.sortBy(
+          $openedTabs.filter(x => x.closedTime),
+          x => -x.closedTime
+        )}
+        module={closedTabAppObject}
+      />
+    </WidgetsInnerContainer>
+  </WidgetColumnBarItem>
+</WidgetColumnBar>

packages/web/src/widgets/WidgetContainer.svelte

@@ -4,6 +4,7 @@
   import DatabaseWidget from './DatabaseWidget.svelte';
   import FilesWidget from './FilesWidget.svelte';
   import PluginsWidget from './PluginsWidget.svelte';
+  import FavoritesWidget from './FavoritesWidget.svelte';
 </script>
 
 {#if $selectedWidget == 'database'}
@@ -18,3 +19,6 @@
 {#if $selectedWidget == 'plugins'}
   <PluginsWidget />
 {/if}
+{#if $selectedWidget == 'favorites'}
+  <FavoritesWidget />
+{/if}