style(frontend): organize imports alphabetically and improve code formatting

This commit is contained in:
MythEclipse
2026-06-03 03:21:20 +07:00
parent 115dacb997
commit 4a1c7925fe
20 changed files with 101 additions and 100 deletions
@@ -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>