idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(DeviceDetailOverlay): simplify device mode display and remove unused command menu

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-14 04:05:51 -04:00
parent f05067c029
commit 29ab055177
1 changed files with 11 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/components/DeviceDetailOverlay.tsx
View File

@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { SettingsInput } from './ui/settings-input';
import { X, Printer, HardDrive, Network, Box, FolderOpen, MoreVertical, RotateCcw } from 'lucide-react';
import { X, Printer, HardDrive, Network, Box, FolderOpen } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { Swiper, SwiperSlide } from 'swiper/react';
import type { Swiper as SwiperType } from 'swiper';
@ -190,13 +190,6 @@ function DeviceCard({ device, config, setConfig, isActive, onBrowsingChange }: D
</div>
)}
<div>
<label className="text-xs font-medium text-neutral-400 uppercase tracking-wide block mb-1.5">Type</label>
<div className="px-3 py-2.5 bg-neutral-100 rounded-xl text-sm text-neutral-700">
{device.type.charAt(0).toUpperCase() + device.type.slice(1)}
</div>
</div>
<div>
<label className="text-xs font-medium text-neutral-400 uppercase tracking-wide block mb-1.5">Device Name</label>
<SettingsInput
@ -302,20 +295,17 @@ function DeviceCard({ device, config, setConfig, isActive, onBrowsingChange }: D
{deviceData.mode !== undefined && (
<div className="flex items-center justify-between">
<label className="text-sm text-neutral-500">Mode</label>
<label className="text-sm text-neutral-500">Write Enabled</label>
{device.physical
? <span className="text-sm text-neutral-700 px-3 py-2">{(deviceData.mode ?? 0) === 0 ? 'Read Only' : 'Write Enabled'}</span>
: <div className="flex rounded-xl overflow-hidden text-sm bg-neutral-100">
{([0, 1] as const).map((val) => (
<button
key={val}
onClick={() => updateDeviceSetting([...getDevicePath(), 'mode'], val)}
className={`px-4 py-2 transition-colors ${(deviceData.mode ?? 0) === val ? 'bg-blue-600 text-white' : 'text-neutral-600 hover:bg-neutral-200'}`}
? <span className={`text-sm ${(deviceData.mode ?? 0) === 1 ? 'text-blue-600' : 'text-neutral-400'}`}>
{(deviceData.mode ?? 0) === 1 ? 'Yes' : 'No'}
</span>
: <button
onClick={() => updateDeviceSetting([...getDevicePath(), 'mode'], (deviceData.mode ?? 0) === 0 ? 1 : 0)}
className={`relative w-12 h-6 rounded-full transition-colors ${(deviceData.mode ?? 0) === 1 ? 'bg-blue-600' : 'bg-neutral-300'}`}
>
{val === 0 ? 'Read Only' : 'Write Enabled'}
<div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${(deviceData.mode ?? 0) === 1 ? 'translate-x-6' : 'translate-x-0.5'}`} />
</button>
))}
</div>
}
</div>
)}
@ -373,13 +363,11 @@ export default function DeviceDetailOverlay({
onIndexChange,
}: DeviceDetailOverlayProps) {
const [activeIndex, setActiveIndex] = useState(initialIndex);
const [showCommandMenu, setShowCommandMenu] = useState(false);
const [isBrowsing, setIsBrowsing] = useState(false);
const swiperRef = useRef<SwiperType | null>(null);
const activeDevice = devices[activeIndex] ?? devices[0];
useEffect(() => { setShowCommandMenu(false); }, [activeIndex]);
useEffect(() => {
const handler = (e: KeyboardEvent) => {
@ -431,12 +419,6 @@ export default function DeviceDetailOverlay({
{activeIndex + 1} / {devices.length}
</span>
)}
<button
onClick={() => setShowCommandMenu(v => !v)}
className="p-1.5 rounded-lg hover:bg-neutral-100 text-neutral-500 transition-colors"
>
<MoreVertical className="w-5 h-5" />
</button>
<button
onClick={onClose}
className="p-1.5 rounded-lg hover:bg-neutral-100 text-neutral-500 transition-colors"
@ -446,20 +428,6 @@ export default function DeviceDetailOverlay({
</div>
</div>
{showCommandMenu && (
<div className="absolute right-4 top-full mt-1 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-neutral-200/70 py-1.5 min-w-[180px] z-20">
<button
onClick={() => {
console.log(`Reset device ${activeDevice.number}`);
setShowCommandMenu(false);
}}
className="w-full px-4 py-2.5 text-left text-sm hover:bg-neutral-100 flex items-center gap-2 text-neutral-700 transition-colors"
>
<RotateCcw className="w-4 h-4" />
Reset Device
</button>
</div>
)}
</div>
{/* ── Swiper ── */}