public cloud widget

packages/web/src/widgets/CloudItemsWidget.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import SavedFilesList from './SavedFilesList.svelte';
+
+  import WidgetColumnBar from './WidgetColumnBar.svelte';
+  import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
+
+  import AppObjectList from '../appobj/AppObjectList.svelte';
+  import * as cloudFileAppObject from '../appobj/CloudFileAppObject.svelte';
+  import { usePublicCloudFiles } from '../utility/metadataLoaders';
+  import { _t } from '../translations';
+
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+
+  $: publicFiles = usePublicCloudFiles();
+</script>
+
+<WidgetColumnBar>
+  <WidgetColumnBarItem title="Public cloud" name="cloud" height="70%" storageName="publicCloudItems">
+    <WidgetsInnerContainer>
+      <AppObjectList list={$publicFiles || []} module={cloudFileAppObject} groupFunc={data => data.folder} />
+    </WidgetsInnerContainer>
+  </WidgetColumnBarItem>
+
+  <WidgetColumnBarItem title="Favorites" name="favorites" storageName="favoritesWidget"></WidgetColumnBarItem>
+</WidgetColumnBar>

packages/web/src/widgets/WidgetContainer.svelte

@@ -9,6 +9,7 @@
   import AppWidget from './AppWidget.svelte';
   import AdminMenuWidget from './AdminMenuWidget.svelte';
   import AdminPremiumPromoWidget from './AdminPremiumPromoWidget.svelte';
+  import CloudItemsWidget from './CloudItemsWidget.svelte';
 </script>
 
 <DatabaseWidget hidden={$visibleSelectedWidget != 'database'} />
@@ -37,3 +38,6 @@
 {#if $visibleSelectedWidget == 'premium'}
   <AdminPremiumPromoWidget />
 {/if}
+{#if $visibleSelectedWidget == 'cloud'}
+  <CloudItemsWidget />
+{/if}

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -67,6 +67,8 @@
       name: 'cloud',
       title: 'DbGate Cloud',
       isCloud: true,
+      iconSignedIn: 'icon cloud-logged',
+      iconPublic: 'icon cloud-public',
     },
     {
       icon: 'icon premium',
@@ -143,8 +145,8 @@
   {/if}
   {#each widgets
     .filter(x => x && hasPermission(`widgets/${x.name}`))
-    .filter(x => !x.isCloud || $cloudSigninToken)
-    .filter(x => !x.isPremiumPromo || !isProApp()) as item}
+    .filter(x => !x.isPremiumPromo || !isProApp())
+    .map(x => (x.isCloud ? { ...x, icon: $cloudSigninToken ? x.iconSignedIn : x.iconPublic } : x)) as item}
     <div
       class="wrapper"
       class:selected={item.name == $visibleSelectedWidget}