Skip to content

refactor: replace isDark conditional logic with Tailwind dark: prefix across 19 components (250+ conversions) #240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zhangxuhe1 merged 11 commits into from
Aug 22, 2025
Merged

refactor: replace isDark conditional logic with Tailwind dark: prefix across 19 components (250+ conversions) #240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
65cdf3d
Initial plan
Copilot Aug 20, 2025
3b00e3d
Refactor: Replace isDark with Tailwind dark: prefix in workflow execu…
Copilot Aug 20, 2025
acef8ce
Refactor: Replace isDark with Tailwind dark: prefix in workflow execu…
Copilot Aug 20, 2025
3efc9e3
Refactor: Replace isDark with Tailwind dark: prefix in chatflow float…
Copilot Aug 20, 2025
b11d3d1
Refactor: Replace isDark with Tailwind dark: prefix in chatflow-execu…
Copilot Aug 20, 2025
5652164
refactor: convert isDark conditional logic to Tailwind dark: prefix i…
Copilot Aug 20, 2025
3f307da
refactor: convert isDark conditional logic to Tailwind dark: prefix i…
Copilot Aug 20, 2025
f59fd86
refactor: convert isDark to Tailwind dark: prefix in text-generation-…
Copilot Aug 20, 2025
9377be5
Merge branch 'main' into copilot/fix-220-4
zhangxuhe1 Aug 21, 2025
7561154
refactor: complete isDark to Tailwind dark: prefix conversion in mobi…
zhangxuhe1 Aug 21, 2025
41a3e93
fix: replace hardcoded false values with proper Tailwind dark: prefix…
zhangxuhe1 Aug 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 32 additions & 73 deletions components/chatflow/chatflow-execution-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
'use client';

