fix: changed toasts to snackbars

package.json

@@ -32,7 +32,6 @@
     "@tauri-apps/plugin-process": "2.0.0-rc.0",
     "@tauri-apps/plugin-shell": "2.0.0-rc.0",
     "@tauri-apps/plugin-updater": "^2.0.0-rc.0",
-    "@zerodevx/svelte-toast": "^0.9.5",
     "fast-xml-parser": "^4.5.0",
     "markdown-it": "^13.0.2",
     "svelte-lazy": "^1.2.7",

public/theme.css

@@ -32,9 +32,14 @@
 	--warning: #e24a4a;
 	--warning-hover: #e13525;
 
-	--success: #36ff04;
+  --error-snackbar-background: 255 180 171;
+  --error-snackbar-text: 105 0 5;
+
+  --info-snackbar-background: 232 224 232;
+  --info-snackbar-text: 51 47 53;
 
-	--toastContainerTop: 2.5rem;
+
+	--success: #36ff04;
 }
 
 [data-theme="dark"] {

src/components/core/filters/Options.svelte

@@ -117,6 +117,7 @@
     padding: 7px 0px;
   }
   .toggle-container {
+    margin-top: 4px;
     padding-left: 6px;
     display: flex;
     justify-content: space-between;

src/components/modals/SteamPathModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { LogController, ToastController } from "@controllers";
+  import { LogController } from "@controllers";
   import { Button } from "@interactables";
-  import { steamInstallPath } from "@stores/AppState";
+  import { showInfoSnackbar, steamInstallPath } from "@stores/AppState";
   import { steamPathModalClose } from "@stores/Modals";
   import { validateSteamPath } from "@utils";
   import ModalBody from "./modal-utils/ModalBody.svelte";
@@ -24,7 +24,7 @@
 
     canSave = false;
 
-    ToastController.showSuccessToast("Steam Install Location saved!");
+    $showInfoSnackbar({ message: "Steam Install Location saved!" });
 
     await $steamPathModalClose();
   }

src/components/modals/UpdateTilesModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { AppController, LogController, ToastController } from "@controllers";
+  import { AppController, LogController } from "@controllers";
   import { Button } from "@interactables";
-  import { appLibraryCache, manualSteamGames, originalAppLibraryCache, steamGames } from "@stores/AppState";
+  import { appLibraryCache, manualSteamGames, originalAppLibraryCache, showErrorSnackbar, showInfoSnackbar, steamGames } from "@stores/AppState";
   import { showUpdateTilesModal } from "@stores/Modals";
   import type { GameStruct } from "@types";
   import { onMount } from "svelte";
@@ -36,10 +36,10 @@
 
     if (failedIds.length > 0) {
       LogController.error(`Failed to update ${failedIds.length} tiles. Ids that failed: ${JSON.stringify(failedIds)}.`);
-      ToastController.showWarningToast(`Failed to update ${failedIds.length} tiles!`)
+      $showErrorSnackbar({ message: `Failed to update ${failedIds.length} tiles!` });
     } else {
       LogController.log(`Updated ${selectedGameIds.length} tiles.`);
-      ToastController.showSuccessToast(`Updated ${selectedGameIds.length} tiles`);
+      $showInfoSnackbar({ message: `Updated ${selectedGameIds.length} tiles` });
       onClose();
     }
   }

src/components/modals/batch-apply/BatchApplyModal.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { AppController, ToastController } from "@controllers";
+  import { AppController } from "@controllers";
   import { Button } from "@interactables";
+  import { gridType, manualSteamGames, nonSteamGames, showInfoSnackbar, steamGames } from "@stores/AppState";
+  import { showBatchApplyModal, showBatchApplyProgress } from "@stores/Modals";
   import { GridTypes } from "@types";
-  import { gridType, manualSteamGames, nonSteamGames, steamGames } from "../../../stores/AppState";
-  import { showBatchApplyModal, showBatchApplyProgress } from "../../../stores/Modals";
   import ModalBody from "../modal-utils/ModalBody.svelte";
   import GameFilter from "../modal-utils/game-filter/GameFilter.svelte";
 
@@ -32,7 +32,7 @@
    * Cancels batch applying grids.
    */
   function cancel(): void {
-    ToastController.showGenericToast("Cancelled Batch Apply.");
+    $showInfoSnackbar({ message: "Cancelled Batch Apply." });
     onClose();
   }
 </script>

src/components/modals/clean-grids/CleanConflictDialog.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { LogController, ToastController } from "@controllers";
+  import { LogController } from "@controllers";
   import { Button } from "@interactables";
   import * as fs from "@tauri-apps/plugin-fs";
   import { onMount } from "svelte";
   import { cleanConflicts, showCleanConflictDialog } from "../../../stores/Modals";
   import ModalBody from "../modal-utils/ModalBody.svelte";
     
