feat: release v1.0.8 with theme motion enhancements, API improvements, and documentation updates

Author: imthatdev

CHANGELOG.md

@@ -11,6 +11,32 @@ This project follows [Semantic Versioning](https://iconical.dev/versioning).
 
 ---
 
+## v1.0.8 – Theme Motion, Docs, and About Polish 🎬
+
+**Released: February 22, 2026**
+
+### 🎨 Theme & Appearance
+
+- Added smooth circular theme/scheme reveal transitions (View Transitions API) with reduced-motion fallback.
+- Tuned reveal speed/easing for a slower, smoother expansion and reduced text flashing during transitions.
+
+### 🔌 API & Shortcuts
+
+- Improved `/api/v1/remote-upload` payload compatibility by accepting single URL shapes (`url` and string `urls`) in addition to array payloads.
+
+### 📚 Docs
+
+- Rewrote the Apple Shortcuts guide into a concise 0→hero flow.
+- Added clear BETA + coming-soon messaging for notes, bookmarks, snippets, recipes, and game list mentions.
+
+### 🧭 About Page
+
+- Added Product Hunt badge embed with light/dark theme variants.
+- Fixed `FeatureChip` text contrast in light mode.
+- Added a coming-soon note for **Profiles & meetings** in CE About.
+
+---
+
 ## v1.0.7 – API Key Allowlist for Remote Uploads 🔐
 
 **Released: February 22, 2026**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swush",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "private": true,
   "description": "Swush; A secure, self-hosted file sharing app with privacy-first features.",
   "author": {

src/app/(dash)/about/page.tsx

@@ -84,9 +84,6 @@ export default function AboutPage() {
                 <Badge className="gap-1">
                   <IconUpload size={16} /> Upload Requests
                 </Badge>
-                <Badge className="gap-1">
-                  <IconCalendarEvent size={16} /> Meetings
-                </Badge>
                 <Badge className="gap-1">
                   <IconSearch size={16} /> Fast Search
                 </Badge>
@@ -99,6 +96,25 @@ export default function AboutPage() {
                 Create, search, share (public or password‑protected), and ship
                 beautiful public pages with QR + UTM baked in.
               </p>
+              <a
+                href="https://www.producthunt.com/products/swush/launches/swush?embed=true&utm_source=badge-featured&utm_medium=badge&utm_campaign=badge-swush"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-2 inline-block"
+              >
+                <picture>
+                  <source
+                    media="(prefers-color-scheme: dark)"
+                    srcSet="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1075424&theme=dark&t=1771759369691"
+                  />
+                  <img
+                    alt="Swush - The self-hosted power tool that just gets things done | Product Hunt"
+                    width={250}
+                    height={54}
+                    src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1075424&theme=light&t=1771759357743"
+                  />
+                </picture>
+              </a>
             </div>
 
             <TabsList className="mx-auto w-full max-w-3xl grid grid-cols-3 gap-2 mb-4">
@@ -215,6 +231,9 @@ function AboutSection() {
             <CardTitle className="flex items-center gap-2 text-lg">
               <IconCalendarEvent size={18} /> Profiles & meetings
             </CardTitle>
+            <Badge variant="default">
+              Note: Profiles & meetings are still coming soon... stay tuned.
+            </Badge>
             <CardDescription>
               Public profiles, socials, and booking links.
             </CardDescription>
@@ -372,10 +391,8 @@ function HowToSection() {
             </ol>
           </CardContent>
         </Card>
-      </section>
 
-      <section className="grid gap-4 md:grid-cols-2">
-        <Card className="border-primary/20">
+        <Card className="border-primary/20 col-span-2">
           <CardHeader>
             <CardTitle className="flex items-center gap-2 text-lg">
               <IconUpload size={18} /> Upload links & requests
@@ -622,7 +639,7 @@ function FeatureChip({
     <div
       className={cn(
         "inline-flex items-center gap-2 rounded-md border px-2.5 py-1.5",
-        "border-primary/20 bg-primary/5 text-purple-100 dark:text-purple-200",
+        "border-primary/20 bg-primary/5 text-primary",
       )}
     >
       <span className="opacity-90">{icon}</span>

src/app/api/v1/remote-upload/route.ts

@@ -48,11 +48,32 @@ export const POST = withApiError(async function POST(req: NextRequest) {
     const body = await req.json();
     let items: { url: string; name?: string }[] = [];
     if (Array.isArray(body.urls)) {
-      items = body.urls.map((url: string) => ({ url }));
+      items = body.urls
+        .filter((url: unknown) => typeof url === "string" && url.trim())
+        .map((url: string) => ({ url: url.trim() }));
+    } else if (typeof body.urls === "string" && body.urls.trim()) {
+      items = [{ url: body.urls.trim() }];
+    } else if (typeof body.url === "string" && body.url.trim()) {
+      items = [
+        {
+          url: body.url.trim(),
+          name: typeof body.name === "string" ? body.name : undefined,
+        },
+      ];
     } else if (Array.isArray(body.items)) {
       items = body.items.filter(
         (item: RemoteUploadJob) => typeof item.url === "string",
       );
+    } else if (body.items && typeof body.items === "object") {
+      const single = body.items as { url?: unknown; name?: unknown };
+      if (typeof single.url === "string" && single.url.trim()) {
+        items = [
+          {
+            url: single.url.trim(),
+            name: typeof single.name === "string" ? single.name : undefined,
+          },
+        ];
+      }
     }
     if (!items.length)
       return NextResponse.json(

src/components/Common/ThemeButton.tsx

@@ -34,6 +34,7 @@ import {
 } from "@/components/ui/select";
 import { Label } from "../ui/label";
 import { useColorScheme } from "@/hooks/use-scheme";
+import { setThemeWithCurtain } from "@/lib/theme-transition";
 
 export default function ThemeButton() {
   const { theme, setTheme } = useTheme();
@@ -65,7 +66,7 @@ export default function ThemeButton() {
                 onValueChange={(v: string) => {
                   const next = v as (typeof SCHEMES)[number];
                   setPendingScheme(next);
-                  setScheme(next);
+                  setThemeWithCurtain(setScheme, next);
                 }}
               >
                 <SelectTrigger className="w-full">
@@ -106,7 +107,7 @@ export default function ThemeButton() {
                 value={pendingMode}
                 onValueChange={(v) => {
                   setPendingMode(v);
-                  setTheme(v);
+                  setThemeWithCurtain(setTheme, v);
                 }}
               >
                 <SelectTrigger className="w-full">

src/components/Dashboard/Sidebar.tsx

@@ -45,6 +45,7 @@ import { useTheme } from "next-themes";
 import { useUser } from "@/hooks/use-user";
 import { useUserPreferences } from "@/hooks/use-user-preferences";
 import { useColorScheme } from "@/hooks/use-scheme";
+import { setThemeWithCurtain } from "@/lib/theme-transition";
 import {
   Dialog,
   DialogContent,
@@ -412,7 +413,7 @@ export function SidebarWrapper({ children }: { children: React.ReactNode }) {
                   onValueChange={(v: string) => {
                     const next = v as (typeof SCHEMES)[number];
                     setPendingScheme(next);
-                    setScheme(next);
+                    setThemeWithCurtain(setScheme, next);
                   }}
                 >
                   <SelectTrigger className="w-full">
@@ -436,7 +437,7 @@ export function SidebarWrapper({ children }: { children: React.ReactNode }) {
                   value={pendingMode}
                   onValueChange={(v) => {
                     setPendingMode(v);
-                    setTheme(v);
+                    setThemeWithCurtain(setTheme, v);
                   }}
                 >
                   <SelectTrigger className="w-full">

src/lib/theme-transition.ts

@@ -0,0 +1,57 @@
+export function setThemeWithCurtain(
+  setTheme: (theme: string) => void,
+  nextTheme: string,
+): void;
+export function setThemeWithCurtain<T extends string>(
+  setTheme: (theme: T | ((prev: T) => T)) => void,
+  nextTheme: T,
+): void;
+export function setThemeWithCurtain(
+  setTheme: (theme: unknown) => void,
+  nextTheme: string,
+) {
+  if (typeof document === "undefined" || typeof window === "undefined") {
+    setTheme(nextTheme);
+    return;
+  }
+
+  const prefersReducedMotion = window.matchMedia(
+    "(prefers-reduced-motion: reduce)",
+  ).matches;
+
+  const doc = document as Document & {
+    startViewTransition?: (callback: () => void) => { finished: Promise<void> };
+  };
+
+  if (prefersReducedMotion || typeof doc.startViewTransition !== "function") {
+    setTheme(nextTheme);
+    return;
+  }
+
+  const active = document.activeElement as HTMLElement | null;
+  const rect = active?.getBoundingClientRect?.();
+
+  const originX = rect ? rect.left + rect.width / 2 : window.innerWidth - 48;
+  const originY = rect ? rect.top + rect.height / 2 : 48;
+
+  const maxX = Math.max(originX, window.innerWidth - originX);
+  const maxY = Math.max(originY, window.innerHeight - originY);
+  const radius = Math.hypot(maxX, maxY);
+
+  const root = document.documentElement;
+  root.style.setProperty("--theme-transition-x", `${originX}px`);
+  root.style.setProperty("--theme-transition-y", `${originY}px`);
+  root.style.setProperty("--theme-transition-radius", `${radius}px`);
+  root.classList.add("theme-curtain-transition");
+
+  const transition = doc.startViewTransition(() => {
+    setTheme(nextTheme);
+  });
+
+  void transition.finished.finally(() => {
+    root.classList.remove("theme-curtain-transition");
+    root.style.removeProperty("--theme-transition-x");
+    root.style.removeProperty("--theme-transition-y");
+    root.style.removeProperty("--theme-transition-radius");
+  });
+}

src/styles/_base.css

@@ -22,7 +22,7 @@
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply border-border outline-ring/50 transition-colors duration-200;
   }
   body {
     @apply bg-background text-foreground;
@@ -33,6 +33,55 @@ html,
 body,
 #__next,
 .app-root {
-  transition: background-color 0.25s ease, color 0.25s ease,
+  transition:
+    background-color 0.25s ease,
+    color 0.25s ease,
     border-color 0.25s ease;
 }
+
+html.theme-curtain-transition,
+html.theme-curtain-transition * {
+  transition: none !important;
+}
+
+html.theme-curtain-transition::view-transition-group(root),
+html.theme-curtain-transition::view-transition-image-pair(root) {
+  animation: none;
+}
+
+html.theme-curtain-transition::view-transition-old(root) {
+  animation: none;
+}
+
+html.theme-curtain-transition::view-transition-new(root) {
+  clip-path: circle(
+    0 at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%)
+  );
+  will-change: clip-path;
+  animation: theme-radial-reveal 1080ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+
+@keyframes theme-radial-reveal {
+  to {
+    clip-path: circle(
+      var(--theme-transition-radius, 150vmax) at var(--theme-transition-x, 50%)
+        var(--theme-transition-y, 50%)
+    );
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html,
+  body,
+  #__next,
+  .app-root,
+  * {
+    transition: none !important;
+  }
+
+  html.theme-curtain-transition::view-transition-old(root),
+  html.theme-curtain-transition::view-transition-new(root) {
+    animation: none !important;
+    clip-path: none !important;
+  }
+}