Grid icon

frontend/src/components/grid-items.svelte

@@ -115,6 +115,12 @@
       {/if}
     </td>
 
+    <td class="has-icon">
+      <div style:margin-left="{level * 10}px">
+        <Icon name={item.icon} />
+      </div>
+    </td>
+
     {#each columns as column, columnIndex}
       {@const value = column.key?.includes('.') ? resolveKeypath(item, column.key) : item[column.key]}
       <td class:right={column.right} title={value}>
@@ -157,7 +163,15 @@
     cursor: pointer;
   }
   td.has-toggle {
-    width: calc(20px + 0.3rem);
+    width: 20px;
+  }
+  td.has-icon {
+    padding: 0;
+    width: 17px;
+  }
+  td.has-icon :global(svg) {
+    width: 13px;
+    height: 13px;
   }
 
   td .value {

frontend/src/components/grid.svelte

@@ -29,6 +29,7 @@
       <thead>
         <tr>
           <th class="has-toggle"></th>
+          <th class="has-icon"></th>
           {#each columns as column}
             <th scope="col">{column.title || ''}</th>
           {/each}

frontend/src/organisms/connection/dblist.svelte

@@ -82,9 +82,11 @@
     columns={[ { key: 'id' }, { key: 'collCount', right: true } ]}
     items={Object.keys(connection.databases).sort().map(dbKey => ({
       id: dbKey,
+      icon: 'db',
       collCount: Object.keys(connection.databases[dbKey].collections || {}).length || '',
       children: Object.keys(connection.databases[dbKey].collections).sort().map(collKey => ({
         id: collKey,
+        icon: 'list',
         menu: [
           { label: `Drop ${collKey}…`, fn: () => dropCollection(dbKey, collKey) },
           { label: `Drop ${dbKey}…`, fn: () => dropDatabase(dbKey) },