@lotics/ui 1.6.1 → 1.9.0

package/src/file_badge.tsx

@@ -0,0 +1,160 @@
+import { Text, View } from "react-native";
+import { fontFamilySemiBold } from "./text_utils";
+import { Icon, type IconName } from "./icon";
+import { isVideoMimeType, isAudioMimeType } from "./mime";
+
+const VIDEO_COLOR = "#ea580c";
+const AUDIO_COLOR = "#db2777";
+
+const MIME_MAP: Record<string, { label: string; color: string }> = {
+  "application/pdf": { label: "PDF", color: "#ef4444" },
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": { label: "XLSX", color: "#16a34a" },
+  "application/vnd.ms-excel": { label: "XLS", color: "#16a34a" },
+  "text/csv": { label: "CSV", color: "#16a34a" },
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": { label: "DOCX", color: "#2563eb" },
+  "application/msword": { label: "DOC", color: "#2563eb" },
+  "image/png": { label: "PNG", color: "#7c3aed" },
+  "image/jpeg": { label: "JPG", color: "#7c3aed" },
+  "video/mp4": { label: "MP4", color: VIDEO_COLOR },
+  "video/webm": { label: "WEBM", color: VIDEO_COLOR },
+  "video/quicktime": { label: "MOV", color: VIDEO_COLOR },
+  "audio/mpeg": { label: "MP3", color: AUDIO_COLOR },
+  "audio/wav": { label: "WAV", color: AUDIO_COLOR },
+  "audio/x-wav": { label: "WAV", color: AUDIO_COLOR },
+  "audio/mp4": { label: "M4A", color: AUDIO_COLOR },
+  "audio/x-m4a": { label: "M4A", color: AUDIO_COLOR },
+  "audio/ogg": { label: "OGG", color: AUDIO_COLOR },
+};
+
+const DEFAULT_BADGE = { label: "FILE", color: "#71717a" };
+
+export function resolveMime(mimeType: string): { label: string; color: string } {
+  return MIME_MAP[mimeType] ?? DEFAULT_BADGE;
+}
+
+const DEFAULT_SIZE = 26;
+
+interface FileBadgeProps {
+  mimeType: string;
+  /** Base width in pixels. Height, radii, font, and padding scale proportionally. Default: 26 */
+  size?: number;
+  /** Show a "TMPL" overlay to distinguish templates from regular files. */
+  isTemplate?: boolean;
+}
+
+/**
+ * Two-tone file badge: white top, colored bottom with label.
+ * Derives label and color from mime type.
+ */
+function getMediaIcon(mimeType: string): IconName | undefined {
+  if (isVideoMimeType(mimeType)) return "play";
+  if (isAudioMimeType(mimeType)) return "music";
+  return undefined;
+}
+
+export function FileBadge({ mimeType, size = DEFAULT_SIZE, isTemplate }: FileBadgeProps) {
+  const { label, color } = resolveMime(mimeType);
+  const scale = size / DEFAULT_SIZE;
+  const height = Math.round(32 * scale);
+  const radius = Math.round(4 * scale);
+  const bottomHeight = Math.round(14 * scale);
+  const fontSize = Math.round(7 * scale);
+  const lineHeight = Math.round(10 * scale);
+  const paddingTop = Math.round(4 * scale);
+  const paddingH = Math.round(3 * scale);
+  const lineGap = Math.round(3 * scale);
+  const lineThickness = Math.max(1, Math.round(1.5 * scale));
+  const tmplFontSize = Math.max(5, Math.round(5.5 * scale));
+  const tmplPadH = Math.round(2 * scale);
+  const tmplPadV = Math.max(1, Math.round(1 * scale));
+  const tmplRadius = Math.round(2 * scale);
+  const mediaIcon = getMediaIcon(mimeType);
+  const mediaIconSize = Math.max(10, Math.round(14 * scale));
+
+  return (
+    <View style={{
+      width: size,
+      height,
+      borderRadius: radius,
+      overflow: "hidden",
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.08,
+      shadowRadius: 3,
+      elevation: 2,
+    }}>
+      <View style={{
+        flex: 1,
+        backgroundColor: mediaIcon !== undefined ? color : "white",
+        borderWidth: 1,
+        borderBottomWidth: 0,
+        borderColor: "rgba(0,0,0,0.08)",
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+        paddingTop: mediaIcon !== undefined ? 0 : paddingTop,
+        paddingHorizontal: mediaIcon !== undefined ? 0 : paddingH,
+        gap: mediaIcon !== undefined ? 0 : lineGap,
+        alignItems: mediaIcon !== undefined ? "center" : undefined,
+        justifyContent: mediaIcon !== undefined ? "center" : undefined,
+      }}>
+        {mediaIcon !== undefined ? (
+          <Icon name={mediaIcon} size={mediaIconSize} color="white" />
+        ) : (
+          <>
+            <View style={{ height: lineThickness, borderRadius: 1, backgroundColor: "rgba(0,0,0,0.08)" }} />
+            <View style={{ height: lineThickness, borderRadius: 1, backgroundColor: "rgba(0,0,0,0.08)" }} />
+            <View style={{ height: lineThickness, borderRadius: 1, backgroundColor: "rgba(0,0,0,0.08)", width: "60%" }} />
+          </>
+        )}
+        {isTemplate && (
+          <View style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            alignItems: "center",
+            justifyContent: "center",
+          }}>
+            <View style={{
+              backgroundColor: "white",
+              borderRadius: tmplRadius,
+              paddingHorizontal: tmplPadH,
+              paddingVertical: tmplPadV,
+              shadowColor: "#000",
+              shadowOffset: { width: 0, height: 0.5 },
+              shadowOpacity: 0.1,
+              shadowRadius: 1,
+              elevation: 1,
+            }}>
+              <Text style={{
+                fontFamily: fontFamilySemiBold,
+                fontSize: tmplFontSize,
+                fontWeight: "700",
+                color: "#374151",
+                letterSpacing: 0.2,
+              }}>TMPL</Text>
+            </View>
+          </View>
+        )}
+      </View>
+      <View style={{
+        height: bottomHeight,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: color,
+        borderBottomLeftRadius: radius,
+        borderBottomRightRadius: radius,
+      }}>
+        <Text style={{
+          fontFamily: fontFamilySemiBold,
+          fontSize,
+          fontWeight: "700",
+          color: "white",
+          letterSpacing: 0.3,
+          lineHeight,
+        }}>{label}</Text>
+      </View>
+    </View>
+  );
+}

