style(frontend): organize imports alphabetically and improve code formatting
This commit is contained in:
@@ -103,9 +103,7 @@ export default function App() {
|
||||
const username = msg.username || msg.user_id || "unknown";
|
||||
const severity = msg.ai_severity || "";
|
||||
const categories = msg.ai_categories || "";
|
||||
const brief =
|
||||
msg.ai_analysis?.slice(0, 80) ??
|
||||
"Message flagged by AI";
|
||||
const brief = msg.ai_analysis?.slice(0, 80) ?? "Message flagged by AI";
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("moderation_alert", {
|
||||
detail: { type: status, username, severity, categories, brief },
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { Guild, Channel } from "../../shared/api/client";
|
||||
export { Channel, Guild } from "../../shared/api/client";
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { MediaMode, MediaItem, MediaState } from "../../shared/api/client";
|
||||
export { MediaItem, MediaMode, MediaState } from "../../shared/api/client";
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { VoiceStatus, ActiveSpeaker } from "../../shared/api/client";
|
||||
export { ActiveSpeaker, VoiceStatus } from "../../shared/api/client";
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import type { ActiveSpeaker } from "../../../shared/api/client";
|
||||
import { Skeleton } from "../../../shared/ui";
|
||||
import { EmptyStateMascot } from "../../../shared/ui";
|
||||
import { EmptyStateMascot, Skeleton } from "../../../shared/ui";
|
||||
|
||||
interface ActiveSpeakersProps {
|
||||
speakers: ActiveSpeaker[];
|
||||
|
||||
@@ -66,7 +66,11 @@ export function MusicSubPanel({
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80" disabled={loading || !source.trim()} onClick={submit}>
|
||||
<Button
|
||||
className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80"
|
||||
disabled={loading || !source.trim()}
|
||||
onClick={submit}
|
||||
>
|
||||
<Music2 className="mr-1.5 h-4 w-4" /> Queue
|
||||
</Button>
|
||||
<Button variant="secondary" disabled={loading} onClick={onSkip}>
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
|
||||
import { Download, Mic } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Badge, Button, EmptyStateMascot, Skeleton } from "../../../shared/ui";
|
||||
import { formatBytes, formatDate } from "../../../shared/lib/utils";
|
||||
import { Badge, Button, EmptyStateMascot, Skeleton } from "../../../shared/ui";
|
||||
|
||||
interface VoiceRecording {
|
||||
id: string;
|
||||
@@ -92,9 +92,7 @@ export function RecordingsSubPanel() {
|
||||
}
|
||||
|
||||
if (recordings.length === 0) {
|
||||
return (
|
||||
<EmptyStateMascot variant="sleeping" message="No recordings yet~" />
|
||||
);
|
||||
return <EmptyStateMascot variant="sleeping" message="No recordings yet~" />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -32,7 +32,11 @@ export function ScreenSubPanel({
|
||||
placeholder="Screen share URL or local file path"
|
||||
/>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80" disabled={loading || !source.trim()} onClick={submit}>
|
||||
<Button
|
||||
className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80"
|
||||
disabled={loading || !source.trim()}
|
||||
onClick={submit}
|
||||
>
|
||||
<MonitorUp className="mr-1.5 h-4 w-4" /> Start
|
||||
</Button>
|
||||
<Button variant="secondary" disabled={loading} onClick={onSkip}>
|
||||
|
||||
@@ -56,7 +56,9 @@ export function VoiceConnectionCard({
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">Voice Channel</label>
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
Voice Channel
|
||||
</label>
|
||||
<Select
|
||||
value={selectedChannel}
|
||||
onChange={(e) => onChannelChange(e.target.value)}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { MessageRecord } from "../../../shared/api/client";
|
||||
import { parseMetadata } from "../../../entities/message/types";
|
||||
import type { MessageRecord } from "../../../shared/api/client";
|
||||
import { EmptyStateMascot } from "../../../widgets/mascot/ChibiMascot";
|
||||
|
||||
interface ImageItem {
|
||||
@@ -68,9 +68,7 @@ export function ImageGrid({ messages }: { messages: MessageRecord[] }) {
|
||||
}
|
||||
|
||||
if (images.length === 0) {
|
||||
return (
|
||||
<EmptyStateMascot variant="thinking" message="No images yet~" />
|
||||
);
|
||||
return <EmptyStateMascot variant="thinking" message="No images yet~" />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -10,9 +10,9 @@ import {
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { Fragment, useMemo, useState } from "react";
|
||||
import { parseMetadata } from "../../../entities/message/types";
|
||||
import type { MessageRecord } from "../../../shared/api/client";
|
||||
import { Badge, Button, Skeleton } from "../../../shared/ui";
|
||||
import { parseMetadata } from "../../../entities/message/types";
|
||||
|
||||
const CUSTOM_EMOJI_REGEX = /<(a)?:([a-zA-Z0-9_]+):(\d+)>/g;
|
||||
|
||||
@@ -134,9 +134,7 @@ export function MessageCard({
|
||||
const confidence =
|
||||
message.ai_confidence ?? message.ai_moderation_score ?? null;
|
||||
const [isReanalyzing, setIsReanalyzing] = useState(false);
|
||||
const [showAnalysis, setShowAnalysis] = useState(
|
||||
aiStatus === "flagged",
|
||||
);
|
||||
const [showAnalysis, setShowAnalysis] = useState(aiStatus === "flagged");
|
||||
|
||||
// Build a human-readable analysis summary from categories + confidence + severity
|
||||
const analysisSummary = useMemo(() => {
|
||||
@@ -178,9 +176,7 @@ export function MessageCard({
|
||||
className={`group rounded-2xl border bg-white shadow-sm transition-all hover:border-primary/30 hover:shadow-md ${
|
||||
compact ? "px-4 py-1.5" : "p-4"
|
||||
} ${
|
||||
message.deleted_at
|
||||
? "border-red-200 opacity-60"
|
||||
: "border-primary/20"
|
||||
message.deleted_at ? "border-red-200 opacity-60" : "border-primary/20"
|
||||
}`}
|
||||
>
|
||||
<div className={`flex ${compact ? "gap-2" : "gap-3"}`}>
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { useEffect, useMemo, useRef } from "react";
|
||||
import type { MessageRecord } from "../../../shared/api/client";
|
||||
import {
|
||||
cardStagger,
|
||||
cardItem,
|
||||
} from "../../../shared/hooks/useFramerStagger";
|
||||
import { cardItem, cardStagger } from "../../../shared/hooks/useFramerStagger";
|
||||
import { ScrollArea } from "../../../shared/ui";
|
||||
import { MessageCard, MessageCardSkeleton } from "./MessageCard";
|
||||
import { EmptyStateMascot } from "../../../widgets/mascot/ChibiMascot";
|
||||
import { MessageCard, MessageCardSkeleton } from "./MessageCard";
|
||||
|
||||
export interface MessageFeedProps {
|
||||
messages: MessageRecord[];
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import type { MessageRecord } from "../../../shared/api/client";
|
||||
import { listMessages, reanalyzeErrorBatch, reanalyzeMessage } from "../../../shared/api/client";
|
||||
import {
|
||||
listMessages,
|
||||
reanalyzeErrorBatch,
|
||||
reanalyzeMessage,
|
||||
} from "../../../shared/api/client";
|
||||
|
||||
const PAGE_SIZE = 100;
|
||||
|
||||
@@ -91,28 +95,25 @@ export function useMessages() {
|
||||
await reanalyzeMessage(id);
|
||||
}, []);
|
||||
|
||||
const reanalyzeAllErrors = useCallback(
|
||||
async (): Promise<number> => {
|
||||
// Optimistically mark all error messages as pending
|
||||
setMessages((prev) =>
|
||||
prev.map((message) =>
|
||||
message.ai_status === "error"
|
||||
? {
|
||||
...message,
|
||||
ai_status: "pending" as const,
|
||||
ai_error: null,
|
||||
ai_analysis: null,
|
||||
}
|
||||
: message,
|
||||
),
|
||||
);
|
||||
const { count } = await reanalyzeErrorBatch({
|
||||
guildId: currentGuild.current ?? undefined,
|
||||
});
|
||||
return count;
|
||||
},
|
||||
[],
|
||||
);
|
||||
const reanalyzeAllErrors = useCallback(async (): Promise<number> => {
|
||||
// Optimistically mark all error messages as pending
|
||||
setMessages((prev) =>
|
||||
prev.map((message) =>
|
||||
message.ai_status === "error"
|
||||
? {
|
||||
...message,
|
||||
ai_status: "pending" as const,
|
||||
ai_error: null,
|
||||
ai_analysis: null,
|
||||
}
|
||||
: message,
|
||||
),
|
||||
);
|
||||
const { count } = await reanalyzeErrorBatch({
|
||||
guildId: currentGuild.current ?? undefined,
|
||||
});
|
||||
return count;
|
||||
}, []);
|
||||
|
||||
return {
|
||||
messages,
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { Filter, RotateCw, Search, X } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import type { MessageRecord } from "../../shared/api/client";
|
||||
import { cardItem, cardStagger } from "../../shared/hooks/useFramerStagger";
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
@@ -15,7 +16,6 @@ import {
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "../../shared/ui";
|
||||
import { cardStagger, cardItem } from "../../shared/hooks/useFramerStagger";
|
||||
import { ImageGrid } from "./components/ImageGrid";
|
||||
import { MessageFeed } from "./components/MessageFeed";
|
||||
|
||||
@@ -109,9 +109,7 @@ export function MessagesPanel({
|
||||
{guildName && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Monitoring all text channels in{" "}
|
||||
<span className="font-medium text-foreground">
|
||||
{guildName}
|
||||
</span>
|
||||
<span className="font-medium text-foreground">{guildName}</span>
|
||||
</p>
|
||||
)}
|
||||
</CardHeader>
|
||||
@@ -129,7 +127,10 @@ export function MessagesPanel({
|
||||
variants={cardItem}
|
||||
className="flex flex-wrap items-center gap-2"
|
||||
>
|
||||
<Badge variant="outline" className="text-xs border-primary/40 text-primary">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-xs border-primary/40 text-primary"
|
||||
>
|
||||
{stats.total} total{hasMore && !showSearch ? "+" : ""}
|
||||
</Badge>
|
||||
<Badge
|
||||
@@ -150,11 +151,17 @@ export function MessagesPanel({
|
||||
>
|
||||
{stats.error} error
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-xs text-muted-foreground border-border">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-xs text-muted-foreground border-border"
|
||||
>
|
||||
{stats.pending} pending
|
||||
</Badge>
|
||||
{stats.deleted > 0 && (
|
||||
<Badge variant="outline" className="text-xs bg-red-100 text-red-700 border-red-200">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-xs bg-red-100 text-red-700 border-red-200"
|
||||
>
|
||||
{stats.deleted} deleted
|
||||
</Badge>
|
||||
)}
|
||||
@@ -222,9 +229,7 @@ export function MessagesPanel({
|
||||
<RotateCw
|
||||
className={`mr-1.5 h-3.5 w-3.5 ${retryingAll ? "animate-spin" : ""}`}
|
||||
/>
|
||||
{retryingAll
|
||||
? "Retrying..."
|
||||
: `Retry All Errors (${stats.error})`}
|
||||
{retryingAll ? "Retrying..." : `Retry All Errors (${stats.error})`}
|
||||
</Button>
|
||||
)}
|
||||
{retriedCount !== null && (
|
||||
@@ -235,27 +240,21 @@ export function MessagesPanel({
|
||||
)}
|
||||
<div className="ml-auto flex items-center gap-1.5">
|
||||
<Filter className="h-4 w-4 text-primary" />
|
||||
{(
|
||||
[
|
||||
"all",
|
||||
"clean",
|
||||
"flagged",
|
||||
"error",
|
||||
"pending",
|
||||
] as AiFilter[]
|
||||
).map((f) => (
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => setAiFilter(f)}
|
||||
className={`rounded-full px-3 py-1 text-xs font-medium transition-all ${
|
||||
aiFilter === f
|
||||
? "bg-primary text-primary-foreground shadow-sm"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-primary-soft"
|
||||
}`}
|
||||
>
|
||||
{f}
|
||||
</button>
|
||||
))}
|
||||
{(["all", "clean", "flagged", "error", "pending"] as AiFilter[]).map(
|
||||
(f) => (
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => setAiFilter(f)}
|
||||
className={`rounded-full px-3 py-1 text-xs font-medium transition-all ${
|
||||
aiFilter === f
|
||||
? "bg-primary text-primary-foreground shadow-sm"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-primary-soft"
|
||||
}`}
|
||||
>
|
||||
{f}
|
||||
</button>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
|
||||
@@ -11,8 +11,7 @@ type BadgeVariant =
|
||||
|
||||
const variants: Record<BadgeVariant, string> = {
|
||||
default: "border-transparent bg-primary text-primary-foreground",
|
||||
secondary:
|
||||
"border-transparent bg-muted text-muted-foreground",
|
||||
secondary: "border-transparent bg-muted text-muted-foreground",
|
||||
destructive: "border-transparent bg-[#FCA5A5] text-red-800",
|
||||
outline: "border-border text-foreground",
|
||||
success: "border-transparent bg-[#BBF7D0] text-green-800",
|
||||
|
||||
@@ -11,12 +11,10 @@ type ButtonVariant =
|
||||
type ButtonSize = "default" | "sm" | "lg" | "icon";
|
||||
|
||||
const variants: Record<ButtonVariant, string> = {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||
secondary: "bg-[#FFB7C5] text-[#1a1a2e] hover:bg-[#FFB7C5]/80",
|
||||
destructive: "bg-[#FCA5A5] text-[#1a1a2e] hover:bg-[#FCA5A5]/80",
|
||||
outline:
|
||||
"border border-border bg-white hover:bg-primary-soft",
|
||||
outline: "border border-border bg-white hover:bg-primary-soft",
|
||||
ghost: "hover:bg-primary-soft",
|
||||
};
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
// ─── Shared UI barrel export ────────────────────────────────────────────────
|
||||
|
||||
export { EmptyStateMascot } from "../../widgets/mascot/ChibiMascot";
|
||||
export { Badge } from "./badge";
|
||||
export { Button } from "./button";
|
||||
export {
|
||||
@@ -16,4 +17,3 @@ export { Select } from "./select";
|
||||
export { Skeleton } from "./skeleton";
|
||||
export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
|
||||
export { ToastProvider, useToast } from "./toast";
|
||||
export { EmptyStateMascot } from "../../widgets/mascot/ChibiMascot";
|
||||
|
||||
@@ -87,7 +87,9 @@ function ToastContainer() {
|
||||
)}
|
||||
onClick={() => removeToast(toast.id)}
|
||||
>
|
||||
<span className="text-base leading-none">{typeIcons[toast.type]}</span>
|
||||
<span className="text-base leading-none">
|
||||
{typeIcons[toast.type]}
|
||||
</span>
|
||||
<span>{toast.message}</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -59,8 +59,7 @@ export function Sidebar({
|
||||
: "text-muted-foreground hover:bg-primary-soft/40 hover:text-primary/80",
|
||||
)}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform =
|
||||
"translateX(2px) scale(1.1)";
|
||||
e.currentTarget.style.transform = "translateX(2px) scale(1.1)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = "translateX(0) scale(1)";
|
||||
|
||||
@@ -45,13 +45,20 @@ function createPetals(count: number): PetalData[] {
|
||||
}));
|
||||
}
|
||||
|
||||
function Petal({ data, mouseRef }: { data: PetalData; mouseRef: React.RefObject<{ x: number; y: number } | null> }) {
|
||||
function Petal({
|
||||
data,
|
||||
mouseRef,
|
||||
}: {
|
||||
data: PetalData;
|
||||
mouseRef: React.RefObject<{ x: number; y: number } | null>;
|
||||
}) {
|
||||
const meshRef = useRef(null);
|
||||
|
||||
useFrame((_state, delta) => {
|
||||
const mesh = meshRef.current as unknown as
|
||||
| { position: { x: number; y: number; z: number }; rotation: { z: number; x: number } }
|
||||
| null;
|
||||
const mesh = meshRef.current as unknown as {
|
||||
position: { x: number; y: number; z: number };
|
||||
rotation: { z: number; x: number };
|
||||
} | null;
|
||||
if (!mesh) return;
|
||||
|
||||
// Slow drift downward
|
||||
|
||||
Reference in New Issue
Block a user