Added localstorage server syncing

src/lib/Sidebar.svelte

@@ -3,14 +3,15 @@
   import ChatMenuItem from './ChatMenuItem.svelte'
   import { chatsStorage, pinMainMenu, checkStateChange, getChatSortOption, setChatSortOption } from './Storage.svelte'
   import Fa from 'svelte-fa/src/fa.svelte'
-  import { faSquarePlus, faKey } from '@fortawesome/free-solid-svg-icons/index'
+  import { faSquarePlus, faKey, faDownload, faRotate, faUpload } from '@fortawesome/free-solid-svg-icons/index'
   import ChatOptionMenu from './ChatOptionMenu.svelte'
   import logo from '../assets/logo.svg'
   import { clickOutside } from 'svelte-use-click-outside'
   import { startNewChatWithWarning } from './Util.svelte'
   import { chatSortOptions } from './Settings.svelte'
   import { hasActiveModels } from './Models.svelte'
-
+  import { onMount } from 'svelte';
+  
   $: sortedChats = $chatsStorage.sort(getChatSortOption().sortFn)
   $: activeChatId = $params && $params.chatId ? parseInt($params.chatId) : undefined
 
@@ -27,6 +28,74 @@
 
   let showSortMenu = false
 
+  async function uploadLocalStorage(uid = 19492){
+    try {
+      let storageObject = {};
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key) {
+          storageObject[key] = localStorage.getItem(key);
+        }
+      }
+      const response = await fetch(`https://api.morgan.kr/localstore/${uid}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({data: storageObject}),
+      });
+
+      if (!response.ok) {
+        throw new Error('Network response was not ok.');
+      }
+
+      const data = await response.json();
+      console.log(data)
+      console.log("Uploaded savedata.");
+      alert("Uploaded savedata.");
+      return data.id;
+
+    } catch (error) {
+      console.error('Error uploading localStorage:', error);
+
+    }
+  }
+
+  async function fetchLocalStorage(){
+    if (!confirm("This will override all local data. Proceed?")) {
+      return;
+    }
+    try {
+      // dumpLocalStorage();
+      await uploadLocalStorage(99999);
+      const response = await fetch('https://api.morgan.kr/localstore/19492', {
+        method: 'GET',
+      });
+      if (!response.ok) {
+        throw new Error('Network response was not ok.');
+      }
+
+      const newData = await response.json();
+      localStorage.clear();
+
+      Object.entries(newData).forEach(([key, value]) => {
+        localStorage.setItem(key, value);
+      });
+
+      console.log('Fetched savedata');
+      alert('Fetched savedata');
+      
+    } catch (error) {
+      console.error('Error fetching localStorage:', error);
+      alert(error);
+    }
+  }
+
+  async function syncLocalStorage(){
+    console.log("Syncing...")
+    uploadLocalStorage();
+    localStorage.setItem('lastModified', new Date().toISOString());
+  }
 
   function dumpLocalStorage(){
      try {
@@ -55,6 +124,13 @@
       console.error('Error dumping localStorage:', error);
     }
   }
+
+  onMount(() => {
+    // console.log('Downloading from server.');
+    // fetchLocalStorage();
+  });
+  
+  // setInterval(syncLocalStorage, 10000);
 </script>
 
 <aside class="menu main-menu" class:pinned={$pinMainMenu} use:clickOutside={() => { $pinMainMenu = false }}>
@@ -100,6 +176,16 @@
               {/each}
             </div>
           </div>
+        </div>  
+        <div class="is-left is-up ml-2">
+            <button class="button" aria-haspopup="true" on:click|preventDefault|stopPropagation={() => { uploadLocalStorage(); }}>
+              <span class="icon"><Fa icon={faUpload}/></span>
+            </button>
+        </div>
+        <div class="is-left is-up ml-2">
+            <button class="button" aria-haspopup="true" on:click|preventDefault|stopPropagation={() => { fetchLocalStorage(); }}>
+              <span class="icon"><Fa icon={faDownload}/></span>
+            </button>
         </div>
       </div>
       <div class="level-right">