@sierra-95/svelte-scaffold 1.1.5 → 1.2.1

package/dist/Core/components/Menus/MenuItem/menuItem.svelte

@@ -5,7 +5,8 @@
         disabled = false,
         iconSize = '20px',
         iconGap = '20px',
-        iconBg: iconBg = 'var(--primary-bg)',
+        iconBg = 'var(--primary-bg)',
+        rounded = '0px',
         children = null,
         ...rest
     } = $props();
@@ -30,7 +31,7 @@
 <div
     id="sierra-menu-item"
     role="none" 
-    style="background-color: {active ? 'var(--menu-item-active)' : ''}"
+    style="background-color: {active ? 'var(--menu-item-active)' : ''}; border-radius: {rounded};"
     class="{disabled? 'disabled':''}"
     {...rest}
     onclick={(e: MouseEvent) => {

package/dist/Core/components/Menus/MenuItem/menuItem.svelte.d.ts

@@ -5,6 +5,7 @@ declare const MenuItem: import("svelte").Component<{
     iconSize?: string;
     iconGap?: string;
     iconBg?: string;
+    rounded?: string;
     children?: any;
 } & Record<string, any>, {}, "">;
 type MenuItem = ReturnType<typeof MenuItem>;

package/dist/Core/components/Menus/Tabs/main.css

@@ -17,6 +17,5 @@
     background-color: var(--background);
 }
 #sierra-tabs .tab-content{
-    padding: 1rem;
     background-color: var(--background);
 }

package/dist/Core/components/Menus/Tabs/main.svelte

@@ -10,6 +10,7 @@
       iconSize = '15px',
       boxShadow = false,
       actions,
