llink/js/mobile/src/features/stream-view/FallbackParticleView.tsx

import { useEffect } from 'react';
import { Text, View } from 'react-native';
import { HelpCircle } from 'lucide-react-native';
import type { Particle } from '@/api/types';
import { useNetwork } from '@/hooks/use-networks';
import { resolveHumanDisplay } from '@/lib/humans';

const PLACEHOLDER_DURATION_MS = 5000;

interface FallbackParticleViewProps {
  particle: Particle;
  networkId: string;
  paused: boolean;
  onEnded: () => void;
}

// Catch-all for particle types this client version doesn't render with a
// dedicated view (e.g. a folder slipping into a stream, or a future type a
// newer client wrote). Known content types — media, text, task, paper, file —
// each have their own view in StreamView's switch.
export function FallbackParticleView({
  particle,
  networkId,
  paused,
  onEnded,
}: FallbackParticleViewProps) {
  const network = useNetwork(networkId);
  const creator = resolveHumanDisplay(
    particle.created_by_human_id,
    network?.humans,
  );
  const Icon = HelpCircle;
  const title = particle.type === 'folder' ? particle.properties.name : null;

  useEffect(() => {
    if (paused) return;
    const timeout = setTimeout(onEnded, PLACEHOLDER_DURATION_MS);
    return () => clearTimeout(timeout);
  }, [paused, onEnded, particle.id]);

  return (
    <View className="flex-1 items-center justify-center px-8">
      <View className="bg-white/10 w-full max-w-sm rounded-2xl px-5 py-5">
        <View className="flex-row items-center gap-3">
          <Icon color="rgba(255,255,255,0.7)" size={22} strokeWidth={1.5} />
          <View className="flex-1">
            <Text className="text-white text-base font-semibold">
              {particle.type}
            </Text>
            {title ? (
              <Text className="text-white/70 text-sm" numberOfLines={2}>
                {title}
              </Text>
            ) : null}
          </View>
        </View>
        <Text className="text-white/50 mt-4 text-xs">
          From {creator.displayName}
        </Text>
        <Text className="text-white/50 mt-1 text-xs">View on desktop</Text>
      </View>
    </View>
  );
}