@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/ActivityFeed.tsx

@@ -0,0 +1,440 @@
+import { cn } from "../support/utils";
+import {
+    Activity,
+    ChevronDown,
+    ChevronRight,
+    FileText,
+    History,
+    MessageSquare,
+    Paperclip,
+    Zap,
+} from "lucide-react";
+import React, { useState } from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+import { Button } from "./button";
+import { FileAttachmentChip } from "./FileAttachmentChip";
+import { Textarea } from "./textarea";
+
+export interface ActivityAttachment {
+    id: string;
+    name: string;
+    size: string;
+    url?: string;
+}
+
+export interface ActivityReaction {
+    emoji: string;
+    count: number;
+    userReacted?: boolean;
+}
+
+export interface ActivityFeedItem {
+    id: string;
+    type: "comment" | "audit" | "note";
+    author: {
+        name: string;
+        avatar?: string;
+        initials?: string;
+        isOnline?: boolean;
+    };
+    timestamp: string;
+    isEdited?: boolean;
+    content?: string;
+    attachments?: ActivityAttachment[];
+    reactions?: ActivityReaction[];
+    auditDetails?: {
+        action: string;
+        target?: string;
+        from?: React.ReactNode;
+        to?: React.ReactNode;
+    };
+}
+
+export interface ActivityFeedProps {
+    items: ActivityFeedItem[];
+    totalCount?: number;
+    newCount?: number;
+    onAddComment?: (content: string, isNote: boolean) => void;
+    onAddReaction?: (itemId: string, emoji: string) => void;
+    currentUser?: {
+        name: string;
+        avatar?: string;
+        initials?: string;
+    };
+    className?: string;
+}
+
+export function ActivityFeed({
+    items,
+    totalCount = 0,
+    newCount = 0,
+    onAddComment,
+    onAddReaction,
+    currentUser,
+    className,
+}: ActivityFeedProps) {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const [activeFilter, setActiveFilter] = useState<
+        "all" | "comments" | "audit" | "notes"
+    >("all");
+    const [commentText, setCommentText] = useState("");
+    const [isNoteMode, setIsNoteMode] = useState(false);
+
+    const filteredItems = items.filter((item) => {
+        if (activeFilter === "comments") return item.type === "comment";
+        if (activeFilter === "audit") return item.type === "audit";
+        if (activeFilter === "notes") return item.type === "note";
+        return true;
+    });
+
+    const handleSendComment = () => {
+        if (!commentText.trim()) return;
+        onAddComment?.(commentText, isNoteMode);
+        setCommentText("");
+    };
+
+    return (
+        <div
+            className={cn(
+                "rounded-xl bg-dashboard-card border border-dashboard-border overflow-hidden select-none",
+                className,
+            )}
+        >
+            {/* Header Toolbar */}
+            <div className="flex items-center justify-between px-4 py-2.5 bg-dashboard-secondary/30 border-b border-dashboard-border">
+                <button
+                    type="button"
+                    onClick={() => setIsCollapsed(!isCollapsed)}
+                    className="flex items-center gap-2 text-xs font-semibold text-dashboard-foreground hover:text-dashboard-primary transition-colors cursor-pointer"
+                >
+                    {isCollapsed ? (
+                        <ChevronRight className="w-3.5 h-3.5 text-dashboard-muted-foreground" />
+                    ) : (
+                        <ChevronDown className="w-3.5 h-3.5 text-dashboard-muted-foreground" />
+                    )}
+                    <Activity className="w-3.5 h-3.5 text-dashboard-primary" />
+                    <span>Activity</span>
+                    <span className="font-mono text-[11px] text-dashboard-muted-foreground">
+                        {totalCount || items.length}
+                        {newCount > 0 && ` + ${newCount}`}
+                    </span>
+                </button>
+
+                {/* Filter Icon Buttons */}
+                <div className="flex items-center gap-1">
+                    <button
+                        type="button"
+                        aria-label="Filter comments"
+                        onClick={() =>
+                            setActiveFilter(
+                                activeFilter === "comments"
+                                    ? "all"
+                                    : "comments",
+                            )
+                        }
+                        className={cn(
+                            "p-1.5 rounded-md text-xs transition-colors",
+                            activeFilter === "comments"
+                                ? "bg-dashboard-primary/10 text-dashboard-primary"
+                                : "text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary",
+                        )}
+                    >
+                        <MessageSquare className="w-3.5 h-3.5" />
+                    </button>
+                    <button
+                        type="button"
+                        aria-label="Filter audit history"
+                        onClick={() =>
+                            setActiveFilter(
+                                activeFilter === "audit" ? "all" : "audit",
+                            )
+                        }
+                        className={cn(
+                            "p-1.5 rounded-md text-xs transition-colors",
+                            activeFilter === "audit"
+                                ? "bg-dashboard-primary/10 text-dashboard-primary"
+                                : "text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary",
+                        )}
+                    >
+                        <History className="w-3.5 h-3.5" />
+                    </button>
+                    <button
+                        type="button"
+                        aria-label="Filter notes"
+                        onClick={() =>
+                            setActiveFilter(
+                                activeFilter === "notes" ? "all" : "notes",
+                            )
+                        }
+                        className={cn(
+                            "p-1.5 rounded-md text-xs transition-colors",
+                            activeFilter === "notes"
+                                ? "bg-dashboard-primary/10 text-dashboard-primary"
+                                : "text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary",
+                        )}
+                    >
+                        <FileText className="w-3.5 h-3.5" />
+                    </button>
+                </div>
+            </div>
+
+            {/* Collapsible Content */}
+            {!isCollapsed && (
+                <div className="divide-y divide-dashboard-border/60">
+                    {/* Items List */}
+                    <div className="p-4 space-y-4 max-h-[460px] overflow-y-auto">
+                        {filteredItems.length === 0 ? (
+                            <div className="text-center py-6 text-xs text-dashboard-muted-foreground">
+                                No activity recorded yet.
+                            </div>
+                        ) : (
+                            filteredItems.map((item) => (
+                                <div
+                                    key={item.id}
+                                    className={cn(
+                                        "flex gap-3 text-xs",
+                                        item.type === "note" &&
+                                            "p-3 rounded-lg bg-amber-500/5 border border-amber-500/20",
+                                    )}
+                                >
+                                    {/* Author Avatar with Online Dot */}
+                                    <div className="relative shrink-0">
+                                        <Avatar size="sm" className="size-7">
+                                            {item.author.avatar && (
+                                                <AvatarImage
+                                                    src={item.author.avatar}
+                                                    alt={item.author.name}
+                                                />
+                                            )}
+                                            <AvatarFallback className="text-[10px]">
+                                                {item.author.initials ||
+                                                    item.author.name.slice(
+                                                        0,
+                                                        2,
+                                                    )}
+                                            </AvatarFallback>
+                                        </Avatar>
+                                        {item.author.isOnline && (
+                                            <span className="absolute bottom-0 right-0 size-2 bg-emerald-500 rounded-full ring-2 ring-dashboard-card" />
+                                        )}
+                                    </div>
+
+                                    {/* Item Body */}
+                                    <div className="flex-1 space-y-1.5 min-w-0">
+                                        <div className="flex items-center justify-between gap-2">
+                                            <div className="flex items-center gap-1.5">
+                                                <span className="font-semibold text-dashboard-foreground">
+                                                    {item.author.name}
+                                                </span>
+                                                {item.type === "note" && (
+                                                    <span className="text-[10px] font-bold px-1.5 py-0.2 rounded bg-amber-500/20 text-amber-400">
+                                                        Internal Note
+                                                    </span>
+                                                )}
+                                            </div>
+                                            <span className="text-[11px] text-dashboard-muted-foreground">
+                                                {item.timestamp}{" "}
+                                                {item.isEdited && "(edited)"}
+                                            </span>
+                                        </div>
+
+                                        {/* Audit Log Content */}
+                                        {item.type === "audit" &&
+                                            item.auditDetails && (
+                                                <div className="text-dashboard-muted-foreground leading-relaxed">
+                                                    <span>
+                                                        {
+                                                            item.auditDetails
+                                                                .action
+                                                        }{" "}
+                                                    </span>
+                                                    {item.auditDetails.from && (
+                                                        <span>
+                                                            from{" "}
+                                                            <span className="text-dashboard-foreground">
+                                                                {
+                                                                    item
+                                                                        .auditDetails
+                                                                        .from
+                                                                }
+                                                            </span>{" "}
+                                                        </span>
+                                                    )}
+                                                    {item.auditDetails.to && (
+                                                        <span>
+                                                            to{" "}
+                                                            <span className="text-dashboard-foreground">
+                                                                {
+                                                                    item
+                                                                        .auditDetails
+                                                                        .to
+                                                                }
+                                                            </span>
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            )}
+
+                                        {/* Comment / Note Content */}
+                                        {item.content && (
+                                            <p className="text-dashboard-foreground/90 leading-relaxed break-words whitespace-pre-wrap">
+                                                {item.content}
+                                            </p>
+                                        )}
+
+                                        {/* Attachments */}
+                                        {item.attachments &&
+                                            item.attachments.length > 0 && (
+                                                <div className="space-y-1.5 pt-1">
+                                                    {item.attachments.map(
+                                                        (att) => (
+                                                            <FileAttachmentChip
+                                                                key={att.id}
+                                                                name={att.name}
+                                                                size={att.size}
+                                                                url={att.url}
+                                                            />
+                                                        ),
+                                                    )}
+                                                </div>
+                                            )}
+
+                                        {/* Reactions */}
+                                        {item.reactions &&
+                                            item.reactions.length > 0 && (
+                                                <div className="flex items-center gap-1.5 pt-1">
+                                                    {item.reactions.map(
+                                                        (reaction, idx) => (
+                                                            <button
+                                                                key={idx}
+                                                                type="button"
+                                                                onClick={() =>
+                                                                    onAddReaction?.(
+                                                                        item.id,
+                                                                        reaction.emoji,
+                                                                    )
+                                                                }
+                                                                className={cn(
+                                                                    "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] border transition-colors",
+                                                                    reaction.userReacted
+                                                                        ? "bg-dashboard-primary/10 border-dashboard-primary/30 text-dashboard-primary"
+                                                                        : "bg-dashboard-secondary border-dashboard-border text-dashboard-muted-foreground hover:text-dashboard-foreground",
+                                                                )}
+                                                            >
+                                                                <span>
+                                                                    {
+                                                                        reaction.emoji
+                                                                    }
+                                                                </span>
+                                                                <span>
+                                                                    {
+                                                                        reaction.count
+                                                                    }
+                                                                </span>
+                                                            </button>
+                                                        ),
+                                                    )}
+                                                </div>
+                                            )}
+                                    </div>
+                                </div>
+                            ))
+                        )}
+                    </div>
+
+                    {/* Comment Input Footer */}
+                    <div className="p-3 bg-dashboard-secondary/20 space-y-2">
+                        <div className="flex gap-2.5">
+                            <Avatar size="sm" className="size-7 shrink-0">
+                                {currentUser?.avatar && (
+                                    <AvatarImage
+                                        src={currentUser.avatar}
+                                        alt={currentUser.name}
+                                    />
+                                )}
+                                <AvatarFallback className="text-[10px]">
+                                    {currentUser?.initials || "ME"}
+                                </AvatarFallback>
+                            </Avatar>
+
+                            <div className="flex-1 space-y-2">
+                                <Textarea
+                                    value={commentText}
+                                    onChange={(e) =>
+                                        setCommentText(e.target.value)
+                                    }
+                                    placeholder={
+                                        isNoteMode
+                                            ? "Leave an internal note (only team visible)..."
+                                            : "Leave a comment or reply..."
+                                    }
+                                    rows={2}
+                                    className="text-xs bg-dashboard-background border-dashboard-border min-h-[56px] resize-none"
+                                />
+
+                                <div className="flex items-center justify-between pt-1">
+                                    <div className="flex items-center gap-1.5">
+                                        <Button
+                                            type="button"
+                                            variant={
+                                                isNoteMode
+                                                    ? "default"
+                                                    : "outline"
+                                            }
+                                            size="xs"
+                                            onClick={() =>
+                                                setIsNoteMode(!isNoteMode)
+                                            }
+                                            className={cn(
+                                                "h-7 rounded-full text-[11px]",
+                                                isNoteMode
+                                                    ? "bg-amber-500 hover:bg-amber-600 text-white"
+                                                    : "bg-dashboard-secondary border-dashboard-border text-dashboard-muted-foreground hover:text-dashboard-foreground",
+                                            )}
+                                        >
+                                            {isNoteMode
+                                                ? "Note Mode Active"
+                                                : "Make a note"}
+                                        </Button>
+
+                                        <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="icon-xs"
+                                            aria-label="Attach file"
+                                            className="size-7 text-dashboard-muted-foreground hover:text-dashboard-foreground"
+                                        >
+                                            <Paperclip className="w-3.5 h-3.5" />
+                                        </Button>
+                                        <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="icon-xs"
+                                            aria-label="Insert quick macro"
+                                            className="size-7 text-dashboard-muted-foreground hover:text-dashboard-foreground"
+                                        >
+                                            <Zap className="w-3.5 h-3.5" />
+                                        </Button>
+                                    </div>
+
+                                    <Button
+                                        type="button"
+                                        variant="default"
+                                        size="xs"
+                                        disabled={!commentText.trim()}
+                                        onClick={handleSendComment}
+                                        className="h-7 px-3.5 bg-dashboard-primary hover:bg-dashboard-primary/90 text-white rounded-full text-xs font-semibold"
+                                    >
+                                        Comment
+                                    </Button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default ActivityFeed;

package/src/components/AudioPlayer.tsx

@@ -0,0 +1,179 @@
+import { cn } from "../support/utils";
+import { Pause, Play } from "lucide-react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+interface AudioPlayerProps {
+    src: string;
+    variant?: "message" | "preview";
+    className?: string;
+}
+
+const formatTime = (time: number) => {
+    if (isNaN(time)) return "0:00";
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
+};
+
+export const AudioPlayer: React.FC<AudioPlayerProps> = ({
+    src,
+    variant = "message",
+    className,
+}) => {
+    const audioRef = useRef<HTMLAudioElement>(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [duration, setDuration] = useState(0);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [playbackSpeed, setPlaybackSpeed] = useState(1);
+
+    const speeds = [1, 1.5, 2];
+
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio) return;
+
+        const setAudioData = () => {
+            setDuration(audio.duration || 0);
+            setCurrentTime(audio.currentTime || 0);
+        };
+
+        const setAudioTime = () => setCurrentTime(audio.currentTime || 0);
+        const onEnd = () => setIsPlaying(false);
+
+        audio.addEventListener("loadeddata", setAudioData);
+        audio.addEventListener("timeupdate", setAudioTime);
+        audio.addEventListener("ended", onEnd);
+
+        return () => {
+            audio.removeEventListener("loadeddata", setAudioData);
+            audio.removeEventListener("timeupdate", setAudioTime);
+            audio.removeEventListener("ended", onEnd);
+        };
+    }, []);
+
+    const togglePlayPause = () => {
+        if (!audioRef.current) return;
+        if (isPlaying) {
+            audioRef.current.pause();
+        } else {
+            audioRef.current.play().catch(() => {});
+        }
+        setIsPlaying(!isPlaying);
+    };
+
+    const handleSpeedToggle = () => {
+        const nextSpeed =
+            speeds[(speeds.indexOf(playbackSpeed) + 1) % speeds.length];
+        setPlaybackSpeed(nextSpeed);
+        if (audioRef.current) {
+            audioRef.current.playbackRate = nextSpeed;
+        }
+    };
+
+    // Deterministic waveform data based on audio source string
+    const waveData = useMemo(() => {
+        let hash = 0;
+        for (let i = 0; i < src.length; i++) {
+            hash = src.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const random = (seed: number) => {
+            const x = Math.sin(seed++) * 10000;
+            return x - Math.floor(x);
+        };
+
+        return Array.from({ length: 36 }, (_, i) => {
+            return Math.max(0.2, random(hash + i));
+        });
+    }, [src]);
+
+    const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!audioRef.current || !duration) return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const percent = Math.max(
+            0,
+            Math.min(1, (e.clientX - rect.left) / rect.width),
+        );
+        audioRef.current.currentTime = percent * duration;
+        setCurrentTime(percent * duration);
+    };
+
+    const isMessage = variant === "message";
+
+    return (
+        <div
+            className={cn(
+                "flex items-center gap-3 rounded-2xl min-w-56 max-w-sm p-2 transition-all",
+                isMessage
+                    ? "bg-dashboard-secondary/60 border border-dashboard-border"
+                    : "bg-dashboard-primary/10 border border-dashboard-primary/30",
+                className,
+            )}
+        >
+            <audio ref={audioRef} src={src} preload="metadata" />
+            <button
+                onClick={togglePlayPause}
+                type="button"
+                aria-label={isPlaying ? "Pause audio" : "Play audio"}
+                className={cn(
+                    "w-9 h-9 shrink-0 flex items-center justify-center rounded-full transition-all cursor-pointer",
+                    isMessage
+                        ? "bg-dashboard-primary text-white shadow-md hover:bg-dashboard-primary/90"
+                        : "bg-dashboard-primary text-white shadow-sm hover:opacity-90",
+                )}
+            >
+                {isPlaying ? (
+                    <Pause className="w-4 h-4 fill-current" />
+                ) : (
+                    <Play className="w-4 h-4 fill-current ml-0.5" />
+                )}
+            </button>
+
+            <div className="flex-1 flex flex-col gap-1 pr-1 min-w-0">
+                {/* Waveform Seek Bar */}
+                <div
+                    className="w-full h-5 flex items-center gap-0.5 cursor-pointer group"
+                    onClick={handleSeek}
+                >
+                    {waveData.map((val, i) => {
+                        const isFilled =
+                            duration > 0
+                                ? i / waveData.length <= currentTime / duration
+                                : false;
+                        return (
+                            <div
+                                key={i}
+                                className={cn(
+                                    "flex-1 rounded-full transition-colors duration-75",
+                                    isFilled
+                                        ? "bg-dashboard-primary"
+                                        : isMessage
+                                          ? "bg-dashboard-muted-foreground/30"
+                                          : "bg-dashboard-primary/25",
+                                )}
+                                style={{
+                                    height: `${Math.max(20, val * 100)}%`,
+                                }}
+                            />
+                        );
+                    })}
+                </div>
+
+                {/* Duration & Speed Toggle Bar */}
+                <div className="flex items-center justify-between text-[10px] font-medium text-dashboard-muted-foreground">
+                    <span>{formatTime(currentTime)}</span>
+                    <div className="flex items-center gap-1.5">
+                        <button
+                            onClick={handleSpeedToggle}
+                            type="button"
+                            aria-label={`Playback speed: ${playbackSpeed}x`}
+                            className="opacity-80 hover:opacity-100 transition-opacity px-1.5 py-0.5 rounded-md font-bold text-[9px] bg-dashboard-secondary border border-dashboard-border text-dashboard-foreground cursor-pointer"
+                        >
+                            {playbackSpeed}x
+                        </button>
+                        <span>{formatTime(duration)}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};