Test/hmitestWinform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Decentralize data fetching and add axis initialization

Browse Source 
Refactor data fetching architecture from centralized App state to
component-local data management for improved maintainability and
data freshness guarantees.

Changes:
- SettingsModal: Fetch config data on modal open
- RecipePanel: Fetch recipe list on panel open
- IOMonitorPage: Fetch IO list on page mount with real-time updates
- Remove unnecessary props drilling through component hierarchy
- Simplify App.tsx by removing centralized config/recipes state

New feature:
- Add InitializeModal for sequential axis initialization (X, Y, Z)
- Each axis initializes with 3-second staggered start
- Progress bar animation for each axis
- Auto-close on completion

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tindevil
2025-11-25 01:35:32 +09:00
parent 27cc2507cf
commit 362263ab05
10 changed files with 631 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/components/RecipePanel.tsx
View File

@@ -1,20 +1,46 @@
import React, { useState } from 'react';
import { Layers, Check, Settings, X } from 'lucide-react';
import React, { useState, useEffect } from 'react';
import { Layers, Check, Settings, X, RotateCw } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { Recipe } from '../types';
import { TechButton } from './common/TechButton';
import { comms } from '../communication';
interface RecipePanelProps {
recipes: Recipe[];
isOpen: boolean;
currentRecipe: Recipe;
onSelectRecipe: (r: Recipe) => void;
onClose: () => void;
}
export const RecipePanel: React.FC<RecipePanelProps> = ({ recipes, currentRecipe, onSelectRecipe, onClose }) => {
export const RecipePanel: React.FC<RecipePanelProps> = ({ isOpen, currentRecipe, onSelectRecipe, onClose }) => {
const navigate = useNavigate();
const [recipes, setRecipes] = useState<Recipe[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [selectedId, setSelectedId] = useState<string>(currentRecipe.id);
// Fetch recipes when panel opens
useEffect(() => {
if (isOpen) {
const fetchRecipes = async () => {
setIsLoading(true);
try {
const recipeStr = await comms.getRecipeList();
const recipeData: Recipe[] = JSON.parse(recipeStr);
setRecipes(recipeData);
} catch (e) {
console.error('Failed to fetch recipes:', e);
}
setIsLoading(false);
};
fetchRecipes();
}
}, [isOpen]);
// Update selected ID when currentRecipe changes
useEffect(() => {
setSelectedId(currentRecipe.id);
}, [currentRecipe.id]);
const handleConfirm = () => {
const selected = recipes.find(r => r.id === selectedId);
if (selected) {
@@ -23,6 +49,8 @@ export const RecipePanel: React.FC<RecipePanelProps> = ({ recipes, currentRecipe
}
};
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
<div className="w-[500px] bg-slate-950/90 border border-neon-blue/30 rounded-lg shadow-2xl flex flex-col overflow-hidden">
@@ -38,26 +66,33 @@ export const RecipePanel: React.FC<RecipePanelProps> = ({ recipes, currentRecipe
{/* List (Max height for ~5 items) */}
<div className="p-4 max-h-[320px] overflow-y-auto custom-scrollbar">
<div className="space-y-2">
{recipes.map(recipe => (
<div
key={recipe.id}
onClick={() => setSelectedId(recipe.id)}
className={`
p-3 rounded border cursor-pointer transition-all flex items-center justify-between
${selectedId === recipe.id
? 'bg-neon-blue/20 border-neon-blue text-white shadow-[0_0_10px_rgba(0,243,255,0.2)]'
: 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:border-white/20'}
`}
>
<div>
<div className="font-bold tracking-wide">{recipe.name}</div>
<div className="text-[10px] font-mono opacity-70">ID: {recipe.id} | MOD: {recipe.lastModified}</div>
{isLoading ? (
<div className="h-64 flex flex-col items-center justify-center gap-4 animate-pulse">
<RotateCw className="w-12 h-12 text-neon-blue animate-spin" />
<div className="text-lg font-tech text-neon-blue tracking-widest">LOADING RECIPES...</div>
</div>
) : (
<div className="space-y-2">
{recipes.map(recipe => (
<div
key={recipe.id}
onClick={() => setSelectedId(recipe.id)}
className={`
p-3 rounded border cursor-pointer transition-all flex items-center justify-between
${selectedId === recipe.id
? 'bg-neon-blue/20 border-neon-blue text-white shadow-[0_0_10px_rgba(0,243,255,0.2)]'
: 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:border-white/20'}
`}
>
<div>
<div className="font-bold tracking-wide">{recipe.name}</div>
<div className="text-[10px] font-mono opacity-70">ID: {recipe.id} | MOD: {recipe.lastModified}</div>
</div>
{selectedId === recipe.id && <Check className="w-4 h-4 text-neon-blue" />}
</div>
{selectedId === recipe.id && <Check className="w-4 h-4 text-neon-blue" />}
</div>
))}
</div>
))}
</div>
)}
</div>
{/* Footer Actions */}