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

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

const TYPE_META: Record<string, { icon: LucideIcon; label: string }> = {
  quest: { icon: ScrollText, label: 'Quest' },
  paper: { icon: BookOpen, label: 'Paper' },
  file: { icon: FileIcon, label: 'File' },
};

const PLACEHOLDER_DURATION_MS = 5000;

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

export function FallbackParticleView({
  particle,
  networkId,
  paused,
  onEnded,
}: FallbackParticleViewProps) {
  const network = useNetwork(networkId);
  const creator = resolveHumanDisplay(
    particle.created_by_human_id,
    network?.humans,
  );
  const meta = TYPE_META[particle.type] ?? {
    icon: HelpCircle,
    label: particle.type,
  };
  const Icon = meta.icon;
  const title = (() => {
    switch (particle.type) {
      case 'quest':
        return particle.properties.title;
      case 'paper':
        return particle.properties.title;
      case 'file':
        return particle.properties.filename;
      case 'folder':
        return particle.properties.name;
      default:
        return 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">
              {meta.label}
            </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>
  );
}