start tidying up frontend

src-tauri/src/main.rs

···
 use regex::Regex;
 use util::cache::Cache;
 use std::{env, fs, thread};
-use tauri::{Emitter, Manager, WindowEvent};
+use tauri::{Emitter, Manager, State, WindowEvent};
 use tauri_plugin_deep_link::DeepLinkExt;
 
 // TODO: Linux support
···
     .plugin(tauri_plugin_process::init())
     .plugin(tauri_plugin_http::init())
     .plugin(tauri_plugin_shell::init())
-    .register_asynchronous_uri_scheme_protocol("photo", |_ctx, req, res| {
-      util::handle_uri_proto::handle_uri_proto(req, res);
+    .register_asynchronous_uri_scheme_protocol("photo", |ctx, req, res| {
+      let cache: State<Cache> = ctx.app_handle().state();
+      util::handle_uri_proto::handle_uri_proto(req, res, cache);
     })
     .on_window_event(|window, event| match event {
       WindowEvent::CloseRequested { api, .. } => {

src-tauri/src/util/handle_uri_proto.rs

···
   thread,
 };
 use tauri::{
-  http::{Request, Response},
-  UriSchemeResponder,
+  http::{Request, Response}, State, UriSchemeResponder
 };
 
-pub fn handle_uri_proto(request: Request<Vec<u8>>, responder: UriSchemeResponder) {
+use super::cache::Cache;
+
+pub fn handle_uri_proto( request: Request<Vec<u8>>, responder: UriSchemeResponder, cache: State<Cache> ) {
+  let photo_path = cache.get("photo-path".into());
+
   thread::spawn(move || {
     // Loads the requested image file, sends data back to the user
     let uri = request.uri();
···
     #[cfg(unix)]
     let path = uri.path();
 
+    let path = format!("{}/{}", photo_path.unwrap(), path);
     let file = fs::File::open(path);
 
     match file {

src/Components/App.tsx

···
-import { createSignal, createEffect, Switch, Match, onMount } from "solid-js";
-import { listen } from '@tauri-apps/api/event';
-import { fetch } from "@tauri-apps/plugin-http"
+import { createSignal, onMount } from "solid-js";
 import anime from "animejs";
 import { invoke } from '@tauri-apps/api/core';
 
···
 function App() {
   invoke('close_splashscreen')
 
-  let [ loggedIn, setLoggedIn ] = createSignal({ loggedIn: false, username: '', avatar: '', id: '', serverVersion: '0.0' });
-  let [ storageInfo, setStorageInfo ] = createSignal({ storage: 0, used: 0, sync: false });
-  let [ loadingType, setLoadingType ] = createSignal('load');
   let [ currentPhotoView, setCurrentPhotoView ] = createSignal<any>(null);
   let [ photoNavChoice, setPhotoNavChoice ] = createSignal<string>('');
 
-  let [ confirmationBoxText, setConfirmationBoxText ] = createSignal<string>('');
-  let confirmationBoxCallback = () => {}
-
-  let [ photoCount, setPhotoCount ] = createSignal(0);
-  let [ photoSize, setPhotoSize ] = createSignal(0);
-
-  let [ requestPhotoReload, setRequestPhotoReload ] = createSignal(false);
-
   let [ isPhotosSyncing, setIsPhotosSyncing ] = createSignal(false);
 
-  let setConfirmationBox = ( text: string, cb: () => void ) => {
-    setConfirmationBoxText(text);
-    confirmationBoxCallback = cb;
-  }
-
-  invoke('get_config_value_string', { key: 'token' })
-    .then(token => {
-      if(token){
-        fetch('https://photos.phazed.xyz/api/v1/account?token='+token)
-          .then(data => data.json())
-          .then(data => {
-            if(!data.ok){
-              return console.error(data);
-            }
-    
-            setLoggedIn({ loggedIn: true, username: data.user.username, avatar: data.user.avatar, id: data.user._id, serverVersion: data.user.serverVersion });
-            setStorageInfo({ storage: data.user.storage, used: data.user.used, sync: data.user.settings.enableSync });
-    
-            if(!isPhotosSyncing() && data.user.settings.enableSync){
-              setIsPhotosSyncing(true);
-              invoke('sync_photos', { token: token });
-            }
-          })
-          .catch(e => {
-            console.error(e);
-          })
-      }
-    })
-
-  setTimeout(() => {
-    setLoadingType('none');
-  }, 500);
-
-  let loadingBlackout: HTMLElement;
-  let loadingShown = false;
-
-  let confirmationBox: HTMLElement;
-
-  createEffect(() => {
-    if(confirmationBoxText() !== ''){
-      confirmationBox.style.display = 'block';
-
-      setTimeout(() => {
-        confirmationBox.style.opacity = '1';
-      }, 1);
-    } else{
-      confirmationBox.style.opacity = '0';
-
-      setTimeout(() => {
-        confirmationBox.style.display = 'none';
-      }, 250);
-    }
-  })
-
-  createEffect(() => {
-    let type = loadingType();
-
-    if(loadingShown != (type != 'none')){
-      loadingShown = (type != 'none');
-
-      if(loadingShown){
-        loadingBlackout.style.display = 'flex';
-        anime({
-          targets: loadingBlackout,
-          opacity: 1,
-          easing: 'easeInOutQuad',
-          duration: 250
-        })
-      } else{
-        anime({
-          targets: loadingBlackout,
-          opacity: 0,
-          easing: 'easeInOutQuad',
-          duration: 250,
-          complete: () => {
-            loadingBlackout.style.display = 'none';
-          }
-        })
-      }
-    }
-  })
-
-  listen('auth-callback', ( event: any ) => {
-    let token = event.payload;
-
-    fetch('https://photos.phazed.xyz/api/v1/account?token='+token)
-      .then(data => data.json())
-      .then(data => {
-        if(!data.ok){
-          console.error(data);
-          return setLoadingType('none');
-        }
-
-        console.log(data);
-        invoke('set_config_value_string', { key: 'token', value: token });
-
-        setLoadingType('none');
-        setLoggedIn({ loggedIn: true, username: data.user.username, avatar: data.user.avatar, id: data.user._id, serverVersion: data.user.serverVersion });
-        setStorageInfo({ storage: data.user.storage, used: data.user.used, sync: data.user.settings.enableSync });
-
-        if(!isPhotosSyncing() && data.user.settings.enableSync){
-          setIsPhotosSyncing(true);
-          invoke('sync_photos', { token: token });
-        }
-      })
-      .catch(e => {
-        setLoadingType('none');
-        console.error(e);
-      })
-  })
-
-  listen('auth-denied', () => {
-    setLoadingType('none');
-    console.warn('Authetication Denied');
-  })
-
   onMount(() => {
     anime.set('.settings',
     {
···
   return (
     <div class="container">
       <NavBar
-        setLoadingType={setLoadingType}
-        loggedIn={loggedIn}
-        setStorageInfo={setStorageInfo}
         setIsPhotosSyncing={setIsPhotosSyncing} />
 
       <PhotoList
-        storageInfo={storageInfo}
         isPhotosSyncing={isPhotosSyncing}
         setIsPhotosSyncing={setIsPhotosSyncing}
         setCurrentPhotoView={setCurrentPhotoView}
         currentPhotoView={currentPhotoView}
         photoNavChoice={photoNavChoice}
-        setPhotoNavChoice={setPhotoNavChoice}
-        setConfirmationBox={setConfirmationBox}
-        loggedIn={loggedIn}
-        setPhotoCount={setPhotoCount}
-        setPhotoSize={setPhotoSize}
-        requestPhotoReload={requestPhotoReload}
-        setRequestPhotoReload={setRequestPhotoReload} />
+        setPhotoNavChoice={setPhotoNavChoice} />
 
       <PhotoViewer
         setPhotoNavChoice={setPhotoNavChoice}
         currentPhotoView={currentPhotoView}
-        setCurrentPhotoView={setCurrentPhotoView}
-        storageInfo={storageInfo}
-        loggedIn={loggedIn}
-        setConfirmationBox={setConfirmationBox} />
+        setCurrentPhotoView={setCurrentPhotoView} />
 
-      <SettingsMenu
-        setLoggedIn={setLoggedIn}
-        setLoadingType={setLoadingType}
-        photoCount={photoCount}
-        photoSize={photoSize}
-        setRequestPhotoReload={setRequestPhotoReload}
-        loggedIn={loggedIn}
-        storageInfo={storageInfo}
-        setStorageInfo={setStorageInfo}
-        setConfirmationBox={setConfirmationBox} />
+      <SettingsMenu />
 
       <div class="copy-notif">Image Copied!</div>
-
-      <div class="loading" ref={( el ) => loadingBlackout = el}>
-        <Switch>
-          <Match when={loadingType() === 'auth'}>
-            <p>Waiting for authentication in browser.</p>
-          </Match>
-          <Match when={loadingType() === 'load'}>
-            <p>Loading App...</p>
-          </Match>
-        </Switch>
-      </div>
-
-      <div class="confirmation-box" ref={( el ) => confirmationBox = el}>
-        <div class="confirmation-box-container">
-          { confirmationBoxText() }<br /><br />
-
-          <div class="button-danger" onClick={() => { confirmationBoxCallback(); setConfirmationBoxText('') }}>Confirm</div>
-          <div class="button" onClick={() => setConfirmationBoxText('') }>Deny</div>
-        </div>
-      </div>
     </div>
   );
 }

src/Components/FilterMenu.tsx

···
-enum FilterType{
-  USER, WORLD
-}
+import { FilterType } from "./Structs/FilterType";
 
-class FilterMenuProps{
-  setFilterType!: ( type: FilterType ) => void;
-  setFilter!: ( filter: string ) => void;
-}
-
-let FilterMenu = ( props: FilterMenuProps ) => {
+let FilterMenu = () => {
   let selectionButtons: HTMLDivElement[] = [];
 
   let select = ( index: number ) => {
···
       <div class="filter-type-select">
         <div class="selected-filter" ref={( el ) => selectionButtons.push(el)} onClick={() => {
           select(0);
-          props.setFilterType(FilterType.USER);
+          window.PhotoLoadingManager.SetFilterType(FilterType.USER);
         }}>User</div>
         <div ref={( el ) => selectionButtons.push(el)} onClick={() => {
           select(1);
-          props.setFilterType(FilterType.WORLD);
+          window.PhotoLoadingManager.SetFilterType(FilterType.WORLD);
         }}>World</div>
       </div>
 
-      <input class="filter-search" type="text" onInput={( el ) => props.setFilter(el.target.value)} placeholder="Enter Search Term..."></input>
+      <input class="filter-search" type="text" onInput={( el ) => window.PhotoLoadingManager.SetFilter(el.target.value)} placeholder="Enter Search Term..."></input>
     </>
   )
 }

src/Components/Managers/AccountManager.tsx

···
+import { invoke } from "@tauri-apps/api/core";
+
+import { ProfileData } from "../Structs/ProfileData";
+import { StorageData } from "../Structs/StorageData";
+import { Accessor, createSignal, Setter } from "solid-js";
+
+import { listen } from "@tauri-apps/api/event";
+import { fetch } from "@tauri-apps/plugin-http";
+
+export class AccountManager{
+  public Profile: Accessor<ProfileData | null>;
+  public Storage: Accessor<StorageData | null>;
+
+  public hasAccount: Accessor<boolean>;
+  public isLoading: Accessor<boolean>;
+  
+  private _setProfile: Setter<ProfileData | null>;
+  private _setStorage: Setter<StorageData | null>;
+
+  private _setHasAccount: Setter<boolean>;
+  private _setIsLoading: Setter<boolean>;
+
+  private _loginEventCallbacks: Array<() => void> = [];
+
+  private _emitLoginCallbacks(){
+    this._loginEventCallbacks.forEach(e => e());
+  }
+
+  constructor(){
+    let [ hasAccount, setHasAccount ] = createSignal(false);
+    let [ isLoading, setIsLoading ] = createSignal(true);
+
+    let [ profile, setProfile ] = createSignal<ProfileData | null>(null);
+    let [ storage, setStorage ] = createSignal<StorageData | null>(null);
+
+    this.Profile = profile;
+    this.Storage = storage;
+
+    this.hasAccount = hasAccount;
+    this.isLoading = isLoading;
+
+    this._setProfile = setProfile;
+    this._setStorage = setStorage;
+
+    this._setHasAccount = setHasAccount;
+    this._setIsLoading = setIsLoading;
+
+    invoke('get_config_value_string', { key: 'token' })
+      .then(( token: any ) => {
+        this.verifyToken(token);
+      })
+
+    listen('auth-callback', ( event: any ) => {
+      window.LoadingManager.SetLoading("");
+
+      let token = event.payload;
+      this.verifyToken(token);
+    })
+  
+    listen('auth-denied', () => {
+      window.LoadingManager.SetLoading("");
+      console.warn('Authetication Denied');
+    })
+  }
+
+  private async verifyToken( token: string ){
+    if(!token){
+      this._setHasAccount(false);
+      this._setIsLoading(false);
+
+      return this._emitLoginCallbacks();
+    }
+
+    let dat = await fetch('https://photos.phazed.xyz/api/v1/account?token='+token);
+    if(dat.status !== 200){
+      this._setHasAccount(false);
+      this._setIsLoading(false);
+
+      return this._emitLoginCallbacks();
+    }
+
+    let json = await dat.json();
+
+    let profile = new ProfileData();
+    let storage = new StorageData();
+
+    profile.id = json.user._id;
+    profile.username = json.user.username;
+    profile.avatar = json.user.avatar;
+    profile.serverVersion = json.user.serverVersion;
+
+    storage.used = json.user.used;
+    storage.total = json.user.storage;
+    storage.isSyncing = json.user.settings.enableSync;
+
+    this._setProfile(profile);
+    this._setStorage(storage);
+
+    this._setHasAccount(true);
+    this._setIsLoading(false);
+
+    this._emitLoginCallbacks();
+  }
+
+  public login(){
+    window.LoadingManager.SetLoading("Waiting for Authentication");
+    invoke('start_user_auth');
+  }
+
+  public async logout(){
+    let dat = await fetch('https://photos.phazed.xyz/api/v1/deauth?token='+(await invoke('get_config_value_string', { key: 'token' }))!)
+    if(dat.status !== 200)
+      throw new Error(dat.statusText);
+    
+    let json = await dat.json();
+    if(!json.ok)
+      throw new Error(json.error);
+
+    invoke('set_config_value_string', { key: 'token', value: '' });
+    window.location.reload();
+
+    return json;
+  }
+
+  public async Refresh(){
+    let token: string = await invoke('get_config_value_string', { key: 'token' });
+    await  this.verifyToken(token);
+  }
+
+  public onLoginFinish( cb: () => void ){
+    this._loginEventCallbacks.push(cb);
+  }
+}

src/Components/Managers/ConfirmationBoxManager.tsx

···
+import { createEffect, createSignal, Setter } from "solid-js";
+
+export class ConfirmationBoxManager{
+  private _confirmationBoxCallback = () => {};
+  private _setConfirmationBoxText: Setter<string>
+
+  constructor(){
+    let [ confirmationBoxText, setConfirmationBoxText ] = createSignal('');
+    this._setConfirmationBoxText = setConfirmationBoxText;
+  
+    let confirmationBox: HTMLElement;
+  
+    createEffect(() => {
+      if(confirmationBoxText() !== ''){
+        confirmationBox.style.display = 'block';
+  
+        setTimeout(() => {
+          confirmationBox.style.opacity = '1';
+        }, 1);
+      } else{
+        confirmationBox.style.opacity = '0';
+  
+        setTimeout(() => {
+          confirmationBox.style.display = 'none';
+        }, 250);
+      }
+    })
+
+    document.body.appendChild(<div class="confirmation-box" ref={( el ) => confirmationBox = el}>
+      <div class="confirmation-box-container">
+        { confirmationBoxText() }<br /><br />
+
+        <div class="button-danger" onClick={() => { this._confirmationBoxCallback(); setConfirmationBoxText('') }}>Confirm</div>
+        <div class="button" onClick={() => setConfirmationBoxText('') }>Deny</div>
+      </div>
+    </div> as HTMLElement);
+  }
+
+  public SetConfirmationBox( text: string, cb: () => void ){
+    this._setConfirmationBoxText(text);
+    this._confirmationBoxCallback = cb;
+  }
+}

src/Components/Managers/LoadingManager.tsx

···
+import { createSignal, Setter, Show } from "solid-js";
+
+export class LoadingManager{
+  public SetLoading: Setter<string>;
+
+  constructor(){
+    let [ loading, setLoading ] = createSignal("");
+    this.SetLoading = setLoading;
+
+    document.body.appendChild(
+      <div><Show when={loading() !== ""}>
+        <div class="loading">
+          <p>{ loading() }</p>
+        </div>
+      </Show></div> as HTMLElement
+    );
+  }
+}

src/Components/Managers/PhotoLoadingManager.tsx

···
+import { listen } from "@tauri-apps/api/event";
+import { Accessor, createSignal } from "solid-js";
+import { Photo } from "../Structs/Photo";
+import { invoke } from "@tauri-apps/api/core";
+import { PhotoMetadata } from "../Structs/PhotoMetadata";
+import { Vars } from "../Structs/Vars";
+import { FilterType } from "../FilterMenu";
+
+export class PhotoLoadingManager{
+  public PhotoCount: Accessor<number>;
+  public PhotoSize: Accessor<number>;
+
+  public Photos: Photo[] = [];
+  public FilteredPhotos: Photo[] = [];
+
+  public HasFirstLoaded = false;
+
+  private _amountLoaded = 0;
+  private _finishedLoadingCallbacks: (() => void)[] = [];
+
+  private _filterType: FilterType = FilterType.USER;
+  private _filter: string = "";
+
+  constructor(){
+    let [ photoCount, setPhotoCount ] = createSignal(-1);
+    let [ photoSize, setPhotoSize ] = createSignal(-1);
+
+    this.PhotoCount = photoCount;
+    this.PhotoSize = photoSize;
+
+    listen('photos_loaded', ( event: any ) => {
+      let photoPaths = event.payload.photos.reverse();
+      console.log(photoPaths);
+
+      setPhotoCount(photoPaths.length);
+      setPhotoSize(event.payload.size);
+
+      let doesHaveLegacy = false;
+
+      photoPaths.forEach(( path: string ) => {
+        let photo
+
+        if(path.slice(0, 9) === "legacy://"){
+          photo = new Photo(path.slice(9), true);
+          doesHaveLegacy = true;
+        } else
+          photo = new Photo(path, false);
+
+        this.Photos.push(photo);
+        photo.loadMeta();
+      })
+
+      if(doesHaveLegacy){
+        this.Photos = this.Photos.sort(( a, b ) => b.date.valueOf() - a.date.valueOf());
+      }
+
+      console.log(this.Photos.length + ' Photos found.');
+      if(this.Photos.length === 0){
+        console.log('No photos found, Skipping loading stage.');
+
+        this.FilteredPhotos = this.Photos;
+        this.HasFirstLoaded = true;
+
+        this._finishedLoadingCallbacks.forEach(cb => cb());
+      }
+    });
+
+    listen('photo_meta_loaded', ( event: any ) => {
+      let data: PhotoMetadata = event.payload;
+  
+      let photo = this.Photos.find(x => x.path === data.path);
+      if(!photo)return;
+  
+      photo.width = data.width;
+      photo.height = data.height;
+  
+      let scale = Vars.PHOTO_HEIGHT / photo.height;
+  
+      photo.scaledWidth = photo.width * scale;
+      photo.scaledHeight = Vars.PHOTO_HEIGHT;
+  
+      photo.metadata = data.metadata.split('\u0000').filter(x => x !== '')[1];
+      this._amountLoaded++;
+  
+      photo.metaLoaded = true;
+      photo.onMetaLoaded();
+  
+      this.ReloadFilters();
+  
+      if(this._amountLoaded === this.Photos.length && !this.HasFirstLoaded){
+        this.FilteredPhotos = this.Photos;
+        this.HasFirstLoaded = true;
+  
+        this._finishedLoadingCallbacks.forEach(cb => cb());
+      }
+    })
+
+    listen('photo_create', async ( event: any ) => {
+      let photo = new Photo(event.payload);
+  
+      this.Photos.splice(0, 0, photo);
+      photo.loadMeta();
+  
+      // TODO: SyncManager
+      // if(!props.isPhotosSyncing() && window.AccountManager.Storage()?.isSyncing){
+      //   props.setIsPhotosSyncing(true);
+      //   invoke('sync_photos', { token: (await invoke('get_config_value_string', { key: 'token' })) });
+      // }
+    })
+  
+    listen('photo_remove', ( event: any ) => {
+      this.Photos = this.Photos.filter(x => x.path !== event.payload);
+      this.FilteredPhotos = this.FilteredPhotos.filter(x => x.path !== event.payload);
+  
+      // TODO: PhotoViewerManager
+      // if(event.payload === props.currentPhotoView().path){
+      //   currentPhotoIndex = -1;
+      //   props.setCurrentPhotoView(null);
+      // }
+    })
+  }
+
+  public SetFilterType( type: FilterType ){
+    this._filterType = type;
+    this.ReloadFilters();
+  }
+
+  public SetFilter( filter: string ){
+    this._filter = filter;
+    this.ReloadFilters();
+  }
+
+  public ReloadFilters(){
+    this.FilteredPhotos = [];
+
+    switch(this._filterType){
+      case FilterType.USER:
+        this.Photos.map(p => {
+          if(p.metadata){
+            let meta = JSON.parse(p.metadata);
+            let photo = meta.players.find(( y: any ) => y.displayName.toLowerCase().includes(this._filter) || y.id === this._filter);
+    
+            if(photo)this.FilteredPhotos.push(p);
+          }
+        })
+        break;
+      case FilterType.WORLD:
+        this.Photos.map(p => {
+          if(p.metadata){
+            let meta = JSON.parse(p.metadata);
+            let photo = meta.world.name.toLowerCase().includes(this._filter) || meta.world.id === this._filter;
+    
+            if(photo)this.FilteredPhotos.push(p);
+          }
+        })
+        break;
+    }
+  }
+
+  public Load(){
+    this.Photos = [];
+    this.FilteredPhotos = [];
+
+    this._amountLoaded = 0;
+
+    invoke('load_photos');
+  }
+
+  public OnLoadingFinished( cb: () => void ){
+    this._finishedLoadingCallbacks.push(cb);
+  }
+}

src/Components/Managers/PhotoViewerManager.tsx

···
+import { Accessor, createSignal, Setter } from "solid-js";
+import { Photo } from "../Structs/Photo";
+
+export class PhotoViewerManager{
+  private _currentPhoto: Accessor<Photo | null>;
+
+  private _setCurrentPhoto: Setter<Photo | null>;
+
+  constructor(){
+    [ this._currentPhoto, this._setCurrentPhoto ] = createSignal<Photo | null>(null);
+  }
+
+  public Close(){
+    this._setCurrentPhoto(null);
+  }
+
+  public OpenPhoto( photo: Photo ){
+    this._setCurrentPhoto(photo);
+  }
+}

src/Components/NavBar.tsx

···
 import { invoke } from '@tauri-apps/api/core';
 import { emit, listen } from '@tauri-apps/api/event';
-import { fetch } from "@tauri-apps/plugin-http";
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
 import anime from 'animejs';
 import { Show, createSignal, onMount } from 'solid-js';
-const appWindow = getCurrentWebviewWindow()
+
+const appWindow = getCurrentWebviewWindow();
 
 class NavBarProps{
-  setLoadingType!: ( type: string ) => string;
-  loggedIn!: () => { loggedIn: boolean, username: string, avatar: string, id: string, serverVersion: string };
-  setStorageInfo!: ( info: { storage: number, used: number, sync: boolean } ) => { storage: number, used: number, sync: boolean };
   setIsPhotosSyncing!: ( syncing: boolean ) => boolean;
 }
 
···
   return (
     <>
       <div class="navbar" data-tauri-drag-region>
-        <div class="tabs" data-tauri-drag-region >
+        <div class="tabs" data-tauri-drag-region>
           <div class="nav-tab" onClick={() => {
             anime(
               {
···
           </Show>
         </div>
         <div class="account" onClick={() => setDropdownVisibility(!dropdownVisible)}>
-          <Show when={props.loggedIn().loggedIn}>
-            <div class="user-pfp" style={{ background: `url('https://cdn.phazed.xyz/id/avatars/${props.loggedIn().id}/${props.loggedIn().avatar}.png')` }}></div>
+          <Show when={window.AccountManager.hasAccount()}>
+            <div class="user-pfp" style={{ background: 
+              `url('https://cdn.phazed.xyz/id/avatars/${window.AccountManager.Profile()?.id}/${window.AccountManager.Profile()?.avatar}.png')` }}></div>
           </Show>
           <div class="icon">
             <img draggable="false" width="24" height="24" src="/icon/caret-down-solid.svg"></img>
···
             duration: 250
           })
 
-          fetch('https://photos.phazed.xyz/api/v1/account?token='+ (await invoke('get_config_value_string', { key: 'token' }))!)
-            .then(data => data.json())
-            .then(data => {
-              if(!data.ok){
-                console.error(data);
-                return;
-              }
-
-              console.log(data);
-              props.setStorageInfo({ storage: data.user.storage, used: data.user.used, sync: data.user.settings.enableSync });
-            })
-            .catch(e => {
-              console.error(e);
-            })
-
           setDropdownVisibility(false);
         }}>Settings</div>
 
-        <Show when={props.loggedIn().loggedIn == false} fallback={
+        <Show when={!window.AccountManager.hasAccount()} fallback={
           <div class="dropdown-button" onClick={async () => {
-            fetch('https://photos.phazed.xyz/api/v1/deauth?token='+(await invoke('get_config_value_string', { key: 'token' }))!)
-              .then(data => data.json())
+            window.AccountManager.logout()
               .then(data => {
                 console.log(data);
-
-                invoke('set_config_value_string', { key: 'token', value: '' });
-                window.location.reload();
-
                 setDropdownVisibility(false);
               })
               .catch(e => {
···
           }}>Sign Out</div>
         }>
           <div class="dropdown-button" onClick={() => {
-            props.setLoadingType('auth');
-
-            setTimeout(() => {
-              props.setLoadingType('none');
-            }, 5000);
-
-            invoke('start_user_auth');
-            setDropdownVisibility(false); 
+            window.AccountManager.login();
+            setDropdownVisibility(false);
           }}>Sign In</div>
         </Show>
       </div>

src/Components/PhotoList.tsx

···
 import { createEffect, onCleanup, onMount } from "solid-js";
-import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
 import { Window } from "@tauri-apps/api/window";
 
 import anime from "animejs";
-import FilterMenu, { FilterType } from "./FilterMenu";
-
-const PHOTO_HEIGHT = 200;
-const MAX_IMAGE_LOAD = 10;
+import FilterMenu from "./FilterMenu";
+import { Photo } from "./Structs/Photo";
 
 let months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
 
 class PhotoListProps{
   setCurrentPhotoView!: ( view: any ) => any;
-  setPhotoCount!: ( value: any ) => any;
-  setPhotoSize!: ( value: any ) => any;
   currentPhotoView!: () => any;
   photoNavChoice!: () => string;
   setPhotoNavChoice!: ( view: any ) => any;
-  setConfirmationBox!: ( text: string, cb: () => void ) => void;
-  requestPhotoReload!: () => boolean;
-  setRequestPhotoReload!: ( val: boolean ) => boolean;
-  storageInfo!: () => { storage: number, used: number, sync: boolean };
-  loggedIn!: () => { loggedIn: boolean, username: string, avatar: string, id: string, serverVersion: string };
   isPhotosSyncing!: () => boolean;
   setIsPhotosSyncing!: ( syncing: boolean ) => boolean;
 }
···
 }
 
 let PhotoList = ( props: PhotoListProps ) => {
-  let amountLoaded = 0;
-  let imagesLoading = 0;
-
-  let hasFirstLoaded = false;
-
   let photoTreeLoadingContainer: HTMLElement;
 
   let scrollToTop: HTMLElement;
···
   let ctx: CanvasRenderingContext2D;
   let ctxBG: CanvasRenderingContext2D;
 
-  let photos: Photo[] = [];
   let currentPhotoIndex: number = -1;
 
   let scroll: number = 0;
   let targetScroll: number = 0;
 
   let quitRender: boolean = true;
-  let photoPath: string;
 
   let currentPopup = ListPopup.NONE;
 
-  let filterType: FilterType = FilterType.USER;
-  let filter = '';
-
-  let filteredPhotos: Photo[] = [];
-
   Window.getCurrent().isVisible().then(visible => {
     quitRender = !visible;
   })
···
 
         break;
     }
-  }
-
-  createEffect(() => {
-    if(props.requestPhotoReload()){
-      props.setRequestPhotoReload(false);
-      reloadPhotos();
-    }
-  })
-
-  class PhotoMetadata{
-    width!: number;
-    height!: number;
-    metadata!: string;
-    path!: string;
-  }
-
-  class Photo{
-    path: string;
-    loaded: boolean = false;
-    loading: boolean = false;
-    metaLoaded: boolean = false;
-    image?: HTMLCanvasElement;
-    imageEl?: HTMLImageElement;
-    width?: number;
-    height?: number;
-    loadingRotate: number = 0;
-    metadata: any;
-
-    frames: number = 0;
-    shown: boolean = false;
-
-    x: number = 0;
-    y: number = 0;
-    scaledWidth?: number;
-    scaledHeight?: number;
-
-    dateString: string;
-    date: Date;
-
-    legacy: boolean = false;
-
-    public onMetaLoaded: () => void = () => {};
-
-    constructor( path: string, isLegacy: boolean = false ){
-      this.path = path;
-      this.legacy = isLegacy;
-
-      if(this.legacy)
-        this.dateString = this.path.split('_')[2];
-      else
-        this.dateString = this.path.split('_')[1];
-
-      let splitDateString = this.dateString.split('-');
-
-      this.date = new Date();
-
-      this.date.setFullYear(parseInt(splitDateString[0]));
-      this.date.setMonth(parseInt(splitDateString[1]));
-      this.date.setDate(parseInt(splitDateString[2]));
-    }
-
-    loadMeta(){
-      invoke('load_photo_meta', { photo: this.path });
-    }
-
-    loadImage(){
-      if(this.loading || this.loaded || imagesLoading >= MAX_IMAGE_LOAD)return;
-
-      this.loadMeta();
-      if(!this.metaLoaded)return;
-
-      this.loading = true;
-
-      imagesLoading++;
-
-      this.image = document.createElement('canvas');
-
-      this.imageEl = document.createElement('img');
-      this.imageEl.crossOrigin = 'anonymous';
-
-      this.imageEl.src = (window.OS === "windows" ? "http://photo.localhost/" : "photo://localhost") + photoPath + this.path + "?downscale";
-
-      this.imageEl.onload = () => {
-        this.image!.width = this.scaledWidth!;
-        this.image!.height = this.scaledHeight!;
-
-        this.image!.getContext('2d')!.drawImage(this.imageEl!, 0, 0, this.scaledWidth!, this.scaledHeight!);
-
-        this.loaded = true;
-        this.loading = false;
-
-        imagesLoading--;
-      }
-    }
-  }
+  } 
 
   createEffect(() => {
     let action = props.photoNavChoice();
 
     switch(action){
       case 'prev':
-        if(!filteredPhotos[currentPhotoIndex - 1])break;
-        props.setCurrentPhotoView(filteredPhotos[currentPhotoIndex - 1]);
+        if(!window.PhotoLoadingManager.FilteredPhotos[currentPhotoIndex - 1])break;
+        props.setCurrentPhotoView(window.PhotoLoadingManager.FilteredPhotos[currentPhotoIndex - 1]);
 
         currentPhotoIndex--;
         break;
       case 'next':
-        if(!filteredPhotos[currentPhotoIndex + 1])break;
-        props.setCurrentPhotoView(filteredPhotos[currentPhotoIndex + 1]);
+        if(!window.PhotoLoadingManager.FilteredPhotos[currentPhotoIndex + 1])break;
+        props.setCurrentPhotoView(window.PhotoLoadingManager.FilteredPhotos[currentPhotoIndex + 1]);
 
         currentPhotoIndex++;
         break;
···
   })
 
   let render = () => {
+    // TODO: Tidy this up, optimise it more 
+    // I am really procrastinating rewriting this...
+    
     if(!quitRender)
       requestAnimationFrame(render);
     else
···
     scroll = scroll + (targetScroll - scroll) * 0.2;
 
     let lastPhoto;
-    for (let i = 0; i < filteredPhotos.length; i++) {
-      let p = filteredPhotos[i];
+    for (let i = 0; i < window.PhotoLoadingManager.FilteredPhotos.length; i++) {
+      let p = window.PhotoLoadingManager.FilteredPhotos[i];
 
       if(currentRowIndex * 210 - scroll > photoContainer.height){
         p.shown = false;
···
       })
     }
 
-    if(filteredPhotos.length == 0){
+    if(window.PhotoLoadingManager.FilteredPhotos.length == 0){
       ctx.textAlign = 'center';
       ctx.textBaseline = 'middle';
       ctx.globalAlpha = 1;
···
     console.log('Shown Window');
     quitRender = false;
 
-    if(hasFirstLoaded)
+    if(window.PhotoLoadingManager.HasFirstLoaded)
       requestAnimationFrame(render);
   })
 
-  listen('photo_meta_loaded', ( event: any ) => {
-    let data: PhotoMetadata = event.payload;
-
-    let photo = photos.find(x => x.path === data.path);
-    if(!photo)return;
-
-    photo.width = data.width;
-    photo.height = data.height;
-
-    let scale = PHOTO_HEIGHT / photo.height;
-
-    photo.scaledWidth = photo.width * scale;
-    photo.scaledHeight = PHOTO_HEIGHT;
-
-    photo.metadata = data.metadata.split('\u0000').filter(x => x !== '')[1];
-    amountLoaded++;
-
-    photo.metaLoaded = true;
-    photo.onMetaLoaded();
-
-    reloadFilters();
-
-    if(amountLoaded === photos.length && !hasFirstLoaded){
-      filteredPhotos = photos;
-      hasFirstLoaded = true;
-
-      anime({
-        targets: photoTreeLoadingContainer,
-        height: 0,
-        easing: 'easeInOutQuad',
-        duration: 500,
-        opacity: 0,
-        complete: () => {
-          photoTreeLoadingContainer.style.display = 'none';
-        }
-      })
-
-      anime({
-        targets: '.reload-photos',
-        opacity: 1,
-        duration: 150,
-        easing: 'easeInOutQuad'
-      })
-
-      render();
-    }
-  })
-
-  listen('photo_create', async ( event: any ) => {
-    let photo = new Photo(event.payload);
-
-    photos.splice(0, 0, photo);
-    photo.loadMeta();
-
-    if(!props.isPhotosSyncing() && props.storageInfo().sync){
-      props.setIsPhotosSyncing(true);
-      invoke('sync_photos', { token: (await invoke('get_config_value_string', { key: 'token' })) });
-    }
-  })
-
-  listen('photo_remove', ( event: any ) => {
-    photos = photos.filter(x => x.path !== event.payload);
-    filteredPhotos = filteredPhotos.filter(x => x.path !== event.payload);
-
-    if(event.payload === props.currentPhotoView().path){
-      currentPhotoIndex = -1;
-      props.setCurrentPhotoView(null);
-    }
-  })
-
-  let reloadPhotos = async () => {
-    photoPath = await invoke('get_user_photos_path') + '/';
-
-    photoTreeLoadingContainer.style.opacity = '1';
-    photoTreeLoadingContainer.style.height = '100%';
-    photoTreeLoadingContainer.style.display = 'flex';
-
-    quitRender = true;
-    amountLoaded = 0;
-    scroll = 0;
-
-    photos = [];
-    filteredPhotos = [];
+  window.PhotoLoadingManager.OnLoadingFinished(() => {
+    anime({
+      targets: photoTreeLoadingContainer,
+      height: 0,
+      easing: 'easeInOutQuad',
+      duration: 500,
+      opacity: 0,
+      complete: () => {
+        photoTreeLoadingContainer.style.display = 'none';
+      }
+    })
 
     anime({
       targets: '.reload-photos',
-      opacity: 0,
+      opacity: 1,
       duration: 150,
       easing: 'easeInOutQuad'
     })
 
-    invoke('load_photos');
-  }
-
-  let loadPhotos = async () => {
-    photoPath = await invoke('get_user_photos_path') + '/';
-
-    listen('photos_loaded', ( event: any ) => {
-      let photoPaths = event.payload.photos.reverse();
-      console.log(photoPaths);
-
-      props.setPhotoCount(photoPaths.length);
-      props.setPhotoSize(event.payload.size);
-
-      let doesHaveLegacy = false;
-
-      photoPaths.forEach(( path: string ) => {
-        let photo
-
-        if(path.slice(0, 9) === "legacy://"){
-          photo = new Photo(path.slice(9), true);
-          doesHaveLegacy = true;
-        } else
-          photo = new Photo(path, false);
-
-        photos.push(photo);
-        photo.loadMeta();
-      })
-
-      if(doesHaveLegacy){
-        photos = photos.sort(( a, b ) => b.date.valueOf() - a.date.valueOf());
-      }
-
-      console.log(photos.length + ' Photos found.');
-      if(photos.length === 0){
-        console.log('No photos found, Skipping loading stage.');
-
-        filteredPhotos = photos;
-        hasFirstLoaded = true;
-  
-        anime({
-          targets: photoTreeLoadingContainer,
-          height: 0,
-          easing: 'easeInOutQuad',
-          duration: 500,
-          opacity: 0,
-          complete: () => {
-            photoTreeLoadingContainer.style.display = 'none';
-          }
-        })
-  
-        anime({
-          targets: '.reload-photos',
-          opacity: 1,
-          duration: 150,
-          easing: 'easeInOutQuad'
-        })
-
-        render();
-      }
-    });
-
-    invoke('load_photos');
-  }
+    render();
+  });
 
   onMount(() => {
     ctx = photoContainer.getContext('2d')!;
     ctxBG = photoContainerBG.getContext('2d')!;
-    loadPhotos();
+
+    window.PhotoLoadingManager.Load();
 
     anime.set(scrollToTop, { opacity: 0, translateY: '-10px', display: 'none' });
 
···
     })
 
     photoContainer.addEventListener('click', ( e: MouseEvent ) => {
-      let photo = filteredPhotos.find(x =>
+      let photo = window.PhotoLoadingManager.FilteredPhotos.find(x =>
         e.clientX > x.x &&
         e.clientY > x.y &&
         e.clientX < x.x + x.scaledWidth! &&
···
 
       if(photo){
         props.setCurrentPhotoView(photo);
-        currentPhotoIndex = filteredPhotos.indexOf(photo);
+        currentPhotoIndex = window.PhotoLoadingManager.FilteredPhotos.indexOf(photo);
       } else
         currentPhotoIndex = -1;
     })
···
     window.removeEventListener('keyup', closeWithKey);
   })
 
-  let reloadFilters = () => {
-    filteredPhotos = [];
-
-    switch(filterType){
-      case FilterType.USER:
-        photos.map(p => {
-          if(p.metadata){
-            let meta = JSON.parse(p.metadata);
-            let photo = meta.players.find(( y: any ) => y.displayName.toLowerCase().includes(filter) || y.id === filter);
-    
-            if(photo)filteredPhotos.push(p);
-          }
-        })
-        break;
-      case FilterType.WORLD:
-        photos.map(p => {
-          if(p.metadata){
-            let meta = JSON.parse(p.metadata);
-            let photo = meta.world.name.toLowerCase().includes(filter) || meta.world.id === filter;
-    
-            if(photo)filteredPhotos.push(p);
-          }
-        })
-        break;
-    }
-  }
-
   return (
     <div class="photo-list">
       <div ref={filterContainer!} class="filter-container">
-        <FilterMenu
-          setFilter={( f ) => { filter = f.toLowerCase(); reloadFilters(); }}
-          setFilterType={( t ) => { filterType = t; reloadFilters(); }} />
+        <FilterMenu />
       </div>
 
       <div class="photo-tree-loading" ref={( el ) => photoTreeLoadingContainer = el}>Scanning Photo Tree...</div>
···
           <img draggable="false" src="/icon/angle-up-solid.svg"></img>
         </div>
       </div>
-      <div class="reload-photos" onClick={() => props.setConfirmationBox("Are you sure you want to reload all photos? This can cause the application to slow down while it is loading...", () => window.location.reload())}>
+      <div class="reload-photos" onClick={() => window.ConfirmationBoxManager.SetConfirmationBox("Are you sure you want to reload all photos? This can cause the application to slow down while it is loading...", () => window.location.reload())}>
         <div class="icon" style={{ width: '17px' }}>
           <img draggable="false" width="17" height="17" src="/icon/arrows-rotate-solid.svg"></img>
         </div>

src/Components/PhotoViewer.tsx

···
   currentPhotoView!: () => any;
   setCurrentPhotoView!: ( view: any ) => any;
   setPhotoNavChoice!: ( view: any ) => any;
-  setConfirmationBox!: ( text: string, cb: () => void ) => void;
-  storageInfo!: () => { storage: number, used: number, sync: boolean };
-  loggedIn!: () => { loggedIn: boolean, username: string, avatar: string, id: string, serverVersion: string };
 }
 
 class WorldCache{
···
         <div class="viewer-button"
           onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
           onMouseLeave={( el ) => anime({ targets: el.currentTarget, width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
-          onClick={() => props.setConfirmationBox("Are you sure you want to delete this photo?", async () => { invoke("delete_photo", {
+          onClick={() => window.ConfirmationBoxManager.SetConfirmationBox("Are you sure you want to delete this photo?", async () => { invoke("delete_photo", {
             path: props.currentPhotoView().path,
             token: (await invoke('get_config_value_string', { key: 'token' })) || "none",
-            isSyncing: props.loggedIn().loggedIn ? props.storageInfo().sync : false
+            isSyncing: window.AccountManager.hasAccount() ? window.AccountManager.Storage()?.isSyncing : false
           });
         })}>
           <div class="icon" style={{ width: '12px', margin: '0' }}>

src/Components/SettingsMenu.tsx

···
 import { bytesToFormatted } from "../utils";
 import { invoke } from '@tauri-apps/api/core';
 import anime from "animejs";
-import { fetch } from "@tauri-apps/plugin-http"
 
-class SettingsMenuProps{
-  setLoadingType!: ( type: string ) => string;
-  photoCount!: () => number;
-  photoSize!: () => number;
-  setRequestPhotoReload!: ( val: boolean ) => boolean;
-  loggedIn!: () => { loggedIn: boolean, username: string, avatar: string, id: string, serverVersion: string };
-  storageInfo!: () => { storage: number, used: number, sync: boolean };
-  setStorageInfo!: ( info: { storage: number, used: number, sync: boolean } ) => { storage: number, used: number, sync: boolean };
-  setConfirmationBox!: ( text: string, cb: () => void ) => void;
-  setLoggedIn!: ( val: { loggedIn: boolean, username: string, avatar: string, id: string, serverVersion: string } ) => { loggedIn: boolean, username: string, avatar: string, id: string, serverVersion: string };
-}
-
-let SettingsMenu = ( props: SettingsMenuProps ) => {
+let SettingsMenu = () => {
   let sliderBar: HTMLElement;
   let settingsContainer: HTMLElement;
   let currentButton = 0;
···
     window.removeEventListener('keyup', closeWithKey);
   })
 
-  let refreshAccount = async () => {
-    fetch('https://photos.phazed.xyz/api/v1/account?token='+(await invoke('get_config_value_string', { key: 'token' }))!)
-      .then(data => data.json())
-      .then(data => {
-        if(!data.ok){
-          console.error(data);
-          return;
-        }
-
-        console.log(data);
-        props.setLoggedIn({ loggedIn: true, username: data.user.username, avatar: data.user.avatar, id: data.user._id, serverVersion: data.user.serverVersion });
-        props.setStorageInfo({ storage: data.user.storage, used: data.user.used, sync: data.user.settings.enableSync });
-      })
-      .catch(e => {
-        console.error(e);
-      })
-  }
-
   return (
     <div class="settings">
       <div class="settings-container" ref={( el ) => settingsContainer = el}>
         <div class="settings-block">
           <h1>Storage Settings</h1>
-          <p>{ props.photoCount() } Photos ({ bytesToFormatted(props.photoSize(), 0) })</p>
+          <p>{ window.PhotoLoadingManager.PhotoCount() } Photos ({ bytesToFormatted(window.PhotoLoadingManager.PhotoSize(), 0) })</p>
 
           <div class="selector">
             <input type="checkbox" id="start-in-bg-check" ref={async ( el ) => {
···
                   }
                 })
 
-                props.setRequestPhotoReload(true);
+                window.location.reload();
               }}>
                 Save
               </span>
···
         <div class="settings-block">
           <h1>Account Settings</h1>
 
-          <Show when={props.loggedIn().loggedIn} fallback={
+          <Show when={window.AccountManager.hasAccount()} fallback={
             <div>
               You aren't logged in. To enable cloud sync and sharing features you need to login to your PhazeID.<br /><br />
               <div class="button" onClick={() => {
-                props.setLoadingType('auth');
-
-                setTimeout(() => {
-                  props.setLoadingType('none');
-                }, 5000);
-    
-                invoke('start_user_auth');
+                window.AccountManager.login();
               }}>Login</div>
             </div>
           }>
             <div class="account-profile">
-              <div class="account-pfp" style={{ background: `url('https://cdn.phazed.xyz/id/avatars/${props.loggedIn().id}/${props.loggedIn().avatar}.png')` }}></div>
+              <div class="account-pfp" style={{ background: `url('https://cdn.phazed.xyz/id/avatars/${window.AccountManager.Profile()?.id}/${window.AccountManager.Profile()?.avatar}.png')` }}></div>
               <div class="account-desc">
-                <div class="reload-photos" onClick={() => refreshAccount()} style={{ opacity: 1 }}>
+                <div class="reload-photos" onClick={() => window.AccountManager.Refresh()} style={{ opacity: 1 }}>
                   <div class="icon" style={{ width: '17px' }}>
                     <img draggable="false" width="17" height="17" src="/icon/arrows-rotate-solid.svg"></img>
                   </div>
                 </div>
-                <h2>{ props.loggedIn().username }</h2>
+                <h2>{ window.AccountManager.Profile()?.username }</h2>
 
-                <Show when={props.storageInfo().sync}>
+                <Show when={window.AccountManager.Storage()?.isSyncing}>
                   <div class="storage-bar">
-                    <div class="storage-bar-inner" style={{ width: ((props.storageInfo().used / props.storageInfo().storage) * 100) + '%' }}></div>
+                    <div class="storage-bar-inner" style={{ width: ((window.AccountManager.Storage()!.used / window.AccountManager.Storage()!.total) * 100) + '%' }}></div>
                   </div>
 
                   <div>
-                    { bytesToFormatted(props.storageInfo().used, 0) } / { bytesToFormatted(props.storageInfo().storage, 0) }<br /><br />
+                    { bytesToFormatted(window.AccountManager.Storage()!.used, 0) } / { bytesToFormatted(window.AccountManager.Storage()!.total, 0) }<br /><br />
 
-                    <span style={{ 'font-size': '10px' }}>Server Version: { props.loggedIn().serverVersion }</span>
+                    <span style={{ 'font-size': '10px' }}>Server Version: { window.AccountManager.Profile()?.serverVersion }</span>
                   </div>
                 </Show>
               </div>
···
 
             <div class="account-notice" style={{ display: 'flex' }}>
               <Show when={!deletingPhotos()} fallback={ "We are deleting your photos, please leave this window open while we delete them." }>
-                <div class="button-danger" onClick={() => props.setConfirmationBox("You are about to delete all your photos from the cloud, and disable syncing. This will NOT delete any local files.", async () => {
-                  props.setStorageInfo({ used: 0, storage: 0, sync: false });
-                  setDeletingPhotos(true);
+                <div class="button-danger" onClick={() => window.ConfirmationBoxManager.SetConfirmationBox("You are about to delete all your photos from the cloud, and disable syncing. This will NOT delete any local files.", async () => {
+                  // TODO: Rework all of this
+
+                  // props.setStorageInfo({ used: 0, storage: 0, sync: false });
+                  // setDeletingPhotos(true);
 
-                  fetch('https://photos-cdn.phazed.xyz/api/v1/allphotos', {
-                    method: 'DELETE',
-                    headers: { auth: (await invoke('get_config_value_string', { key: 'token' }))! }
-                  })
-                    .then(data => data.json())
-                    .then(data => {
-                      console.log(data);
-                      setDeletingPhotos(false);
-                    })
+                  // fetch('https://photos-cdn.phazed.xyz/api/v1/allphotos', {
+                  //   method: 'DELETE',
+                  //   headers: { auth: (await invoke('get_config_value_string', { key: 'token' }))! }
+                  // })
+                  //   .then(data => data.json())
+                  //   .then(data => {
+                  //     console.log(data);
+                  //     setDeletingPhotos(false);
+                  //   })
                 })}>Delete All Photos.</div> <div>This deletes all photos stored in the cloud and disables syncing.</div>
               </Show>
             </div>

src/Components/Structs/FilterType.ts

···
+export enum FilterType{
+  USER, WORLD
+}

src/Components/Structs/Photo.ts

···
+import { invoke } from "@tauri-apps/api/core";
+import { Vars } from "./Vars";
+
+let imagesLoading = 0;
+
+export class Photo{
+  path: string;
+  loaded: boolean = false;
+  loading: boolean = false;
+  metaLoaded: boolean = false;
+  image?: HTMLCanvasElement;
+  imageEl?: HTMLImageElement;
+  width?: number;
+  height?: number;
+  loadingRotate: number = 0;
+  metadata: any;
+
+  frames: number = 0;
+  shown: boolean = false;
+
+  x: number = 0;
+  y: number = 0;
+  scaledWidth?: number;
+  scaledHeight?: number;
+
+  dateString: string;
+  date: Date;
+
+  legacy: boolean = false;
+
+  public onMetaLoaded: () => void = () => {};
+
+  constructor( path: string, isLegacy: boolean = false ){
+    this.path = path;
+    this.legacy = isLegacy;
+
+    if(this.legacy)
+      this.dateString = this.path.split('_')[2];
+    else
+      this.dateString = this.path.split('_')[1];
+
+    let splitDateString = this.dateString.split('-');
+
+    this.date = new Date();
+
+    this.date.setFullYear(parseInt(splitDateString[0]));
+    this.date.setMonth(parseInt(splitDateString[1]));
+    this.date.setDate(parseInt(splitDateString[2]));
+  }
+
+  loadMeta(){
+    invoke('load_photo_meta', { photo: this.path });
+  }
+
+  loadImage(){
+    if(this.loading || this.loaded || imagesLoading >= Vars.MAX_IMAGE_LOAD)return;
+
+    this.loadMeta();
+    if(!this.metaLoaded)return;
+
+    this.loading = true;
+
+    imagesLoading++;
+
+    this.image = document.createElement('canvas');
+
+    this.imageEl = document.createElement('img');
+    this.imageEl.crossOrigin = 'anonymous';
+
+    this.imageEl.src = (window.OS === "windows" ? "http://photo.localhost/" : "photo://localhost") + this.path + "?downscale";
+
+    this.imageEl.onload = () => {
+      this.image!.width = this.scaledWidth!;
+      this.image!.height = this.scaledHeight!;
+
+      this.image!.getContext('2d')!.drawImage(this.imageEl!, 0, 0, this.scaledWidth!, this.scaledHeight!);
+
+      this.loaded = true;
+      this.loading = false;
+
+      imagesLoading--;
+    }
+  }
+}

src/Components/Structs/PhotoMetadata.ts

···
+export class PhotoMetadata{
+  width!: number;
+  height!: number;
+  metadata!: string;
+  path!: string;
+}

src/Components/Structs/ProfileData.ts

···
+export class ProfileData{
+  id!: string;
+  username!: string;
+  avatar!: string;
+  serverVersion!: number;
+}

src/Components/Structs/StorageData.ts

···
+export class StorageData{
+  used!: number;
+  total!: number;
+  isSyncing!: boolean;
+}

src/Components/Structs/Vars.ts

···
+export class Vars{
+  static MAX_IMAGE_LOAD = 10;
+  static PHOTO_HEIGHT = 200;
+}

src/index.tsx

···
 
 declare global{
   interface Window {
-    CloseAllPopups: (() => void)[]
+    AccountManager: AccountManager;
+    LoadingManager: LoadingManager;
+    PhotoLoadingManager: PhotoLoadingManager;
+    ConfirmationBoxManager: ConfirmationBoxManager;
+    PhotoViewerManager: PhotoViewerManager; 
+
+    CloseAllPopups: (() => void)[];
     OS: string;
   }
 }
···
 import "./styles.css";
 import App from "./Components/App";
 import { invoke } from "@tauri-apps/api/core";
+
+import { AccountManager } from "./Components/Managers/AccountManager";
+import { LoadingManager } from "./Components/Managers/LoadingManager";
+import { PhotoLoadingManager } from "./Components/Managers/PhotoLoadingManager";
+import { ConfirmationBoxManager } from "./Components/Managers/ConfirmationBoxManager";
+import { PhotoViewerManager } from "./Components/Managers/PhotoViewerManager";
+
+window.AccountManager = new AccountManager();
+window.LoadingManager = new LoadingManager();
+window.PhotoLoadingManager = new PhotoLoadingManager();
+window.ConfirmationBoxManager = new ConfirmationBoxManager();
+window.PhotoViewerManager = new PhotoViewerManager();
 
 (async () => {
   window.OS = await invoke('get_os');