+  import { showInfoSnackbar } from "@stores/AppState";
   import { convertFileSrc } from "@tauri-apps/api/core";
   import { type CleanConflict } from "@types";
   import { CLEAN_CONFLICT_GRID_DIMENSIONS, IMAGE_FADE_OPTIONS } from "@utils";
@@ -40,7 +41,7 @@
     if (!conflict) {
       $showCleanConflictDialog = false;
       $cleanConflicts = [];
-      ToastController.showSuccessToast("Finished cleaning!");
+      $showInfoSnackbar({ message: "Finished cleaning!" });
       LogController.log("Finished cleaning!");
     }
   }
@@ -56,7 +57,7 @@
     if (!conflict) {
       $showCleanConflictDialog = false;
       $cleanConflicts = [];
-      ToastController.showSuccessToast("Finished cleaning!");
+      $showInfoSnackbar({ message: "Finished cleaning!" });
       LogController.log("Finished cleaning!");
     }
   }

src/components/modals/game-search/GameSearchModal.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { AppController, LogController, ToastController } from "@controllers";
+  import { AppController, LogController } from "@controllers";
   import { isOverflowing, scrollShadow } from "@directives";
   import { Refresh } from "@icons";
   import { Button, IconButton, SearchBar } from "@interactables";
-  import { selectedGameName } from "@stores/AppState";
+  import { selectedGameName, showErrorSnackbar, showInfoSnackbar } from "@stores/AppState";
   import { gameSearchModalCancel, gameSearchModalDefault, gameSearchModalSelect, showGameSearchModal } from "@stores/Modals";
   import type { SGDBGame } from "@types";
   import { onMount } from "svelte";
@@ -36,7 +36,7 @@
     canApply = false;
 
     LogController.log(`Applied game choice ${selectedGame!.name}`);
-    ToastController.showSuccessToast("Choice applied!");
+    $showInfoSnackbar({ message: "Choice applied!" });
 
     $gameSearchModalSelect(selectedGame!);
     onClose();
@@ -64,7 +64,7 @@
     } else {
       requestTimedOut = true;
       results = [];
-      ToastController.showWarningToast("Requst Timed Out!");
+      $showErrorSnackbar({ message: "Requst Timed Out!" });
     }
     
     loading = false;

src/components/modals/manual-games/ManualGamesModal.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { AppController, LogController, ToastController } from "@controllers";
+  import { AppController, LogController } from "@controllers";
   import { Info, SGDBLogo, Steam } from "@icons";
   import { Button, DropDown } from "@interactables";
   import { Table } from "@layout";
-  import { appLibraryCache, manualSteamGames, originalAppLibraryCache, selectedManualGamesAddMethod, steamGames } from "@stores/AppState";
+  import { appLibraryCache, manualSteamGames, originalAppLibraryCache, selectedManualGamesAddMethod, showErrorSnackbar, showInfoSnackbar, steamGames } from "@stores/AppState";
   import { showManualGamesModal } from "@stores/Modals";
   import type { GameStruct } from "@types";
   import ModalBody from "../modal-utils/ModalBody.svelte";
