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

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

@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { SettingsInput } from './ui/settings-input'; 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 { motion, AnimatePresence } from 'motion/react';
import { Swiper, SwiperSlide } from 'swiper/react'; import { Swiper, SwiperSlide } from 'swiper/react';
import type { Swiper as SwiperType } from 'swiper'; import type { Swiper as SwiperType } from 'swiper';
@ -190,13 +190,6 @@ function DeviceCard({ device, config, setConfig, isActive, onBrowsingChange }: D
</div> </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> <div>
<label className="text-xs font-medium text-neutral-400 uppercase tracking-wide block mb-1.5">Device Name</label> <label className="text-xs font-medium text-neutral-400 uppercase tracking-wide block mb-1.5">Device Name</label>
<SettingsInput <SettingsInput
@ -302,20 +295,17 @@ function DeviceCard({ device, config, setConfig, isActive, onBrowsingChange }: D
{deviceData.mode !== undefined && ( {deviceData.mode !== undefined && (
<div className="flex items-center justify-between"> <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 {device.physical
? <span className="text-sm text-neutral-700 px-3 py-2">{(deviceData.mode ?? 0) === 0 ? 'Read Only' : 'Write Enabled'}</span> ? <span className={`text-sm ${(deviceData.mode ?? 0) === 1 ? 'text-blue-600' : 'text-neutral-400'}`}>
: <div className="flex rounded-xl overflow-hidden text-sm bg-neutral-100"> {(deviceData.mode ?? 0) === 1 ? 'Yes' : 'No'}
{([0, 1] as const).map((val) => ( </span>
<button : <button
key={val} onClick={() => updateDeviceSetting([...getDevicePath(), 'mode'], (deviceData.mode ?? 0) === 0 ? 1 : 0)}
onClick={() => updateDeviceSetting([...getDevicePath(), 'mode'], val)} className={`relative w-12 h-6 rounded-full transition-colors ${(deviceData.mode ?? 0) === 1 ? 'bg-blue-600' : 'bg-neutral-300'}`}
className={`px-4 py-2 transition-colors ${(deviceData.mode ?? 0) === val ? 'bg-blue-600 text-white' : 'text-neutral-600 hover:bg-neutral-200'}`} >
> <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'}`} />
{val === 0 ? 'Read Only' : 'Write Enabled'} </button>
</button>
))}
</div>
} }
</div> </div>
)} )}
@ -373,13 +363,11 @@ export default function DeviceDetailOverlay({
onIndexChange, onIndexChange,
}: DeviceDetailOverlayProps) { }: DeviceDetailOverlayProps) {
const [activeIndex, setActiveIndex] = useState(initialIndex); const [activeIndex, setActiveIndex] = useState(initialIndex);
const [showCommandMenu, setShowCommandMenu] = useState(false);
const [isBrowsing, setIsBrowsing] = useState(false); const [isBrowsing, setIsBrowsing] = useState(false);
const swiperRef = useRef<SwiperType | null>(null); const swiperRef = useRef<SwiperType | null>(null);
const activeDevice = devices[activeIndex] ?? devices[0]; const activeDevice = devices[activeIndex] ?? devices[0];
useEffect(() => { setShowCommandMenu(false); }, [activeIndex]);
useEffect(() => { useEffect(() => {
const handler = (e: KeyboardEvent) => { const handler = (e: KeyboardEvent) => {
@ -431,12 +419,6 @@ export default function DeviceDetailOverlay({
{activeIndex + 1} / {devices.length} {activeIndex + 1} / {devices.length}
</span> </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 <button
onClick={onClose} onClick={onClose}
className="p-1.5 rounded-lg hover:bg-neutral-100 text-neutral-500 transition-colors" 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>
</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> </div>
{/* ── Swiper ── */} {/* ── Swiper ── */}