previewable for items in desktop and file dialog

src/lib/components/xp/Previewable.svelte

@@ -4,6 +4,7 @@
 
     export let default_icon;
     export let fs_id;
+    export let size = 50;
     let preview_url;
     let node_ref;
 
@@ -36,6 +37,8 @@
 
 </script>
 
-<div bind:this={node_ref} class="w-[50px] h-[50px] shrink-0 bg-contain bg-no-repeat bg-center"
-    style:background-image="{preview_url || default_icon}">
+<div bind:this={node_ref} class="shrink-0 bg-contain bg-no-repeat bg-center"
+    style:background-image="{preview_url || default_icon}"
+    style:width="{size}px"
+    style:height="{size}px">
 </div>

src/lib/components/xp/Viewer2.svelte

@@ -4,7 +4,7 @@
     
     import * as finder from '../../finder';
     import * as utils from '../../utils';
-    import { doctypes, icons, hidden_items } from '../../system';
+    import { doctypes, icons, hidden_items, previewable_exts } from '../../system';
     import * as fs from '../../fs';
     const {click_outside} = utils;
     import { createEventDispatcher, onMount, tick } from 'svelte';
@@ -12,6 +12,7 @@
     import {get, set} from 'idb-keyval';
     import { filter, map } from 'lodash';
     import Button from './Button.svelte';
+    import Previewable from './Previewable.svelte';
     let dispatch = createEventDispatcher();
 
 
@@ -162,10 +163,14 @@
                 {is_desired(item) ? '' : 'opacity-50'}" 
                 on:dblclick={() => open(item.id)}
                 on:click={(e) => on_click(e, item)}>
+                {#if previewable_exts.includes(item.ext)}
+                    <Previewable size={30} default_icon={file_icon(item)} fs_id={item.id}></Previewable>
+                {:else}
                     <div class="w-[30px] h-[30px] shrink-0 bg-contain bg-no-repeat
                         {item.type == 'folder' ? 'bg-[url(/images/xp/icons/FolderClosed.png)]' : 'bg-[url(/images/xp/icons/Default.png)]'} "
                         style:background-image="{file_icon(item)}">
                     </div>
+                {/if}
                 <p class="px-1 text-[11px] break-words line-clamp-2 text-ellipsis leading-tight
                     {selectingItems?.includes(item.id) ? 'bg-blue-600 text-slate-50' : ''}">
                     {item.name}

src/lib/components/xp/Viewer3.svelte

@@ -4,7 +4,7 @@
     
     import * as finder from '../../finder';
     import * as utils from '../../utils';
-    import { doctypes, icons, hidden_items } from '../../system';
+    import { doctypes, icons, hidden_items, previewable_exts } from '../../system';
     import * as fs from '../../fs';
     const {click_outside} = utils;
     import { createEventDispatcher, onMount, tick } from 'svelte';
@@ -13,6 +13,7 @@
     import { filter, indexOf, map } from 'lodash';
     import Button from './Button.svelte';
     import SelectBox from './SelectBox.svelte';
+    import Previewable from './Previewable.svelte';
     let dispatch = createEventDispatcher();
 
 
@@ -131,10 +132,14 @@
             <div fs-id="{item.id}" class="w-[100px] overflow-hidden m-2 inline-flex flex-row items-center font-MSSS relative
                 {is_desired(item) ? '' : 'opacity-50'}" 
                 on:dblclick={() => open(item.id)}>
+                {#if previewable_exts.includes(item.ext)}
+                    <Previewable size={30} default_icon={file_icon(item)} fs_id={item.id}></Previewable>
+                {:else}
                     <div class="w-[30px] h-[30px] shrink-0 bg-contain bg-no-repeat
                         {item.type == 'folder' ? 'bg-[url(/images/xp/icons/FolderClosed.png)]' : 'bg-[url(/images/xp/icons/Default.png)]'} "
                         style:background-image="{file_icon(item)}">
                     </div>
+                {/if}
                 <p class="px-1 text-[11px] break-words line-clamp-2 text-ellipsis leading-tight">
                     {item.name}
                 </p>

src/routes/xp/desktop_folder.svelte

@@ -2,7 +2,7 @@
     import { contextMenu, selectingItems, zIndex, clipboard, hardDrive, clipboard_op, queueProgram } from '../../lib/store'
     
     import * as utils from '../../lib/utils';
-    import { doctypes, icons, desktop_folder } from '../../lib/system';
+    import { doctypes, icons, desktop_folder, previewable_exts } from '../../lib/system';
     import * as fs from '../../lib/fs';
     const {click_outside} = utils;
     import {  onMount, tick } from 'svelte';
@@ -12,6 +12,7 @@
     import DragSelect from 'dragselect';
     import RecycleBin from '../../lib/components/xp/RecycleBin.svelte';
     import { parse_dir } from '../../lib/dir_parser';
+    import Previewable from '../../lib/components/xp/Previewable.svelte';
     
 
     let id = desktop_folder;
@@ -237,11 +238,15 @@
                 style:transform="{item.desktop_css_transform}"
                 style:width="{cell_size}px"
                 style:height="{cell_size}px">
+                {#if previewable_exts.includes(item.ext)}
+                    <Previewable size={40} default_icon={file_icon(item)} fs_id={item.id}></Previewable>
+                {:else}
                     <div class="w-[40px] h-[40px] shrink-0 bg-contain bg-no-repeat bg-center
                         {$clipboard.includes(item.id) && $clipboard_op == 'cut' ? 'opacity-70' : ''}
                         {item.type == 'folder' ? 'bg-[url(/images/xp/icons/FolderClosed.png)]' : 'bg-[url(/images/xp/icons/Default.png)]'} "
                         style:background-image="{file_icon(item)}">
                     </div>
+                {/if}
                 <p class="px-1 mx-0.5 text-[11px] break-words line-clamp-2 text-ellipsis leading-tight text-center text-white
                     {$selectingItems?.includes(item.id) && is_focus ? 'bg-blue-600 text-slate-50' : ''}"
                     style="text-shadow: 1px 1px 2px black;">