From affaa614412f418ae1be35463fe60d25cc37a96b Mon Sep 17 00:00:00 2001
From: Xylight <james@xylight.dev>
Date: Sun, 2 Nov 2025 18:27:25 -0800
Subject: [PATCH] fix: '+0 more' comments

---
 src/lib/ui/info/ErrorContainer.svelte       |  72 +---------
 src/lib/ui/shared/materials/Material.svelte | 150 ++++++++++++++------
 src/lib/ui/shared/toast/Toast.svelte        |  10 ++
 src/lib/ui/shared/toast/toasts.ts           |   8 +-
 src/routes/comment/[instance]/[id]/+page.ts |   2 +-
 5 files changed, 126 insertions(+), 116 deletions(-)

diff --git a/src/lib/ui/info/ErrorContainer.svelte b/src/lib/ui/info/ErrorContainer.svelte
index e5ba8fce..88e75392 100644
--- a/src/lib/ui/info/ErrorContainer.svelte
+++ b/src/lib/ui/info/ErrorContainer.svelte
@@ -51,7 +51,7 @@
         easing: expoOut,
       }}
       out:fly={{ y: -8, duration: 400, opacity: 0, easing: expoOut }}
-      class="info-container container-error"
+      class="info-container material-error"
     >
       <Icon
         src={ExclamationTriangle}
@@ -69,71 +69,9 @@
 <style>
   @reference '../../../app.css';
 
