feat: adding toast when signing in and out

src/renderer/src/app.css.ts

@@ -111,6 +111,6 @@ export const titleBar = style({
   alignItems: "center",
   padding: `0 ${SPACING_UNIT * 2}px`,
   WebkitAppRegion: "drag",
-  zIndex: "2",
+  zIndex: "4",
   borderBottom: `1px solid ${vars.color.border}`,
 } as ComplexStyleRule);

src/renderer/src/app.tsx

@@ -7,6 +7,7 @@ import {
   useAppSelector,
   useDownload,
   useLibrary,
+  useToast,
   useUserDetails,
 } from "@renderer/hooks";
 
@@ -22,6 +23,7 @@ import {
   setUserDetails,
   setProfileBackground,
 } from "@renderer/features";
+import { useTranslation } from "react-i18next";
 
 export interface AppProps {
   children: React.ReactNode;
@@ -31,6 +33,8 @@ export function App() {
   const contentRef = useRef<HTMLDivElement>(null);
   const { updateLibrary } = useLibrary();
 
+  const { t } = useTranslation("app");
+
   const { clearDownload, setLastPacket } = useDownload();
 
   const { fetchUserDetails, updateUserDetails, clearUserDetails } =
@@ -49,6 +53,8 @@ export function App() {
 
   const toast = useAppSelector((state) => state.toast);
 
+  const { showSuccessToast } = useToast();
+
   useEffect(() => {
     Promise.all([window.electron.getUserPreferences(), updateLibrary()]).then(
       ([preferences]) => {
@@ -95,25 +101,28 @@ export function App() {
     });
   }, [dispatch, fetchUserDetails]);
 
+  const onSignIn = useCallback(() => {
+    fetchUserDetails().then((response) => {
+      if (response) {
+        updateUserDetails(response);
+        showSuccessToast(t("successfully_signed_in"));
+      }
+    });
+  }, [fetchUserDetails, t, showSuccessToast, updateUserDetails]);
+
   useEffect(() => {
     const listeners = [
-      window.electron.onSignIn(() => {
-        fetchUserDetails().then((response) => {
-          if (response) updateUserDetails(response);
-        });
-      }),
+      window.electron.onSignIn(onSignIn),
       window.electron.onLibraryBatchComplete(() => {
         updateLibrary();
       }),
-      window.electron.onSignOut(() => {
-        clearUserDetails();
-      }),
+      window.electron.onSignOut(() => clearUserDetails()),
     ];
 
     return () => {
       listeners.forEach((unsubscribe) => unsubscribe());
     };
-  }, [fetchUserDetails, updateUserDetails, updateLibrary, clearUserDetails]);
+  }, [onSignIn, updateLibrary, clearUserDetails]);
 
   const handleSearch = useCallback(
     (query: string) => {
@@ -167,6 +176,13 @@ export function App() {
         </div>
       )}
 
+      <Toast
+        visible={toast.visible}
+        message={toast.message}
+        type={toast.type}
+        onClose={handleToastClose}
+      />
+
       <main>
         <Sidebar />
 
@@ -184,13 +200,6 @@ export function App() {
       </main>
 
       <BottomPanel />
-
-      <Toast
-        visible={toast.visible}
-        message={toast.message}
-        type={toast.type}
-        onClose={handleToastClose}
-      />
     </>
   );
 }

src/renderer/src/components/backdrop/backdrop.css.ts

@@ -1,7 +1,7 @@
 import { keyframes } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 
-import { SPACING_UNIT } from "../../theme.css";
+import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const backdropFadeIn = keyframes({
   "0%": { backdropFilter: "blur(0px)", backgroundColor: "rgba(0, 0, 0, 0.5)" },
@@ -30,8 +30,8 @@ export const backdrop = recipe({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    zIndex: 1,
-    top: 0,
+    zIndex: vars.zIndex.backdrop,
+    top: "0",
     padding: `${SPACING_UNIT * 3}px`,
     backdropFilter: "blur(2px)",
     transition: "all ease 0.2s",

src/renderer/src/components/bottom-panel/bottom-panel.css.ts

@@ -12,7 +12,7 @@ export const bottomPanel = style({
   transition: "all ease 0.2s",
   justifyContent: "space-between",
   position: "relative",
-  zIndex: "1",
+  zIndex: vars.zIndex.bottomPanel,
 });
 
 export const downloadsButton = style({

src/renderer/src/components/toast/toast.css.ts

@@ -31,7 +31,7 @@ export const toast = recipe({
     display: "flex",
     flexDirection: "column",
     justifyContent: "space-between",
-    zIndex: "0",
+    zIndex: vars.zIndex.toast,
     maxWidth: "500px",
   },
   variants: {

src/renderer/src/pages/user/user-content.tsx

@@ -6,7 +6,7 @@ import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
-import { useDate, useUserDetails } from "@renderer/hooks";
+import { useDate, useToast, useUserDetails } from "@renderer/hooks";
 import { useNavigate } from "react-router-dom";
 import { buildGameDetailsPath } from "@renderer/helpers";
 import { PersonIcon, TelescopeIcon } from "@primer/octicons-react";
@@ -28,6 +28,7 @@ export function UserContent({
   const { t, i18n } = useTranslation("user_profile");
 
   const { userDetails, profileBackground, signOut } = useUserDetails();
+  const { showSuccessToast } = useToast();
 
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
   const [showSignOutModal, setShowSignOutModal] = useState(false);
@@ -68,7 +69,10 @@ export function UserContent({
   };
 
   const handleConfirmSignout = async () => {
-    signOut();
+    await signOut();
+
+    showSuccessToast(t("successfully_signed_out"));
+
     navigate("/");
   };
 

src/renderer/src/theme.css.ts

@@ -21,4 +21,10 @@ export const vars = createGlobalTheme(":root", {
     body: "14px",
     small: "12px",
   },
+  zIndex: {
+    toast: "2",
+    bottomPanel: "3",
+    titleBar: "4",
+    backdrop: "4",
+  },
 });