plugins widget

packages/web/src/plugins/AvailablePluginsList.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import useFetch from '../utility/useFetch';
+  import WidgetsInnerContainer from '../widgets/WidgetsInnerContainer.svelte';
+  import PluginsList from './PluginsList.svelte';
+
+  let filter = '';
+  let search = '';
+
+  $: plugins = useFetch({
+    url: 'plugins/search',
+    params: {
+      filter: search,
+    },
+    defaultValue: [],
+  });
+
+  const setDebouncedFilter = _.debounce(value => (search = value), 500);
+
+  $: setDebouncedFilter(filter);
+</script>
+
+<SearchBoxWrapper>
+  <SearchInput placeholder="Search extensions on web" {filter} bind:value={filter} />
+</SearchBoxWrapper>
+<WidgetsInnerContainer>
+  <PluginsList plugins={$plugins} />
+</WidgetsInnerContainer>

packages/web/src/plugins/InstalledPluginsList.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { useInstalledPlugins } from '../utility/metadataLoaders';
+  import PluginsList from './PluginsList.svelte';
+  import WidgetsInnerContainer from '../widgets/WidgetsInnerContainer.svelte';
+
+  $: plugins = useInstalledPlugins();
+</script>
+
+<WidgetsInnerContainer>
+  <PluginsList plugins={$plugins} />
+</WidgetsInnerContainer>

packages/web/src/plugins/PluginsList.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import openNewTab from '../utility/openNewTab';
+
+  import { extractPluginAuthor, extractPluginIcon } from './manifestExtractors';
+
+  export let plugins: any[];
+
+  function openPlugin(packageManifest) {
+    openNewTab({
+      title: packageManifest.name,
+      icon: 'icon plugin',
+      tabComponent: 'PluginTab',
+      props: {
+        packageName: packageManifest.name,
+      },
+    });
+  }
+</script>
+
+{#each plugins as packageManifest (packageManifest.name)}
+  <div class="wrapper" on:click={() => openPlugin(packageManifest)}>
+    <img class="icon" src={extractPluginIcon(packageManifest)} />
+    <div class="ml-1">
+      <div class="flex">
+        <div class="bold">{packageManifest.name}</div>
+        <div class="ml-1">{packageManifest.version}</div>
+      </div>
+      <div>
+        {packageManifest.description}
+      </div>
+      <div class="bold">
+        {extractPluginAuthor(packageManifest)}
+      </div>
+    </div>
+  </div>
+{/each}
+
+<style>
+  .wrapper {
+    margin: 1px 3px 10px 5px;
+    display: flex;
+    align-items: center;
+  }
+  .wrapper:hover {
+    background-color: var(--theme-bg-selected);
+  }
+  .icon {
+    width: 50px;
+    height: 50px;
+  }
+</style>

packages/web/src/tabs/index.js

@@ -3,7 +3,6 @@ import * as ViewDataTab from './ViewDataTab.svelte';
 import * as TableStructureTab from './TableStructureTab.svelte';
 import * as QueryTab from './QueryTab.svelte';
 import * as ShellTab from './ShellTab.svelte';
-// import InfoPageTab from './InfoPageTab';
 import * as ArchiveFileTab from './ArchiveFileTab.svelte';
 import * as FreeTableTab from './FreeTableTab.svelte';
 // import PluginTab from './PluginTab';
@@ -19,7 +18,6 @@ export default {
   ViewDataTab,
   TableStructureTab,
   QueryTab,
-  //   InfoPageTab,
   ShellTab,
   ArchiveFileTab,
   FreeTableTab,

packages/web/src/widgets/PluginsWidget.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import AvailablePluginsList from '../plugins/AvailablePluginsList.svelte';
+  import InstalledPluginsList from '../plugins/InstalledPluginsList.svelte';
+
+  import WidgetColumnBar from './WidgetColumnBar.svelte';
+  import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
+</script>
+
+<WidgetColumnBar>
+  <WidgetColumnBarItem title="Installed extensions" name="installed" height="50%">
+    <InstalledPluginsList />
+  </WidgetColumnBarItem>
+  <WidgetColumnBarItem title="Available extensions" name="all">
+    <AvailablePluginsList />
+  </WidgetColumnBarItem>
+</WidgetColumnBar>

packages/web/src/widgets/WidgetContainer.svelte

@@ -3,6 +3,7 @@
   import ArchiveWidget from './ArchiveWidget.svelte';
   import DatabaseWidget from './DatabaseWidget.svelte';
   import FilesWidget from './FilesWidget.svelte';
+  import PluginsWidget from './PluginsWidget.svelte';
 </script>
 
 {#if $selectedWidget == 'database'}
@@ -14,3 +15,6 @@
 {#if $selectedWidget == 'archive'}
   <ArchiveWidget />
 {/if}
+{#if $selectedWidget == 'plugins'}
+  <PluginsWidget />
+{/if}