From 0676a4ca893e9313a7b3ad02898919bc34319cb5 Mon Sep 17 00:00:00 2001
From: Wilfred Asomani <devwilfredagyei@gmail.com>
Date: Wed, 1 Mar 2023 13:56:49 +0000
Subject: [PATCH] web/satellite: use correct table icons

This change uses the corresponding icons for different types of files
in the file browser.

Issue: https://github.com/storj/storj/issues/5477

Change-Id: I8b10ac4ece03563a465c7823a1e7482244a324b9
---
 .../src/components/browser/FileBrowser.vue    | 15 +----
 .../src/components/browser/FileEntry.vue      | 34 +++++++++-
 .../components/browser/LockedFilesEntry.vue   |  2 +-
 .../src/components/browser/UpEntry.vue        | 22 +++++++
 .../src/components/common/TableItem.vue       | 66 +++++++++++++++----
 .../src/components/objects/BucketItem.vue     |  3 +-
 .../static/images/browser/tableLocked.svg     |  1 -
 web/satellite/static/images/objects/audio.svg |  3 +
 .../static/images/objects/chevronLeft.svg     |  3 +
 .../static/images/objects/colorBucket.svg     |  3 +
 .../static/images/objects/colorFolder.svg     |  5 ++
 web/satellite/static/images/objects/graph.svg |  3 +
 web/satellite/static/images/objects/pdf.svg   |  6 ++
 .../static/images/objects/picture.svg         |  3 +
 web/satellite/static/images/objects/txt.svg   |  3 +
 web/satellite/static/images/objects/video.svg |  3 +
 web/satellite/static/images/objects/zip.svg   | 14 ++++
 17 files changed, 158 insertions(+), 31 deletions(-)
 create mode 100644 web/satellite/src/components/browser/UpEntry.vue
 create mode 100644 web/satellite/static/images/objects/audio.svg
 create mode 100644 web/satellite/static/images/objects/chevronLeft.svg
 create mode 100644 web/satellite/static/images/objects/colorBucket.svg
 create mode 100644 web/satellite/static/images/objects/colorFolder.svg
 create mode 100644 web/satellite/static/images/objects/graph.svg
 create mode 100644 web/satellite/static/images/objects/pdf.svg
 create mode 100644 web/satellite/static/images/objects/picture.svg
 create mode 100644 web/satellite/static/images/objects/txt.svg
 create mode 100644 web/satellite/static/images/objects/video.svg
 create mode 100644 web/satellite/static/images/objects/zip.svg

diff --git a/web/satellite/src/components/browser/FileBrowser.vue b/web/satellite/src/components/browser/FileBrowser.vue
index 5ee2ebe97..645e702ec 100644
--- a/web/satellite/src/components/browser/FileBrowser.vue
+++ b/web/satellite/src/components/browser/FileBrowser.vue
@@ -148,19 +148,7 @@
                                 <th class="files-uploading-count__content" />
                             </tr>
 
-                            <tr v-if="path.length > 0" class="up-button">
-                                <th class="align-left data up-button__content">
-                                    <span @click.prevent="onBack">
-                                        <a
-                                            id="navigate-back"
-                                            href="javascript:null"
-                                        >...</a>
-                                    </span>
-                                </th>
-                                <th class="up-button__content" />
-                                <th class="up-button__content" />
-                                <th class="up-button__content" />
-                            </tr>
+                            <up-entry v-if="path.length > 0" :on-back="onBack" />
 
                             <locked-files-entry v-if="lockedFilesEntryDisplayed" />
 
@@ -224,6 +212,7 @@ import VButton from '@/components/common/VButton.vue';
 import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue';
 import VTable from '@/components/common/VTable.vue';
 import MultiplePassphraseBanner from '@/components/browser/MultiplePassphrasesBanner.vue';
+import UpEntry from '@/components/browser/UpEntry.vue';
 
 import FileIcon from '@/../static/images/objects/file.svg';
 import BlackArrowExpand from '@/../static/images/common/BlackArrowExpand.svg';
diff --git a/web/satellite/src/components/browser/FileEntry.vue b/web/satellite/src/components/browser/FileEntry.vue
index 080ef41d4..fbe33ac01 100644
--- a/web/satellite/src/components/browser/FileEntry.vue
+++ b/web/satellite/src/components/browser/FileEntry.vue
@@ -8,7 +8,7 @@
         :on-click="selectFile"
         :on-primary-click="openModal"
         :item="{'name': file.Key, 'size': size, 'date': uploadDate}"
-        table-type="file"
+        :item-type="fileType"
     >
         <th slot="options" v-click-outside="closeDropdown" class="file-entry__functional options overflow-visible" @click.stop="openDropdown">
             <div
@@ -64,7 +64,7 @@
         :selected="isFileSelected"
         :on-click="selectFile"
         :on-primary-click="openBucket"
-        table-type="folder"
+        item-type="folder"
     >
         <th slot="options" v-click-outside="closeDropdown" class="file-entry__functional options overflow-visible" @click.stop="openDropdown">
             <div
@@ -137,6 +137,36 @@ const emit = defineEmits(['onUpdate']);
 
 const deleteConfirmation = ref(false);
 
+/**
+ * Return the type of the file.
+ */
+const fileType = computed((): string => {
+    const image = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
+    const video = /(\.mp4|\.mkv|\.mov)$/i;
+    const audio = /(\.mp3|\.aac|\.wav|\.m4a)$/i;
+    const text = /(\.txt|\.docx|\.doc|\.pages)$/i;
+    const pdf = /(\.pdf)$/i;
+    const archive = /(\.zip|\.tar.gz|\.7z|\.rar)$/i;
+    const spreadsheet = /(\.xls|\.numbers|\.csv|\.xlsx|\.tsv)$/i;
+
+    if (image.exec(props.file.Key)) {
+        return 'image';
+    } else if (video.exec(props.file.Key)) {
+        return 'video';
+    } else if (audio.exec(props.file.Key)) {
+        return 'audio';
+    } else if (text.exec(props.file.Key)) {
+        return 'text';
+    } else if (pdf.exec(props.file.Key)) {
+        return 'pdf';
+    } else if (archive.exec(props.file.Key)) {
+        return 'archive';
+    } else if (spreadsheet.exec(props.file.Key)) {
+        return 'spreadsheet';
+    }
+    return 'file';
+});
+
 /**
  * Return the size of the file formatted.
  */
diff --git a/web/satellite/src/components/browser/LockedFilesEntry.vue b/web/satellite/src/components/browser/LockedFilesEntry.vue
index 7caddcce2..05caf903a 100644
--- a/web/satellite/src/components/browser/LockedFilesEntry.vue
+++ b/web/satellite/src/components/browser/LockedFilesEntry.vue
@@ -6,7 +6,7 @@
         :on-click="openModal"
         :on-primary-click="openModal"
         :item="{'name': 'Objects locked', 'size': '', 'date': ''}"
-        table-type="locked"
+        item-type="locked"
     >
         <th slot="options" />
     </table-item>
