connection app object

packages/web-svelte/src/appobj/AppObjectCore.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let isBold;
+  export let prefix;
+  export let icon;
+  export let isBusy;
+  export let title;
+  export let statusIcon;
+  export let statusTitle;
+  export let extInfo;
+</script>
+
+<div class="main" class:isBold draggable>
+  {prefix}
+  {#if isBusy}
+    <FontIcon icon="icon loading" />
+  {:else}
+    <FontIcon {icon} />
+  {/if}
+  {title}
+  {#if statusIcon}
+    <span class="status">
+      <FontIcon icon={statusIcon} title={statusTitle} />
+    </span>
+  {/if}
+  {#if extInfo}
+    <span class="ext-info">
+      {extInfo}
+    </span>
+  {/if}
+</div>
+<slot />
+
+<style>
+  .main {
+    padding: 5px;
+    cursor: pointer;
+    white-space: nowrap;
+    font-weight: normal;
+  }
+  .isBold {
+    font-weight: bold;
+  }
+  .status {
+    margin-left: 5px;
+  }
+  .ext-info {
+    font-weight: normal;
+    margin-left: 5px;
+    color: vra(--theme-font-3);
+  }
+</style>

packages/web-svelte/src/appobj/AppObjectList.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import AppObjectListItem from './AppObjectListItem.svelte';
+
+  export let groupFunc;
+  export let list;
+  export let component;
+</script>
+
+{#each list as data}
+  <AppObjectListItem {component} {data} />
+{/each}

packages/web-svelte/src/appobj/AppObjectListItem.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let component;
+  export let data;
+
+  let isExpanded = false;
+</script>
+
+<svelte:component this={component} {data} />

packages/web-svelte/src/appobj/ConnectionAppObject.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import AppObjectCore from './AppObjectCore.svelte';
+
+  export let commonProps;
+  export let data;
+
+</script>
+
+<AppObjectCore {...commonProps} title={data.displayName || data.server} icon="img server" />

packages/web-svelte/src/icons/FontIcon.svelte

@@ -1,5 +1,6 @@
 <script>
   export let icon;
+  export let title = null;
 
   const iconNames = {
     'icon minus-box': 'mdi mdi-minus-box-outline',
@@ -101,4 +102,4 @@
   };
 </script>
 
-<span class={iconNames[icon] || icon} />
+<span class={iconNames[icon] || icon} {title} />

packages/web-svelte/src/stores.ts

@@ -1,4 +1,7 @@
 import { writable } from 'svelte/store';
 
 export const selectedWidget = writable('database');
+export const openedConnections = writable([]);
+export const currentDatabase = writable(null);
+
 // export const leftPanelWidth = writable(300);

packages/web-svelte/src/widgets/ConnectionList.svelte

@@ -1,16 +1,29 @@
 <script lang="ts">
+  import _ from 'lodash';
   import InlineButton from './InlineButton.svelte';
   import SearchInput from './SearchInput.svelte';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
-  import { useConnectionList } from '../utility/metadataLoaders';
+  import { useConnectionList, useServerStatus } from '../utility/metadataLoaders';
-import SearchBoxWrapper from './SearchBoxWrapper.svelte';
+  import SearchBoxWrapper from './SearchBoxWrapper.svelte';
+  import AppObjectList from '../appobj/AppObjectList.svelte';
+  import ConnectionAppObject from '../appobj/ConnectionAppObject.svelte';
 
   const connections = useConnectionList();
-  $: console.log('CONNECTIONS', $connections);
+  const serverStatus = useServerStatus();
+
+  $: connectionsWithStatus =
+    $connections && $serverStatus
+      ? $connections.map(conn => ({ ...conn, status: $serverStatus[conn._id] }))
+      : $connections;
 </script>
 
 <SearchBoxWrapper>
   <SearchInput placeholder="Search connection" />
   <InlineButton>Refresh</InlineButton>
 </SearchBoxWrapper>
-<WidgetsInnerContainer>CONNECTIONS</WidgetsInnerContainer>
+<WidgetsInnerContainer>
+  <AppObjectList
+    list={_.sortBy(connectionsWithStatus, ({ displayName, server }) => (displayName || server || '').toUpperCase())}
+    component={ConnectionAppObject}
+  />
+</WidgetsInnerContainer>