change styles, fix filters

changelog

···
   - Fixed some icons not fading out when moving to the settings menu
   - Removed the auto updater
   - Removed account login stuff
-  - Fixed app name on windows
+  - Fixed app name on windows
+  - Update styles
+  - Fixed filters removing photos without metadata

package.json

···
     "@tauri-apps/plugin-process": "2.0.0-rc.0",
     "@tauri-apps/plugin-shell": "2.0.0-rc.0",
     "@types/animejs": "^3.1.13",
-    "animejs": "^3.2.2",
+    "animejs": "^4.1.3",
     "solid-js": "^1.9.9"
   },
   "devDependencies": {

pnpm-lock.yaml

···
         specifier: ^3.1.13
         version: 3.1.13
       animejs:
-        specifier: ^3.2.2
-        version: 3.2.2
+        specifier: ^4.1.3
+        version: 4.1.3
       solid-js:
         specifier: ^1.9.9
         version: 1.9.9
···
   '@jridgewell/trace-mapping@0.3.30':
     resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
 
-  '@rollup/rollup-android-arm-eabi@4.46.2':
-    resolution: {integrity: sha512-Zj3Hl6sN34xJtMv7Anwb5Gu01yujyE/cLBDB2gnHTAHaWS1Z38L7kuSG+oAh0giZMqG060f/YBStXtMH6FvPMA==}
+  '@rollup/rollup-android-arm-eabi@4.46.3':
+    resolution: {integrity: sha512-UmTdvXnLlqQNOCJnyksjPs1G4GqXNGW1LrzCe8+8QoaLhhDeTXYBgJ3k6x61WIhlHX2U+VzEJ55TtIjR/HTySA==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.46.2':
-    resolution: {integrity: sha512-nTeCWY83kN64oQ5MGz3CgtPx8NSOhC5lWtsjTs+8JAJNLcP3QbLCtDDgUKQc/Ro/frpMq4SHUaHN6AMltcEoLQ==}
+  '@rollup/rollup-android-arm64@4.46.3':
+    resolution: {integrity: sha512-8NoxqLpXm7VyeI0ocidh335D6OKT0UJ6fHdnIxf3+6oOerZZc+O7r+UhvROji6OspyPm+rrIdb1gTXtVIqn+Sg==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.46.2':
-    resolution: {integrity: sha512-HV7bW2Fb/F5KPdM/9bApunQh68YVDU8sO8BvcW9OngQVN3HHHkw99wFupuUJfGR9pYLLAjcAOA6iO+evsbBaPQ==}
+  '@rollup/rollup-darwin-arm64@4.46.3':
+    resolution: {integrity: sha512-csnNavqZVs1+7/hUKtgjMECsNG2cdB8F7XBHP6FfQjqhjF8rzMzb3SLyy/1BG7YSfQ+bG75Ph7DyedbUqwq1rA==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.46.2':
-    resolution: {integrity: sha512-SSj8TlYV5nJixSsm/y3QXfhspSiLYP11zpfwp6G/YDXctf3Xkdnk4woJIF5VQe0of2OjzTt8EsxnJDCdHd2xMA==}
+  '@rollup/rollup-darwin-x64@4.46.3':
+    resolution: {integrity: sha512-r2MXNjbuYabSIX5yQqnT8SGSQ26XQc8fmp6UhlYJd95PZJkQD1u82fWP7HqvGUf33IsOC6qsiV+vcuD4SDP6iw==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.46.2':
-    resolution: {integrity: sha512-ZyrsG4TIT9xnOlLsSSi9w/X29tCbK1yegE49RYm3tu3wF1L/B6LVMqnEWyDB26d9Ecx9zrmXCiPmIabVuLmNSg==}
+  '@rollup/rollup-freebsd-arm64@4.46.3':
+    resolution: {integrity: sha512-uluObTmgPJDuJh9xqxyr7MV61Imq+0IvVsAlWyvxAaBSNzCcmZlhfYcRhCdMaCsy46ccZa7vtDDripgs9Jkqsw==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.46.2':
-    resolution: {integrity: sha512-pCgHFoOECwVCJ5GFq8+gR8SBKnMO+xe5UEqbemxBpCKYQddRQMgomv1104RnLSg7nNvgKy05sLsY51+OVRyiVw==}
+  '@rollup/rollup-freebsd-x64@4.46.3':
+    resolution: {integrity: sha512-AVJXEq9RVHQnejdbFvh1eWEoobohUYN3nqJIPI4mNTMpsyYN01VvcAClxflyk2HIxvLpRcRggpX1m9hkXkpC/A==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.46.2':
-    resolution: {integrity: sha512-EtP8aquZ0xQg0ETFcxUbU71MZlHaw9MChwrQzatiE8U/bvi5uv/oChExXC4mWhjiqK7azGJBqU0tt5H123SzVA==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.46.3':
+    resolution: {integrity: sha512-byyflM+huiwHlKi7VHLAYTKr67X199+V+mt1iRgJenAI594vcmGGddWlu6eHujmcdl6TqSNnvqaXJqZdnEWRGA==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.46.2':
-    resolution: {integrity: sha512-qO7F7U3u1nfxYRPM8HqFtLd+raev2K137dsV08q/LRKRLEc7RsiDWihUnrINdsWQxPR9jqZ8DIIZ1zJJAm5PjQ==}
+  '@rollup/rollup-linux-arm-musleabihf@4.46.3':
+    resolution: {integrity: sha512-aLm3NMIjr4Y9LklrH5cu7yybBqoVCdr4Nvnm8WB7PKCn34fMCGypVNpGK0JQWdPAzR/FnoEoFtlRqZbBBLhVoQ==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.46.2':
-    resolution: {integrity: sha512-3dRaqLfcOXYsfvw5xMrxAk9Lb1f395gkoBYzSFcc/scgRFptRXL9DOaDpMiehf9CO8ZDRJW2z45b6fpU5nwjng==}
+  '@rollup/rollup-linux-arm64-gnu@4.46.3':
+    resolution: {integrity: sha512-VtilE6eznJRDIoFOzaagQodUksTEfLIsvXymS+UdJiSXrPW7Ai+WG4uapAc3F7Hgs791TwdGh4xyOzbuzIZrnw==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.46.2':
-    resolution: {integrity: sha512-fhHFTutA7SM+IrR6lIfiHskxmpmPTJUXpWIsBXpeEwNgZzZZSg/q4i6FU4J8qOGyJ0TR+wXBwx/L7Ho9z0+uDg==}
+  '@rollup/rollup-linux-arm64-musl@4.46.3':
+    resolution: {integrity: sha512-dG3JuS6+cRAL0GQ925Vppafi0qwZnkHdPeuZIxIPXqkCLP02l7ka+OCyBoDEv8S+nKHxfjvjW4OZ7hTdHkx8/w==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.46.2':
-    resolution: {integrity: sha512-i7wfGFXu8x4+FRqPymzjD+Hyav8l95UIZ773j7J7zRYc3Xsxy2wIn4x+llpunexXe6laaO72iEjeeGyUFmjKeA==}
+  '@rollup/rollup-linux-loongarch64-gnu@4.46.3':
+    resolution: {integrity: sha512-iU8DxnxEKJptf8Vcx4XvAUdpkZfaz0KWfRrnIRrOndL0SvzEte+MTM7nDH4A2Now4FvTZ01yFAgj6TX/mZl8hQ==}
     cpu: [loong64]
     os: [linux]
 
-  '@rollup/rollup-linux-ppc64-gnu@4.46.2':
-    resolution: {integrity: sha512-B/l0dFcHVUnqcGZWKcWBSV2PF01YUt0Rvlurci5P+neqY/yMKchGU8ullZvIv5e8Y1C6wOn+U03mrDylP5q9Yw==}
+  '@rollup/rollup-linux-ppc64-gnu@4.46.3':
+    resolution: {integrity: sha512-VrQZp9tkk0yozJoQvQcqlWiqaPnLM6uY1qPYXvukKePb0fqaiQtOdMJSxNFUZFsGw5oA5vvVokjHrx8a9Qsz2A==}
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.46.2':
-    resolution: {integrity: sha512-32k4ENb5ygtkMwPMucAb8MtV8olkPT03oiTxJbgkJa7lJ7dZMr0GCFJlyvy+K8iq7F/iuOr41ZdUHaOiqyR3iQ==}
+  '@rollup/rollup-linux-riscv64-gnu@4.46.3':
+    resolution: {integrity: sha512-uf2eucWSUb+M7b0poZ/08LsbcRgaDYL8NCGjUeFMwCWFwOuFcZ8D9ayPl25P3pl+D2FH45EbHdfyUesQ2Lt9wA==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-musl@4.46.2':
-    resolution: {integrity: sha512-t5B2loThlFEauloaQkZg9gxV05BYeITLvLkWOkRXogP4qHXLkWSbSHKM9S6H1schf/0YGP/qNKtiISlxvfmmZw==}
+  '@rollup/rollup-linux-riscv64-musl@4.46.3':
+    resolution: {integrity: sha512-7tnUcDvN8DHm/9ra+/nF7lLzYHDeODKKKrh6JmZejbh1FnCNZS8zMkZY5J4sEipy2OW1d1Ncc4gNHUd0DLqkSg==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.46.2':
-    resolution: {integrity: sha512-YKjekwTEKgbB7n17gmODSmJVUIvj8CX7q5442/CK80L8nqOUbMtf8b01QkG3jOqyr1rotrAnW6B/qiHwfcuWQA==}
+  '@rollup/rollup-linux-s390x-gnu@4.46.3':
+    resolution: {integrity: sha512-MUpAOallJim8CsJK+4Lc9tQzlfPbHxWDrGXZm2z6biaadNpvh3a5ewcdat478W+tXDoUiHwErX/dOql7ETcLqg==}
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.46.2':
-    resolution: {integrity: sha512-Jj5a9RUoe5ra+MEyERkDKLwTXVu6s3aACP51nkfnK9wJTraCC8IMe3snOfALkrjTYd2G1ViE1hICj0fZ7ALBPA==}
+  '@rollup/rollup-linux-x64-gnu@4.46.3':
+    resolution: {integrity: sha512-F42IgZI4JicE2vM2PWCe0N5mR5vR0gIdORPqhGQ32/u1S1v3kLtbZ0C/mi9FFk7C5T0PgdeyWEPajPjaUpyoKg==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.46.2':
-    resolution: {integrity: sha512-7kX69DIrBeD7yNp4A5b81izs8BqoZkCIaxQaOpumcJ1S/kmqNFjPhDu1LHeVXv0SexfHQv5cqHsxLOjETuqDuA==}
+  '@rollup/rollup-linux-x64-musl@4.46.3':
+    resolution: {integrity: sha512-oLc+JrwwvbimJUInzx56Q3ujL3Kkhxehg7O1gWAYzm8hImCd5ld1F2Gry5YDjR21MNb5WCKhC9hXgU7rRlyegQ==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-win32-arm64-msvc@4.46.2':
-    resolution: {integrity: sha512-wiJWMIpeaak/jsbaq2HMh/rzZxHVW1rU6coyeNNpMwk5isiPjSTx0a4YLSlYDwBH/WBvLz+EtsNqQScZTLJy3g==}
+  '@rollup/rollup-win32-arm64-msvc@4.46.3':
+    resolution: {integrity: sha512-lOrQ+BVRstruD1fkWg9yjmumhowR0oLAAzavB7yFSaGltY8klttmZtCLvOXCmGE9mLIn8IBV/IFrQOWz5xbFPg==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.46.2':
-    resolution: {integrity: sha512-gBgaUDESVzMgWZhcyjfs9QFK16D8K6QZpwAaVNJxYDLHWayOta4ZMjGm/vsAEy3hvlS2GosVFlBlP9/Wb85DqQ==}
+  '@rollup/rollup-win32-ia32-msvc@4.46.3':
+    resolution: {integrity: sha512-vvrVKPRS4GduGR7VMH8EylCBqsDcw6U+/0nPDuIjXQRbHJc6xOBj+frx8ksfZAh6+Fptw5wHrN7etlMmQnPQVg==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.46.2':
-    resolution: {integrity: sha512-CvUo2ixeIQGtF6WvuB87XWqPQkoFAFqW+HUo/WzHwuHDvIwZCtjdWXoYCcr06iKGydiqTclC4jU/TNObC/xKZg==}
+  '@rollup/rollup-win32-x64-msvc@4.46.3':
+    resolution: {integrity: sha512-fi3cPxCnu3ZeM3EwKZPgXbWoGzm2XHgB/WShKI81uj8wG0+laobmqy5wbgEwzstlbLu4MyO8C19FyhhWseYKNQ==}
     cpu: [x64]
     os: [win32]
 
···
     resolution: {integrity: sha512-v454Qs3REHc3Za59U+/eSmBsdmF+3NE5+76+lFDaitVqN4ZglDHENDaMARYKGJVZuxiSkzyqG0SeG7lLQjVkPA==}
     engines: {node: '>= 18.18', npm: '>= 6.6.0', yarn: '>= 1.19.1'}
 
-  '@tauri-apps/api@2.7.0':
-    resolution: {integrity: sha512-v7fVE8jqBl8xJFOcBafDzXFc8FnicoH3j8o8DNNs0tHuEBmXUDqrCOAzMRX0UkfpwqZLqvrvK0GNQ45DfnoVDg==}
+  '@tauri-apps/api@2.8.0':
+    resolution: {integrity: sha512-ga7zdhbS2GXOMTIZRT0mYjKJtR9fivsXzsyq5U3vjDL0s6DTMwYRm0UHNjzTY5dh4+LSC68Sm/7WEiimbQNYlw==}
 
   '@tauri-apps/cli-darwin-arm64@2.0.0-rc.5':
     resolution: {integrity: sha512-EoduJ5SeMfBKCe7I291JBH+lkrf2E0+mQF1rP+Jq4CjWPer11OeEcUSFtHURB3Z3ItzObQ7ALPulMGhMe6E9rg==}
···
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
-  animejs@3.2.2:
-    resolution: {integrity: sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ==}
+  animejs@4.1.3:
+    resolution: {integrity: sha512-4XzlIsQsku1ycSPzchxxT0N+ohEMZObG71nOSBBkZoV4sgQvtXa/qAANkFpTE6pegdV8JnIBZiB0LfdxNoRNMw==}
 
   babel-plugin-jsx-dom-expressions@0.40.1:
     resolution: {integrity: sha512-b4iHuirqK7RgaMzB2Lsl7MqrlDgQtVRSSazyrmx7wB3T759ggGjod5Rkok5MfHjQXhR7tRPmdwoeGPqBnW2KfA==}
···
       solid-js:
         optional: true
 
-  browserslist@4.25.2:
-    resolution: {integrity: sha512-0si2SJK3ooGzIawRu61ZdPCO1IncZwS8IzuX73sPZsXW6EQ/w/DAfPyKI8l1ETTCr2MnvqWitmlCUxgdul45jA==}
+  browserslist@4.25.3:
+    resolution: {integrity: sha512-cDGv1kkDI4/0e5yON9yM5G/0A5u8sf5TnmdX5C9qHzI9PPu++sQ9zjm1k9NiOrf3riY4OkK0zSGqfvJyJsgCBQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
···
       supports-color:
         optional: true
 
-  electron-to-chromium@1.5.202:
-    resolution: {integrity: sha512-NxbYjRmiHcHXV1Ws3fWUW+SLb62isauajk45LUJ/HgIOkUA7jLZu/X2Iif+X9FBNK8QkF9Zb4Q2mcwXCcY30mg==}
+  electron-to-chromium@1.5.207:
+    resolution: {integrity: sha512-mryFrrL/GXDTmAtIVMVf+eIXM09BBPlO5IQ7lUyKmK8d+A4VpRGG+M3ofoVef6qyF8s60rJei8ymlJxjUA8Faw==}
 
   entities@6.0.1:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
···
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
-  rollup@4.46.2:
-    resolution: {integrity: sha512-WMmLFI+Boh6xbop+OAGo9cQ3OgX9MIg7xOQjn+pTCwOkk+FNDAeAemXkJ3HzDJrVXleLOFVa1ipuc1AmEx1Dwg==}
+  rollup@4.46.3:
+    resolution: {integrity: sha512-RZn2XTjXb8t5g13f5YclGoilU/kwT696DIkY3sywjdZidNSi3+vseaQov7D7BZXVJCPv3pDWUN69C78GGbXsKw==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
···
     dependencies:
       '@babel/compat-data': 7.28.0
       '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.25.2
+      browserslist: 4.25.3
       lru-cache: 5.1.1
       semver: 6.3.1
 
···
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@rollup/rollup-android-arm-eabi@4.46.2':
+  '@rollup/rollup-android-arm-eabi@4.46.3':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.46.2':
+  '@rollup/rollup-android-arm64@4.46.3':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.46.2':
+  '@rollup/rollup-darwin-arm64@4.46.3':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.46.2':
+  '@rollup/rollup-darwin-x64@4.46.3':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.46.2':
+  '@rollup/rollup-freebsd-arm64@4.46.3':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.46.2':
+  '@rollup/rollup-freebsd-x64@4.46.3':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.46.2':
+  '@rollup/rollup-linux-arm-gnueabihf@4.46.3':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.46.2':
+  '@rollup/rollup-linux-arm-musleabihf@4.46.3':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.46.2':
+  '@rollup/rollup-linux-arm64-gnu@4.46.3':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.46.2':
+  '@rollup/rollup-linux-arm64-musl@4.46.3':
     optional: true
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.46.2':
+  '@rollup/rollup-linux-loongarch64-gnu@4.46.3':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-gnu@4.46.2':
+  '@rollup/rollup-linux-ppc64-gnu@4.46.3':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.46.2':
+  '@rollup/rollup-linux-riscv64-gnu@4.46.3':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.46.2':
+  '@rollup/rollup-linux-riscv64-musl@4.46.3':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.46.2':
+  '@rollup/rollup-linux-s390x-gnu@4.46.3':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.46.2':
+  '@rollup/rollup-linux-x64-gnu@4.46.3':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.46.2':
+  '@rollup/rollup-linux-x64-musl@4.46.3':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.46.2':
+  '@rollup/rollup-win32-arm64-msvc@4.46.3':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.46.2':
+  '@rollup/rollup-win32-ia32-msvc@4.46.3':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.46.2':
+  '@rollup/rollup-win32-x64-msvc@4.46.3':
     optional: true
 
   '@tauri-apps/api@2.0.0-rc.0': {}
 
-  '@tauri-apps/api@2.7.0': {}
+  '@tauri-apps/api@2.8.0': {}
 
   '@tauri-apps/cli-darwin-arm64@2.0.0-rc.5':
     optional: true
···
 
   '@tauri-apps/plugin-deep-link@2.4.1':
     dependencies:
-      '@tauri-apps/api': 2.7.0
+      '@tauri-apps/api': 2.8.0
 
   '@tauri-apps/plugin-http@2.0.0-rc.1':
     dependencies:
-      '@tauri-apps/api': 2.7.0
+      '@tauri-apps/api': 2.8.0
 
   '@tauri-apps/plugin-process@2.0.0-rc.0':
     dependencies:
···
 
   '@types/estree@1.0.8': {}
 
-  animejs@3.2.2: {}
+  animejs@4.1.3: {}
 
   babel-plugin-jsx-dom-expressions@0.40.1(@babel/core@7.28.3):
     dependencies:
···
     optionalDependencies:
       solid-js: 1.9.9
 
-  browserslist@4.25.2:
+  browserslist@4.25.3:
     dependencies:
       caniuse-lite: 1.0.30001735
-      electron-to-chromium: 1.5.202
+      electron-to-chromium: 1.5.207
       node-releases: 2.0.19
-      update-browserslist-db: 1.1.3(browserslist@4.25.2)
+      update-browserslist-db: 1.1.3(browserslist@4.25.3)
 
   caniuse-lite@1.0.30001735: {}
 
···
     dependencies:
       ms: 2.1.3
 
-  electron-to-chromium@1.5.202: {}
+  electron-to-chromium@1.5.207: {}
 
   entities@6.0.1: {}
 
···
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  rollup@4.46.2:
+  rollup@4.46.3:
     dependencies:
       '@types/estree': 1.0.8
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.46.2
-      '@rollup/rollup-android-arm64': 4.46.2
-      '@rollup/rollup-darwin-arm64': 4.46.2
-      '@rollup/rollup-darwin-x64': 4.46.2
-      '@rollup/rollup-freebsd-arm64': 4.46.2
-      '@rollup/rollup-freebsd-x64': 4.46.2
-      '@rollup/rollup-linux-arm-gnueabihf': 4.46.2
-      '@rollup/rollup-linux-arm-musleabihf': 4.46.2
-      '@rollup/rollup-linux-arm64-gnu': 4.46.2
-      '@rollup/rollup-linux-arm64-musl': 4.46.2
-      '@rollup/rollup-linux-loongarch64-gnu': 4.46.2
-      '@rollup/rollup-linux-ppc64-gnu': 4.46.2
-      '@rollup/rollup-linux-riscv64-gnu': 4.46.2
-      '@rollup/rollup-linux-riscv64-musl': 4.46.2
-      '@rollup/rollup-linux-s390x-gnu': 4.46.2
-      '@rollup/rollup-linux-x64-gnu': 4.46.2
-      '@rollup/rollup-linux-x64-musl': 4.46.2
-      '@rollup/rollup-win32-arm64-msvc': 4.46.2
-      '@rollup/rollup-win32-ia32-msvc': 4.46.2
-      '@rollup/rollup-win32-x64-msvc': 4.46.2
+      '@rollup/rollup-android-arm-eabi': 4.46.3
+      '@rollup/rollup-android-arm64': 4.46.3
+      '@rollup/rollup-darwin-arm64': 4.46.3
+      '@rollup/rollup-darwin-x64': 4.46.3
+      '@rollup/rollup-freebsd-arm64': 4.46.3
+      '@rollup/rollup-freebsd-x64': 4.46.3
+      '@rollup/rollup-linux-arm-gnueabihf': 4.46.3
+      '@rollup/rollup-linux-arm-musleabihf': 4.46.3
+      '@rollup/rollup-linux-arm64-gnu': 4.46.3
+      '@rollup/rollup-linux-arm64-musl': 4.46.3
+      '@rollup/rollup-linux-loongarch64-gnu': 4.46.3
+      '@rollup/rollup-linux-ppc64-gnu': 4.46.3
+      '@rollup/rollup-linux-riscv64-gnu': 4.46.3
+      '@rollup/rollup-linux-riscv64-musl': 4.46.3
+      '@rollup/rollup-linux-s390x-gnu': 4.46.3
+      '@rollup/rollup-linux-x64-gnu': 4.46.3
+      '@rollup/rollup-linux-x64-musl': 4.46.3
+      '@rollup/rollup-win32-arm64-msvc': 4.46.3
+      '@rollup/rollup-win32-ia32-msvc': 4.46.3
+      '@rollup/rollup-win32-x64-msvc': 4.46.3
       fsevents: 2.3.3
 
   semver@6.3.1: {}
···
 
   typescript@5.9.2: {}
 
-  update-browserslist-db@1.1.3(browserslist@4.25.2):
+  update-browserslist-db@1.1.3(browserslist@4.25.3):
     dependencies:
-      browserslist: 4.25.2
+      browserslist: 4.25.3
       escalade: 3.2.0
       picocolors: 1.1.1
 
···
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.6
-      rollup: 4.46.2
+      rollup: 4.46.3
     optionalDependencies:
       fsevents: 2.3.3
 

public/icon/gear-solid-full.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M259.1 73.5C262.1 58.7 275.2 48 290.4 48L350.2 48C365.4 48 378.5 58.7 381.5 73.5L396 143.5C410.1 149.5 423.3 157.2 435.3 166.3L503.1 143.8C517.5 139 533.3 145 540.9 158.2L570.8 210C578.4 223.2 575.7 239.8 564.3 249.9L511 297.3C511.9 304.7 512.3 312.3 512.3 320C512.3 327.7 511.8 335.3 511 342.7L564.4 390.2C575.8 400.3 578.4 417 570.9 430.1L541 481.9C533.4 495 517.6 501.1 503.2 496.3L435.4 473.8C423.3 482.9 410.1 490.5 396.1 496.6L381.7 566.5C378.6 581.4 365.5 592 350.4 592L290.6 592C275.4 592 262.3 581.3 259.3 566.5L244.9 496.6C230.8 490.6 217.7 482.9 205.6 473.8L137.5 496.3C123.1 501.1 107.3 495.1 99.7 481.9L69.8 430.1C62.2 416.9 64.9 400.3 76.3 390.2L129.7 342.7C128.8 335.3 128.4 327.7 128.4 320C128.4 312.3 128.9 304.7 129.7 297.3L76.3 249.8C64.9 239.7 62.3 223 69.8 209.9L99.7 158.1C107.3 144.9 123.1 138.9 137.5 143.7L205.3 166.2C217.4 157.1 230.6 149.5 244.6 143.4L259.1 73.5zM320.3 400C364.5 399.8 400.2 363.9 400 319.7C399.8 275.5 363.9 239.8 319.7 240C275.5 240.2 239.8 276.1 240 320.3C240.2 364.5 276.1 400.2 320.3 400z"/></svg>

src-tauri/tauri.conf.json

···
         "minWidth": 600,
         "minHeight": 400,
         "visible": false,
-        "decorations": false,
+        "decorations": true,
         "transparent": true
       }
     ]

src/Components/App.tsx

···
 import { onMount } from "solid-js";
-import anime from "animejs";
 
-import NavBar from "./NavBar";
 import PhotoList from "./PhotoList";
 import PhotoViewer from "./PhotoViewer";
 import SettingsMenu from "./SettingsMenu";
+import { utils } from "animejs";
 
 let App = () => {
   onMount(() => {
-    anime.set('.settings',
+    utils.set('.settings',
     {
       display: 'none',
       opacity: 0,
···
 
   return (
     <div class="container">
-      <NavBar />
-
       <PhotoList />
       <PhotoViewer />
 

src/Components/Managers/PhotoListRenderingManager.tsx

···
 
     let lastDateString = null;
     let row = new PhotoListRow();
-    row.Height = 100;
+    row.Height = 0;
 
     for (let i = 0; i < window.PhotoManager.FilteredPhotos.length; i++) {
       let photo = window.PhotoManager.FilteredPhotos[i];

src/Components/Managers/PhotoManager.tsx

···
 
     switch(this._filterType){
       case FilterType.USER:
+        if(this._filter === '')return this.FilteredPhotos = this.Photos;
+
         this.Photos.map(p => {
           if(p.metadata){
             try{
               let meta = JSON.parse(p.metadata);
-              let photo = meta.players.find(( y: any ) => y.displayName.toLowerCase().includes(this._filter) || y.id === this._filter);
+              let photo = meta.players.find(( y: any ) =>
+                y.displayName.toLowerCase().includes(this._filter) ||
+                y.id === this._filter
+              );
 
               if(photo)this.FilteredPhotos.push(p);
             } catch(e){}
···
         })
         break;
       case FilterType.WORLD:
+        if(this._filter === '')return this.FilteredPhotos = this.Photos;
+
         this.Photos.map(p => {
           if(p.metadata){
             try{
               let meta = JSON.parse(p.metadata);
-              let photo = meta.world.name.toLowerCase().includes(this._filter) || meta.world.id === this._filter;
-      
+              let photo =
+                meta.world.name.toLowerCase().includes(this._filter) ||
+                meta.world.id === this._filter;
+
               if(photo)this.FilteredPhotos.push(p);
             } catch(e){}
           }

src/Components/NavBar.tsx

···
-import { emit } from '@tauri-apps/api/event';
-import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
-import anime from 'animejs';
-import { Show, onMount } from 'solid-js';
-import { ViewState } from './Managers/ViewManager';
-
-const appWindow = getCurrentWebviewWindow();
-
-let NavBar = () => {
-  let dropdownVisible = false;
-  let inAnimation = false;
-  let dropdown: HTMLElement;
-
-  onMount(() => {
-    anime.set(dropdown, { opacity: 0,  translateX: -10 });
-    dropdown.style.display = 'none';
-  })
-
-  let setDropdownVisibility = ( visible: boolean ) => {
-    if(inAnimation)return;
-
-    if(dropdownVisible !== visible){
-      dropdownVisible = visible;
-      inAnimation = true;
-
-      if(visible){
-        dropdown.style.display = 'block';
-
-        anime({
-          targets: dropdown,
-          opacity: 1,
-          translateX: 0,
-          easing: 'easeInOutQuad',
-          duration: 250,
-          complete: () => {
-            inAnimation = false;
-          }
-        })
-      } else{
-        anime({
-          targets: dropdown,
-          opacity: 0,
-          translateX: -10,
-          easing: 'easeInOutQuad',
-          duration: 250,
-          complete: () => {
-            inAnimation = false;
-            dropdown.style.display = 'none';
-          }
-        })
-      }
-    }
-  }
-
-  window.CloseAllPopups.push(() => setDropdownVisibility(false));
-
-  return (
-    <>
-      <div class="navbar" data-tauri-drag-region>
-        <div class="tabs" data-tauri-drag-region>
-          <div class="nav-tab" onClick={() => {
-            window.ViewManager.ChangeState(ViewState.PHOTO_LIST);
-            anime(
-              {
-                targets: '.settings',
-                opacity: 0,
-                translateX: '500px',
-                easing: 'easeInOutQuad',
-                duration: 250,
-                complete: () => {
-                  anime.set('.settings', { display: 'none' });
-                }
-              })
-          }}>Photos</div>
-        </div>
-        <div class="nav-tab" style={{ width: '200px', "text-align": 'center', background: 'transparent' }} data-tauri-drag-region>
-          <Show when={window.SyncManager.IsSyncing()}>
-            <Show when={ window.SyncManager.SyncError() == "" } fallback={ "Error: " + window.SyncManager.SyncError() }>
-              <div style={{ width: '100%', "text-align": 'center', 'font-size': '14px' }}>
-                { window.SyncManager.SyncType() }ing: { window.SyncManager.SyncPhotoTransfers () } / { window.SyncManager.SyncPhotoTotal() }<br />
-                <div style={{ width: '80%', height: '2px', margin: 'auto', "margin-top": '5px', background: '#111' }}>
-                  <div style={{ height: '2px', width: (window.SyncManager.SyncPhotoTransfers() / window.SyncManager.SyncPhotoTotal()) * 100 + '%', background: '#00ccff' }}></div>
-                </div>
-              </div>
-            </Show>
-          </Show>
-        </div>
-        <div class="account" onClick={() => setDropdownVisibility(!dropdownVisible)}>
-          <div class="icon">
-            <img draggable="false" width="24" height="24" src="/icon/caret-down-solid.svg"></img>
-          </div>
-        </div>
-        <div class="control-lights">
-          <div class="light" onClick={() => appWindow.minimize()}>
-            <img draggable="false" width="24" height="24" src="/icon/minus-solid.svg"></img>
-          </div>
-          <div class="light" onClick={() => appWindow.toggleMaximize()}>
-            <img draggable="false" width="24" height="24" src="/icon/square-regular.svg"></img>
-          </div>
-          <div class="light" onClick={() => { appWindow.hide(); emit('hide-window'); } }>
-            <img draggable="false" width="24" height="24" src="/icon/x-solid.svg"></img>
-          </div>
-        </div>
-      </div>
-
-      <div class="dropdown" ref={( el ) => dropdown = el}>
-        <div class="dropdown-button" onClick={async () => {
-          anime.set('.settings', { display: 'block' });
-          anime({
-            targets: '.settings',
-            opacity: 1,
-            translateX: '0px',
-            easing: 'easeInOutQuad',
-            duration: 250
-          })
-
-          window.ViewManager.ChangeState(ViewState.SETTINGS);
-          setDropdownVisibility(false);
-        }}>Settings</div>
-      </div>
-    </>
-  )
-}
-
-export default NavBar;

src/Components/PhotoList.tsx

···
 import { listen } from '@tauri-apps/api/event';
 import { Window } from "@tauri-apps/api/window";
 
-import anime from "animejs";
 import FilterMenu from "./FilterMenu";
 import { ViewState } from "./Managers/ViewManager";
 import { invoke } from "@tauri-apps/api/core";
+import { animate, utils } from "animejs";
 
 enum ListPopup{
   FILTERS,
···
 }
 
 let PhotoList = () => {
-  let photoTreeLoadingContainer: HTMLElement;
-
   let scrollToTop: HTMLElement;
   let scrollToTopActive = false;
 
   let photoContainer: HTMLCanvasElement;
-  let photoContainerBG: HTMLCanvasElement;
 
   let filterContainer: HTMLDivElement;
 
   let ctx: CanvasRenderingContext2D;
-  let ctxBG: CanvasRenderingContext2D;
 
   let scroll: number = 0;
   let targetScroll: number = 0;
···
 
 
   window.ViewManager.OnStateTransition(ViewState.PHOTO_LIST, ViewState.SETTINGS, () => {
-    anime({ targets: photoContainer, opacity: 0, easing: 'easeInOutQuad', duration: 100 });
-    anime({ targets: '.filter-options', opacity: 0, easing: 'easeInOutQuad', duration: 100 });
-    anime({ targets: '.reload-photos', opacity: 0, easing: 'easeInOutQuad', duration: 100 });
+    animate(photoContainer, { opacity: 0.5, filter: 'blur(10px)', easing: 'easeInOutQuad', duration: 100 });
+    animate('.filter-options', { opacity: 0, easing: 'easeInOutQuad', duration: 100 });
+    animate('.scroll-to-top', { opacity: 0, easing: 'easeInOutQuad', duration: 100 });
   });
 
   window.ViewManager.OnStateTransition(ViewState.SETTINGS, ViewState.PHOTO_LIST, () => {
-    anime({ targets: photoContainer, opacity: 1, easing: 'easeInOutQuad', duration: 100 });
-    anime({ targets: '.filter-options', opacity: 1, easing: 'easeInOutQuad', duration: 100 });
-    anime({ targets: '.reload-photos', opacity: 1, easing: 'easeInOutQuad', duration: 100 });
+    animate(photoContainer, { opacity: 1, filter: 'blur(0px)', easing: 'easeInOutQuad', duration: 100, onComplete: () => photoContainer.style.filter = '' });
+    animate('.filter-options', { opacity: 1, easing: 'easeInOutQuad', duration: 100 });
+    animate('.scroll-to-top', { opacity: 1, easing: 'easeInOutQuad', duration: 100 });
   });
 
 
   window.ViewManager.OnStateTransition(ViewState.PHOTO_LIST, ViewState.PHOTO_VIEWER, () => {
-    anime({ targets: photoContainer, opacity: 0, easing: 'easeInOutQuad', duration: 100 });
-    anime({ targets: '.filter-options', opacity: 0, easing: 'easeInOutQuad', duration: 100 });
-    anime({ targets: '.reload-photos', opacity: 0, easing: 'easeInOutQuad', duration: 100 });
+    animate(photoContainer, { opacity: 0.5, filter: 'blur(10px)', easing: 'easeInOutQuad', duration: 100 });
+    animate('.filter-options', { opacity: 0, easing: 'easeInOutQuad', duration: 100 });
+    animate('.scroll-to-top', { opacity: 0, easing: 'easeInOutQuad', duration: 100 });
   });
 
   window.ViewManager.OnStateTransition(ViewState.PHOTO_VIEWER, ViewState.PHOTO_LIST, () => {
-    anime({ targets: photoContainer, opacity: 1, easing: 'easeInOutQuad', duration: 100 });
-    anime({ targets: '.filter-options', opacity: 1, easing: 'easeInOutQuad', duration: 100 });
-    anime({ targets: '.reload-photos', opacity: 1, easing: 'easeInOutQuad', duration: 100 });
+    animate(photoContainer, { opacity: 1, filter: 'blur(0px)', easing: 'easeInOutQuad', duration: 100, onComplete: () => photoContainer.style.filter = '' });
+    animate('.filter-options', { opacity: 1, easing: 'easeInOutQuad', duration: 100 });
+    animate('.scroll-to-top', { opacity: 1, easing: 'easeInOutQuad', duration: 100 });
   });
 
 
···
     photoContainer.width = window.innerWidth;
     photoContainer.height = window.innerHeight;
 
-    photoContainerBG.width = window.innerWidth;
-    photoContainerBG.height = window.innerHeight;
-
     window.PhotoListRenderingManager.ComputeLayout();
   }
 
   let closeCurrentPopup = () => {
     switch(currentPopup){
       case ListPopup.FILTERS:
-        anime({
-          targets: filterContainer!,
+        animate(filterContainer!, {
           opacity: 0,
+          translateY: '10px',
           easing: 'easeInOutQuad',
           duration: 100,
-          complete: () => {
+          onComplete: () => {
             filterContainer!.style.display = 'none';
             currentPopup = ListPopup.NONE;
           }
···
     }
   }
 
-  let fps = 0;
-  setInterval(() => {
-    console.log('FPS: ' + fps);
-    fps = 0;
-  }, 1000);
-
   let render = () => {
     if(!quitRender)
       requestAnimationFrame(render);
···
 
     if(!scrollToTopActive && scroll > photoContainer.height){
       scrollToTop.style.display = 'flex';
-      anime({ targets: scrollToTop, opacity: 1, translateY: '0px', easing: 'easeInOutQuad', duration: 100 });
+      animate(scrollToTop, { opacity: 1, translateY: '0px', easing: 'easeInOutQuad', duration: 100 });
 
       scrollToTopActive = true;
     } else if(scrollToTopActive && scroll < photoContainer.height){
-      anime({ targets: scrollToTop, opacity: 0, translateY: '-10px', complete: () => scrollToTop.style.display = 'none', easing: 'easeInOutQuad', duration: 100 });
+      animate(scrollToTop, { opacity: 0, translateY: '-10px', complete: () => scrollToTop.style.display = 'none', easing: 'easeInOutQuad', duration: 100 });
       scrollToTopActive = false;
     }
 
-    if(!ctx || !ctxBG)return;
+    if(!ctx)return;
     ctx.clearRect(0, 0, photoContainer.width, photoContainer.height);
-    ctxBG.clearRect(0, 0, photoContainerBG.width, photoContainerBG.height);
 
     scroll = scroll + (targetScroll - scroll) * 0.1;
 
···
 
       ctx.fillText("It's looking empty in here! You have no photos :O", photoContainer.width / 2, photoContainer.height / 2);
     }
-
-    ctxBG.drawImage(photoContainer, 0, 0);
-    fps += 1;
   }
 
   listen('hide-window', () => {
···
     photoContainer.width = window.innerWidth;
     photoContainer.height = window.innerHeight;
 
-    photoContainerBG.width = window.innerWidth;
-    photoContainerBG.height = window.innerHeight;
-
     if(window.PhotoManager.HasFirstLoaded){
       requestAnimationFrame(render);
       window.PhotoManager.HasFirstLoaded = false;
···
   window.PhotoManager.OnLoadingFinished(() => {
     invoke('close_splashscreen');
 
-    anime({
-      targets: photoTreeLoadingContainer,
-      height: 0,
-      easing: 'easeInOutQuad',
-      duration: 500,
-      opacity: 0,
-      complete: () => {
-        photoTreeLoadingContainer.style.display = 'none';
-      }
-    })
-
-    anime({
-      targets: '.reload-photos',
+    animate('.reload-photos', {
       opacity: 1,
       duration: 150,
       easing: 'easeInOutQuad'
···
 
   onMount(() => {
     ctx = photoContainer.getContext('2d')!;
-    ctxBG = photoContainerBG.getContext('2d')!;
 
     window.PhotoManager.Load();
 
-    anime.set(scrollToTop, { opacity: 0, translateY: '-10px', display: 'none' });
+    utils.set(scrollToTop, { opacity: 0, translateY: '-10px', display: 'none' });
 
     photoContainer.onwheel = ( e: WheelEvent ) => {
       targetScroll += e.deltaY * 2;
···
 
     photoContainer.width = window.innerWidth;
     photoContainer.height = window.innerHeight;
-
-    photoContainerBG.width = window.innerWidth;
-    photoContainerBG.height = window.innerHeight;
 
     photoContainer.onclick = ( e: MouseEvent ) => {
       let photo = window.PhotoManager.FilteredPhotos.find(x =>
···
 
   return (
     <div class="photo-list">
-      <div ref={filterContainer!} class="filter-container" style={{
-        height: window.PhotoManager.HasBeenIndexed() ? '83px' : '110px',
-        width: window.PhotoManager.HasBeenIndexed() ? '600px' : '650px'
-      }}>
+      <div ref={filterContainer!} class="filter-container">
         <FilterMenu />
       </div>
-
-      <div class="photo-tree-loading" ref={( el ) => photoTreeLoadingContainer = el}>Scanning Photo Tree...</div>
 
       <div class="scroll-to-top" ref={( el ) => scrollToTop = el} onClick={() => targetScroll = 0}>
         <div class="icon">
           <img draggable="false" src="/icon/angle-up-solid.svg"></img>
         </div>
       </div>
-      <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>
-      </div>
 
       <div class="filter-options">
         <div>
···
 
             filterContainer!.style.display = 'block';
 
-            anime({
-              targets: filterContainer!,
+            animate(filterContainer!, {
               opacity: 1,
+              translateY: 0,
               easing: 'easeInOutQuad',
               duration: 100
             });
-          }} class="icon" style={{ width: '20px', height: '20px', padding: '20px' }}>
+          }} class="icon">
             <img draggable="false" style={{ width: "20px", height: "20px" }} src="/icon/sliders-solid.svg"></img>
           </div>
           <div class="icon-label">Filters</div>
         </div>
+
+        <div>
+          <div onClick={() => {
+            window.location.reload();
+          }} class="icon">
+            <img draggable="false" style={{ width: "20px", height: "20px" }} src="/icon/arrows-rotate-solid.svg"></img>
+          </div>
+          <div class="icon-label">Reload Photos</div>
+        </div>
+
+        <div>
+          <div onClick={() => {
+            utils.set('.settings', { display: 'block' });
+            animate('.settings', {
+              opacity: 1,
+              translateX: '0px',
+              easing: 'easeInOutQuad',
+              duration: 250
+            })
+
+            window.ViewManager.ChangeState(ViewState.SETTINGS);
+          }} class="icon">
+            <img draggable="false" style={{ width: "20px", height: "20px" }} src="/icon/gear-solid-full.svg"></img>
+          </div>
+          <div class="icon-label">Settings</div>
+        </div>
       </div>
 
       <canvas class="photo-container" ref={( el ) => photoContainer = el}></canvas>
-      <canvas class="photo-container-bg" ref={( el ) => photoContainerBG = el}></canvas>
     </div>
   )
 }

src/Components/PhotoViewer.tsx

···
 import { For, Show, createEffect, onCleanup, onMount } from "solid-js";
 import { invoke } from '@tauri-apps/api/core';
-import anime from 'animejs';
 import { WorldCache } from "./Structs/WorldCache";
+import { animate, JSAnimation, utils } from "animejs";
 
 let PhotoViewer = () => {
   let viewer: HTMLElement;
···
   let viewerContextMenuButtons: HTMLElement[] = [];
 
   let allowedToOpenTray = false;
-  let trayInAnimation = false;
 
   let authorProfileButton: HTMLDivElement;
 
···
     }
   }
 
+  let trayAnimation: JSAnimation[] = [];
+
   let openTray = () => {
-    if(trayOpen || trayInAnimation)return;
+    if(trayOpen)return;
+    trayOpen = true;
 
-    trayOpen = true;
-    trayInAnimation = true;
+    trayAnimation.forEach(anim => anim.cancel());
 
     window.CloseAllPopups.forEach(p => p());
-    anime({ targets: photoTray, bottom: '0px', duration: 500 });
+    trayAnimation[0] = animate(photoTray, { bottom: '-150px', duration: 500, ease: 'outElastic' });
 
-    anime({
-      targets: photoControls,
+    trayAnimation[1]  = animate(photoControls, {
       bottom: '160px',
+      ease: 'outElastic',
       scale: '0.75',
       opacity: 0,
       duration: 500,
-      complete: () => {
+      onComplete: () => {
         photoControls.style.display = 'none';
-        trayInAnimation = false;
       }
     });
 
     photoTrayCloseBtn.style.display = 'flex';
-    anime({
-      targets: photoTrayCloseBtn,
+    trayAnimation[2]  = animate(photoTrayCloseBtn, {
       bottom: '160px',
+      ease: 'outElastic',
       opacity: 1,
       scale: 1,
       duration: 500
···
   let copyImage = () => {
     invoke('copy_image', { path: window.PhotoViewerManager.CurrentPhoto()!.path })
       .then(() => {
-        anime.set('.copy-notif', { translateX: '-50%', translateY: '-100px' });
-        anime({
-          targets: '.copy-notif',
+        utils.set('.copy-notif', { translateX: '-50%', translateY: '-100px' });
+        animate('.copy-notif', {
+          ease: 'outElastic',
           opacity: 1,
           translateY: '0px'
         });
 
         setTimeout(() => {
-          anime({
-            targets: '.copy-notif',
+          animate('.copy-notif', {
+            ease: 'outElastic',
             opacity: 0,
             translateY: '-100px'
           });
···
   }
 
   let closeTray = () => {
-    if(!trayOpen || trayInAnimation)return;
-    trayInAnimation = true;
+    if(!trayOpen)return;
+    trayOpen = false;
+
+    trayAnimation.forEach(anim => anim.cancel());
 
     window.CloseAllPopups.forEach(p => p());
-    anime({ targets: photoTray, bottom: '-150px', duration: 500 });
+    trayAnimation[0] = animate(photoTray, { bottom: '-300px', duration: 500, ease: 'outElastic' });
 
-    anime({
-      targets: photoTrayCloseBtn,
+    trayAnimation[2] = animate(photoTrayCloseBtn, {
       bottom: '10px',
       scale: '0.75',
+      ease: 'outElastic',
       opacity: 0,
       duration: 500,
-      complete: () => {
+      onComplete: () => {
         photoTrayCloseBtn.style.display = 'none';
-        trayOpen = false;
-        trayInAnimation = false;
       }
     });
 
     photoControls.style.display = 'flex';
-    anime({
-      targets: photoControls,
+    trayAnimation[1] = animate(photoControls, {
       bottom: '10px',
+      ease: 'outElastic',
       opacity: 1,
       scale: 1,
       duration: 500,
···
   }
 
   onMount(() => {
-    anime.set(photoControls, { translateX: '-50%' });
-    anime.set(photoTrayCloseBtn, { translateX: '-50%', opacity: 0, scale: '0.75', bottom: '10px' });
+    utils.set(photoControls, { translateX: '-50%' });
+    utils.set(photoTrayCloseBtn, { translateX: '-50%', opacity: 0, scale: '0.75', bottom: '10px' });
 
     window.addEventListener('keyup', switchPhotoWithKey);
 
     let contextMenuOpen = false;
     window.CloseAllPopups.push(() => {
       contextMenuOpen = false;
-      anime.set(viewerContextMenu, { opacity: 1, rotate: '0deg' });
+      utils.set(viewerContextMenu, { opacity: 1, rotate: '0deg' });
 
-      anime({
-        targets: viewerContextMenu,
+      animate(viewerContextMenu, {
         opacity: 0,
         easing: 'easeInOutQuad',
         rotate: '30deg',
         duration: 100,
-        complete: () => {
+        onComplete: () => {
           viewerContextMenu.style.display = 'none';
         }
       })
···
       if(contextMenuOpen){
         contextMenuOpen = false;
 
-        anime.set(viewerContextMenu, { opacity: 1, rotate: '0deg' });
+        utils.set(viewerContextMenu, { opacity: 1, rotate: '0deg' });
 
-        anime({
-          targets: viewerContextMenu,
+        animate(viewerContextMenu, {
           opacity: 0,
           rotate: '30deg',
           easing: 'easeInOutQuad',
           duration: 100,
-          complete: () => {
+          onComplete: () => {
             viewerContextMenu.style.display = 'none';
           }
         })
···
         viewerContextMenu.style.left = e.clientX + 'px';
         viewerContextMenu.style.display = 'block';
 
-        anime.set(viewerContextMenu, { opacity: 0, rotate: '-30deg' });
+        utils.set(viewerContextMenu, { opacity: 0, rotate: '-30deg' });
   
-        anime({
-          targets: viewerContextMenu,
+        animate(viewerContextMenu, {
           opacity: 1,
           rotate: '0deg',
           easing: 'easeInOutQuad',
···
         imageViewer.src = (window.OS === "windows" ? "http://photo.localhost/" : 'photo://localhost/') + window.PhotoViewerManager.CurrentPhoto()?.path.split('\\').join('/') + "?full";
         imageViewer.crossOrigin = 'anonymous';
 
-        anime({
-          targets: imageViewer,
+        animate(imageViewer, {
           opacity: 1,
           delay: 50,
           duration: 150,
···
       if(photo && !isOpen){
         viewer.style.display = 'flex';
   
-        anime({
-          targets: viewer,
+        animate(viewer, {
           opacity: 1,
           easing: 'easeInOutQuad',
           duration: 150
         });
-  
-        anime({
-          targets: '.navbar',
-          top: '-50px'
-        })
 
-        anime.set('.prev-button', { left: '-50px', top: '50%' });
-        anime.set('.next-button', { right: '-50px', top: '50%' });
+        utils.set('.prev-button', { left: '-50px', top: '50%' });
+        utils.set('.next-button', { right: '-50px', top: '50%' });
 
-        anime({ targets: '.prev-button', left: '0', easing: 'easeInOutQuad', duration: 100 });
-        anime({ targets: '.next-button', right: '0', easing: 'easeInOutQuad', duration: 100 });
+        animate('.prev-button', { left: '0', easing: 'easeInOutQuad', duration: 100 });
+        animate('.next-button', { right: '0', easing: 'easeInOutQuad', duration: 100 });
 
         window.CloseAllPopups.forEach(p => p());
       } else if(!photo && isOpen){
-        anime({
-          targets: viewer,
+        animate(viewer, {
           opacity: 0,
           easing: 'easeInOutQuad',
           duration: 150,
-          complete: () => {
+          onComplete: () => {
             viewer.style.display = 'none';
           }
         });
-  
-        anime({
-          targets: '.navbar',
-          top: '0px'
-        })
 
         window.CloseAllPopups.forEach(p => p());
 
-        anime({ targets: '.prev-button', top: '75%', easing: 'easeInOutQuad', duration: 100 });
-        anime({ targets: '.next-button', top: '75%', easing: 'easeInOutQuad', duration: 100 });
+        animate('.prev-button', { top: '75%', easing: 'easeInOutQuad', duration: 100 });
+        animate('.next-button', { top: '75%', easing: 'easeInOutQuad', duration: 100 });
       }
 
       isOpen = photo != null;
···
       </div>
 
       <div class="viewer-close viewer-button" onClick={() => window.PhotoViewerManager.Close()}>
-        <div class="icon" style={{ width: '10px', margin: '0' }}>
+        <div class="icon-small" style={{ width: '10px', margin: '0' }}>
           <img draggable="false" src="/icon/x-solid.svg"></img>
         </div>
       </div>
···
         window.CloseAllPopups.forEach(p => p());
         window.PhotoViewerManager.PreviousPhoto();
       }}>
-        <div class="icon" style={{ width: '15px', margin: '0' }}>
+        <div class="icon-small" style={{ width: '15px', margin: '0' }}>
           <img draggable="false" src="/icon/arrow-left-solid.svg"></img>
         </div>
       </div>
···
         window.CloseAllPopups.forEach(p => p());
         window.PhotoViewerManager.NextPhoto();
       }}>
-        <div class="icon" style={{ width: '15px', margin: '0' }}>
+        <div class="icon-small" style={{ width: '15px', margin: '0' }}>
           <img draggable="false" src="/icon/arrow-right-solid.svg"></img>
         </div>
       </div>
···
         onClick={() => closeTray()}
         ref={( el ) => photoTrayCloseBtn = el}
       >
-        <div class="icon" style={{ width: '12px', margin: '0' }}>
+        <div class="icon-small" style={{ width: '12px', margin: '0' }}>
           <img draggable="false" src="/icon/angle-down-solid.svg"></img>
         </div>
       </div>
 
       <div class="control-buttons" ref={( el ) => photoControls = el}>
         <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' })}
+          onMouseOver={( el ) => animate(el.currentTarget, { width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
+          onMouseLeave={( el ) => animate(el.currentTarget, { width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
           onClick={() => { copyImage(); }}>
-          <div class="icon" style={{ width: '12px', margin: '0' }}>
+          <div class="icon-small" style={{ width: '12px', margin: '0' }}>
             <img draggable="false" src="/icon/copy-solid.svg"></img>
           </div>
         </div>
         <div class="viewer-button" style={{ width: '50px' }}
-          onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '70px', height: '30px', 'margin-left': '10px', 'margin-right': '10px' })}
-          onMouseLeave={( el ) => anime({ targets: el.currentTarget, width: '50px', height: '30px', 'margin-left': '20px', 'margin-right': '20px' })}
+          onMouseOver={( el ) => animate(el.currentTarget, {  width: '70px', height: '30px', 'margin-left': '10px', 'margin-right': '10px' })}
+          onMouseLeave={( el ) => animate(el.currentTarget, { width: '50px', height: '30px', 'margin-left': '20px', 'margin-right': '20px' })}
           ref={( el ) => trayButton = el}
           onClick={() => openTray()}
         >
-          <div class="icon" style={{ width: '12px', margin: '0' }}>
+          <div class="icon-small" style={{ width: '12px', margin: '0' }}>
             <img draggable="false" src="/icon/angle-up-solid.svg"></img>
           </div>
         </div>
 
         <div class="viewer-button"
           ref={authorProfileButton!}
-          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' })}
+          onMouseOver={( el ) => animate(el.currentTarget, { width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
+          onMouseLeave={( el ) => animate(el.currentTarget, { width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
         >
-          <div class="icon" style={{ width: '12px', margin: '0' }}>
+          <div class="icon-small" style={{ width: '12px', margin: '0' }}>
             <img draggable="false" src="/icon/user-solid.svg"></img>
           </div>
         </div>
 
         <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' })}
+          onMouseOver={( el ) => animate(el.currentTarget, { width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
+          onMouseLeave={( el ) => animate(el.currentTarget, { width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
           onClick={() => window.ConfirmationBoxManager.SetConfirmationBox("Are you sure you want to delete this photo?", async () => { invoke("delete_photo", {
-            path: window.PhotoViewerManager.CurrentPhoto()?.path,
-            token: (await invoke('get_config_value_string', { key: 'token' })) || "none",
+            path: window.PhotoViewerManager.CurrentPhoto()?.path
           });
         })}>
-          <div class="icon" style={{ width: '12px', margin: '0' }}>
+          <div class="icon-small" style={{ width: '12px', margin: '0' }}>
             <img draggable="false" src="/icon/trash-solid.svg"></img>
           </div>
         </div>

src/Components/SettingsMenu.tsx

···
 import { onCleanup, onMount, Show } from "solid-js";
 import { bytesToFormatted } from "../utils";
 import { invoke } from '@tauri-apps/api/core';
-import anime from "animejs";
 import { ViewState } from "./Managers/ViewManager";
+import { animate, utils } from "animejs";
 
 let SettingsMenu = () => {
   let sliderBar: HTMLElement;
···
   let closeWithKey = ( e: KeyboardEvent ) => {
     if(e.key === 'Escape'){
       window.ViewManager.ChangeState(ViewState.PHOTO_LIST);
-      anime({
-        targets: '.settings',
+      animate('.settings', {
         opacity: 0,
         translateX: '500px',
         easing: 'easeInOutQuad',
         duration: 250,
-        complete: () => {
-          anime.set('.settings', { display: 'none' });
+        onComplete: () => {
+          utils.set('.settings', { display: 'none' });
         }
       })
     }
···
     if(await invoke('get_config_value_string', { key: 'transparent' }) === "true"){
       invoke('set_config_value_string', { key: 'transparent', value: 'true' });
 
-      anime({ targets: document.body, background: 'rgba(0, 0, 0, 0.5)', easing: 'linear', duration: 100 });
-      anime({ targets: '.settings', background: 'rgba(0, 0, 0, 0.5)', easing: 'linear', duration: 100 });
+      animate(document.body, { background: 'rgba(0, 0, 0, 0.5)', easing: 'linear', duration: 100 });
+      animate('.settings', { background: 'rgba(0, 0, 0, 0.5)', easing: 'linear', duration: 100 });
     } else{
       invoke('set_config_value_string', { key: 'transparent', value: 'false' });
 
-      anime({ targets: document.body, background: 'rgba(0, 0, 0, 1)', easing: 'linear', duration: 100 });
-      anime({ targets: '.settings', background: 'rgba(0, 0, 0, 0)', easing: 'linear', duration: 100 });
+      animate(document.body, { background: 'rgba(0, 0, 0, 1)', easing: 'linear', duration: 100 });
+      animate('.settings', { background: 'rgba(0, 0, 0, 0)', easing: 'linear', duration: 100 });
     }
 
     let sliderMouseDown = false;
···
 
       if(!sliderMouseDown){
         sliderPos = sliderPos + (width / 2 - buttons[currentButton] - sliderPos) * 0.25;
-        anime.set(sliderBar, { translateX: sliderPos });
+        utils.set(sliderBar, { translateX: sliderPos });
 
         settingsContainer.style.left = (sliderPos - (width / 2 - buttons[0])) * sliderScale + 'px';
       }
     }
 
     render();
-    anime.set(sliderBar, { translateX: sliderPos });
+    utils.set(sliderBar, { translateX: sliderPos });
 
     sliderBar.addEventListener('touchstart', ( e: TouchEvent ) => {
       sliderMouseDown = true;
···
 
     window.addEventListener('touchmove', ( e: TouchEvent ) => {
       if(sliderMouseDown){
-        anime.set(sliderBar, { translateX: sliderPos - (mouseStartX - e.touches[0].clientX) });
+        utils.set(sliderBar, { translateX: sliderPos - (mouseStartX - e.touches[0].clientX) });
         settingsContainer.style.left = (sliderPos - (mouseStartX - e.touches[0].clientX) - (width / 2 - buttons[0])) * sliderScale + 'px';
       }
     })
···
       if(sliderMouseDown){
         sliderPos = sliderPos - (mouseStartX - e.touches[0].clientX);
 
-        anime.set(sliderBar, { translateX: sliderPos - (mouseStartX - e.touches[0].clientX) });
+        utils.set(sliderBar, { translateX: sliderPos - (mouseStartX - e.touches[0].clientX) });
         sliderMouseDown = false;
 
         if(Math.abs(mouseStartX - e.touches[0].clientX) > 50){
···
 
     window.addEventListener('mousemove', ( e: MouseEvent ) => {
       if(sliderMouseDown){
-        anime.set(sliderBar, { translateX: sliderPos - (mouseStartX - e.clientX) });
+        utils.set(sliderBar, { translateX: sliderPos - (mouseStartX - e.clientX) });
         settingsContainer.style.left = sliderPos - (mouseStartX - e.clientX) + 'px';
         settingsContainer.style.left = (sliderPos - (mouseStartX - e.clientX) - (width / 2 - buttons[0])) * sliderScale + 'px';
       }
···
       if(sliderMouseDown){
         sliderPos = sliderPos - (mouseStartX - e.clientX);
 
-        anime.set(sliderBar, { translateX: sliderPos - (mouseStartX - e.clientX) });
+        utils.set(sliderBar, { translateX: sliderPos - (mouseStartX - e.clientX) });
         sliderMouseDown = false;
 
         if(Math.abs(mouseStartX - e.clientX) > 50){
···
       sliderPos = width / 2 - buttons[currentButton];
       sliderScale = width / (buttons[1] - buttons[0]);
 
-      anime.set(sliderBar, { translateX: sliderPos  });
+      utils.set(sliderBar, { translateX: sliderPos  });
     })
 
     sliderBar.addEventListener('wheel', ( e: WheelEvent ) => {
···
 
   return (
     <div class="settings">
+      <div class="settings-close" onClick={() => {
+        window.ViewManager.ChangeState(ViewState.PHOTO_LIST);
+        animate('.settings',
+          {
+            opacity: 0,
+            translateX: '500px',
+            easing: 'easeInOutQuad',
+            duration: 250,
+            onComplete: () => {
+              utils.set('.settings', { display: 'none' });
+            }
+          })
+      }}>
+        <div class="icon"><img draggable="false" src="/icon/x-solid.svg"></img></div>
+      </div>
       <div class="settings-container" ref={( el ) => settingsContainer = el}>
         <div class="settings-block">
           <h1>Storage Settings</h1>
···
 
             <label for="start-in-bg-check">
               <div class="selection-box">
-                <div class="icon" style={{ width: '10px', margin: '0', display: 'inline-flex' }}>
+                <div class="icon-small" style={{ margin: '0', display: 'inline-flex' }}>
                   <img draggable="false" width="10" height="10" src="/icon/check-solid.svg"></img>
                 </div>
               </div>
···
 
               <label for="start-with-win-check">
                 <div class="selection-box">
-                  <div class="icon" style={{ width: '10px', margin: '0', display: 'inline-flex' }}>
+                  <div class="icon-small" style={{ margin: '0', display: 'inline-flex' }}>
                     <img draggable="false" width="10" height="10" src="/icon/check-solid.svg"></img>
                   </div>
                 </div>
···
               if(el.target.checked){
                 invoke('set_config_value_string', { key: 'transparent', value: 'true' });
 
-                anime({ targets: document.body, background: 'rgba(0, 0, 0, 0.5)', easing: 'linear', duration: 100 });
-                anime({ targets: '.settings', background: 'rgba(0, 0, 0, 0.5)', easing: 'linear', duration: 100 });
+                animate(document.body, { background: 'rgba(0, 0, 0, 0.5)', easing: 'linear', duration: 100 });
+                animate('.settings', { background: 'rgba(0, 0, 0, 0.5)', easing: 'linear', duration: 100 });
               } else{
                 invoke('set_config_value_string', { key: 'transparent', value: 'false' });
 
-                anime({ targets: document.body, background: 'rgba(0, 0, 0, 1)', easing: 'linear', duration: 100 });
-                anime({ targets: '.settings', background: 'rgba(0, 0, 0, 0)', easing: 'linear', duration: 100 });
+                animate(document.body, { background: 'rgba(0, 0, 0, 1)', easing: 'linear', duration: 100 });
+                animate('.settings', { background: 'rgba(0, 0, 0, 0)', easing: 'linear', duration: 100 });
               }
             }} />
             Window Transparency
 
             <label for="transparent-check">
               <div class="selection-box">
-                <div class="icon" style={{ width: '10px', margin: '0', display: 'inline-flex' }}>
+                <div class="icon-small" style={{ margin: '0', display: 'inline-flex' }}>
                   <img draggable="false" width="10" height="10" src="/icon/check-solid.svg"></img>
                 </div>
               </div>
···
                 await invoke('change_final_path', { newPath: finalPathData });
                 window.location.reload();
 
-                anime({
-                  targets: '.settings',
+                animate('.settings', {
                   opacity: 0,
                   translateX: '500px',
                   easing: 'easeInOutQuad',
                   duration: 250,
-                  complete: () => {
-                    anime.set('.settings', { display: 'none' });
+                  onComplete: () => {
+                    utils.set('.settings', { display: 'none' });
                   }
                 })
 

src/css/filters.css

···
+
+.filter-options{
+  position: fixed;
+  top: 10px;
+  left: 10px;
+}
+
+.filter-container{
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  padding: 10px 200px;
+  background: rgba(85, 85, 85, 0.904);
+  transform: translateY(10px);
+  color: #fff;
+  text-align: center;
+  box-shadow: #0005 0 0 10px;
+  opacity: 0;
+}
+
+.filter-container > .filter-title{
+  font-size: 30px;
+}
+
+.filter-type-select{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 75%;
+  margin: auto;
+}
+
+.filter-type-select > div{
+  width: 100%;
+  border: #fff 4px solid;
+  border-left: #fff 2px solid;
+  border-right: #fff 2px solid;
+  padding: 5px 0;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.filter-type-select > div:first-child{
+  border-left: #fff 4px solid;
+  border-radius: 10px 0 0 10px;
+}
+
+.filter-type-select > div:last-child{
+  border-right: #fff 4px solid;
+  border-radius: 0 10px 10px 0;
+}
+
+.filter-type-select > .selected-filter{
+  background: #00ccff55;
+}
+
+.filter-search{
+  margin-top: 10px;
+  padding: 5px;
+  border: #fff 4px solid;
+  border-radius: 10px;
+  background: #0008;
+  outline: none;
+  color: white;
+  font-size: 15px;
+  font-family: 'Rubik';
+  width: calc(75% - 18px);
+}

src/css/icons.css

···
+.icon{
+  width: 40px;
+  height: 40px;
+  padding: 10px;
+  filter: invert(100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.icon-small{
+  filter: invert(100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.icon-label{
+  margin-top: -20px;
+  margin-right: -200px;
+  width: 200px;
+  color: white;
+  pointer-events: none;
+  transform: translate(20px, -9px);
+  opacity: 0;
+  transition: 0.25s;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.icon:hover ~ .icon-label{
+  opacity: 1;
+  transform: translate(40px, -9px);
+}
+

src/css/list.css

···
+.photo-list{
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.scroll-to-top{
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  color: white;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  border-radius: 50%;
+  border: 2px solid white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/css/settings.css

···
+.settings{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.settings-container{
+  position: fixed;
+  top: 50px;
+  left: 0px;
+  width: 200%;
+  height: calc(100% - 100px);
+  display: flex;
+}
+
+.settings-close{
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 100;
+  cursor: pointer;
+  user-select: none;
+  width: 40px;
+  height: 40px;
+}
+
+.settings-block{
+  width: 50%;
+  height: 100%;
+  color: white;
+  text-align: center;
+}
+
+.selector{
+  padding: 10px 20px;
+  border-radius: 10px;
+  background: #000a;
+  display: inline-block;
+  margin: 10px;
+}
+
+.selector .selection-box{
+  height: 20px;
+  background: #777a;
+  margin: 5px -10px 0 -10px;
+  border-radius: 8px;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+  transition: 0.25s;
+  color: #fff1;
+}
+
+.selector .selection-box:hover{
+  height: 20px;
+  background: #777a;
+  margin: 5px -10px 0 -10px;
+  border-radius: 8px;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+  transition: 0.25s;
+  color: #fff5;
+}
+
+.selector input{
+  display: none;
+}
+
+.selector input:checked ~ label .selection-box{
+  background: rgba(0, 146, 204, 0.705);
+  color: #fff;
+}
+
+.path{
+  padding: 5px 10px;
+  background: #000a;
+  border-radius: 5px;
+  margin-left: 5px;
+  cursor: pointer;
+}

src/css/slide-bar.css

···
+.slide-bar{
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 50px;
+  border-top: #aaa 1px solid;
+  overflow-x: hidden;
+  mask-image: linear-gradient(to left, #0000 0%, #000 20%, #000 80%, #0000 100%);
+  background: #aaa2;
+  box-shadow: #000 0 0 10px;
+}
+
+.inner-slide-bar{
+  display: flex;
+  height: 50px;
+  width: 200%;
+  color: white;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.slider-dot{
+  width: 5px;
+  height: 5px;
+  border-radius: 5px;
+  background: #aaa;
+  margin: auto 25px;
+}
+
+.slider-text{
+  width: 200px;
+  text-align: center;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #aaa;
+  transition: 0.25s;
+}
+
+.slider-text:hover{
+  color: #fff;
+}
+
+.slide-bar-tri{
+  position: fixed;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  border: transparent solid 5px;
+  border-top: #fff solid 5px;
+}

src/css/tray.css

···
+.photo-tray{
+  position: fixed;
+  bottom: -300px;
+  left: 0;
+  width: 100%;
+  height: 300px;
+  background: rgba(43, 43, 43, 0.76);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: #0008 0 0 10px;
+  padding-bottom: 150px;
+}
+
+.photo-tray-close{
+  position: fixed;
+  bottom: 160px;
+  left: 50%;
+  transform: translate(-50%);
+  color: white;
+  background: #8885;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: #0008 0 0 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 30px;
+  width: 50px;
+  border-radius: 50px;
+  cursor: pointer;
+  font-size: 12px;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: 0.25s width;
+}
+
+.photo-tray-close:hover{
+  width: 70px;
+}
+
+.photo-tray-columns{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  color: white;
+  text-align: center;
+}
+
+.photo-tray-column{
+  height: 100%;
+  width: 100%;
+  scrollbar-width: thin;
+  overflow-y: auto;
+  overflow-x: hidden;
+  mask-image: linear-gradient(to bottom, #0000 0%, #000 10%, #000 90%, #0000 100%);
+}
+
+.tray-heading{
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.world-tags{
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.world-tags div{
+  padding: 0 10px;
+  color: #bbb;
+  transition: 0.25s;
+}
+
+.world-tags div:hover{
+  color: #ddd;
+}
+
+.world-name{
+  font-size: 17px;
+}

src/css/viewer.css

···
+
+.photo-container{
+  width: 100%;
+  height: 100%;
+}
+
+.photo-container-bg{
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  /* filter: blur(100px); */
+}
+
+.single-photo-container{
+  margin: 10px;
+  display: inline-block;
+}
+
+.photo-viewer{
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 5;
+  background: #0009;
+  opacity: 0;
+  display: none;
+}
+
+.photo-context-menu{
+  position: fixed;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  border-radius: 5px;
+  background: #555a;
+  color: #aaa;
+  box-shadow: #0005 0 0 10px;
+  opacity: 0;
+}
+
+.photo-context-menu > div{
+  padding: 2px 10px;
+  width: 100;
+  text-align: center;
+  transition: 0.1s;
+}
+
+.photo-context-menu > div:hover{
+  color: #fff;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.image-container{
+  height: 100%;
+  background-size: contain !important;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  opacity: 0;
+}
+
+.viewer-button{
+  color: white;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50px;
+  font-size: 12px;
+  background: #8885;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+  z-index: 7;
+  box-shadow: #0008 0 0 10px;
+}
+
+.viewer-close{
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  width: 35px;
+  height: 35px;
+}
+
+.prev-button{
+  transition: 0.25s;
+  position: fixed;
+  top: 50%;
+  left: 0;
+  color: white;
+  width: 50px;
+  height: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.144);
+  border-radius: 0 15px 15px 0;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  box-shadow: #000 0 0 10px;
+}
+
+.prev-button:hover{
+  background: rgba(255, 255, 255, 0.349);
+}
+
+.next-button{
+  transition: 0.25s;
+  position: fixed;
+  top: 50%;
+  right: 0;
+  color: white;
+  width: 50px;
+  height: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.144);
+  border-radius: 15px 0 0 15px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  box-shadow: #000 0 0 10px;
+}
+
+.next-button:hover{
+  background: rgba(255, 255, 255, 0.349);
+}
+
+.control-buttons{
+  position: fixed;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+}
+
+.control-buttons div{
+  margin: 0 20px;
+}
+
+.copy-notif{
+  position: fixed;
+  top: 40px;
+  left: 50%;
+  color: white;
+  transform: translateX(-50%) translateY(-100px);
+  background: #8885;
+  padding: 10px 40px;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: 50px;
+  box-shadow: #000 0 0 10px;
+  z-index: 12;
+  opacity: 0;
+  pointer-events: none;
+}

src/index.tsx

···
 
 window.oncontextmenu = ( e ) => e.preventDefault(); 
 
+import './css/icons.css';
+import './css/tray.css';
+import './css/settings.css';
+import './css/slide-bar.css';
+import './css/viewer.css';
+import './css/filters.css';
+import './css/list.css';
+
 import "./styles.css";
+
 import App from "./Components/App";
 import { invoke } from "@tauri-apps/api/core";
 

src/styles.css

···
   background: #000;
   margin: 0;
   font-family: Rubik, 'Courier New';
+  overflow: hidden;
+}
+
+* {
+  box-sizing: border-box;
 }
 
 .loading{
···
   align-items: center;
 }
 
-.navbar{
-  background: #555a;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  margin-top: -50px;
-  padding-top: 50px;
-  height: 50px;
-  display: flex;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  z-index: 10;
-  box-shadow: #000 0 0 10px;
-}
-
-.navbar .tabs{
-  width: calc(100% - 450px);
-  height: 100%;
-  display: flex;
-}
-
-.navbar .account{
-  width: 100px;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: 0.1s;
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.navbar .account:hover{
-  background: #0005;
-}
-
-.navbar .control-lights{
-  width: 150px;
-  height: 50px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.control-lights .light{
-  user-select: none;
-  -webkit-user-select: none;
-  font-size: 20px;
-  text-align: center;
-  color: white;
-  width: 100%;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 50px;
-  filter: invert(100%);
-}
-
-.control-lights .light:hover{
-  background: #fff5;
-}
-
-.control-lights .light img{
-  width: 25%;
-}
-
-.icon{
-  width: 15px;
-  filter: invert(100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
-.icon-label{
-  margin-top: -20px;
-  margin-right: -200px;
-  width: 200px;
-  color: white;
-  pointer-events: none;
-  transform: translate(40px, -19px);
-  opacity: 0;
-  transition: 0.25s;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.icon:hover ~ .icon-label{
-  opacity: 1;
-  transform: translate(60px, -19px);
-}
-
-.user-pfp{
-  width: 35px;
-  height: 35px;
-  background-size: cover !important;
-  background-position: center !important;
-  border-radius: 50%;
-  margin-right: 10px;
-}
-
-.account-dropdown{
-  font-size: 20px;
-  color: white;
-}
-
-.nav-tab{
-  color: white;
-  width: 150px;
-  height: 100%;
-  transition: 0.1s;
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
-
-.nav-tab:hover{
-  background: #0005;
-}
-
-.dropdown{
-  position: fixed;
-  right: 125px;
-  top: 60px;
-  background: #555a;
-  height: 60px;
-  width: 150px;
-  border-radius: 5px;
-  backdrop-filter: blur(5px);
-  z-index: 10;
-}
-
-.dropdown-button{
-  width: 100%;
-  text-align: center;
-  padding: 5.5px 0;
-  color: #aaa;
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
-  transition: 0.1s;
-}
-
-.dropdown-button:hover{
-  color: #fff;
-}
-
-.photo-list{
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-}
-
-.filter-options{
-  position: fixed;
-  top: 55px;
-  left: 5px;
-  width: 40px;
-  height: 50px;
-}
-
-.filter-options img{
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.filter-container{
-  display: none;
-  position: fixed;
-  bottom: 0;
-  left: 50%;
-  width: 600px;
-  height: 83px;
-  transform: translate(-50%);
-  padding: 10px;
-  border-radius: 5px 5px 0 0;
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(5px);
-  background: #555a;
-  color: #fff;
-  text-align: center;
-  box-shadow: #0005 0 0 10px;
-  opacity: 0;
-}
-
-.filter-container > .filter-title{
-  font-size: 30px;
-}
-
-.filter-type-select{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 75%;
-  margin: auto;
-}
-
-.filter-type-select > div{
-  width: 100%;
-  border: #fff 4px solid;
-  border-left: #fff 2px solid;
-  border-right: #fff 2px solid;
-  padding: 5px 0;
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.filter-type-select > div:first-child{
-  border-left: #fff 4px solid;
-  border-radius: 10px 0 0 10px;
-}
-
-.filter-type-select > div:last-child{
-  border-right: #fff 4px solid;
-  border-radius: 0 10px 10px 0;
-}
-
-.filter-type-select > .selected-filter{
-  background: #00ccff55;
-}
-
-.filter-search{
-  margin-top: 10px;
-  padding: 5px;
-  border: #fff 4px solid;
-  border-radius: 10px;
-  background: #0008;
-  outline: none;
-  color: white;
-  font-size: 15px;
-  font-family: 'Rubik';
-  width: calc(75% - 18px);
-}
-
-.date-list{
-  mask-image: linear-gradient(to bottom, #0000, #000, #0000);
-  overflow: auto;
-  scrollbar-width: thin;
-  height: calc(100% - 100px);
-  padding: 50px 0;
-}
-
-.date-list-date{
-  padding: 10px;
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: pointer;
-  transition: 0.1s;
-  border-radius: 10px;
-}
-
-.date-list-date:hover{
-  background: #0005;
-  box-shadow: inset #0005 0 0 10px;
-}
-
-.photo-tree-loading{
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: white;
-  font-size: 20px;
-}
-
-.loading-bar{
-  width: 500px;
-  height: 8px;
-  border-radius: 12px;
-  background: #333;
-  margin-top: 10px;
-  padding: 2px;
-}
-
-.loading-bar-inner{
-  width: 0%;
-  height: 8px;
-  border-radius: 18px;
-  background: #00ccff;
-}
-
-.photo-container{
-  width: 100%;
-  height: 100%;
-}
-
-.photo-container-bg{
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  /* filter: blur(100px); */
-}
-
-.single-photo-container{
-  margin: 10px;
-  display: inline-block;
-}
-
-.photo-viewer{
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 5;
-  background: #0009;
-  backdrop-filter: blur(75px);
-  -webkit-backdrop-filter: blur(75px);
-  opacity: 0;
-  display: none;
-}
-
-.photo-context-menu{
-  position: fixed;
-  top: 0;
-  left: 0;
-  padding: 10px;
-  border-radius: 5px;
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(5px);
-  background: #555a;
-  color: #aaa;
-  box-shadow: #0005 0 0 10px;
-  opacity: 0;
-}
-
-.photo-context-menu > div{
-  padding: 2px 10px;
-  width: calc(100% - 10px);
-  text-align: center;
-  transition: 0.1s;
-}
-
-.photo-context-menu > div:hover{
-  color: #fff;
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.image-container{
-  height: 100%;
-  background-size: contain !important;
-  background-repeat: no-repeat !important;
-  background-position: center !important;
-  opacity: 0;
-}
-
-.viewer-button{
-  color: white;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50px;
-  font-size: 12px;
-  background: #8885;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: pointer;
-  z-index: 7;
-  box-shadow: #0008 0 0 10px;
-}
-
-.viewer-close{
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  width: 35px;
-  height: 35px;
-}
-
-.prev-button{
-  transition: 0.25s;
-  position: fixed;
-  top: 50%;
-  left: 0;
-  color: white;
-  width: 50px;
-  height: 150px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transform: translateY(-50%);
-  background: rgba(255, 255, 255, 0.144);
-  backdrop-filter: blur(50px);
-  -webkit-backdrop-filter: blur(50px);
-  border-radius: 0 15px 15px 0;
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
-  box-shadow: #000 0 0 10px;
-}
-
-.prev-button:hover{
-  background: rgba(255, 255, 255, 0.349);
-}
-
-.next-button{
-  transition: 0.25s;
-  position: fixed;
-  top: 50%;
-  right: 0;
-  color: white;
-  width: 50px;
-  height: 150px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transform: translateY(-50%);
-  background: rgba(255, 255, 255, 0.144);
-  backdrop-filter: blur(50px);
-  -webkit-backdrop-filter: blur(50px);
-  border-radius: 15px 0 0 15px;
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
-  box-shadow: #000 0 0 10px;
-}
-
-.next-button:hover{
-  background: rgba(255, 255, 255, 0.349);
-}
-
-.reload-photos{
-  position: fixed;
-  top: 70px;
-  right: 20px;
-  color: white;
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: pointer;
-  opacity: 0;
-}
-
 .confirmation-box{
   position: fixed;
   top: 0;
···
   width: 100%;
   height: 100%;
   z-index: 15;
-  background: #0005;
+  background: rgba(0, 0, 0, 0.76);
   transition: 0.25s;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
 }
 
 .confirmation-box-container{
···
 
 .button-danger:hover{
   box-shadow: #000a inset 0 0 10px;
-}
-
-.control-buttons{
-  position: fixed;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-}
-
-.control-buttons div{
-  margin: 0 20px;
-}
-
-.copy-notif{
-  position: fixed;
-  top: 40px;
-  left: 50%;
-  color: white;
-  transform: translateX(-50%) translateY(-100px);
-  background: #8885;
-  padding: 10px 40px;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-radius: 50px;
-  box-shadow: #000 0 0 10px;
-  z-index: 12;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.photo-tray{
-  position: fixed;
-  bottom: -150px;
-  left: 0;
-  width: 100%;
-  height: 150px;
-  background: #7778;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  box-shadow: #0008 0 0 10px;
-  padding-bottom: 150px;
-  margin-bottom: -150px;
-}
-
-.photo-tray-close{
-  position: fixed;
-  bottom: 160px;
-  left: 50%;
-  transform: translate(-50%);
-  color: white;
-  background: #8885;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  box-shadow: #0008 0 0 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 30px;
-  width: 50px;
-  border-radius: 50px;
-  cursor: pointer;
-  font-size: 12px;
-  user-select: none;
-  -webkit-user-select: none;
-  transition: 0.25s width;
-}
-
-.photo-tray-close:hover{
-  width: 70px;
-}
-
-.photo-tray-columns{
-  width: 100%;
-  height: 100%;
-  display: flex;
-  color: white;
-  text-align: center;
-}
-
-.photo-tray-column{
-  height: 100%;
-  width: 100%;
-  scrollbar-width: thin;
-  overflow-y: auto;
-  overflow-x: hidden;
-  mask-image: linear-gradient(to bottom, #0000 0%, #000 10%, #000 90%, #0000 100%);
-}
-
-.tray-heading{
-  font-weight: bold;
-  font-size: 20px;
-}
-
-.world-tags{
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-}
-
-.world-tags div{
-  padding: 0 10px;
-  color: #bbb;
-  transition: 0.25s;
-}
-
-.world-tags div:hover{
-  color: #ddd;
-}
-
-.world-name{
-  font-size: 17px;
-}
-
-.settings{
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(100px);
-  -webkit-backdrop-filter: blur(100px);
-}
-
-.slide-bar{
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 50px;
-  border-top: #aaa 1px solid;
-  overflow-x: hidden;
-  mask-image: linear-gradient(to left, #0000 0%, #000 20%, #000 80%, #0000 100%);
-  background: #aaa2;
-  box-shadow: #000 0 0 10px;
-}
-
-.inner-slide-bar{
-  display: flex;
-  height: 50px;
-  width: 200%;
-  color: white;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.slider-dot{
-  width: 5px;
-  height: 5px;
-  border-radius: 5px;
-  background: #aaa;
-  margin: auto 25px;
-}
-
-.slider-text{
-  width: 200px;
-  text-align: center;
-  height: 50px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #aaa;
-  transition: 0.25s;
-}
-
-.slider-text:hover{
-  color: #fff;
-}
-
-.slide-bar-tri{
-  position: fixed;
-  bottom: 40px;
-  left: 50%;
-  transform: translateX(-50%);
-  border: transparent solid 5px;
-  border-top: #fff solid 5px;
-}
-
-.settings-container{
-  position: fixed;
-  top: 50px;
-  left: 0px;
-  width: 200%;
-  height: calc(100% - 100px);
-  display: flex;
-}
-
-.settings-block{
-  width: 50%;
-  height: 100%;
-  color: white;
-  text-align: center;
-}
-
-.selector{
-  padding: 10px 20px;
-  border-radius: 10px;
-  background: #000a;
-  display: inline-block;
-  margin: 10px;
-}
-
-.selector .selection-box{
-  height: 20px;
-  background: #777a;
-  margin: 5px -10px 0 -10px;
-  border-radius: 8px;
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: pointer;
-  transition: 0.25s;
-  color: #fff1;
-}
-
-.selector .selection-box:hover{
-  height: 20px;
-  background: #777a;
-  margin: 5px -10px 0 -10px;
-  border-radius: 8px;
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: pointer;
-  transition: 0.25s;
-  color: #fff5;
-}
-
-.selector input{
-  display: none;
-}
-
-.selector input:checked ~ label .selection-box{
-  background: rgba(0, 146, 204, 0.705);
-  color: #fff;
-}
-
-.path{
-  padding: 5px 10px;
-  background: #000a;
-  border-radius: 5px;
-  margin-left: 5px;
-  cursor: pointer;
-}
-
-.scroll-to-top{
-  position: fixed;
-  bottom: 10px;
-  right: 10px;
-  color: white;
-  width: 40px;
-  height: 40px;
-  cursor: pointer;
-  border-radius: 50%;
-  border: 2px solid white;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.account-profile{
-  margin: auto;
-  width: 50%;
-  height: 200px;
-  display: flex;
-}
-
-.account-pfp{
-  width: 200px;
-  height: 200px;
-  background-position: center !important;
-  background-size: cover !important;
-  border-radius: 50%;
-  box-shadow: #0005 0 0 10px;
-  position: relative;
-  z-index: 10;
-}
-
-.account-desc{
-  width: calc(100% - 200px);
-  padding-left: 100px;
-  height: 150px;
-  margin: 25px 0;
-  margin-left: -100px;
-  background: #0009;
-  border-radius: 10px;
-  box-shadow: #0005 0 0 10px;
-}
-
-.storage-bar{
-  width: calc(100% - 20px);
-  height: 10px;
-  margin-left: 10px;
-  background: #555;
-  border-radius: 10px;
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  margin-bottom: 2px;
-}
-
-.storage-bar-inner{
-  margin: 2px;
-  height: 6px;
-  background: #00ccff;
-  border-radius: 10px;
-}
-
-.account-notice{
-  background: #0007;
-  border-radius: 5px;
-  box-shadow: #0005 0 0 10px;
-  padding: 10px;
-  margin: auto;
-  width: calc(50% - 20px);
-  margin-top: 25px;
 }
 
 img{