diff --git a/web/satellite/src/components/browser/UpEntry.vue b/web/satellite/src/components/browser/UpEntry.vue
new file mode 100644
index 000000000..c81eae513
--- /dev/null
+++ b/web/satellite/src/components/browser/UpEntry.vue
@@ -0,0 +1,22 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <table-item
+        :on-click="onBack"
+        :on-primary-click="onBack"
+        :item="{'name': 'Back', 'size': '', 'date': ''}"
+        item-type="back"
+    >
+        <th slot="options" />
+    </table-item>
+</template>
+
+<script setup lang="ts">
+import TableItem from '@/components/common/TableItem.vue';
+
+const props = defineProps<{
+    onBack: () => void;
+}>();
+
+</script>
diff --git a/web/satellite/src/components/common/TableItem.vue b/web/satellite/src/components/common/TableItem.vue
index af414aacd..4946b12bc 100644
--- a/web/satellite/src/components/common/TableItem.vue
+++ b/web/satellite/src/components/common/TableItem.vue
@@ -18,12 +18,11 @@
                 <p v-for="str in val" :key="str" class="array-val">{{ str }}</p>
             </div>
             <div v-else class="table-item">
-                <TableLockedIcon v-if="(tableType.toLowerCase() === 'locked') && (index === 0)" class="item-icon" />
-                <BucketIcon v-if="(tableType.toLowerCase() === 'bucket') && (index === 0)" class="item-icon" />
-                <FileIcon v-else-if="(tableType.toLowerCase() === 'file') && (index === 0)" class="item-icon" />
-                <FolderIcon v-else-if="(tableType.toLowerCase() === 'folder') && (index === 0)" class="item-icon" />
+                <div v-if="icon && index === 0" class="item-icon file-background">
+                    <component :is="icon" />
+                </div>
                 <p :class="{primary: index === 0}" @click.stop="(e) => cellContentClicked(index, e)">
-                    <middle-truncate v-if="(tableType.toLowerCase() === 'file')" :text="val" />
+                    <middle-truncate v-if="(itemType.toLowerCase() === 'file')" :text="val" />
                     <span v-else>{{ val }}</span>
                 </p>
                 <div v-if="showBucketGuide(index)" class="animation">
@@ -37,46 +36,73 @@
 </template>
 
 <script setup lang="ts">
+import { computed, VueConstructor } from 'vue';
+
 import VTableCheckbox from '@/components/common/VTableCheckbox.vue';
 import BucketGuide from '@/components/objects/BucketGuide.vue';
 import MiddleTruncate from '@/components/browser/MiddleTruncate.vue';
 
 import TableLockedIcon from '@/../static/images/browser/tableLocked.svg';
-import FolderIcon from '@/../static/images/objects/folder.svg';
-import BucketIcon from '@/../static/images/objects/bucketIcon.svg';
+import ColorFolderIcon from '@/../static/images/objects/colorFolder.svg';
+import ColorBucketIcon from '@/../static/images/objects/colorBucket.svg';
 import FileIcon from '@/../static/images/objects/file.svg';
+import AudioIcon from '@/../static/images/objects/audio.svg';
+import VideoIcon from '@/../static/images/objects/video.svg';
+import ChevronLeftIcon from '@/../static/images/objects/chevronLeft.svg';
+import GraphIcon from '@/../static/images/objects/graph.svg';
+import PdfIcon from '@/../static/images/objects/pdf.svg';
+import PictureIcon from '@/../static/images/objects/picture.svg';
+import TxtIcon from '@/../static/images/objects/txt.svg';
+import ZipIcon from '@/../static/images/objects/zip.svg';
 
 const props = withDefaults(defineProps<{
     selectDisabled?: boolean;
     selected?: boolean;
     selectable?: boolean;
     showGuide?: boolean;
-    tableType?: string;
+    itemType?: string;
     item?: object;
     onClick?: (data?: unknown) => void;
-    // event for the first cell of this item.
     hideGuide?: () => void;
+    // event for the first cell of this item.
     onPrimaryClick?: (data?: unknown) => void;
 }>(), {
     selectDisabled: false,
     selected: false,
     selectable: false,
     showGuide: false,
-    tableType: 'none',
+    itemType: 'none',
     item: () => ({}),
     onClick: () => {},
     hideGuide: () => {},
-    onPrimaryClick: null,
+    onPrimaryClick: (_) => {},
 });
 
 const emit = defineEmits(['selectChange']);
 
+const icons = new Map<string, VueConstructor>([
+    ['locked', TableLockedIcon],
+    ['bucket', ColorBucketIcon],
+    ['folder', ColorFolderIcon],
+    ['file', FileIcon],
+    ['audio', AudioIcon],
+    ['video', VideoIcon],
+    ['back', ChevronLeftIcon],
+    ['spreadsheet', GraphIcon],
+    ['pdf', PdfIcon],
+    ['image', PictureIcon],
+    ['text', TxtIcon],
+    ['archive', ZipIcon],
+]);
+
+const icon = computed(() => icons.get(props.itemType.toLowerCase()));
+
 function onChange(value: boolean): void {
     emit('selectChange', value);
 }
 
 function showBucketGuide(index: number): boolean {
-    return (props.tableType.toLowerCase() === 'bucket') && (index === 0) && props.showGuide;
+    return (props.itemType?.toLowerCase() === 'bucket') && (index === 0) && !!props.showGuide;
 }
 
 function cellContentClicked(cellIndex: number, event: Event) {
@@ -85,7 +111,9 @@ function cellContentClicked(cellIndex: number, event: Event) {
         return;
     }
     // trigger default item onClick instead.
-    props.onClick();
+    if (props.onClick) {
+        props.onClick();
+    }
 }
 </script>
 
@@ -200,4 +228,16 @@ function cellContentClicked(cellIndex: number, event: Event) {
         margin-right: 12px;
         min-width: 18px;
     }
