feat: mobile polish — tap feedback, accessibility, PWA manifest (#184)

* feat: mobile polish — tap feedback, accessibility, PWA manifest

- Add -webkit-tap-highlight-color: transparent to suppress blue tap flash
- Add touch-action: manipulation on interactive elements (no 300ms delay)
- Add overscroll-behavior: none to prevent pull-to-refresh interference
- Add prefers-reduced-motion support to disable animations
- Add theme-color meta and apple-mobile-web-app-capable for native feel
- Add web app manifest (manifest.ts) for Add to Home Screen support
- Fix useIsMobile SSR hydration flash using useSyncExternalStore
- Use <article> for feed cards with content-visibility: auto for render perf
- Add active press states on mobile nav items and feed tabs
- Enforce min-h-[44px] on feed filter tabs for touch target compliance
- Add smooth scroll-behavior with reduced-motion fallback

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: use static manifest.webmanifest instead of manifest.ts

Next.js 16 fails to prerender the manifest.ts route handler during
static generation. Use a static file in public/ instead.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: restore cloudinaryPublicIds to ActivityFeedItem interface

The field was removed but is still used by other components that
reference this type.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: prazgaitis

apps/web/app/challenges/[id]/(dashboard)/algofeed/algorithmic-feed.tsx

@@ -52,7 +52,6 @@ interface AlgoFeedItem {
   comments: number;
   likedByUser: boolean;
   mediaUrls: string[];
-  cloudinaryPublicIds?: string[];
   displayScore: number;
 }
 
@@ -145,7 +144,6 @@ function AlgoFeedCard({
     comments: number;
     likedByUser: boolean;
     mediaUrls: string[];
-    cloudinaryPublicIds?: string[];
     displayScore: number;
   };
 }) {
@@ -223,7 +221,7 @@ function AlgoFeedCard({
         </div>
 
         {/* Media Gallery */}
-        <MediaGallery urls={item.mediaUrls} optimizedMediaIds={item.cloudinaryPublicIds} variant="feed" />
+        <MediaGallery urls={item.mediaUrls} variant="feed" />
 
         {/* Stats */}
         <div className="rounded-lg bg-muted px-4 py-3 text-sm">

apps/web/app/challenges/[id]/(dashboard)/dashboard/page.tsx

@@ -145,7 +145,6 @@ async function DashboardContent({ challengeSlug }: { challengeSlug: string }) {
       />
       <ActivityFeed
         challengeId={challenge._id}
-        challengeName={challenge.name}
         currentUserId={user._id}
         initialItems={initialFeed.page}
         initialAlgoItems={initialAlgoFeed.page}

apps/web/app/globals.css

@@ -127,6 +127,34 @@
   body {
     @apply bg-background text-foreground;
     font-family: var(--font-sans), Arial, Helvetica, sans-serif;
+    -webkit-tap-highlight-color: transparent;
+    overscroll-behavior: none;
+  }
+
+  /* Eliminate 300ms tap delay on all interactive elements */
+  a, button, [role="button"], input, select, textarea, label, summary {
+    touch-action: manipulation;
+  }
+
+  /* Respect user's motion preferences */
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
+  /* Smooth scrolling for in-app navigation */
+  html {
+    scroll-behavior: smooth;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
   }
 }
 

apps/web/app/layout.tsx

@@ -22,13 +22,19 @@ const geistMono = Geist_Mono({
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
-  maximumScale: 1,
   viewportFit: "cover",
+  themeColor: "#000000",
 };
 
 export const metadata: Metadata = {
   title: "March Fitness - Challenge Yourself",
   description: "Join fitness challenges, track your progress, and compete with friends",
+  manifest: "/manifest.webmanifest",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "black-translucent",
+    title: "March Fitness",
+  },
 };
 
 export default async function RootLayout({

apps/web/components/dashboard/activity-feed.tsx

@@ -51,9 +51,6 @@ import {
   useActivityNotification,
   useChallengeSummary,
 } from "./challenge-realtime-context";
-import { ActivityShareDialog } from "@/components/activity-share-dialog";
-import type { ShareCardData } from "@/lib/share-card-renderer";
-import { getOptimizedMediaUrl } from "@/lib/media-optimizer";
 import { UserChallengeDisplay } from "@/components/user-challenge-display";
 import { Button } from "@/components/ui/button";
 import {
@@ -184,14 +181,12 @@ function mapAlgoItem(item: AlgoFeedItem): ActivityFeedItem {
     comments: item.comments,
     likedByUser: item.likedByUser,
     mediaUrls: item.mediaUrls,
-    cloudinaryPublicIds: item.cloudinaryPublicIds,
     recentLikers: item.recentLikers ?? [],
   };
 }
 
 interface ActivityFeedProps {
   challengeId: string;
-  challengeName?: string;
   currentUserId?: string;
   initialItems?: ActivityFeedItem[];
   initialAlgoItems?: AlgoFeedItem[];
@@ -208,7 +203,6 @@ interface FeedPageResponse {
 
 export function ActivityFeed({
   challengeId,
-  challengeName,
   currentUserId,
   initialItems = [],
   initialAlgoItems = [],
@@ -544,7 +538,7 @@ export function ActivityFeed({
           <button
             onClick={() => setFeedFilter("for_you")}
             className={cn(
-              "relative flex-1 py-4 text-center text-sm font-medium transition-colors hover:bg-zinc-900/50",
+              "relative min-h-[44px] flex-1 py-4 text-center text-sm font-medium transition-colors hover:bg-zinc-900/50 active:bg-zinc-800/50",
               feedFilter === "for_you" ? "text-white" : "text-zinc-500",
             )}
           >
@@ -556,7 +550,7 @@ export function ActivityFeed({
           <button
             onClick={() => setFeedFilter("all")}
             className={cn(
-              "relative flex-1 py-4 text-center text-sm font-medium transition-colors hover:bg-zinc-900/50",
+              "relative min-h-[44px] flex-1 py-4 text-center text-sm font-medium transition-colors hover:bg-zinc-900/50 active:bg-zinc-800/50",
               feedFilter === "all" ? "text-white" : "text-zinc-500",
             )}
           >
@@ -568,7 +562,7 @@ export function ActivityFeed({
           <button
             onClick={() => setFeedFilter("following")}
             className={cn(
-              "relative flex-1 py-4 text-center text-sm font-medium transition-colors hover:bg-zinc-900/50",
+              "relative min-h-[44px] flex-1 py-4 text-center text-sm font-medium transition-colors hover:bg-zinc-900/50 active:bg-zinc-800/50",
               feedFilter === "following" ? "text-white" : "text-zinc-500",
             )}
           >
@@ -637,7 +631,6 @@ export function ActivityFeed({
           <ActivityCard
             key={item.activity._id}
             challengeId={challengeId}
-            challengeName={challengeName}
             showEngagementCounts={!lightweightFeedMode}
             item={{
               ...item,
@@ -646,7 +639,6 @@ export function ActivityFeed({
                 id: item.activity._id,
               },
               mediaUrls: item.mediaUrls ?? [],
-              cloudinaryPublicIds: item.cloudinaryPublicIds,
             }}
             mentionOptions={mentionUsers}
             currentUserId={currentUserId}
@@ -777,7 +769,6 @@ function ActivityStats({ item }: { item: ActivityFeedItem }) {
 
 interface ActivityCardProps {
   challengeId: string;
-  challengeName?: string;
   item: ActivityFeedItem;
   showEngagementCounts: boolean;
   mentionOptions: MentionableUser[];
@@ -787,7 +778,6 @@ interface ActivityCardProps {
 
 export const ActivityCard = memo(function ActivityCard({
   challengeId,
-  challengeName,
   item,
   showEngagementCounts,
   mentionOptions,
@@ -797,46 +787,27 @@ export const ActivityCard = memo(function ActivityCard({
   const activityId = item.activity.id ?? item.activity._id;
   const router = useRouter();
   const [isLiking, setIsLiking] = useState(false);
-  const [optimisticLike, setOptimisticLike] = useState<boolean | null>(null);
-  const [optimisticLikeDelta, setOptimisticLikeDelta] = useState(0);
   const [showComments, setShowComments] = useState(false);
   const [showFlagDialog, setShowFlagDialog] = useState(false);
   const [flagCategory, setFlagCategory] = useState("");
   const [flagReason, setFlagReason] = useState("");
   const [flagSubmitting, setFlagSubmitting] = useState(false);
   const [flagError, setFlagError] = useState<string | null>(null);
   const [flagSuccess, setFlagSuccess] = useState(false);
-  const [showShareDialog, setShowShareDialog] = useState(false);
-
-  const { summary } = useChallengeSummary();
-
-  const displayLiked = optimisticLike ?? item.likedByUser;
-  const displayLikes = item.likes + optimisticLikeDelta;
 
   const toggleLike = useMutation(api.mutations.likes.toggle);
   const flagActivity = useMutation(api.mutations.activities.flagActivity);
 
   const handleToggleLike = useCallback(async () => {
-    if (isLiking) return;
     setIsLiking(true);
-    const wasLiked = displayLiked;
-    // Optimistic update
-    setOptimisticLike(!wasLiked);
-    setOptimisticLikeDelta((prev) => prev + (wasLiked ? -1 : 1));
     try {
       await toggleLike({ activityId: activityId as Id<"activities"> });
-      // Clear optimistic state — Convex reactive sync will provide the real values
-      setOptimisticLike(null);
-      setOptimisticLikeDelta(0);
     } catch (error) {
       console.error("Failed to toggle like", error);
-      // Revert optimistic update
-      setOptimisticLike(wasLiked);
-      setOptimisticLikeDelta((prev) => prev + (wasLiked ? 1 : -1));
     } finally {
       setIsLiking(false);
     }
-  }, [activityId, toggleLike, isLiking, displayLiked]);
+  }, [activityId, toggleLike]);
 
   const activityUrl = `/challenges/${challengeId}/activities/${activityId}`;
 
@@ -892,38 +863,22 @@ export const ActivityCard = memo(function ActivityCard({
     }
   };
 
-  const shareCardData: ShareCardData = useMemo(() => {
-    // Pick the first non-video image for the share card background
-    let mediaUrl: string | null = null;
-    if (item.cloudinaryPublicIds?.length) {
-      const imageId = item.cloudinaryPublicIds.find((id) => !id.startsWith("v/"));
-      if (imageId) {
-        mediaUrl = getOptimizedMediaUrl(imageId, "full");
+  const handleShare = async () => {
+    const url = `${window.location.origin}${activityUrl}`;
+
+    try {
+      if (navigator.share) {
+        await navigator.share({
+          title: "Check out this activity",
+          url,
+        });
+      } else if (navigator.clipboard) {
+        await navigator.clipboard.writeText(url);
       }
+    } catch (error) {
+      console.error("Share failed", error);
     }
-    if (!mediaUrl && item.mediaUrls.length > 0) {
-      mediaUrl = item.mediaUrls[0];
-    }
-
-    return {
-      activityTypeName: item.activityType?.name ?? "Activity",
-      pointsEarned: item.activity.pointsEarned,
-      loggedDate: new Date(item.activity.loggedDate).toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-        year: "numeric",
-      }),
-      metrics: item.activity.metrics,
-      userName: item.user.name ?? item.user.username,
-      challengeName: challengeName ?? "Challenge",
-      mediaUrl,
-      triggeredBonuses: item.activity.triggeredBonuses,
-      rank: summary.stats.userRank,
-      totalParticipants: summary.stats.totalParticipants,
-      totalPoints: summary.stats.userPoints,
-      currentStreak: summary.stats.userStreak,
-    };
-  }, [item, challengeName, summary.stats]);
+  };
 
   const actionBar = (
     <div
@@ -935,19 +890,19 @@ export const ActivityCard = memo(function ActivityCard({
         onClick={handleToggleLike}
         className={cn(
           "flex items-center gap-1.5 text-sm transition-colors",
-          displayLiked
+          item.likedByUser
             ? "text-red-500"
             : "hover:text-red-500",
         )}
       >
         <Heart
           className={cn(
             "h-[18px] w-[18px]",
-            displayLiked && "fill-current",
+            item.likedByUser && "fill-current",
           )}
         />
-        {showEngagementCounts && displayLikes > 0 && (
-          <span>{displayLikes}</span>
+        {showEngagementCounts && item.likes > 0 && (
+          <span>{item.likes}</span>
         )}
       </button>
       <button
@@ -963,7 +918,7 @@ export const ActivityCard = memo(function ActivityCard({
         )}
       </button>
       <button
-        onClick={() => setShowShareDialog(true)}
+        onClick={handleShare}
         className="flex items-center gap-1.5 text-sm transition-colors hover:text-foreground"
       >
         <Share2 className="h-[18px] w-[18px]" />
@@ -1141,38 +1096,37 @@ export const ActivityCard = memo(function ActivityCard({
           className="text-sm text-muted-foreground"
         />
       ) : null}
-      <MediaGallery urls={item.mediaUrls} optimizedMediaIds={item.cloudinaryPublicIds} variant="feed" />
+      <MediaGallery urls={item.mediaUrls} variant="feed" />
       <ActivityStats item={item} />
     </>
   );
 
-  const likesDisplay = showEngagementCounts && displayLikes > 0 ? (
+  const likesDisplay = showEngagementCounts && item.likes > 0 ? (
     <div onClick={(e) => e.stopPropagation()}>
       <LikesDisplay
         activityId={activityId}
         challengeId={challengeId}
-        likes={displayLikes}
-        likedByUser={displayLiked}
+        likes={item.likes}
+        likedByUser={item.likedByUser}
         recentLikers={item.recentLikers ?? []}
         currentUserId={currentUserId}
       />
     </div>
   ) : null;
 
   return (
-    <div className="cursor-pointer" onClick={handleCardClick}>
+    <article
+      className="cursor-pointer transition-colors active:bg-zinc-900/50"
+      style={{ contentVisibility: "auto", containIntrinsicSize: "auto 200px" }}
+      onClick={handleCardClick}
+    >
       <div className="px-4 pt-3 pb-1" onClick={(e) => e.stopPropagation()}>{headerContent}</div>
       <div className="space-y-2 px-4">{bodyContent}</div>
       {likesDisplay && <div className="px-4 pt-2">{likesDisplay}</div>}
       <div className="px-4 py-2">{actionBar}</div>
       <div className="px-4 pb-3">{commentsSection}</div>
       <div className="border-b border-zinc-800" />
-      <ActivityShareDialog
-        open={showShareDialog}
-        onOpenChange={setShowShareDialog}
-        data={shareCardData}
-      />
-    </div>
+    </article>
   );
 });
 

apps/web/components/dashboard/challenge-sidebar.tsx

@@ -9,7 +9,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { ActiveMiniGames } from '@/components/mini-games';
 import { OnboardingCard } from './onboarding-card';
 import { dateOnlyToUtcMs } from '@/lib/date-only';
-import { formatPoints, formatPointsCompact } from '@/lib/points';
+import { formatPoints } from '@/lib/points';
 import { cn } from '@/lib/utils';
 
 interface ChallengeSidebarProps {
@@ -36,7 +36,7 @@ export function ChallengeSidebar({ challengeId, currentUserId, challengeStartDat
             Status
           </div>
           <CardTitle className="text-2xl font-bold text-white">
-            {formatPointsCompact(stats.totalPoints)} total points
+            {formatPoints(stats.totalPoints)} total points
           </CardTitle>
         </CardHeader>
         <CardContent className="grid grid-cols-2 gap-3 text-sm">