-  :global {
-    .info-container {
-      border-radius: var(--radius-2xl);
-      padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
-      font-size: var(--text-sm);
-    }
-
-    .container-error {
-      background: linear-gradient(
-        to bottom,
-        --alpha(var(--color-red-300) / 10%),
-        --alpha(var(--color-red-500) / 15%)
-      );
-
-      color: var(--color-red-900);
-      border: 1px solid --alpha(var(--color-red-300) / 30%);
-
-      @variant dark {
-        color: var(--color-red-300);
-      }
-    }
-
-    .container-success {
-      background: linear-gradient(
-        to bottom,
-        --alpha(var(--color-green-300) / 10%),
-        --alpha(var(--color-green-500) / 15%)
-      );
-
-      color: var(--color-green-900);
-      border: 1px solid --alpha(var(--color-green-300) / 30%);
-
-      @variant dark {
-        color: var(--color-green-300);
-      }
-    }
-
-    .container-warning {
-      background: linear-gradient(
-        to bottom,
-        --alpha(var(--color-yellow-300) / 10%),
-        --alpha(var(--color-yellow-500) / 15%)
-      );
-
-      color: var(--color-yellow-900);
-      border: 1px solid --alpha(var(--color-yellow-300) / 30%);
-
-      @variant dark {
-        color: var(--color-yellow-300);
-      }
-    }
-
-    .container-info {
-      background: linear-gradient(
-        to bottom,
-        --alpha(var(--color-slate-300) / 10%),
-        --alpha(var(--color-slate-500) / 15%)
-      );
-
-      color: var(--color-slate-900);
-      border: 1px solid --alpha(var(--color-slate-300) / 30%);
-
-      @variant dark {
-        color: var(--color-slate-300);
-      }
-    }
+  .info-container {
+    border-radius: var(--radius-2xl);
+    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
+    font-size: var(--text-sm);
   }
 </style>
diff --git a/src/lib/ui/shared/materials/Material.svelte b/src/lib/ui/shared/materials/Material.svelte
index 2cce6ca5..23b3cbd2 100644
--- a/src/lib/ui/shared/materials/Material.svelte
+++ b/src/lib/ui/shared/materials/Material.svelte
@@ -84,70 +84,132 @@
 <style>
   @reference '../../../../app.css';
 
-  .material-default {
-    background-color: white;
-    border-width: 1px;
-    border-color: var(--color-slate-200);
+  :global {
+    .material-default {
+      background-color: white;
+      border-width: 1px;
+      border-color: var(--color-slate-200);
+
+      @variant not-dark {
+        border-bottom-color: var(--color-slate-300);
+      }
 
-    @variant not-dark {
-      border-bottom-color: var(--color-slate-300);
-    }
+      @variant dark {
+        background-color: var(--color-zinc-900);
+        border-color: var(--color-zinc-800);
+        border-top-color: var(--color-zinc-700);
 
-    @variant dark {
-      background-color: var(--color-zinc-900);
-      border-color: var(--color-zinc-800);
-      border-top-color: var(--color-zinc-700);
+        @variant hover {
+          @variant dark {
+            background-color: var(--color-zinc-925);
+          }
+        }
+      }
 
       @variant hover {
-        @variant dark {
-          background-color: var(--color-zinc-925);
-        }
+        background-color: var(--color-slate-100);
       }
     }
 
-    @variant hover {
-      background-color: var(--color-slate-100);
+    .material-distinct {
+      background-color: white;
+      border-width: 1px;
+      border-color: var(--color-slate-200);
+
+      @variant not-dark {
+        border-bottom-color: var(--color-slate-300);
+      }
+
+      @variant dark {
+        background-color: var(--color-zinc-925);
+        border-color: var(--color-zinc-800);
+        border-top-color: var(--color-zinc-700);
+      }
     }
-  }
 
-  .material-distinct {
-    background-color: white;
-    border-width: 1px;
-    border-color: var(--color-slate-200);
+    .material-transparent {
+      border-width: 1px;
+      border-color: var(--color-slate-200);
+
+      @variant not-dark {
+        border-bottom-color: var(--color-slate-300);
+      }
 
-    @variant not-dark {
-      border-bottom-color: var(--color-slate-300);
+      @variant dark {
+        border-color: var(--color-zinc-900);
+        border-top-color: var(--color-zinc-800);
+      }
     }
 
-    @variant dark {
-      background-color: var(--color-zinc-925);
-      border-color: var(--color-zinc-800);
-      border-top-color: var(--color-zinc-700);
+    .material-uniform {
+      background-color: white;
+      border-width: 1px;
+      border-color: var(--color-slate-200);
+
+      @variant dark {
+        background-color: var(--color-zinc-950);
+        border-color: var(--color-zinc-900);
+      }
     }
-  }
 
-  .material-transparent {
-    border-width: 1px;
-    border-color: var(--color-slate-200);
+    .material-error {
+      background: linear-gradient(
+        to bottom,
+        --alpha(var(--color-red-300) / 10%),
+        --alpha(var(--color-red-500) / 15%)
+      );
+
+      color: var(--color-red-900);
+      border: 1px solid --alpha(var(--color-red-300) / 30%);
 
-    @variant not-dark {
-      border-bottom-color: var(--color-slate-300);
+      @variant dark {
+        color: var(--color-red-300);
+      }
     }
 
-    @variant dark {
-      border-color: var(--color-zinc-900);
-      border-top-color: var(--color-zinc-800);
+    .material-success {
+      background: linear-gradient(
+        to bottom,
+        --alpha(var(--color-green-300) / 10%),
+        --alpha(var(--color-green-500) / 15%)
+      );
+
+      color: var(--color-green-900);
+      border: 1px solid --alpha(var(--color-green-300) / 30%);
+
+      @variant dark {
+        color: var(--color-green-300);
+      }
     }
-  }
 
-  .material-uniform {
-    background-color: white;
-    border-width: 1px;
-    border-color: var(--color-slate-200);
+    .material-warning {
+      background: linear-gradient(
+        to bottom,
+        --alpha(var(--color-yellow-300) / 10%),
+        --alpha(var(--color-yellow-500) / 15%)
+      );
 
-    @variant dark {
-      background-color: var(--color-zinc-950);
-      border-color: var(--color-zinc-900);
+      color: var(--color-yellow-900);
+      border: 1px solid --alpha(var(--color-yellow-300) / 30%);
+
+      @variant dark {
+        color: var(--color-yellow-300);
+      }
+    }
+
+    .material-info {
+      background: linear-gradient(
+        to bottom,
+        --alpha(var(--color-slate-300) / 10%),
+        --alpha(var(--color-slate-500) / 15%)
+      );
+
+      color: var(--color-slate-900);
+      border: 1px solid --alpha(var(--color-slate-300) / 30%);
+
+      @variant dark {
+        color: var(--color-slate-300);
+      }
     }
   }
 </style>
diff --git a/src/lib/ui/shared/toast/Toast.svelte b/src/lib/ui/shared/toast/Toast.svelte
index cdff9ffa..0f23cae8 100644
--- a/src/lib/ui/shared/toast/Toast.svelte
+++ b/src/lib/ui/shared/toast/Toast.svelte
@@ -10,6 +10,8 @@
     InformationCircle,
     XMark,
   } from 'svelte-hero-icons/dist'
+  import { expoOut } from 'svelte/easing'
+  import { fly, scale } from 'svelte/transition'
   import { type Toast, toastColors, toasts } from './toasts'
 
   interface Props {
@@ -26,6 +28,14 @@
     'bg-white dark:bg-zinc-925 shadow-lg',
     toast.long ? 'w-full max-w-lg' : 'w-80',
   ]}
+  in:fly={{
+    y: 8,
+    easing: expoOut,
+  }}
+  out:scale={{
+    start: 0.97,
+    easing: expoOut,
+  }}
 >
   {#if toast.loading}
     <div class="relative m-2 ml-4 shrink-0">
diff --git a/src/lib/ui/shared/toast/toasts.ts b/src/lib/ui/shared/toast/toasts.ts
index 22937df2..8c138427 100644
--- a/src/lib/ui/shared/toast/toasts.ts
+++ b/src/lib/ui/shared/toast/toasts.ts
@@ -3,10 +3,10 @@ import { writable } from 'svelte/store'
 type ToastType = keyof typeof toastColors
 
 export const toastColors = {
-  error: 'container-error',
-  warning: 'container-warning',
-  success: 'container-success',
-  info: 'container-info',
+  error: 'material-error',
+  warning: 'material-warning',
+  success: 'material-success',
+  info: 'material-info',
 }
 
 export interface Toast {
diff --git a/src/routes/comment/[instance]/[id]/+page.ts b/src/routes/comment/[instance]/[id]/+page.ts
index bab4959b..f86112b9 100644
--- a/src/routes/comment/[instance]/[id]/+page.ts
+++ b/src/routes/comment/[instance]/[id]/+page.ts
@@ -16,7 +16,7 @@ export async function load({ params, fetch }) {
 
   const split = comment.comment_view.comment.path.split('.')
 
-  const threadPath = split.slice(-2).join('.')
+  const threadPath = split.slice(-3).join('.')
 
   redirect(
     302,
-- 
2.51.2