import { useTheme } from '@lib/hooks/use-theme';
import type {
ChatflowNode,
ChatflowParallelBranch,
Expand Down Expand Up @@ -42,7 +41,6 @@ export function ChatflowExecutionBar({
index,
delay = 0,
}: ChatflowExecutionBarProps) {
const { isDark } = useTheme();
const t = useTranslations('pages.chatflow.executionBar');
const [isVisible, setIsVisible] = useState(false);
const [elapsedTime, setElapsedTime] = useState(0);
Expand Down Expand Up @@ -113,37 +111,28 @@ export function ChatflowExecutionBar({
<Loader2
className={cn(
'h-4 w-4 animate-spin',
isDark ? 'text-stone-400' : 'text-stone-600'
'text-stone-600 dark:text-stone-400'
)}
/>
);
case 'completed':
return (
<CheckCircle
className={cn(
'h-4 w-4',
isDark ? 'text-stone-400' : 'text-stone-600'
)}
className={cn('h-4 w-4', 'text-stone-600 dark:text-stone-400')}
/>
);
case 'failed':
return <XCircle className="h-4 w-4 text-red-500" />;
case 'pending':
return (
<Clock
className={cn(
'h-4 w-4',
isDark ? 'text-stone-500' : 'text-stone-400'
)}
className={cn('h-4 w-4', 'text-stone-400 dark:text-stone-500')}
/>
);
default:
return (
<AlertCircle
className={cn(
'h-4 w-4',
isDark ? 'text-stone-500' : 'text-stone-400'
)}
className={cn('h-4 w-4', 'text-stone-400 dark:text-stone-500')}
/>
);
}
Expand Down Expand Up @@ -247,7 +236,7 @@ export function ChatflowExecutionBar({
// Use new indicator bar style
node.isInIteration ? 'iteration-node' : 'loop-node',
// Slight background color distinction
isDark ? 'bg-stone-800/20' : 'bg-stone-50/40'
'bg-stone-50/40 dark:bg-stone-800/20'
)
: '';

Expand All @@ -257,37 +246,27 @@ export function ChatflowExecutionBar({
case 'running':
return cn(
combinedBaseStyles,
isDark
? 'border-stone-600 bg-stone-700/50 shadow-lg shadow-stone-900/30'
: 'border-stone-300 bg-stone-200/50 shadow-lg shadow-stone-200/50'
'border-stone-300 bg-stone-200/50 shadow-lg shadow-stone-200/50 dark:border-stone-600 dark:bg-stone-700/50 dark:shadow-lg dark:shadow-stone-900/30'
);
case 'completed':
return cn(
combinedBaseStyles,
isDark
? 'border-stone-500 bg-stone-600/30'
: 'border-stone-300 bg-stone-100'
'border-stone-300 bg-stone-100 dark:border-stone-500 dark:bg-stone-600/30'
);
case 'failed':
return cn(
combinedBaseStyles,
isDark
? 'border-red-700/50 bg-red-900/20'
: 'border-red-200 bg-red-50'
'border-red-200 bg-red-50 dark:border-red-700/50 dark:bg-red-900/20'
);
case 'pending':
return cn(
combinedBaseStyles,
isDark
? 'border-stone-700/50 bg-stone-800/50'
: 'border-stone-200 bg-stone-50'
'border-stone-200 bg-stone-50 dark:border-stone-700/50 dark:bg-stone-800/50'
);
default:
return cn(
combinedBaseStyles,
isDark
? 'border-stone-700/50 bg-stone-800/50'
: 'border-stone-200 bg-stone-50'
'border-stone-200 bg-stone-50 dark:border-stone-700/50 dark:bg-stone-800/50'
);
}
};
Expand Down Expand Up @@ -324,7 +303,7 @@ export function ChatflowExecutionBar({
<span
className={cn(
'flex-1 truncate font-serif text-sm font-medium',
isDark ? 'text-stone-200' : 'text-stone-800'
'text-stone-800 dark:text-stone-200'
)}
>
{getNodeTitle()}
Expand All @@ -337,7 +316,7 @@ export function ChatflowExecutionBar({
<span
className={cn(
'rounded bg-stone-200 px-1.5 py-0.5 text-xs text-stone-700',
isDark && 'bg-stone-700/50 text-stone-300'
'dark:bg-stone-700/50 dark:text-stone-300'
)}
>
{(node.currentIteration || 0) + 1}/{node.totalIterations}
Expand All @@ -347,7 +326,7 @@ export function ChatflowExecutionBar({
<span
className={cn(
'rounded bg-stone-200 px-1.5 py-0.5 text-xs text-stone-700',
isDark && 'bg-stone-700/50 text-stone-300'
'dark:bg-stone-700/50 dark:text-stone-300'
)}
>
{node.completedBranches || 0}/{node.totalBranches}
Expand All @@ -357,7 +336,7 @@ export function ChatflowExecutionBar({
<span
className={cn(
'rounded bg-stone-200 px-1.5 py-0.5 text-xs text-stone-700',
isDark && 'bg-stone-700/50 text-stone-300'
'dark:bg-stone-700/50 dark:text-stone-300'
)}
>
{node.maxLoops
Expand All @@ -372,23 +351,15 @@ export function ChatflowExecutionBar({
node.status === 'running'
? cn(
// Base style
isDark
? 'bg-stone-600/40 text-stone-200'
: 'bg-stone-300/60 text-stone-700',
'bg-stone-300/60 text-stone-700 dark:bg-stone-600/40 dark:text-stone-200',
// Subtle pulse effect
'animate-pulse'
)
: node.status === 'completed'
? isDark
? 'bg-stone-500/40 text-stone-100'
: 'bg-stone-200 text-stone-800'
? 'bg-stone-200 text-stone-800 dark:bg-stone-500/40 dark:text-stone-100'
: node.status === 'failed'
? isDark
? 'bg-red-700/30 text-red-200'
: 'bg-red-100 text-red-700'
: isDark
? 'bg-stone-700/50 text-stone-400'
: 'bg-stone-200/80 text-stone-600'
? 'bg-red-100 text-red-700 dark:bg-red-700/30 dark:text-red-200'
: 'bg-stone-200/80 text-stone-600 dark:bg-stone-700/50 dark:text-stone-400'
)}
>
{getStatusText()}
Expand All @@ -404,7 +375,7 @@ export function ChatflowExecutionBar({
<div
className={cn(
'font-serif text-xs',
isDark ? 'text-stone-400' : 'text-stone-500'
'text-stone-500 dark:text-stone-400'
)}
>
{formatTime(elapsedTime)}
Expand Down Expand Up @@ -435,19 +406,14 @@ export function ChatflowExecutionBar({
current={node.completedBranches || 0}
total={node.totalBranches}
type="branch"
isDark={isDark}
/>
</div>
)}

{/* Branch list */}
<div className="space-y-1">
{node.parallelBranches?.map(branch => (
<ParallelBranchItem
key={branch.id}
branch={branch}
isDark={isDark}
/>
<ParallelBranchItem key={branch.id} branch={branch} />
))}
</div>
</div>
Expand Down Expand Up @@ -485,10 +451,9 @@ function CollapsibleContent({
// --- 🎯 New: parallel branch item component ---
interface ParallelBranchItemProps {
branch: ChatflowParallelBranch;
isDark: boolean;
}

function ParallelBranchItem({ branch, isDark }: ParallelBranchItemProps) {
function ParallelBranchItem({ branch }: ParallelBranchItemProps) {
const t = useTranslations('pages.chatflow.executionBar');
const [elapsedTime, setElapsedTime] = useState(0);

Expand Down Expand Up @@ -531,13 +496,13 @@ function ParallelBranchItem({ branch, isDark }: ParallelBranchItemProps) {
className={cn(
'ml-4 flex items-center gap-2 rounded-md border-l-2 px-3 py-2 font-serif',
branch.status === 'running' &&
cn('border-l-stone-400', isDark ? 'bg-stone-800/20' : 'bg-stone-100'),
cn('border-l-stone-400', 'bg-stone-100 dark:bg-stone-800/20'),
branch.status === 'completed' &&
cn('border-l-stone-500', isDark ? 'bg-stone-700/20' : 'bg-stone-50'),
cn('border-l-stone-500', 'bg-stone-50 dark:bg-stone-700/20'),
branch.status === 'failed' &&
cn('border-l-red-500', isDark ? 'bg-red-900/20' : 'bg-red-50'),
cn('border-l-red-500', 'bg-red-50 dark:bg-red-900/20'),
branch.status === 'pending' &&
cn('border-l-stone-300', isDark ? 'bg-stone-800/20' : 'bg-stone-50')
cn('border-l-stone-300', 'bg-stone-50 dark:bg-stone-800/20')
)}
>
<div className="flex-shrink-0">
Expand All @@ -550,17 +515,12 @@ function ParallelBranchItem({ branch, isDark }: ParallelBranchItemProps) {
<span
className={cn(
'text-sm font-medium',
isDark ? 'text-stone-200' : 'text-stone-800'
'text-stone-800 dark:text-stone-200'
)}
>
{t('branch.label')} {String.fromCharCode(65 + branch.index)}
</span>
<span
className={cn(
'text-xs',
isDark ? 'text-stone-400' : 'text-stone-600'
)}
>
<span className={cn('text-xs', 'text-stone-600 dark:text-stone-400')}>
{branch.description || t('status.executing_')}
</span>
</div>
Expand All @@ -573,7 +533,7 @@ function ParallelBranchItem({ branch, isDark }: ParallelBranchItemProps) {
<span
className={cn(
'font-serif text-xs',
isDark ? 'text-stone-400' : 'text-stone-500'
'text-stone-500 dark:text-stone-400'
)}
>
{formatTime(elapsedTime)}
Expand All @@ -589,10 +549,9 @@ interface ProgressBarProps {
current: number;
total: number;
type: 'iteration' | 'branch';
isDark: boolean;
}

function ProgressBar({ current, total, type, isDark }: ProgressBarProps) {
function ProgressBar({ current, total, type }: ProgressBarProps) {
const t = useTranslations('pages.chatflow.executionBar');
const percentage = total > 0 ? (current / total) * 100 : 0;

Expand All @@ -602,7 +561,7 @@ function ProgressBar({ current, total, type, isDark }: ProgressBarProps) {
<span
className={cn(
'font-serif text-xs font-medium',
isDark ? 'text-stone-300' : 'text-stone-700'
'text-stone-700 dark:text-stone-300'
)}
>
{type === 'iteration'
Expand All @@ -612,7 +571,7 @@ function ProgressBar({ current, total, type, isDark }: ProgressBarProps) {
<span
className={cn(
'font-serif text-xs',
isDark ? 'text-stone-400' : 'text-stone-500'
'text-stone-500 dark:text-stone-400'
)}
>
{current}/{total}
Expand All @@ -622,7 +581,7 @@ function ProgressBar({ current, total, type, isDark }: ProgressBarProps) {
<div
className={cn(
'h-2 w-full overflow-hidden rounded-full',
isDark ? 'bg-stone-700' : 'bg-stone-200'
'bg-stone-200 dark:bg-stone-700'
)}
>
<div
Expand Down
6 changes: 1 addition & 5 deletions components/chatflow/chatflow-floating-controller.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
'use client';

import { useTheme } from '@lib/hooks/use-theme';
import { useChatflowExecutionStore } from '@lib/stores/chatflow-execution-store';
import { cn } from '@lib/utils';
import { Workflow } from 'lucide-react';
Expand Down Expand Up @@ -30,7 +29,6 @@ export function ChatflowFloatingController({
onToggleTracker,
className,
}: ChatflowFloatingControllerProps) {
const { isDark } = useTheme();
const t = useTranslations('pages.chatflow.floatingController');

// Get execution status from store
Expand Down Expand Up @@ -61,9 +59,7 @@ export function ChatflowFloatingController({
'h-12 w-12 rounded-full shadow-lg transition-all duration-200',
'flex items-center justify-center',
'hover:scale-105 hover:shadow-xl active:scale-95',
isDark
? 'border border-stone-700 bg-stone-800 text-stone-200 hover:bg-stone-700'
: 'border border-stone-200 bg-white text-stone-700 hover:bg-stone-50'
'border border-stone-200 bg-white text-stone-700 hover:bg-stone-50 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-200 dark:hover:bg-stone-700'
)}
title={isTrackerVisible ? t('hideTracker') : t('showTracker')}
>
Expand Down
Loading
Loading