@@ -35,7 +35,7 @@
    */
   function addNewGame(game: GameStruct): void {
     if ($steamGames.find((sGame) => sGame.appid === game.appid) || tempManualGames.find((tGame) => tGame.appid === game.appid)) {
-      ToastController.showWarningToast("Game with that appid already exists! Can't have duplicates.");
+      $showErrorSnackbar({ message: "Game with that appid already exists! Can't have duplicates." });
     } else {
       LogController.log(`Added manually added game ${game.name}.`);
       tempManualGames.push(game);
@@ -74,7 +74,7 @@
     appLibraryCache.set(structuredClone(appLibCache));
 
     LogController.log(`Saved ${tempManualGames.length} manually added games.`);
-    ToastController.showSuccessToast(`Saved ${tempManualGames.length} manually added games.`);
+    $showInfoSnackbar({ message: `Saved ${tempManualGames.length} manually added games.` });
 
     onClose();
   }
@@ -83,7 +83,7 @@
    * Cancels adding games.
    */
   function cancel() {
-    ToastController.showGenericToast("Cancelled manual games.");
+    $showInfoSnackbar({ message: "Cancelled manual games." });
     onClose();
   }
 </script>

src/components/modals/manual-games/add-methods/Manual.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { ToastController } from "@controllers";
   import { Button, NumberInput, TextInput } from "@interactables";
+  import { showInfoSnackbar } from "@stores/AppState";
   import type { GameStruct } from "@types";
   
   export let onGameSave: (game: GameStruct) => void;
@@ -12,7 +12,7 @@
    * Wrapper function for saving the manual game.
    */
   function saveWrapper(): void {
-    ToastController.showSuccessToast(`Added ${gameName}!`);
+    $showInfoSnackbar({ message: `Added ${gameName}!` });
     onGameSave({ appid: appId, name: gameName });
     gameName = "";
     appId = 0;
@@ -22,7 +22,7 @@
    * Clears any user input.
    */
   function clear(): void {
-    ToastController.showGenericToast("Cleared info.");
+    $showInfoSnackbar({ message: "Cleared info." });
     gameName = "";
     appId = 0;
   }

src/components/modals/manual-games/add-methods/Search.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { AppController, ToastController } from "@controllers";
+  import { AppController } from "@controllers";
   import { Button, SearchBar } from "@interactables";
   import { Table } from "@layout";
-  import { needsSGDBAPIKey } from "@stores/AppState";
+  import { needsSGDBAPIKey, showErrorSnackbar, showInfoSnackbar } from "@stores/AppState";
   import type { GameStruct, SGDBGame } from "@types";
   import SearchEntry from "./SearchEntry.svelte";
   
@@ -42,21 +42,21 @@
     
     if (appid) {
       onGameSave({ appid: parseInt(appid), name: selectedGame!.name });
-      ToastController.showSuccessToast(`Added ${selectedGame!.name}!`);
+      $showInfoSnackbar({ message: `Added ${selectedGame!.name}!` });
       selectedGame = null;
       results = [];
       searchQuery = "";
     } else {
       selectedGame = null;
-      ToastController.showWarningToast("No appid found for the selected game!");
+      $showErrorSnackbar({ message: "No appid found for the selected game!" });
     }
   }
 
   /**
    * Clears any user input.
    */
   function clear(): void {
-    ToastController.showGenericToast("Cleared selection.");
+    $showInfoSnackbar({ message: "Cleared selection." });
     selectedGame = null;
     results = [];
     searchQuery = "";

src/components/modals/settings/SettingsModal.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { AppController, DialogController, LogController, ToastController } from "@controllers";
+  import { AppController, DialogController, LogController } from "@controllers";
   import { isOverflowing } from "@directives";
   import { Folder } from "@icons";
   import { Button, IconButton } from "@interactables";
-  import { activeUserId, debugMode, loadingGames, needsSGDBAPIKey, needsSteamKey, steamGridDBKey, steamInstallPath, steamKey, steamUsers } from "@stores/AppState";
+  import { activeUserId, debugMode, loadingGames, needsSGDBAPIKey, needsSteamKey, showInfoSnackbar, steamGridDBKey, steamInstallPath, steamKey, steamUsers } from "@stores/AppState";
   import { showSettingsModal } from "@stores/Modals";
   import { appLogDir } from "@tauri-apps/api/path";
   import * as shell from "@tauri-apps/plugin-shell";
@@ -88,7 +88,7 @@
     if (selectedUserId !== $activeUserId.toString()) await AppController.changeSteamUser(selectedUserId);
 
     LogController.log("Saved settings.");
-    ToastController.showSuccessToast("Settings saved!");
+    $showInfoSnackbar({ message: "Settings saved!" });
     canSave = false;
 
     onClose();

src/components/modals/updates/UpdateModal.svelte

@@ -5,10 +5,11 @@
   
   import { showUpdateModal, updateManifest } from "@stores/Modals";
 
-  import { LogController, ToastController } from "@controllers";
+  import { LogController } from "@controllers";
   import { scrollShadow } from "@directives";
   import { Button } from "@interactables";
   import { ProgressIndicator } from "@layout";
+  import { showErrorSnackbar } from "@stores/AppState";
   import type { DownloadEvent } from "@tauri-apps/plugin-updater";
   import { onMount } from "svelte";
   import { fade } from "svelte/transition";
@@ -78,7 +79,7 @@
         }
       });
     } catch (e: any) {
-      ToastController.showWarningToast("Failed to download update!");
+      $showErrorSnackbar({ message: "Failed to download update!" });
     }
   }
 

src/components/snackbars/ErrorSnackbar.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import GenericSnackbar from "./GenericSnackbar.svelte";
+  
+  let showError: (data: ShowSnackbarOptions) => void;
+  
+  export const show = (data: { message: any; faster: any; }) => {
+    showError({ message: data.message, timeout: data.faster ? 2000 : 3000 });
+  }
+
+  const backgroundColor = "var(--error-snackbar-background)";
+  const textColor = "var(--error-snackbar-text)";
+</script>
+
+<GenericSnackbar backgroundColor={backgroundColor} textColor={textColor} bind:show={showError} />