+
+    .file-background {
+        background: var(--c-white);
+        border: 1px solid var(--c-grey-2);
+        padding: 2px;
+        border-radius: 8px;
+        height: 32px;
+        width: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 </style>
diff --git a/web/satellite/src/components/objects/BucketItem.vue b/web/satellite/src/components/objects/BucketItem.vue
index 271e8bcd0..8b9a60f16 100644
--- a/web/satellite/src/components/objects/BucketItem.vue
+++ b/web/satellite/src/components/objects/BucketItem.vue
@@ -5,9 +5,10 @@
     <table-item
         :item="itemToRender"
         :on-click="onClick"
+        :on-primary-click="onClick"
         :show-guide="shouldShowGuide"
         :hide-guide="hideGuidePermanently"
-        table-type="bucket"
+        item-type="bucket"
     >
         <th slot="options" v-click-outside="closeDropdown" :class="{active: isDropdownOpen}" class="bucket-item__functional options overflow-visible" @click.stop="openDropdown(dropdownKey)">
             <dots-icon />
diff --git a/web/satellite/static/images/browser/tableLocked.svg b/web/satellite/static/images/browser/tableLocked.svg
index e65778ea1..988e5bb58 100644
--- a/web/satellite/static/images/browser/tableLocked.svg
+++ b/web/satellite/static/images/browser/tableLocked.svg
@@ -1,4 +1,3 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#EBEEF1"/>
     <path d="M16.3336 6C20.1891 6 23.3218 9.09424 23.3841 12.9349L23.3851 13.0515L23.3852 14.5522C23.7295 14.7972 24.0077 15.1142 24.2114 15.4953L24.2554 15.5799C24.4834 16.0328 24.6065 16.5243 24.6116 17.7271V21.1595C24.6116 22.4949 24.4725 22.9792 24.2114 23.4674C23.9503 23.9556 23.5672 24.3388 23.079 24.5999L22.9943 24.6438C22.5415 24.8718 22.0499 24.9949 20.8472 24.9998L11.8961 25C10.5606 25 10.0764 24.861 9.58816 24.5999C9.09995 24.3388 8.7168 23.9556 8.4557 23.4674L8.42554 23.4099C8.18874 22.9493 8.06074 22.4624 8.05556 21.2356V17.8032C8.05556 16.4677 8.1946 15.9835 8.4557 15.4953C8.65947 15.1142 8.93759 14.7972 9.28197 14.5522L9.28207 13.0515C9.28207 9.15706 12.4391 6 16.3336 6ZM20.7711 15.6971L11.8271 15.6972L11.651 15.6987C10.8882 15.7082 10.6517 15.7609 10.4061 15.8923C10.2202 15.9917 10.0846 16.1273 9.98515 16.3132L9.95758 16.3672C9.84629 16.5967 9.7992 16.8562 9.79124 17.5641L9.79 17.8031L9.79013 21.2285L9.79156 21.4046C9.80113 22.1674 9.85381 22.4038 9.98515 22.6494C10.0846 22.8354 10.2202 22.971 10.4061 23.0704L10.4601 23.098C10.6896 23.2093 10.9491 23.2564 11.6571 23.2643L11.8961 23.2656L20.8945 23.2653C21.7503 23.2608 22.0038 23.208 22.261 23.0704C22.447 22.971 22.5825 22.8354 22.682 22.6494L22.7095 22.5954C22.8208 22.366 22.8679 22.1064 22.8759 21.3985L22.8771 21.1595L22.8768 17.6798C22.8724 16.8239 22.8196 16.5705 22.682 16.3132C22.5825 16.1273 22.447 15.9917 22.261 15.8923L22.207 15.8647C21.9775 15.7534 21.718 15.7063 21.0101 15.6983L20.7711 15.6971ZM16.4912 17.5892C17.275 17.5892 17.9103 18.2246 17.9103 19.0083C17.9103 19.4654 17.6942 19.872 17.3586 20.1316L17.3585 20.6639C17.3585 21.1429 16.9702 21.5311 16.4912 21.5311C16.0123 21.5311 15.624 21.1429 15.624 20.6639L15.6241 20.1317C15.2883 19.8722 15.0722 19.4655 15.0722 19.0083C15.0722 18.2246 15.7075 17.5892 16.4912 17.5892ZM16.3336 7.73444C13.4264 7.73444 11.0642 10.0676 11.0172 12.9636L11.0165 13.0515L11.0164 13.9902C11.2443 13.9733 11.5082 13.9641 11.82 13.9628L20.7711 13.9627C21.1163 13.9627 21.4046 13.9719 21.6509 13.9902L21.6506 13.0515C21.6506 10.115 19.2701 7.73444 16.3336 7.73444Z" fill="#0218A7"/>
 </svg>
diff --git a/web/satellite/static/images/objects/audio.svg b/web/satellite/static/images/objects/audio.svg
new file mode 100644
index 000000000..c2663887a
--- /dev/null
+++ b/web/satellite/static/images/objects/audio.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.0565 1.96903C18.1425 2.03306 18.2123 2.11631 18.2603 2.21212C18.3084 2.30794 18.3334 2.41367 18.3333 2.52086V14.8959C18.3334 14.92 18.3321 14.9442 18.3297 14.9683C18.3649 15.692 18.1542 16.4064 17.7317 16.995C17.3093 17.5837 16.7 18.0121 16.0031 18.2103C15.3061 18.4086 14.5626 18.3651 13.8935 18.087C13.2245 17.8089 12.6693 17.3124 12.3183 16.6785C11.9673 16.0446 11.8413 15.3106 11.9606 14.5959C12.08 13.8812 12.4378 13.228 12.9757 12.7425C13.5137 12.2571 14.2001 11.9681 14.9232 11.9225C15.6464 11.8769 16.3637 12.0774 16.9583 12.4914V7.11153L9.16666 9.44903V16.7292C9.1667 16.7534 9.16547 16.7776 9.16299 16.8016C9.19826 17.5253 8.98752 18.2397 8.56506 18.8284C8.1426 19.4171 7.53332 19.8454 6.83639 20.0437C6.13947 20.242 5.39595 20.1985 4.72688 19.9203C4.05781 19.6422 3.50259 19.1458 3.15162 18.5118C2.80065 17.8779 2.67459 17.1439 2.79397 16.4292C2.91335 15.7145 3.27113 15.0613 3.80907 14.5759C4.34701 14.0905 5.03343 13.8014 5.75658 13.7558C6.47972 13.7102 7.19701 13.9108 7.79166 14.3248V5.27086C7.7917 5.12312 7.83933 4.97933 7.9275 4.86078C8.01567 4.74224 8.13968 4.65524 8.28116 4.6127L17.4478 1.8627C17.5505 1.8317 17.6591 1.82517 17.7648 1.84363C17.8705 1.8621 17.9704 1.90504 18.0565 1.96903ZM9.16666 8.01353L16.9583 5.67603V3.44486L9.16666 5.78236V8.01353ZM5.95832 15.125C5.47209 15.125 5.00578 15.3182 4.66196 15.662C4.31814 16.0058 4.12499 16.4721 4.12499 16.9584C4.12499 17.4446 4.31814 17.9109 4.66196 18.2547C5.00578 18.5985 5.47209 18.7917 5.95832 18.7917C6.44455 18.7917 6.91087 18.5985 7.25469 18.2547C7.5985 17.9109 7.79166 17.4446 7.79166 16.9584C7.79166 16.4721 7.5985 16.0058 7.25469 15.662C6.91087 15.3182 6.44455 15.125 5.95832 15.125ZM13.2917 15.125C13.2917 15.6113 13.4848 16.0776 13.8286 16.4214C14.1724 16.7652 14.6388 16.9584 15.125 16.9584C15.6112 16.9584 16.0775 16.7652 16.4214 16.4214C16.7652 16.0776 16.9583 15.6113 16.9583 15.125C16.9583 14.6388 16.7652 14.1725 16.4214 13.8287C16.0775 13.4848 15.6112 13.2917 15.125 13.2917C14.6388 13.2917 14.1724 13.4848 13.8286 13.8287C13.4848 14.1725 13.2917 14.6388 13.2917 15.125Z" fill="#FF8A00"/>
+</svg>
diff --git a/web/satellite/static/images/objects/chevronLeft.svg b/web/satellite/static/images/objects/chevronLeft.svg
new file mode 100644
index 000000000..1b6cc3fb9
--- /dev/null
+++ b/web/satellite/static/images/objects/chevronLeft.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.6989 9.4802C4.44017 9.22148 4.43386 8.80592 4.67996 8.53954L4.6989 8.51985L12.1198 1.09892C12.385 0.833726 12.815 0.833726 13.0802 1.09892C13.3389 1.35765 13.3452 1.77321 13.0991 2.03958L13.0802 2.05928L6.13935 8.99994L13.0802 15.9408C13.3389 16.1995 13.3452 16.6151 13.0991 16.8814L13.0802 16.9011C12.8215 17.1599 12.4059 17.1662 12.1395 16.9201L12.1198 16.9011L4.6989 9.4802Z" fill="black"/>
+</svg>
diff --git a/web/satellite/static/images/objects/colorBucket.svg b/web/satellite/static/images/objects/colorBucket.svg
new file mode 100644
index 000000000..445210b67
--- /dev/null
+++ b/web/satellite/static/images/objects/colorBucket.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.3549 7.54665C16.762 8.95376 16.7748 11.227 15.3778 12.624C14.8117 13.1901 14.1018 13.5247 13.3639 13.6289L13.1106 15.0638C13.092 16.1897 10.7878 17.1 7.94808 17.1C5.12541 17.1 2.83185 16.2006 2.78626 15.0841L2.78583 15.0638L0.844654 4.06597C0.822799 3.98819 0.808818 3.90946 0.803034 3.82992L0.799988 3.81221L0.801889 3.81231C0.800624 3.79028 0.799988 3.76818 0.799988 3.74602C0.799988 2.17422 4.0003 0.900024 7.94808 0.900024C11.8959 0.900024 15.0962 2.17422 15.0962 3.74602C15.0962 3.76818 15.0955 3.79028 15.0943 3.81231L15.0962 3.81221L15.093 3.83111C15.0872 3.90975 15.0734 3.98759 15.0519 4.06451L14.5749 6.76662L15.3549 7.54665ZM13.2961 5.63437C11.9867 6.22183 10.076 6.59202 7.94808 6.59202C5.82026 6.59202 3.90959 6.22185 2.60014 5.63443L4.00723 13.6077L4.23729 14.8286L4.25861 14.8452C4.37893 14.9354 4.56514 15.0371 4.80696 15.1351L4.85606 15.1546C5.63551 15.4594 6.74619 15.6439 7.94808 15.6439C9.15691 15.6439 10.2733 15.4573 11.0527 15.1497C11.3337 15.0388 11.5431 14.9223 11.6661 14.8231L11.6761 14.8148L11.9019 13.5348C11.3338 13.3787 10.7955 13.0812 10.3429 12.6429L10.3004 12.6011L7.37488 9.67558C7.09056 9.39126 7.09056 8.93029 7.37488 8.64597C7.65226 8.36859 8.09779 8.36182 8.38338 8.62568L8.40449 8.64597L11.33 11.5715C11.5717 11.8132 11.8555 11.9861 12.1569 12.0901L13.2961 5.63437ZM14.2661 8.51698L13.6408 12.0597C13.8989 11.9575 14.1402 11.8024 14.3482 11.5944C15.1641 10.7784 15.1664 9.44942 14.3549 8.60652L14.3253 8.57627L14.2661 8.51698ZM7.94808 2.35612C6.20125 2.35612 4.58125 2.62893 3.43223 3.08641C2.93851 3.28298 2.57117 3.49947 2.35976 3.69848C2.34629 3.71116 2.33399 3.72325 2.32283 3.73469L2.31221 3.74589L2.33142 3.76606L2.35976 3.79357C2.57117 3.99258 2.93851 4.20906 3.43223 4.40564C4.58125 4.86312 6.20125 5.13593 7.94808 5.13593C9.6949 5.13593 11.3149 4.86312 12.4639 4.40564C12.9576 4.20906 13.325 3.99258 13.5364 3.79357C13.5499 3.78089 13.5622 3.7688 13.5733 3.75735L13.5841 3.74589L13.5647 3.72599L13.5364 3.69848C13.325 3.49947 12.9576 3.28298 12.4639 3.08641C11.3149 2.62893 9.6949 2.35612 7.94808 2.35612Z" fill="#0149FF"/>
+</svg>
diff --git a/web/satellite/static/images/objects/colorFolder.svg b/web/satellite/static/images/objects/colorFolder.svg
new file mode 100644
index 000000000..a8a2c2b2c
--- /dev/null
+++ b/web/satellite/static/images/objects/colorFolder.svg
@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.09215 1.8388C7.26202 1.87058 7.41299 1.92335 7.56566 2.00432L7.61412 2.03075C7.74789 2.10599 7.88155 2.20167 8.19074 2.45465L10.3211 4.19769H13.4951C14.7484 4.19769 15.2029 4.32818 15.6611 4.57322C16.1193 4.81826 16.4788 5.17784 16.7239 5.63603L16.7502 5.68603C16.9782 6.12832 17.0994 6.59425 17.0994 7.80196V12.492C17.0994 13.984 16.9441 14.5251 16.6523 15.0705C16.3606 15.616 15.9326 16.044 15.3871 16.3358L15.3325 16.3645L15.2787 16.3918C14.775 16.6428 14.2218 16.778 12.8812 16.7828H5.19021C3.69821 16.7828 3.15717 16.6275 2.61172 16.3358C2.06626 16.044 1.63819 15.616 1.34647 15.0705L1.31776 15.0159C1.04929 14.497 0.904458 13.9534 0.899414 12.5658V4.91027C0.899414 4.15385 1.02131 3.65274 1.25099 3.21855C1.48068 2.78435 1.81814 2.44241 2.24927 2.20702C2.68039 1.97163 3.17985 1.84313 3.9362 1.83315L6.41411 1.80067L6.54037 1.80017C6.8263 1.80057 6.95334 1.81284 7.09215 1.8388ZM6.4743 3.27288L6.34207 3.27427L3.95563 3.30575L3.84857 3.30815C3.41715 3.32204 3.16527 3.38483 2.95501 3.49963C2.77753 3.59654 2.64736 3.72844 2.5528 3.90718C2.43831 4.12362 2.37872 4.38281 2.37266 4.83204C2.3761 4.85597 2.37825 4.88005 2.37921 4.90444L2.37979 4.93405C2.37979 5.49662 2.82707 5.95471 3.38541 5.97212L3.41838 5.97264H6.88319C6.94696 5.97264 7.0092 5.95443 7.06271 5.92043L7.08508 5.9049L8.64234 4.72714L7.17904 3.53001C7.00186 3.3863 6.93894 3.34085 6.88903 3.31271L6.87567 3.30541C6.85452 3.29419 6.84488 3.29082 6.82135 3.28642L6.7903 3.28147L6.76909 3.27904C6.71617 3.27382 6.63655 3.27173 6.4743 3.27288Z" fill="#FFC600"/>
+<path d="M7.09215 1.8388C7.26202 1.87058 7.41299 1.92335 7.56566 2.00432L7.61412 2.03075C7.74789 2.10599 7.88155 2.20167 8.19074 2.45465L10.3211 4.19769H13.4951C14.7484 4.19769 15.2029 4.32818 15.6611 4.57322C16.1193 4.81826 16.4788 5.17784 16.7239 5.63603L16.7502 5.68603C16.9782 6.12832 17.0994 6.59425 17.0994 7.80196V12.492C17.0994 13.984 16.9441 14.5251 16.6523 15.0705C16.3606 15.616 15.9326 16.044 15.3871 16.3358L15.3325 16.3645L15.2787 16.3918C14.775 16.6428 14.2218 16.778 12.8812 16.7828H5.19021C3.69821 16.7828 3.15717 16.6275 2.61172 16.3358C2.06626 16.044 1.63819 15.616 1.34647 15.0705L1.31776 15.0159C1.04929 14.497 0.904458 13.9534 0.899414 12.5658V4.91027C0.899414 4.15385 1.02131 3.65274 1.25099 3.21855C1.48068 2.78435 1.81814 2.44241 2.24927 2.20702C2.68039 1.97163 3.17985 1.84313 3.9362 1.83315L6.41411 1.80067L6.54037 1.80017C6.8263 1.80057 6.95334 1.81284 7.09215 1.8388ZM7.97338 7.07956C7.67315 7.30661 7.30988 7.43399 6.93446 7.44464L6.88319 7.44536H3.41838C3.04498 7.44536 2.69062 7.36387 2.3721 7.2177V12.5606L2.37361 12.7417L2.37541 12.8619C2.39131 13.7189 2.4664 14.0417 2.64514 14.376C2.7996 14.6648 3.01745 14.8826 3.30625 15.0371L3.34819 15.059L3.3931 15.0812C3.71637 15.2359 4.0763 15.2997 4.94968 15.3089L5.19021 15.3101L12.9319 15.3098C13.9739 15.3046 14.3292 15.2314 14.6926 15.0371C14.9814 14.8826 15.1992 14.6648 15.3537 14.376L15.3756 14.334L15.3978 14.2891C15.5525 13.9659 15.6163 13.6059 15.6255 12.7325L15.6267 12.492V7.80196C15.6267 6.88165 15.574 6.60875 15.4252 6.33056C15.3174 6.12903 15.1681 5.97967 14.9665 5.87189L14.9317 5.85379C14.6703 5.72175 14.3896 5.67256 13.5518 5.67049L9.83672 5.67035L7.97338 7.07956Z" fill="white"/>
+<path d="M7.09215 1.8388C7.26202 1.87058 7.41299 1.92335 7.56566 2.00432L7.61412 2.03075C7.74789 2.10599 7.88155 2.20167 8.19074 2.45465L10.3211 4.19769H13.4951C14.7484 4.19769 15.2029 4.32818 15.6611 4.57322C16.1193 4.81826 16.4788 5.17784 16.7239 5.63603L16.7502 5.68603C16.9782 6.12832 17.0994 6.59425 17.0994 7.80196V12.492C17.0994 13.984 16.9441 14.5251 16.6523 15.0705C16.3606 15.616 15.9326 16.044 15.3871 16.3358L15.3325 16.3645L15.2787 16.3918C14.775 16.6428 14.2218 16.778 12.8812 16.7828H5.19021C3.69821 16.7828 3.15717 16.6275 2.61172 16.3358C2.06626 16.044 1.63819 15.616 1.34647 15.0705L1.31776 15.0159C1.04929 14.497 0.904458 13.9534 0.899414 12.5658V4.91027C0.899414 4.15385 1.02131 3.65274 1.25099 3.21855C1.48068 2.78435 1.81814 2.44241 2.24927 2.20702C2.68039 1.97163 3.17985 1.84313 3.9362 1.83315L6.41411 1.80067L6.54037 1.80017C6.8263 1.80057 6.95334 1.81284 7.09215 1.8388ZM7.97338 7.07956C7.67315 7.30661 7.30988 7.43399 6.93446 7.44464L6.88319 7.44536H3.41838C3.04498 7.44536 2.69062 7.36387 2.3721 7.2177V12.5606L2.37361 12.7417L2.37541 12.8619C2.39131 13.7189 2.4664 14.0417 2.64514 14.376C2.7996 14.6648 3.01745 14.8826 3.30625 15.0371L3.34819 15.059L3.3931 15.0812C3.71637 15.2359 4.0763 15.2997 4.94968 15.3089L5.19021 15.3101L12.9319 15.3098C13.9739 15.3046 14.3292 15.2314 14.6926 15.0371C14.9814 14.8826 15.1992 14.6648 15.3537 14.376L15.3756 14.334L15.3978 14.2891C15.5525 13.9659 15.6163 13.6059 15.6255 12.7325L15.6267 12.492V7.80196C15.6267 6.88165 15.574 6.60875 15.4252 6.33056C15.3174 6.12903 15.1681 5.97967 14.9665 5.87189L14.9317 5.85379C14.6703 5.72175 14.3896 5.67256 13.5518 5.67049L9.83672 5.67035L7.97338 7.07956ZM6.4743 3.27288L6.34207 3.27427L3.95563 3.30575L3.84857 3.30815C3.41715 3.32204 3.16527 3.38483 2.95501 3.49963C2.77753 3.59654 2.64736 3.72844 2.5528 3.90718C2.43831 4.12362 2.37872 4.38281 2.37266 4.83204C2.3761 4.85597 2.37825 4.88005 2.37921 4.90444L2.37979 4.93405C2.37979 5.49662 2.82707 5.95471 3.38541 5.97212L3.41838 5.97264H6.88319C6.94696 5.97264 7.0092 5.95443 7.06271 5.92043L7.08508 5.9049L8.64234 4.72714L7.17904 3.53001C7.00186 3.3863 6.93894 3.34085 6.88903 3.31271L6.87567 3.30541C6.85452 3.29419 6.84488 3.29082 6.82135 3.28642L6.7903 3.28147L6.76909 3.27904C6.71617 3.27382 6.63655 3.27173 6.4743 3.27288Z" fill="#FFA800"/>
+</svg>
diff --git a/web/satellite/static/images/objects/graph.svg b/web/satellite/static/images/objects/graph.svg
new file mode 100644
index 000000000..f13589c52
--- /dev/null
+++ b/web/satellite/static/images/objects/graph.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0916 3C13.6844 3 13.3524 3.32205 13.3365 3.72533L13.3359 3.75573L13.3359 15.9504H12.2673L12.2672 8.29008C12.2672 7.88288 11.9451 7.5509 11.5418 7.53495L11.5115 7.53435H8.52671C8.11951 7.53435 7.78753 7.8564 7.77158 8.25968L7.77098 8.29008L7.77102 15.9504H6.63359V12.9618C6.63359 12.5546 6.31154 12.2227 5.90826 12.2067L5.87786 12.2061H2.89312C2.48592 12.2061 2.15395 12.5282 2.13799 12.9314L2.13739 12.9618L2.13744 15.9504H1.75573C1.33835 15.9504 1 16.2887 1 16.7061C1 17.1133 1.32205 17.4453 1.72533 17.4612L1.75573 17.4618H18.2443C18.6617 17.4618 19 17.1235 19 16.7061C19 16.2989 18.678 15.9669 18.2747 15.951L18.2443 15.9504H17.8321V3.75573C17.8321 3.34853 17.51 3.01655 17.1067 3.0006L17.0763 3H14.0916ZM3.64889 15.9504V13.7176H5.12214V15.9504H3.64889ZM9.28247 9.0458H10.7557L10.7559 15.9504H9.28247V9.0458ZM14.8474 4.51145H16.3206V15.9504H14.8474V4.51145Z" fill="#00AC26"/>
+</svg>
diff --git a/web/satellite/static/images/objects/pdf.svg b/web/satellite/static/images/objects/pdf.svg
new file mode 100644
index 000000000..5669020b7
--- /dev/null
+++ b/web/satellite/static/images/objects/pdf.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9452 1C11.4186 1 11.8726 1.18807 12.2074 1.52283L16.9068 6.22209C17.2416 6.55686 17.4297 7.01092 17.4297 7.48437V16.1736C17.4297 17.7346 16.1642 19 14.6032 19H5.82643C4.26543 19 3 17.7346 3 16.1736V3.82655C3 2.26555 4.26543 1 5.82643 1H10.9452ZM10.2147 2.63635H5.82643C5.18161 2.63635 4.6565 3.14932 4.63692 3.78948L4.63635 3.82655V16.1736C4.63635 16.8184 5.14925 17.3435 5.78936 17.3631L5.82643 17.3636H14.6032C15.2481 17.3636 15.7732 16.8507 15.7927 16.2106L15.7933 16.1736V8.21483L11.033 8.21495C10.5922 8.21495 10.2327 7.86629 10.2155 7.42968L10.2148 7.39677L10.2147 2.63635ZM14.9491 6.57848L11.851 3.48056L11.8512 6.57859L14.9491 6.57848Z" fill="#FF458B"/>
+<path d="M6 14V11H7.32107C7.54822 11 7.74698 11.0439 7.91734 11.1318C8.0877 11.2197 8.22021 11.3433 8.31486 11.5024C8.4095 11.6616 8.45683 11.8477 8.45683 12.0605C8.45683 12.2754 8.40801 12.4614 8.31037 12.6187C8.21373 12.7759 8.07774 12.897 7.9024 12.9819C7.72805 13.0669 7.52431 13.1094 7.29118 13.1094H6.50212V12.4766H7.1238C7.22144 12.4766 7.30463 12.46 7.37337 12.4268C7.44311 12.3926 7.49641 12.3442 7.53327 12.2817C7.57113 12.2192 7.59006 12.1455 7.59006 12.0605C7.59006 11.9746 7.57113 11.9014 7.53327 11.8408C7.49641 11.7793 7.44311 11.7324 7.37337 11.7002C7.30463 11.667 7.22144 11.6504 7.1238 11.6504H6.8309V14H6Z" fill="#FF458B"/>
+<path d="M9.93929 14H8.76169V11H9.92733C10.2422 11 10.5141 11.0601 10.7433 11.1802C10.9734 11.2993 11.1508 11.4712 11.2753 11.6958C11.4008 11.9194 11.4636 12.1875 11.4636 12.5C11.4636 12.8125 11.4013 13.0811 11.2768 13.3057C11.1523 13.5293 10.9759 13.7012 10.7478 13.8213C10.5196 13.9404 10.2501 14 9.93929 14ZM9.59258 13.3086H9.9094C10.0608 13.3086 10.1899 13.2847 10.2965 13.2368C10.4041 13.189 10.4857 13.1064 10.5415 12.9893C10.5983 12.8721 10.6267 12.709 10.6267 12.5C10.6267 12.291 10.5978 12.1279 10.54 12.0107C10.4833 11.8936 10.3996 11.811 10.289 11.7632C10.1794 11.7153 10.0449 11.6914 9.88549 11.6914H9.59258V13.3086Z" fill="#FF458B"/>
+<path d="M11.848 14V11H14V11.6563H12.6789V12.1719H13.8685V12.8281H12.6789V14H11.848Z" fill="#FF458B"/>
+</svg>
diff --git a/web/satellite/static/images/objects/picture.svg b/web/satellite/static/images/objects/picture.svg
new file mode 100644
index 000000000..ce6a06e86
--- /dev/null
+++ b/web/satellite/static/images/objects/picture.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7533 1L12.0235 1.00105C14.34 1.01951 15.2206 1.28039 16.1081 1.75504C17.0293 2.24771 17.7523 2.97068 18.245 3.89189L18.2806 3.95931C18.7443 4.84725 18.9936 5.76478 19 8.15406V11.7533C19 14.0455 18.7829 15.0087 18.3728 15.8574C18.3441 15.9599 18.2948 16.0579 18.2251 16.145L18.245 16.1081C17.7523 17.0293 17.0293 17.7523 16.1081 18.245L16.0407 18.2806C15.1526 18.7444 14.2349 18.9937 11.8448 19H8.24668C5.72685 19 4.8131 18.7376 3.89189 18.245C2.97068 17.7523 2.24771 17.0293 1.75504 16.1081L1.7194 16.0407C1.2556 15.1526 1.00628 14.2349 1 11.8448V8.24668C1 5.72685 1.26237 4.8131 1.75504 3.89189C2.24771 2.97068 2.97068 2.24771 3.89189 1.75504L3.95931 1.7194C4.84725 1.25567 5.76478 1.00636 8.15406 1H11.7533ZM4.83817 9.36792L2.63621 10.8954L2.63636 11.8406L2.63807 12.1028C2.65498 13.8298 2.798 14.5566 3.14866 15.2423L3.16607 15.276L3.198 15.3364C3.53816 15.9724 4.02755 16.4618 4.6636 16.802L4.73217 16.838C5.45231 17.2086 6.18667 17.3506 7.98272 17.3628L8.24663 17.3636H11.8406L12.1028 17.3619C12.1338 17.3616 12.1646 17.3613 12.195 17.3609L4.83817 9.36792ZM13.1338 12.3973L11.2838 13.9546L14.2649 17.1937C14.6482 17.1133 14.949 17.0013 15.2423 16.8513L15.276 16.8339L15.3364 16.802C15.8252 16.5406 16.2274 16.191 16.5418 15.7545L13.1338 12.3973ZM11.8429 2.63636H8.24668C6.29709 2.63636 5.51035 2.7717 4.79035 3.13215L4.72405 3.16607L4.6636 3.198C4.02755 3.53816 3.53816 4.02755 3.198 4.6636L3.16201 4.73217C2.79141 5.45231 2.64937 6.18667 2.63723 7.98272L2.63636 8.24663L2.63621 8.90379L4.49123 7.617C4.81674 7.39118 5.2554 7.43177 5.53397 7.70854L5.5596 7.73518L6.70348 8.97812C7.20934 6.75256 9.19184 5.09091 11.562 5.09091C14.3153 5.09091 16.5455 7.33321 16.5455 10.097C16.5455 11.0388 16.2854 11.9441 15.8021 12.7285L17.2207 14.1265C17.3138 13.6162 17.3564 12.9644 17.3628 12.0172L17.3636 11.7533V8.24668C17.3636 6.29709 17.2283 5.51035 16.8678 4.79035L16.8339 4.72405L16.802 4.6636C16.4618 4.02755 15.9724 3.53816 15.3364 3.198L15.2678 3.16201C14.5248 2.77964 13.7667 2.64058 11.8429 2.63636ZM11.562 6.72727C9.71442 6.72727 8.21488 8.23497 8.21488 10.097C8.21488 10.2921 8.23125 10.4846 8.26351 10.6734L10.1745 12.7494L12.6503 10.6653C12.9636 10.4015 13.4217 10.4111 13.7236 10.6822L13.7514 10.7084L14.5903 11.5347C14.7988 11.0907 14.9091 10.6027 14.9091 10.097C14.9091 8.23497 13.4095 6.72727 11.562 6.72727Z" fill="#7B61FF"/>
+</svg>
diff --git a/web/satellite/static/images/objects/txt.svg b/web/satellite/static/images/objects/txt.svg
new file mode 100644
index 000000000..b6117a094
--- /dev/null
+++ b/web/satellite/static/images/objects/txt.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.6978 4.00018C16.5965 4.00477 17.0675 4.09991 17.5573 4.36184C18.0213 4.61001 18.39 4.97867 18.6382 5.44271C18.9068 5.94504 19 6.42764 19 7.37216V13.2433C18.9952 14.142 18.9001 14.613 18.6382 15.1027C18.39 15.5668 18.0213 15.9354 17.5573 16.1836C17.0801 16.4388 16.6207 16.5357 15.7661 16.5447L15.6278 16.5455H4.37216C3.42764 16.5455 2.94504 16.4523 2.44271 16.1836C1.97867 15.9354 1.61001 15.5668 1.36184 15.1027C1.10663 14.6255 1.00976 14.1661 1.00071 13.3116L1 13.1733V7.37216C1 6.42764 1.0932 5.94504 1.36184 5.44271C1.61001 4.97867 1.97867 4.61001 2.44271 4.36184C2.94504 4.0932 3.42764 4 4.37216 4L15.6978 4.00018ZM9.18182 5.5L4.31643 5.5001C3.67852 5.50245 3.42696 5.54631 3.19156 5.66318L3.15011 5.68456C2.94748 5.79293 2.79293 5.94748 2.68456 6.15011C2.54802 6.40542 2.5 6.65409 2.5 7.37216V13.229C2.50245 13.8679 2.54645 14.1193 2.66373 14.355L2.68456 14.3953C2.79293 14.598 2.94748 14.7525 3.15011 14.8609C3.40542 14.9974 3.65409 15.0455 4.37216 15.0455H9.18182V5.5ZM15.6836 5.5001L10.6818 5.5V15.0453L15.6836 15.0454C16.3031 15.0431 16.5582 15.0016 16.7881 14.8922L16.8096 14.8817L16.8499 14.8609C17.0525 14.7525 17.2071 14.598 17.3154 14.3953C17.452 14.14 17.5 13.8914 17.5 13.1733L17.4999 7.31643C17.4975 6.67852 17.4537 6.42696 17.3368 6.19156L17.3154 6.15011C17.2071 5.94748 17.0525 5.79293 16.8499 5.68456L16.8279 5.67299L16.8096 5.66373C16.7902 5.65408 16.7707 5.64493 16.7509 5.63625C16.7489 5.63542 16.7469 5.63455 16.7449 5.63368L16.7509 5.63625C16.7455 5.6339 16.7401 5.63159 16.7347 5.62931L16.7449 5.63368C16.7362 5.62989 16.7273 5.62619 16.7184 5.62258L16.7347 5.62931C16.7269 5.62603 16.7191 5.62283 16.7112 5.6197L16.7184 5.62258C16.7137 5.62068 16.7089 5.61881 16.7042 5.61696L16.7112 5.6197C16.6963 5.61381 16.6812 5.60817 16.6658 5.60277C16.6632 5.60187 16.6606 5.60097 16.6579 5.60007L16.6658 5.60277C16.6565 5.59953 16.6471 5.59638 16.6376 5.59332C16.6084 5.5839 16.5779 5.57529 16.5457 5.56745C16.5413 5.56637 16.5368 5.56532 16.5324 5.56428L16.5457 5.56745C16.536 5.5651 16.5262 5.56282 16.5162 5.56061L16.5324 5.56428C16.5237 5.56225 16.5149 5.56029 16.506 5.55837L16.5162 5.56061C16.5072 5.5586 16.498 5.55665 16.4886 5.55476L16.506 5.55837C16.4978 5.55663 16.4895 5.55492 16.4811 5.55326L16.4886 5.55476C16.4616 5.54929 16.4333 5.54427 16.4035 5.53969C16.398 5.53884 16.3924 5.53801 16.3867 5.53719L16.4035 5.53969C16.3942 5.53826 16.3847 5.53687 16.3751 5.53552L16.3867 5.53719C16.3607 5.5334 16.3336 5.52994 16.3051 5.52678C16.2955 5.52571 16.2856 5.52467 16.2756 5.52366C16.2617 5.52226 16.2476 5.52094 16.2331 5.51968C16.2153 5.51812 16.1969 5.51667 16.1781 5.51531C16.1724 5.5149 16.1667 5.5145 16.161 5.51411L16.1781 5.51531C16.1644 5.51432 16.1504 5.51338 16.1361 5.5125L16.161 5.51411C16.1481 5.51324 16.1351 5.51241 16.1217 5.51162L16.1361 5.5125C16.1241 5.51174 16.1118 5.51103 16.0993 5.51035L16.1217 5.51162C16.0908 5.5098 16.0587 5.50821 16.0251 5.50683C16.0238 5.50678 16.0224 5.50672 16.021 5.50667L16.0251 5.50683C16.0121 5.5063 15.9989 5.5058 15.9855 5.50534L16.021 5.50667C15.9721 5.5047 15.9202 5.50319 15.8649 5.50211C15.8404 5.50163 15.8152 5.50123 15.7894 5.50092L15.6836 5.5001ZM7 11.9773C7.41421 11.9773 7.75 12.3131 7.75 12.7273C7.75 13.1314 7.43039 13.4608 7.03016 13.4767L7 13.4773H4.54545C4.13124 13.4773 3.79545 13.1415 3.79545 12.7273C3.79545 12.3232 4.11506 11.9937 4.51529 11.9779L4.54545 11.9773H7ZM14.5682 11.9773C14.9824 11.9773 15.3182 12.3131 15.3182 12.7273C15.3182 13.1314 14.9986 13.4608 14.5983 13.4767L14.5682 13.4773H12.7955C12.3812 13.4773 12.0455 13.1415 12.0455 12.7273C12.0455 12.3232 12.3651 11.9937 12.7653 11.9779L12.7955 11.9773H14.5682ZM7 9.52273C7.41421 9.52273 7.75 9.85851 7.75 10.2727C7.75 10.6768 7.43039 11.0063 7.03016 11.0221L7 11.0227H4.54545C4.13124 11.0227 3.79545 10.6869 3.79545 10.2727C3.79545 9.86862 4.11506 9.53915 4.51529 9.52332L4.54545 9.52273H7ZM15.25 9.52273C15.6642 9.52273 16 9.85851 16 10.2727C16 10.6768 15.6804 11.0063 15.2802 11.0221L15.25 11.0227H12.7955C12.3812 11.0227 12.0455 10.6869 12.0455 10.2727C12.0455 9.86862 12.3651 9.53915 12.7653 9.52332L12.7955 9.52273H15.25ZM7 7.06818C7.41421 7.06818 7.75 7.40397 7.75 7.81818C7.75 8.22229 7.43039 8.55176 7.03016 8.56759L7 8.56818H4.54545C4.13124 8.56818 3.79545 8.2324 3.79545 7.81818C3.79545 7.41407 4.11506 7.08461 4.51529 7.06878L4.54545 7.06818H7ZM15.25 7.06818C15.6642 7.06818 16 7.40397 16 7.81818C16 8.22229 15.6804 8.55176 15.2802 8.56759L15.25 8.56818H12.7955C12.3812 8.56818 12.0455 8.2324 12.0455 7.81818C12.0455 7.41407 12.3651 7.08461 12.7653 7.06878L12.7955 7.06818H15.25Z" fill="#537CFF"/>
+</svg>
diff --git a/web/satellite/static/images/objects/video.svg b/web/satellite/static/images/objects/video.svg
new file mode 100644
index 000000000..01f318031
--- /dev/null
+++ b/web/satellite/static/images/objects/video.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7533 1L12.0235 1.00105C14.34 1.01951 15.2206 1.28039 16.1081 1.75504C17.0293 2.24771 17.7523 2.97068 18.245 3.89189L18.2806 3.95931C18.7443 4.84725 18.9936 5.76478 19 8.15406V11.7533C19 14.2731 18.7376 15.1869 18.245 16.1081C17.7523 17.0293 17.0293 17.7523 16.1081 18.245L16.0407 18.2806C15.1526 18.7444 14.2349 18.9937 11.8448 19H8.24668C5.72685 19 4.8131 18.7376 3.89189 18.245C2.97068 17.7523 2.24771 17.0293 1.75504 16.1081L1.7194 16.0407C1.2556 15.1526 1.00628 14.2349 1 11.8448V8.24668C1 5.72685 1.26237 4.8131 1.75504 3.89189C2.24771 2.97068 2.97068 2.24771 3.89189 1.75504L3.95931 1.7194C4.84725 1.25567 5.76478 1.00636 8.15406 1H11.7533ZM11.8429 2.63636H8.24668C6.29709 2.63636 5.51035 2.7717 4.79035 3.13215L4.72405 3.16607L4.6636 3.198C4.02755 3.53816 3.53816 4.02755 3.198 4.6636L3.16201 4.73217C2.79141 5.45231 2.64937 6.18667 2.63723 7.98272L2.63636 8.24663V11.8406L2.63807 12.1028C2.65498 13.8298 2.798 14.5566 3.14866 15.2423L3.16607 15.276L3.198 15.3364C3.53816 15.9724 4.02755 16.4618 4.6636 16.802L4.73217 16.838C5.45231 17.2086 6.18667 17.3506 7.98272 17.3628L8.24663 17.3636H11.8406L12.1028 17.3619C13.8298 17.345 14.5566 17.202 15.2423 16.8513L15.276 16.8339L15.3364 16.802C15.9724 16.4618 16.4618 15.9724 16.802 15.3364L16.838 15.2678C17.2086 14.5477 17.3506 13.8133 17.3628 12.0172L17.3636 11.7533V8.24668C17.3636 6.29709 17.2283 5.51035 16.8678 4.79035L16.8339 4.72405L16.802 4.6636C16.4618 4.02755 15.9724 3.53816 15.3364 3.198L15.2678 3.16201C14.5248 2.77964 13.7667 2.64058 11.8429 2.63636ZM7.02479 6.28099C7.02479 5.62521 7.75767 5.23591 8.30104 5.60306L13.8052 9.32206C14.2853 9.64649 14.2853 10.3535 13.8052 10.6779L8.30104 14.3969C7.75767 14.7641 7.02479 14.3748 7.02479 13.719V6.28099ZM8.66116 7.82126V12.1786L11.8855 10L8.66116 7.82126Z" fill="#FF1313"/>
+</svg>
diff --git a/web/satellite/static/images/objects/zip.svg b/web/satellite/static/images/objects/zip.svg
new file mode 100644
index 000000000..3547a450b
--- /dev/null
+++ b/web/satellite/static/images/objects/zip.svg
@@ -0,0 +1,14 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9452 1C11.4186 1 11.8726 1.18807 12.2074 1.52283L16.9068 6.22209C17.2416 6.55686 17.4297 7.01092 17.4297 7.48437V16.1736C17.4297 17.7346 16.1642 19 14.6032 19H5.82643C4.26543 19 3 17.7346 3 16.1736V3.82655C3 2.26555 4.26543 1 5.82643 1H10.9452ZM10.2147 2.63635H5.82643C5.18161 2.63635 4.6565 3.14932 4.63692 3.78948L4.63635 3.82655V16.1736C4.63635 16.8184 5.14925 17.3435 5.78936 17.3631L5.82643 17.3636H14.6032C15.2481 17.3636 15.7732 16.8507 15.7927 16.2106L15.7933 16.1736V8.21483L11.033 8.21495C10.5922 8.21495 10.2327 7.86629 10.2155 7.42968L10.2148 7.39677L10.2147 2.63635ZM14.9491 6.57848L11.851 3.48056L11.8512 6.57859L14.9491 6.57848Z" fill="#FF8A00"/>
+<path d="M6.49979 14.0545V13.5952L7.94354 11.6682H6.50575V11H8.9995V11.4594L7.55575 13.3864H8.99354V14.0545H6.49979Z" fill="#FF8A00"/>
+<path d="M10.607 11V14.0545H9.77772V11H10.607Z" fill="#FF8A00"/>
+<path d="M11.3908 14.0545V11H12.7093C12.936 11 13.1344 11.0447 13.3044 11.1342C13.4744 11.2237 13.6067 11.3495 13.7011 11.5116C13.7956 11.6737 13.8428 11.8631 13.8428 12.0798C13.8428 12.2986 13.7941 12.488 13.6967 12.6481C13.6002 12.8082 13.4645 12.9315 13.2895 13.018C13.1155 13.1045 12.9121 13.1477 12.6795 13.1477H11.892V12.5034H12.5124C12.6099 12.5034 12.6929 12.4865 12.7615 12.4527C12.8311 12.4179 12.8843 12.3687 12.9211 12.305C12.9589 12.2414 12.9778 12.1663 12.9778 12.0798C12.9778 11.9923 12.9589 11.9178 12.9211 11.8561C12.8843 11.7935 12.8311 11.7457 12.7615 11.7129C12.6929 11.6791 12.6099 11.6622 12.5124 11.6622H12.2201V14.0545H11.3908Z" fill="#FF8A00"/>
+<rect x="6" y="2" width="1" height="1" fill="#FF8A00"/>
+<rect x="6" y="6" width="1" height="1" fill="#FF8A00"/>
+<rect x="7" y="3" width="1" height="1" fill="#FFA800"/>
+<rect x="7" y="5" width="1" height="1" fill="#FFA800"/>
+<rect x="7" y="7" width="1" height="1" fill="#FFA800"/>
+<rect x="7" y="9" width="1" height="1" fill="#FFA800"/>
+<rect x="6" y="4" width="1" height="1" fill="#FF8A00"/>
+<rect x="6" y="8" width="1" height="1" fill="#FF8A00"/>
+</svg>