+      padding = '1rem'
     } = $props();
 
     onMount(()=>{
@@ -38,7 +39,7 @@
       {@render actions?.()}
   </div>
 
-  <div class="tab-content">
+  <div style="padding: {padding};" class="tab-content">
     {#if snippets?.[active]}
         {@render snippets[active]()}
     {/if}

package/dist/Core/components/Menus/Tabs/main.svelte.d.ts

@@ -7,6 +7,7 @@ declare const Main: import("svelte").Component<{
     iconSize?: string;
     boxShadow?: boolean;
     actions: any;
+    padding?: string;
 }, {}, "active">;
 type Main = ReturnType<typeof Main>;
 export default Main;

package/dist/Core/components/others/Previews/Audio/audio.svelte

@@ -1,56 +1,17 @@
 <script lang="ts">
-    import {ButtonTimes, fileInputStore, ButtonSelect, removeFileForMedia, toggleSelectForMedia, addToast} from '../../../../../index.js'
+    import {ButtonTimes, fileInputStore, ButtonSelect, removeFileForMedia, toggleSelectForMedia} from '../../../../../index.js'
     export let media;
     export let buttonTimes = false;
     export let urlsOnly = true;
-
-    let audioPlaying: Record<string, boolean> = {};
-    let audioRefs: Record<string, HTMLAudioElement> = {};
-    function togglePlay(id: string) {
-        if(!urlsOnly){
-            addToast({
-                status: 'warning',
-                message: 'Audio preview is disabled for local files.'
-            });
-            return;
-        }
-        const audio = audioRefs[id];
-        if (!audio) return;
-
-        if (audio.paused) {
-            // Pause any other playing audio
-            for (const key in audioRefs) {
-                if (key !== id && !audioRefs[key].paused) {
-                    audioRefs[key].pause();
-                    audioPlaying[key] = false;
-                }
-            }
-            audio.play();
-            audioPlaying[id] = true;
-        } else {
-            audio.pause();
-            audioPlaying[id] = false;
-        }
-    }
-    function getPreviewUrl(file: File) {
-        return URL.createObjectURL(file);
-    }
-    function uuid() {
-        return crypto.randomUUID();
-    }
 </script>
 
 {#if media.Audio.length === 0}
     <p>No audio files available.</p>
 {:else} 
     <div style="display: flex; flex-wrap:wrap; gap: 1rem">
-        {#each media.Audio as item (item.id || uuid())}
-            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position: relative; width: 200px;display: flex; gap: 0.5rem; padding: 0.5rem; box-shadow: var(--box-shadow-secondary); border-radius: 0.3rem; cursor: pointer; background-color: var(--background-tertiary);">
-                <button aria-label="Play or pause audio" on:click|stopPropagation={() => togglePlay(item.id)}>
-                    <i class="fa {audioPlaying[item.id] ? 'fa-pause' : 'fa-play'}" aria-hidden="true"></i>
-                </button>
-                <audio hidden bind:this={audioRefs[item.id]} src={urlsOnly ? item.url : getPreviewUrl(item)} controls></audio>
-                <h3 style=" margin-left:0.2rem" class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
+        {#each media.Audio as item}
+            <div title={item.original_name || item.name} style="position: relative; cursor: pointer;" on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none">
+                <img style="height: 70px;" src="https://files.michaelmachohi.com/svelte-scaffold/icons/music.icon.png" alt={item.original_name || item.name}/>
                 {#if buttonTimes}
                     <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(
                         $fileInputStore.selectedFiles.indexOf(item), e
@@ -59,6 +20,7 @@
                 {#if $fileInputStore.submissions.some(sub => sub.url === item.url || sub.id === item.id)}
                     <ButtonSelect />
                 {/if}
+                <h3 style="width: 100px;" class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
             </div>
         {/each}
     </div> 

package/dist/Core/components/others/Previews/Document/documents.svelte

@@ -23,7 +23,7 @@
             <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position: relative; width: 70px; cursor: pointer;">
                 <img src={getIconUrl(item.type || item.mime_type)} alt="Document Icon" style="height: 70px;"/>
                 {#if buttonTimes}
-                    <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(
+                    <ButtonTimes onclick={(e: Event) => removeFileForMedia(
                         $fileInputStore.selectedFiles.indexOf(item), e
                     )}/>
                 {/if}

package/dist/Core/components/others/Previews/Image/image.svelte

@@ -26,7 +26,7 @@
 <style>
     #sierra-preview-image img{
         width: 100%;
-        height: 100px;
+        height: 70px;
         object-fit: cover;
     }
 </style>
@@ -46,7 +46,7 @@
                 {:else} 
                     <Generic/>
                 {/if}
-                <h3 style="margin: 0.5rem" class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
+                <h3 class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
                 {#if buttonTimes}
                     <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(
                         $fileInputStore.selectedFiles.indexOf(item), e

package/dist/Core/components/others/Previews/Video/video.svelte

@@ -10,19 +10,17 @@
 {:else}
     <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
         {#each media.Videos as item}
-            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position:relative; box-shadow: var(--box-shadow-secondary);width: 150px;border-radius: 0.3rem; cursor: pointer; background-color: var(--background-tertiary);">    
-                <video on:click|stopPropagation src={urlsOnly ? item.url : getPreviewUrlForMedia(item)} controls style="width: 100%; height: 100px; object-fit: cover; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem;">
-                    <track kind="captions" />
-                </video>
-                <h3 style=" margin: 0.5rem" class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
+            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position:relative;">    
+                <img style="height: 70px;" src="https://files.michaelmachohi.com/svelte-scaffold/icons/videos.icon.png" alt={item.original_name || item.name}/>
                 {#if buttonTimes}
-                    <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(
+                    <ButtonTimes onclick={(e: Event) => removeFileForMedia(
                         $fileInputStore.selectedFiles.indexOf(item), e
                     )}/>
                 {/if}
                 {#if $fileInputStore.submissions.some(sub => sub.url === item.url || sub.id === item.id)}
                     <ButtonSelect />
                 {/if}
+                <h3 class="sierra-text-wrap">{item.original_name || item.name}</h3>
             </div>
         {/each}
     </div>

package/dist/Core/components/others/Previews/Video/video.svelte.d.ts

@@ -16,8 +16,6 @@ declare const Video: $$__sveltets_2_IsomorphicComponent<{
     buttonTimes?: boolean;
     urlsOnly?: boolean;
 }, {
-    click: MouseEvent;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
 type Video = InstanceType<typeof Video>;

package/dist/Modules/Editor/Nodes/Images/images.svelte

@@ -9,11 +9,9 @@
 	let openDropdown = false;
 	function handleInsertImage(){
 		if(
-			!$editorStore.r2_key ||
 			!$editorStore.serverGetUrl ||
 			!$editorStore.serverUploadUrl ||
 			!$editorStore.serverDeleteUrl ||
-			!$editorStore.serverStorageUrl ||
 			!$editorStore.serverDownloadUrl
 		){
 			addToast({
@@ -27,11 +25,9 @@
 			...store, 
 			uploadType: ['image'],
 			disabledMenuItem: ['Music', 'Videos', 'Documents', 'Others'],
-			r2_key: $editorStore.r2_key,
 			serverGetUrl: $editorStore.serverGetUrl,
 			serverUploadUrl: $editorStore.serverUploadUrl,
 			serverDeleteUrl: $editorStore.serverDeleteUrl,
-			serverStorageUrl: $editorStore.serverStorageUrl,
 			serverDownloadUrl: $editorStore.serverDownloadUrl,
 			uploadModalOpen: true 
 		}));

package/dist/Modules/FilePicker/{ActionsMenu → Actions}/Actions.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
-    import {fileInputStore,resetFileInputStore, DropdownContainer, MenuItem, buttonRipple} from "../../../index.js";
-    import FileProperties from "./file_properties.svelte";
-    import DownloadMedia from "./download_media.svelte";
-    import DeleteMedia from "./delete_media.svelte";
-    
-    let {
-        processing = $bindable(),
-    } = $props();
+    import {fileInputStore,resetFileInputStore, DropdownContainer, MenuItem, buttonRipple, Button} from "../../../index.js";
+    import FileProperties from "./properties.svelte";
+    import DownloadMedia from "./download.svelte";
+    import DeleteMedia from "./delete.svelte";
 
     function handleSelect() {
         fileInputStore.update(store => ({ 
@@ -30,17 +26,19 @@
 
 <FileProperties bind:showProperties />
 <div style="display: flex; gap: 1rem; align-items: center; margin-right: 1rem">
-    <button hidden={$fileInputStore.manage || disableActions} title="Select" onclick={handleSelect} style="color: var(--primary-bg);" aria-label="Select submissions"><i class="fa fa-check-circle-o"></i></button>
     {#snippet TriggerMenu()}
         <button hidden={$fileInputStore.activeTab !== 'Cloud'} disabled={$fileInputStore.submissions.length === 0} use:buttonRipple class="w-10" aria-label="Ellipsis" onclick={() => (openActionsMenu = !openActionsMenu)}>
             <i class="fa fa-bars"></i>
         </button>
     {/snippet} 
     <DropdownContainer bind:open={openActionsMenu} dropdownTrigger={TriggerMenu}>
-        <MenuItem onclick={() => { showProperties = true; openActionsMenu = false; }}>Properties</MenuItem>
-        <DownloadMedia bind:processing bind:openActionsMenu/>
-        <DeleteMedia bind:processing bind:openActionsMenu />
+        <MenuItem icon="fa fa-info-circle" iconGap="10px" iconSize="15px" onclick={() => { showProperties = true; openActionsMenu = false; }}>Properties</MenuItem>
+        <DownloadMedia bind:openActionsMenu/>
+        <DeleteMedia bind:openActionsMenu />
     </DropdownContainer>
     <button title="Cancel" onclick={resetFileInputStore} aria-label="Cancel"><i class="fa fa-xmark"></i></button>
 </div>
+<div hidden={$fileInputStore.manage || disableActions} style="position: absolute; bottom: 1rem; right: 1rem; z-index: 5;">
+    <Button endIcon="fa-check-circle-o" onclick={handleSelect}>Insert</Button>
+</div>
 

package/dist/Modules/FilePicker/Actions/Actions.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Actions: import("svelte").Component<Record<string, never>, {}, "">;
+type Actions = ReturnType<typeof Actions>;
+export default Actions;

package/dist/Modules/FilePicker/{ActionsMenu/delete_media.svelte → Actions/delete.svelte}

@@ -3,7 +3,6 @@
     import {modalStore, fileInputStore, MenuItem, addToast} from "../../../index.js";
 
     let {
-        processing = $bindable(),
         openActionsMenu = $bindable(),
     } = $props();
 
@@ -28,13 +27,13 @@
         if (!$fileInputStore.serverDeleteUrl) return;
 
         try {
-            processing = true;
+            $fileInputStore.processing = true;
             const response = await fetch($fileInputStore.serverDeleteUrl, {
                 method: 'DELETE',
                 headers: {
                     'Content-Type': 'application/json'
                 },
-                body: JSON.stringify({ id: idsToDelete })
+                body: JSON.stringify(idsToDelete)
             });
 
             const data = await response.json();
@@ -47,20 +46,15 @@
                 });
                 return;
             }
-
-            data.forEach((item: { id: string; code: number }) => {
-                if (item.code === 404) {
-                    addToast({
-                        status: 'error',
-                        message: `Failed to delete file with ID: ${item.id}`
-                    });
-                }
-            });
             fileInputStore.update(store => ({ 
                 ...store,
                 submissions: [],
                 requestReload: true
             }));
+            addToast({
+                status: 'success',
+                message: 'Files deleted successfully.'
+            });
 
         } catch (error) {
             addToast({
@@ -68,9 +62,9 @@
                 message: `Error deleting files: ${error}`
             });
         } finally {
-            processing = false;
+            $fileInputStore.processing = false;
         }
     }
 </script>
 
-<MenuItem iconGap="10px" onclick={handleDelete} icon="fa-trash-o" iconBg="var(--error-bg)" iconSize="12px">Delete</MenuItem>
+<MenuItem iconGap="10px" onclick={handleDelete} icon="fa-trash-o" iconBg="var(--error-bg)" iconSize="15px">Delete</MenuItem>

package/dist/Modules/FilePicker/Actions/delete.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Delete: import("svelte").Component<{
+    openActionsMenu?: any;
+}, {}, "openActionsMenu">;
+type Delete = ReturnType<typeof Delete>;
+export default Delete;

package/dist/Modules/FilePicker/{ActionsMenu/download_media.svelte → Actions/download.svelte}

@@ -1,16 +1,15 @@
 <script lang="ts">
     import { get } from "svelte/store";
-    import {MenuItem, fileInputStore, User, addToast} from "../../../index.js";
+    import {MenuItem, fileInputStore, addToast} from "../../../index.js";
 
     let {
-        processing = $bindable(),
         openActionsMenu = $bindable(),
     } = $props();
 
     async function handleDownload() {
         openActionsMenu = false;
         const store = get(fileInputStore);
-        if (!store.submissions?.length || !$User.userId) {
+        if (!store.submissions?.length) {
             addToast({
                 status: 'error',
                 message: 'An error occurred while processing your request.'
@@ -18,13 +17,13 @@
             return;
         };
         try {
-            processing = true;
+            $fileInputStore.processing = true;
             for (const item of store.submissions) {
                 if (!item.id) continue;
                 await download(item.id);
             }
         } finally {
-            processing = false;
+            $fileInputStore.processing = false;
             fileInputStore.update(store => {
                 store.submissions = [];
                 return store;
@@ -34,13 +33,9 @@
 
     async function download(id: string) {
         try {
-            const formData = new FormData();
-            formData.append('id', id);
-            formData.append('userid', $User.userId);
-
-            const res = await fetch($fileInputStore.serverDownloadUrl, {
-                method: 'POST',
-                body: formData
+            const downloadURL = $fileInputStore.serverDownloadUrl + `?id=${id}`;
+            const res = await fetch(downloadURL, {
+                method: 'GET',
             });
 
             if (!res.ok) {
@@ -80,4 +75,9 @@
     }
 </script>
 
-<MenuItem onclick={handleDownload}>Download</MenuItem>
+<MenuItem 
+    icon="fa fa-download" 
+    iconGap="10px" 
+    iconSize="15px"
+    onclick={handleDownload}>Download
+</MenuItem>

package/dist/Modules/FilePicker/Actions/download.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Download: import("svelte").Component<{
+    openActionsMenu?: any;
+}, {}, "openActionsMenu">;
+type Download = ReturnType<typeof Download>;
+export default Download;

package/dist/Modules/FilePicker/{ActionsMenu/file_properties.svelte → Actions/properties.svelte}

@@ -1,6 +1,6 @@
 <script>
     import {Wrapper, Backdrop, fileInputStore} from "../../../index.js";
-    import Storage from "./media_storage.svelte";
+    import Storage from "../Cloud/storage.svelte";
     let {
         showProperties = $bindable(),
     } = $props();
@@ -16,8 +16,8 @@
 </style>
 <Backdrop bind:open={showProperties}>
     <Wrapper>
-        <div style="display: flex; justify-content: space-between">
-            <Storage padding="0rem" width="80%"/>
+        <div style="display: flex; justify-content: space-between; gap: 1rem">
+            <Storage padding="0rem" forceRender={true}/>
             <button style="align-self: start;" title="Cancel" onclick={() => showProperties = false} aria-label="Cancel"><i class="fa fa-times"></i></button>
         </div>
         <div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; max-height: 70vh; overflow-y: auto;">

package/dist/Modules/FilePicker/{ActionsMenu/file_properties.svelte.d.ts → Actions/properties.svelte.d.ts}

@@ -1,9 +1,9 @@
-export default FileProperties;
-type FileProperties = {
+export default Properties;
+type Properties = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<$$ComponentProps>): void;
 };
-declare const FileProperties: import("svelte").Component<{
+declare const Properties: import("svelte").Component<{
     showProperties?: any;
 }, {}, "showProperties">;
 type $$ComponentProps = {

package/dist/Modules/FilePicker/Cloud/cloudStore.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { fileInputStore, User, buttonRipple, isMobile, isTablet, addToast } from '../../../index.js';
-    import Previews from './previews.svelte';
-    import Storage from '../ActionsMenu/media_storage.svelte';
+    import { fileInputStore, MenuItem, isDesktop } from '../../../index.js';
+    import Content from './content.svelte';
+    import Storage from './storage.svelte';
 
-    export let processing: boolean;
-    const tabs: { name: 'Documents'| 'Music' | 'Pictures' | 'Videos'| 'Others'; icon: string }[] = [
-        { name: 'Documents', icon: 'fa fa-file-o' },
+    const menuItem: { name: 'Documents'| 'Music' | 'Pictures' | 'Videos'| 'Others'; icon: string }[] = [
+        { name: 'Documents', icon: 'fa fa-file-alt' },
         { name: 'Music', icon: 'fa fa-music' },
         { name: 'Pictures', icon: 'fa fa-file-image-o' },
         { name: 'Videos', icon: 'fa fa-film' },
@@ -14,120 +12,60 @@
     ];
 
     $: if ($fileInputStore.disabledMenuItem?.includes($fileInputStore.activeMenu)) {
-		const firstAvailable = tabs.find(tab => !$fileInputStore.disabledMenuItem?.includes(tab.name));
+		const firstAvailable = menuItem.find(item => !$fileInputStore.disabledMenuItem?.includes(item.name));
 		if (firstAvailable) $fileInputStore.activeMenu = firstAvailable.name;
 	}
-
-    type MediaItem = {
-        id: string;
-    };
-
-    type MediaResponse = {
-        Audio: MediaItem[];
-        Documents: MediaItem[];
-        Images: MediaItem[];
-        Videos: MediaItem[];
-        Others: MediaItem[];
-    };
-
-    let media: MediaResponse | null = null;
-    let childFunctionRef : Storage;
-
-    async function loadMedia(){
-        if (!$User.userId || !$fileInputStore.serverGetUrl) return;
-        try {
-            processing = true;
-            const params = new URLSearchParams({
-                userId: $User.userId
-            });
-
-            const res = await fetch(`${$fileInputStore.serverGetUrl}?${params.toString()}`);
-
-            const data = await res.json();
-
-            if (!res.ok) {
-                //console.log('Error fetching media:', data);
-                addToast({
-                    status: 'error',
-                    message: data || "Failed to fetch media."
-                });
-                return;
-            }
-            media = data;
-        } catch (e) {
-            console.error("catch error:", e);
-            addToast({
-                status: 'error',
-                message: "An error occurred while fetching media."
-            });
-        } finally {
-            processing = false;
-        }
-    }
-
-    onMount(async () => {
-        await loadMedia();
-    });
-
-    $: if ($fileInputStore.requestReload && childFunctionRef){
-        fileInputStore.update(store => ({ 
-            ...store,
-            requestReload: false
-        }));
-        loadMedia();
-        childFunctionRef.loadMediaStorage();
-    };
-
 </script>
-
 <style>
-    #sierra-cloud-store nav{
-        flex-direction: column;
+    #sierra-cloud-store{
+        position: relative;
+        display: flex;
+        height: 400px;
     }
-    #sierra-cloud-store .icon-active {
-        border-radius: 3px;
-        background-color: var(--menu-item-active);
-    }
-    #sierra-cloud-store i{
-        color: var(--icon-theme);
+    #sierra-cloud-store nav{
+        padding-top: 1rem;
     }
-    #sierra-cloud-store .icon-active i{
-        color: var(--primary-bg);
+    #sierra-cloud-store main{
+        overflow-y: auto;
+        padding: 1rem;
     }
-    @media (max-width: 768px) {
-        #sierra-cloud-store {
+    @media (max-width: 1024px) {
+        #sierra-cloud-store{
             flex-direction: column-reverse;
         }
         #sierra-cloud-store nav{
-            flex-direction: row;
-        }
-        #sierra-cloud-store nav button {
+            display: flex;
             justify-content: center;
+            padding: 0.5rem 0rem;
+        }
+        #sierra-cloud-store main{
+            flex: 1;
         }
     }
 </style>
-<main id="sierra-cloud-store" style="display: flex; gap: 1rem; height: 100%; min-height: 300px;">
-    <nav style="display: flex; gap: {$isMobile ? '1rem' : '0.5rem'}; padding-top: 1rem; background-color: var(--background); border-bottom-left-radius:5px;">
-        {#each tabs as tab}
-            <button 
-                use:buttonRipple
-                on:click={() => 
+<main id="sierra-cloud-store">
+    <nav>
+        {#each menuItem as item}
+            <MenuItem 
+                onclick={() => 
                     fileInputStore.update(store =>({
                         ...store,
-                        activeMenu: tab.name
+                        activeMenu: item.name
                     }))
-                } 
-                style="
-                    width:100%; padding:{$isMobile? '0.5rem':' 0.1rem 0.5rem'};
-                    {$fileInputStore.disabledMenuItem?.includes(tab.name) ? 'display: none;' : 'display: flex; align-items: center; gap: 0.5rem;'}
-                "
-                class={`sierra-text-ellipsis ${$fileInputStore.activeMenu === tab.name ? 'icon-active' : ''}`}
-            >
-                <i class={tab.icon} style="font-size: {$isMobile ? '15px' : '10px'}; "></i>
-                {$isMobile ? '' : tab.name}
-            </button>
+                }
+                rounded={!$isDesktop ? '8px' : '0px'}
+                title={item.name}
+                hidden={$fileInputStore.disabledMenuItem?.includes(item.name)}
+                active={$fileInputStore.activeMenu === item.name} 
+                icon={item.icon} 
+                iconSize='15px' 
+                iconBg={ $fileInputStore.activeMenu === item.name ? 'var(--primary-bg)' : 'var(--text-secondary)'}
+                iconGap="10px">{!$isDesktop ? '' : item.name}
+            </MenuItem>
         {/each}
-        <Storage hidden={$isMobile || $isTablet} bind:this={childFunctionRef}/>
+        <Storage/>
     </nav>
-    <Previews {media} />
+    <main>
+        <Content/>
+    </main>
 </main>

package/dist/Modules/FilePicker/Cloud/cloudStore.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,9 +11,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const CloudStore: $$__sveltets_2_IsomorphicComponent<{
-    processing: boolean;
-}, {
+declare const CloudStore: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
 type CloudStore = InstanceType<typeof CloudStore>;

package/dist/Modules/FilePicker/Cloud/content.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+    import { browser } from "$app/environment";
+    import { fileInputStore, addToast, PreviewImage, PreviewVideo, PreviewAudio, PreviewDocument, PreviewGenericFile } from "../../../index.js";
+    import type {FileInputStoreMediaItem} from '../../../index.js';
+
+    let itemCount = $state(0);
+    let totalSizeMB = $state(0);
+    let currentCategory = $state('');
+    let lastSelectedCategory = $state('');
+    const categoryMap = {
+        Documents: "document",
+        Music: "audio",
+        Pictures: "image",
+        Videos: "video",
+        Others: "other"
+    };
+    const media = $state<{
+        Images: any[];
+        Videos: any[];
+        Audio: any[];
+        Documents: any[];
+        Others: any[];
+    }>({
+        Images: [],
+        Videos: [],
+        Audio: [],
+        Documents: [],
+        Others: []
+    });
+    async function loadMedia(category: string) {
+        if (!$fileInputStore.serverGetUrl) return;
+        try {
+            $fileInputStore.processing = true;
+            const res = await fetch(`${$fileInputStore.serverGetUrl}?category=${category}`);
+            const data = await res.json();
+
+            if (!res.ok) {
+                addToast({
+                    status: 'error',
+                    message: data || "Failed to fetch media."
+                });
+                return;
+            }
+            media.Images = [];
+            media.Videos = [];
+            media.Audio = [];
+            media.Documents = [];
+            media.Others = [];
+            //console.log('Fetched media:', data);
+            for (const item of data) {
+                switch (item.category) {
+                    case "image":
+                        media.Images.push(item);
+                        break;
+                    case "video":
+                        media.Videos.push(item);
+                        break;
+                    case "audio":
+                        media.Audio.push(item);
+                        break;
+                    case "document":
+                        media.Documents.push(item);
+                        break;
+                    default:
+                        media.Others.push(item);
+                }
+            }
+        } catch (e) {
+            console.error("catch error:", e);
+            addToast({
+                status: 'error',
+                message: "An error occurred while fetching media."
+            });
+        } finally {
+            $fileInputStore.processing = false;
+        }
+    }
+
+    $effect(()=> {
+        if( !browser) return;
+        if($fileInputStore.activeMenu){
+            currentCategory = categoryMap[$fileInputStore.activeMenu];
+            if (lastSelectedCategory !== currentCategory) {
+                loadMedia(currentCategory);
+                lastSelectedCategory = currentCategory;
+            }
+        }
+        if($fileInputStore.submissions){
+            const submissions = $fileInputStore.submissions || [];
+            itemCount = submissions.length;
+            const totalBytes = submissions.reduce(
+                (sum: number, item: FileInputStoreMediaItem) => sum + (item.size_bytes || 0),
+                0
+            );
+            totalSizeMB = +(totalBytes / (1024 * 1024)).toFixed(2);
+        }
+        if($fileInputStore.requestReload){
+            $fileInputStore.requestReload = false;
+            loadMedia(currentCategory);
+        }
+    })
+</script>
+
+
+{#if $fileInputStore.activeMenu === 'Music'}
+    <PreviewAudio {media} />
+{:else if $fileInputStore.activeMenu === 'Documents'}
+    <PreviewDocument {media} />
+{:else if $fileInputStore.activeMenu === 'Pictures'}
+    <PreviewImage {media} />
+{:else if $fileInputStore.activeMenu === 'Videos'}
+    <PreviewVideo {media} />
+{:else if $fileInputStore.activeMenu === 'Others'}
+    <PreviewGenericFile {media} />
+{/if}
+<div hidden={itemCount === 0} style="position: absolute; top: 0; right: 0;padding: 2px 5px; box-shadow: var(--box-shadow); background: var(--background); z-index: 1;">
+    {itemCount} {itemCount === 1 ? 'item' : 'items'} selected ({totalSizeMB} MB)
+</div>

package/dist/Modules/FilePicker/Cloud/content.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Content: import("svelte").Component<Record<string, never>, {}, "">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/dist/Modules/FilePicker/Cloud/storage.svelte

@@ -0,0 +1,40 @@
+<script>
+    import { onMount } from 'svelte';
+    import { fileInputStore,CustomProgress, isDesktop, addToast} from '../../../index.js';
+
+    let {
+        padding = "0.5rem",
+        width = "100%",
+        forceRender = $bindable(false),
+    } = $props()
+
+    let progress = $state(0);
+    let progressColor = $state("var(--primary-bg)");
+    
+    onMount(()=>{
+        if(!$fileInputStore.usedBytes || !$fileInputStore.maxBytes){
+            addToast({
+                status: 'warning',
+                message: 'Unable to calculate storage usage. Please configure your cloud storage settings.',
+                persistent: true,
+            });
+            return;
+        }
+        progress = ($fileInputStore.usedBytes / $fileInputStore.maxBytes) * 100;
+    })
+    $effect(()=>{
+        if(progress){
+            progressColor = progress < 60
+            ? 'var(--primary-bg)'
+            : progress < 90
+            ? 'var(--warning-bg)'
+            : 'var(--error-bg)';
+        }
+    })
+</script>
+
+
+<div hidden={!$isDesktop && !forceRender} style="padding: 0.5rem  {padding}; width: {width};">
+    <CustomProgress value={progress} color={progressColor}/>
+    <h3 style="font-size: 0.8rem;">{progress.toFixed(2)}% of 100 MB</h3>
+</div>

package/dist/Modules/FilePicker/Cloud/storage.svelte.d.ts

@@ -0,0 +1,15 @@
+export default Storage;
+type Storage = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Storage: import("svelte").Component<{
+    padding?: string;
+    width?: string;
+    forceRender?: boolean;
+}, {}, "forceRender">;
+type $$ComponentProps = {
+    padding?: string;
+    width?: string;
+    forceRender?: boolean;
+};

package/dist/Modules/FilePicker/Upload/upload.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import {fileInputStore,FileInput, addToast} from '../../../index.js'
+    
+    async function handleUpload() {
+        if( $fileInputStore.selectedFiles.length === 0 || !$fileInputStore.serverUploadUrl) return;
+
+        try {
+            $fileInputStore.processing = true;
+            const formData = new FormData();
+
+            $fileInputStore.selectedFiles.forEach(file => formData.append('files', file));
+
+            const res = await fetch($fileInputStore.serverUploadUrl, {
+                method: 'POST',
+                body: formData
+            });
+
+            const data = await res.json();
+
+            if (!res.ok) {
+                addToast({
+                    status: 'error',
+                    message: data || 'Upload failed',
+                    persistent: true
+                });
+                return;
+            }
+
+            fileInputStore.update(store => {
+                store.selectedFiles = [];
+                store.activeTab = 'Cloud';
+                return store;
+            });
+            addToast({
+                status: 'success',
+                message: 'Files uploaded successfully!'
+            });
+        } catch (err) {
+            addToast({
+                status: 'error',
+                message: `Upload failed: ${err}`,
+                persistent: true
+            });
+        } finally {
+            $fileInputStore.processing = false;
+        }
+    }
+</script>
+
+
+<FileInput 
+    minHeight="400px" 
+    bind:processing={$fileInputStore.processing} 
+    onclick={handleUpload} 
+/>

package/dist/Modules/FilePicker/{Cloud/previews.svelte.d.ts → Upload/upload.svelte.d.ts}

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,10 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Previews: $$__sveltets_2_IsomorphicComponent<{
-    media: any;
-}, {
+declare const Upload: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Previews = InstanceType<typeof Previews>;
-export default Previews;
+type Upload = InstanceType<typeof Upload>;
+export default Upload;

package/dist/Modules/FilePicker/main.svelte

@@ -1,83 +1,31 @@
 <script lang="ts">
-    import {Backdrop,Wrapper,fileInputStore, LinearProgress,FileInput, User, Tabs, resetFileInputStore, addToast} from '../../index.js'
+    import {Backdrop,Wrapper,fileInputStore, LinearProgress, Tabs, resetFileInputStore, addToast} from '../../index.js'
+    
     import CloudStore from './Cloud/cloudStore.svelte';
-    import Actions from './ActionsMenu/Actions.svelte';
-
-    let processing: boolean = false;
-
-    async function handleUpload() {
-        if(!$User.userId || !$fileInputStore.r2_key || $fileInputStore.selectedFiles.length === 0 || !$fileInputStore.serverUploadUrl) return;
-
-        try {
-            processing = true;
-            const formData = new FormData();
-
-            $fileInputStore.selectedFiles.forEach(file => formData.append('files', file));
-            formData.append('r2_key', $fileInputStore.r2_key);
-            formData.append('userid', $User.userId);
-
-            const res = await fetch($fileInputStore.serverUploadUrl, {
-                method: 'POST',
-                body: formData
-            });
-
-            const data = await res.json();
-
-            if (!res.ok) {
-                addToast({
-                    status: 'error',
-                    message: data || 'Upload failed',
-                    persistent: true
-                });
-                return;
-            }
-
-            data.forEach((item: { original_name: string; code: number; }) => {
-                if (item.code === 500) {
-                    addToast({
-                        status: 'error',
-                        message: `Failed to upload file: ${item.original_name}`
-                    });
-                }
-            });
-
-            fileInputStore.update(store => {
-                store.selectedFiles = [];
-                store.activeTab = 'Cloud';
-                store.requestReload = true;
-                return store;
-            });
-        } catch (err) {
-            addToast({
-                status: 'error',
-                message: `Upload failed: ${err}`,
-                persistent: true
-            });
-        } finally {
-            processing = false;
-        }
-    }
+    import Actions from './Actions/Actions.svelte';
+    import UploadMedia from './Upload/upload.svelte';
 
     function onEscape(){
         resetFileInputStore();
     }
+    
 </script>
 
 
 {#snippet Cloud()}
-    <CloudStore bind:processing />
+    <CloudStore />
 {/snippet}
 
 {#snippet Upload()}
-    <FileInput bind:processing onclick={handleUpload} />
+    <UploadMedia />
 {/snippet}
 
 {#snippet actions()}
-    <Actions bind:processing />
+    <Actions/>
 {/snippet}
 
 <Backdrop onClose={onEscape} bind:open={$fileInputStore.uploadModalOpen} zIndex={15}>
-    <Wrapper maxWidth="700px" minHeight="300px" padding="0px">
+    <Wrapper maxWidth="700px" padding="0px">
         <Tabs
             bind:active={$fileInputStore.activeTab}
             tabs={[
@@ -86,7 +34,8 @@
             ]}
             snippets={{ Cloud, Upload }}
             actions={actions}
+            padding="0px"
         />
-        {#if processing}<LinearProgress />{/if}
+        {#if $fileInputStore.processing}<LinearProgress />{/if}
     </Wrapper>
 </Backdrop>

package/dist/stores/modules/editor.d.ts

@@ -4,11 +4,9 @@ export type EditorState = {
     content: any;
     export: boolean;
     onExport: any;
-    r2_key: string;
     serverGetUrl: string;
     serverUploadUrl: string;
     serverDeleteUrl: string;
-    serverStorageUrl: string;
     serverDownloadUrl: string;
     enabledFeatures: EditorFeature[];
     insertImageMode: ImageInsertMode[];

package/dist/stores/modules/editor.js

@@ -3,11 +3,9 @@ const defaultEditorState = {
     content: {},
     export: false,
     onExport: () => { },
-    r2_key: '',
     serverGetUrl: '',
     serverUploadUrl: '',
     serverDeleteUrl: '',
-    serverStorageUrl: '',
     serverDownloadUrl: '',
     enabledFeatures: [],
     insertImageMode: ['filepicker', 'url']

package/dist/stores/modules/fileInput.d.ts

@@ -23,9 +23,11 @@ export type FileInputState = {
     serverGetUrl: string;
     serverUploadUrl: string;
     serverDeleteUrl: string;
-    serverStorageUrl: string;
     serverDownloadUrl: string;
     requestReload: boolean;
+    processing?: boolean;
+    usedBytes: number;
+    maxBytes: number;
 };
 export declare const fileInputStore: import("svelte/store").Writable<FileInputState>;
 export declare function resetFileInputStore(): void;

package/dist/stores/modules/fileInput.js

@@ -15,9 +15,11 @@ const defaultFileInputState = {
     serverGetUrl: '',
     serverUploadUrl: '',
     serverDeleteUrl: '',
-    serverStorageUrl: '',
     serverDownloadUrl: '',
-    requestReload: false
+    requestReload: false,
+    processing: false,
+    usedBytes: 0,
+    maxBytes: 0
 };
 export const fileInputStore = writable({
     ...defaultFileInputState

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sierra-95/svelte-scaffold",
-	"version": "1.1.5",
+	"version": "1.2.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/Modules/FilePicker/ActionsMenu/Actions.svelte.d.ts

@@ -1,5 +0,0 @@
-declare const Actions: import("svelte").Component<{
-    processing?: any;
-}, {}, "processing">;
-type Actions = ReturnType<typeof Actions>;
-export default Actions;

package/dist/Modules/FilePicker/ActionsMenu/delete_media.svelte.d.ts

@@ -1,6 +0,0 @@
-declare const DeleteMedia: import("svelte").Component<{
-    processing?: any;
-    openActionsMenu?: any;
-}, {}, "processing" | "openActionsMenu">;
-type DeleteMedia = ReturnType<typeof DeleteMedia>;
-export default DeleteMedia;

package/dist/Modules/FilePicker/ActionsMenu/download_media.svelte.d.ts

@@ -1,6 +0,0 @@
-declare const DownloadMedia: import("svelte").Component<{
-    processing?: any;
-    openActionsMenu?: any;
-}, {}, "processing" | "openActionsMenu">;
-type DownloadMedia = ReturnType<typeof DownloadMedia>;
-export default DownloadMedia;

package/dist/Modules/FilePicker/ActionsMenu/media_storage.svelte

@@ -1,54 +0,0 @@
-<script>
-    import { onMount } from 'svelte';
-    import { fileInputStore, User, CustomProgress, addToast} from '../../../index.js';
-    
-    export let padding = "0.5rem";
-    export let hidden = false;
-    export let width = "100%";
-
-    $: progress = 0;
-    $: progressColor = progress < 60
-        ? 'var(--primary-bg)'
-        : progress < 90
-        ? 'var(--warning-bg)'
-        : 'var(--error-bg)';
-        
-    export async function loadMediaStorage(){
-        if (!$User.userId || !$fileInputStore.serverStorageUrl) return;
-        try {
-            const params = new URLSearchParams({
-                userId: $User.userId
-            });
-
-            const res = await fetch(`${$fileInputStore.serverStorageUrl}?${params.toString()}`);
-
-            const data = await res.json();
-
-            if (!res.ok) {
-                addToast({
-                    status: 'error',
-                    message: data || "Failed to fetch storage usage.",
-                    persistent: true
-                });
-                return;
-            }
-            const { usedBytes, maxBytes } = data.storage;
-            progress = (usedBytes / maxBytes) * 100;
-        } catch (e) {
-            console.error("catch error:", e);
-            addToast({
-                status: 'error',
-                message: "An error occurred while fetching storage usage.",
-                persistent: true
-            });
-        }
-    }
-
-    onMount(async () => {
-        await loadMediaStorage();
-    });
-</script>
-<div hidden={hidden} style="padding: 0.5rem  {padding}; width: {width};">
-    <CustomProgress value={progress} color={progressColor}/>
-    <h3 style="font-size: 0.8rem;">{progress.toFixed(2)}% of 100 MB</h3>
-</div>

package/dist/Modules/FilePicker/ActionsMenu/media_storage.svelte.d.ts

@@ -1,36 +0,0 @@
-export default MediaStorage;
-type MediaStorage = SvelteComponent<{
-    width?: string | undefined;
-    padding?: string | undefined;
-    hidden?: boolean | undefined;
-    loadMediaStorage?: (() => Promise<void>) | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-} & {
-    loadMediaStorage: () => Promise<void>;
-};
-declare const MediaStorage: $$__sveltets_2_IsomorphicComponent<{
-    width?: string | undefined;
-    padding?: string | undefined;
-    hidden?: boolean | undefined;
-    loadMediaStorage?: (() => Promise<void>) | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
-    loadMediaStorage: () => Promise<void>;
-}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/Modules/FilePicker/Cloud/previews.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-    import {PreviewAudio,PreviewDocument,PreviewImage,PreviewVideo, fileInputStore, PreviewGenericFile} from '../../../index.js';
-    import type {FileInputStoreMediaItem} from '../../../index.js';
-    
-    export let media;
-
-    $: itemCount = 0;
-    $: totalSizeMB = 0;
-    $: {
-        const submissions = $fileInputStore.submissions || [];
-        itemCount = submissions.length;
-        const totalBytes = submissions.reduce(
-            (sum: number, item: FileInputStoreMediaItem) => sum + (item.size_bytes || 0),
-            0
-        );
-        totalSizeMB = +(totalBytes / (1024 * 1024)).toFixed(2);
-    }
-</script>
-
-<div id="file-picker-previews" style="flex-grow: 1; overflow-y: auto; padding-top: 1rem; max-height: 400px;">
-    {#if media}
-        {#if $fileInputStore.activeMenu === 'Music'}
-            <PreviewAudio {media} />
-        {:else if $fileInputStore.activeMenu === 'Documents'}
-            <PreviewDocument {media} />
-        {:else if $fileInputStore.activeMenu === 'Pictures'}
-            <PreviewImage {media} />
-        {:else if $fileInputStore.activeMenu === 'Videos'}
-            <PreviewVideo {media} />
-        {:else if $fileInputStore.activeMenu === 'Others'}
-            <PreviewGenericFile {media} />
-        {/if}
-    {:else}
-        <p>No media available.</p>
-    {/if}
-    <div hidden={itemCount === 0} style="position: absolute; bottom: 0; right: 0;padding: 2px 5px; box-shadow: var(--box-shadow); background: var(--background); z-index: 1;">
-        {itemCount} {itemCount === 1 ? 'item' : 'items'} selected ({totalSizeMB} MB)
-    </div>
-</div>