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>