feat: add suggested extensions to storage setting screen

src/lib/elements/forms/inputTags.svelte

@@ -88,7 +88,7 @@
             </div>
             <input
                 {id}
-                {placeholder}
+                placeholder={!tags.length ? placeholder : ''}
                 type="text"
                 class="tags-input-text"
                 bind:value

src/lib/elements/pill.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     export let disabled = false;
+    export let selected = false;
     export let success = false;
     export let warning = false;
     export let danger = false;
@@ -18,6 +19,7 @@
         rel={external ? 'noopener noreferrer' : ''}
         class="tag"
         class:is-disabled={disabled}
+        class:is-selected={selected}
         class:is-success={success}
         class:is-warning={warning}
         class:is-danger={danger}
@@ -31,6 +33,7 @@
         type={submit ? 'submit' : 'button'}
         class="tag"
         class:is-disabled={disabled}
+        class:is-selected={selected}
         class:is-success={success}
         class:is-warning={warning}
         class:is-danger={danger}
@@ -41,6 +44,7 @@
     <div
         class="tag"
         class:is-disabled={disabled}
+        class:is-selected={selected}
         class:is-success={success}
         class:is-warning={warning}
         class:is-danger={danger}

src/lib/helpers/sizeConvertion.ts

@@ -1,17 +1,21 @@
-export function bytesToSize(bytes: number, decimals = 1) {
+const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+export function calculateSize(bytes: number, decimals = 1) {
     if (bytes === 0) return '0 Bytes';
 
     const k = 1024;
     const dm = decimals < 0 ? 0 : decimals;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 
     const i = Math.floor(Math.log(bytes) / Math.log(k));
 
     return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 }
 
 export function sizeToBytes(value: number, unit: string) {
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
     const index = sizes.indexOf(unit);
     return value * Math.pow(1024, index);
 }
+export function bytesToSize(value: number, unit: string) {
+    const index = sizes.indexOf(unit);
+    return value / Math.pow(1024, index);
+}

src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte

@@ -7,7 +7,7 @@
     import { page } from '$app/stores';
     import { uploader } from '$lib/stores/uploader';
     import { bucket } from './store';
-    import { bytesToSize } from '$lib/helpers/sizeConvertion';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
 
     export let showCreate = false;
 
@@ -120,7 +120,7 @@
                     </div>
                 </div>
 
-                <p>Max file size: {bytesToSize($bucket.maximumFileSize)}</p>
+                <p>Max file size: {calculateSize($bucket.maximumFileSize)}</p>
             </div>
 
             {#if !showDropdown}

src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/index.svelte

@@ -7,7 +7,7 @@
     import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
     import { sdkForProject } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
-    import { bytesToSize } from '$lib/helpers/sizeConvertion';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
     import Delete from './_deleteFile.svelte';
     import { page } from '$app/stores';
     import { onMount } from 'svelte';
@@ -101,7 +101,7 @@
             <svelte:fragment slot="aside">
                 <div>
                     <p>MIME Type: {$file.mimeType}</p>
-                    <p>Size: {bytesToSize($file.sizeOriginal)}</p>
+                    <p>Size: {calculateSize($file.sizeOriginal)}</p>
                     <p>Created: {toLocaleDate($file.$createdAt)}</p>
                     <p>Last Updated: {toLocaleDate($file.$updatedAt)}</p>
                 </div>

src/routes/console/[project]/storage/bucket/[bucket]/index.svelte

@@ -17,7 +17,7 @@
         TableCell
     } from '$lib/elements/table';
     import { toLocaleDate } from '$lib/helpers/date';
-    import { bytesToSize } from '$lib/helpers/sizeConvertion';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
     import { files } from './store';
@@ -97,7 +97,7 @@
                             </TableCell>
                             <TableCellText title="Type">{file.mimeType}</TableCellText>
                             <TableCellText title="Size"
-                                >{bytesToSize(file.sizeOriginal)}</TableCellText>
+                                >{calculateSize(file.sizeOriginal)}</TableCellText>
                             <TableCellText title="Date Created"
                                 >{toLocaleDate(file.$createdAt)}</TableCellText>
                             <TableCell>
@@ -132,7 +132,7 @@
                             </TableCell>
                             <TableCellText title="Type">{file.mimeType}</TableCellText>
                             <TableCellText title="Size"
-                                >{bytesToSize(file.sizeOriginal)}</TableCellText>
+                                >{calculateSize(file.sizeOriginal)}</TableCellText>
                             <TableCellText title="Date Created"
                                 >{toLocaleDate(file.$createdAt)}</TableCellText>
                             <TableCell showOverflow>