feat: toast refactor (#1716)

aeharding · Jan 12, 2025 · e0a35c9 · e0a35c9
1 parent d4b0e9e
commit e0a35c9
Show file tree

Hide file tree

Showing 15 changed files with 413 additions and 103 deletions.
diff --git a/package.json b/package.json
@@ -95,6 +95,7 @@
     "micromark-extension-gfm-table": "^2.1.0",
     "micromark-util-combine-extensions": "^2.0.1",
     "modern-screenshot": "^4.5.5",
+    "motion": "^11.15.0",
     "photoswipe": "^5.4.4",
     "react": "0.0.0-experimental-7b402084-20250107",
     "react-animate-height": "^3.2.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/core/App.tsx b/src/core/App.tsx
@@ -47,6 +47,7 @@ import {
   getDeviceMode,
   isInstalled,
 } from "#/helpers/device";
+import { AppToastProvider } from "#/helpers/useAppToast";
 import { OptimizedRouterProvider } from "#/helpers/useOptimizedIonRouter";
 import Router from "#/routes/common/Router";
 import { UpdateContextProvider } from "#/routes/pages/settings/update/UpdateContext";
@@ -97,13 +98,15 @@ export default function App() {
                   <Router>
                     <OptimizedRouterProvider>
                       <TabContextProvider>
-                        <IonApp>
-                          <Auth>
-                            <TabbedRoutes>
-                              <Listeners />
-                            </TabbedRoutes>
-                          </Auth>
-                        </IonApp>
+                        <AppToastProvider>
+                          <IonApp>
+                            <Auth>
+                              <TabbedRoutes>
+                                <Listeners />
+                              </TabbedRoutes>
+                            </Auth>
+                          </IonApp>
+                        </AppToastProvider>
                       </TabContextProvider>
                     </OptimizedRouterProvider>
                   </Router>

diff --git a/src/core/globalCssOverrides.css b/src/core/globalCssOverrides.css
@@ -255,19 +255,6 @@ ion-fab.fab-vertical-top {
   overflow: hidden;
 }
 
-ion-toast {
-  font-weight: 600;
-  --height: 45px;
-}
-
-/* Center toast message and icon */
-ion-toast.center::part(container) {
-  display: inline-flex;
-  transform: translateX(-50%);
-  left: 50%;
-  position: relative;
-}
-
 /* Make header buttons closer together (room for mod button) */
 .sc-ion-buttons-ios-s ion-button {
   margin: 0;

diff --git a/src/features/post/new/PostEditorRoot.tsx b/src/features/post/new/PostEditorRoot.tsx
@@ -27,11 +27,12 @@ import {
   deletePendingImageUploads,
   uploadImage,
 } from "#/features/shared/markdown/editing/uploadImageSlice";
+import { buildPostLink } from "#/helpers/appLinkBuilder";
 import { isAndroid } from "#/helpers/device";
-import { getHandle, getRemoteHandle } from "#/helpers/lemmy";
+import { getRemoteHandle } from "#/helpers/lemmy";
 import { useBuildGeneralBrowseLink } from "#/helpers/routes";
 import {
-  postCreated,
+  buildPostCreated,
   postEdited,
   problemFetchingTitle,
 } from "#/helpers/toastMessages";
@@ -265,20 +266,26 @@ export default function PostEditorRoot({
 
     dispatch(receivedPosts([postResponse.post_view]));
 
-    presentToast(existingPost ? postEdited : postCreated);
+    if (existingPost) presentToast(postEdited);
+    else
+      presentToast(
+        buildPostCreated((e, dismiss) => {
+          router.push(
+            buildGeneralBrowseLink(
+              buildPostLink(
+                postResponse.post_view.community,
+                postResponse.post_view.post,
+              ),
+            ),
+          );
+
+          dismiss();
+        }),
+      );
 
     setCanDismiss(true);
 
     dismiss();
-
-    if (!existingPost)
-      router.push(
-        buildGeneralBrowseLink(
-          `/c/${getHandle(community)}/comments/${
-            postResponse.post_view.post.id
-          }`,
-        ),
-      );
   }
 
   async function receivedImage(image: File) {

diff --git a/src/features/settings/blocks/FilteredWebsites.tsx b/src/features/settings/blocks/FilteredWebsites.tsx
@@ -50,7 +50,6 @@ export default function FilteredWebsites() {
               presentToast({
                 message: "Invalid website",
                 color: "danger",
-                centerText: true,
                 icon: close,
               });
               return false;

diff --git a/src/features/settings/tags/Reset.tsx b/src/features/settings/tags/Reset.tsx
@@ -25,7 +25,6 @@ export default function ResetTags() {
               presentToast({
                 message: "User tags reset",
                 color: "success",
-                centerText: true,
               });
             })();
           },

diff --git a/src/features/shared/toast/Toast.module.css b/src/features/shared/toast/Toast.module.css
@@ -0,0 +1,71 @@
+.container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  pointer-events: none;
+
+  --top-offset: 44px;
+
+  html:global(.md) & {
+    --top-offset: 56px;
+    --bottom-offset: 56px;
+  }
+
+  &.fullscreen {
+    --top-offset: 0 !important;
+    top: 0;
+  }
+
+  top: calc(var(--top-offset) + var(--ion-safe-area-top, 0px));
+
+  &.bottom {
+    top: auto;
+    bottom: 0;
+  }
+}
+
+.toast {
+  composes: maxWidth from "#/features/shared/shared.module.css";
+
+  pointer-events: auto;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 200;
+
+  .bottom & {
+    top: initial;
+    bottom: 0;
+  }
+
+  .fullscreen & {
+    padding-top: var(--ion-safe-area-top, 0px);
+  }
+
+  .bottom.fullscreen & {
+    padding-top: 0;
+    padding-bottom: var(--ion-safe-area-bottom, 0px);
+  }
+}
+
+.toastContent {
+  border-radius: 16px;
+  margin: 8px;
+  padding: 12px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  gap: 8px;
+
+  html:global(.md) & {
+    border-radius: 4px;
+  }
+}