package/src/file_gallery_modal.tsx

@@ -0,0 +1,188 @@
+// FileGalleryModal — pure fullscreen image preview with prev/next nav + ESC close.
+// Pure primitive: takes DisplayFile[] only, no Lotics domain coupling. Frontend
+// has a richer modal in `frontend/components/file_gallery.tsx` that handles
+// xlsx/docx/pdf inline rendering — leave that one for Lotics-specific previews
+// and use this primitive when only images need previewing.
+
+import { useCallback, useEffect, useRef } from "react";
+import {
+  Image,
+  Modal,
+  Pressable,
+  StyleSheet,
+  View,
+} from "react-native";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { colors } from "./colors";
+import { isImageMimeType } from "./mime";
+import type { DisplayFile } from "./file_thumbnail";
+
+export interface FileGalleryModalProps {
+  files: DisplayFile[];
+  /** Index of the file currently shown. When null, the modal is closed. */
+  activeIndex: number | null;
+  onIndexChange: (next: number | null) => void;
+  /**
+   * Optional caption suffix shown under the image. Useful for hint text like
+   * "ESC để đóng · ←/→ để chuyển". When omitted, just shows filename + count.
+   */
+  captionHint?: string;
+}
+
+/**
+ * Image-focused fullscreen preview. Non-image MIME types render as a simple
+ * "{filename} · cannot preview" card — callers needing rich preview should use
+ * a Lotics-specific gallery instead.
+ */
+export function FileGalleryModal(props: FileGalleryModalProps) {
+  const { files, activeIndex, onIndexChange, captionHint } = props;
+  const visible = activeIndex !== null;
+  const overlayRef = useRef<View | null>(null);
+
+  const close = useCallback(() => onIndexChange(null), [onIndexChange]);
+  const next = useCallback(() => {
+    if (activeIndex === null) return;
+    onIndexChange(Math.min(activeIndex + 1, files.length - 1));
+  }, [activeIndex, files.length, onIndexChange]);
+  const prev = useCallback(() => {
+    if (activeIndex === null) return;
+    onIndexChange(Math.max(activeIndex - 1, 0));
+  }, [activeIndex, onIndexChange]);
+
+  // Keyboard navigation (web only — RN native handles via Modal accessibility).
+  useEffect(() => {
+    if (!visible || typeof window === "undefined") return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") close();
+      else if (e.key === "ArrowRight") next();
+      else if (e.key === "ArrowLeft") prev();
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [visible, close, next, prev]);
+
+  if (!visible || activeIndex === null) return null;
+  const file = files[activeIndex];
+  if (!file) return null;
+
+  const total = files.length;
+  const caption = captionHint
+    ? `${file.filename} · ${activeIndex + 1} / ${total} · ${captionHint}`
+    : `${file.filename} · ${activeIndex + 1} / ${total}`;
+
+  return (
+    <Modal visible transparent onRequestClose={close} animationType="fade">
+      <View style={styles.overlay} ref={overlayRef}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Close"
+          onPress={close}
+          style={StyleSheet.absoluteFill}
+        />
+
+        {isImageMimeType(file.mimeType) ? (
+          <Image
+            source={{ uri: file.url }}
+            style={styles.image}
+            resizeMode="contain"
+          />
+        ) : (
+          <View style={styles.unsupportedCard}>
+            <Text size="md" style={styles.unsupportedText}>
+              {file.filename}
+            </Text>
+            <Text size="sm" color="muted">
+              Cannot preview this file type in the gallery.
+            </Text>
+          </View>
+        )}
+
+        {activeIndex > 0 ? (
+          <Pressable
+            onPress={prev}
+            accessibilityRole="button"
+            accessibilityLabel="Previous"
+            style={[styles.navButton, styles.navLeft]}
+          >
+            <Icon name="chevron-left" size={28} color={colors.white} />
+          </Pressable>
+        ) : null}
+
+        {activeIndex < total - 1 ? (
+          <Pressable
+            onPress={next}
+            accessibilityRole="button"
+            accessibilityLabel="Next"
+            style={[styles.navButton, styles.navRight]}
+          >
+            <Icon name="chevron-right" size={28} color={colors.white} />
+          </Pressable>
+        ) : null}
+
+        <View style={styles.captionWrap} pointerEvents="none">
+          <View style={styles.captionPill}>
+            <Text size="sm" style={styles.captionText}>{caption}</Text>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.88)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  image: {
+    width: "92%",
+    height: "85%",
+  },
+  unsupportedCard: {
+    backgroundColor: colors.white,
+    borderRadius: 8,
+    padding: 24,
+    maxWidth: 480,
+    gap: 8,
+    alignItems: "center",
+  },
+  unsupportedText: {
+    fontWeight: "600",
+  },
+  navButton: {
+    position: "absolute",
+    top: "50%",
+    transform: [{ translateY: -28 }],
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  navLeft: {
+    left: 16,
+  },
+  navRight: {
+    right: 16,
+  },
+  captionWrap: {
+    position: "absolute",
+    bottom: 24,
+    left: 0,
+    right: 0,
+    alignItems: "center",
+  },
+  captionPill: {
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 6,
+  },
+  captionText: {
+    color: colors.white,
+  },
+});