Simplify home view and drop motion detection
- Top nav tabs (Home/Media/Cameras/Settings) replace the right-side button cluster - Home view now shows calendar 90% / todo 10% vertically; lights, locks, alarm, thermostats removed from the dashboard since the photo frame now owns the idle space and the nav covers the remaining sections - Motion detection deleted: the go2rtc-based Kitchen_Panel poll was only there to wake the screen before idle timeout, which photo-frame exit on touch replaces
This commit is contained in:
86
src/App.tsx
86
src/App.tsx
@@ -3,7 +3,6 @@ import { Dashboard } from '@/components/layout';
|
||||
import { ThermostatOverlay } from '@/components/climate';
|
||||
import { LightsOverlay } from '@/components/lights';
|
||||
import { LocksOverlay } from '@/components/locks';
|
||||
import { AlarmoPanel } from '@/components/alarm';
|
||||
import { CalendarWidget } from '@/components/calendar';
|
||||
import { TodoWidget } from '@/components/todo';
|
||||
import { SettingsPanel, ConnectionModal } from '@/components/settings';
|
||||
@@ -16,7 +15,7 @@ import { useHomeAssistant } from '@/hooks';
|
||||
import { useIdle } from '@/hooks/useIdle';
|
||||
// Motion detection now runs in Electron main process (MotionDetector.ts)
|
||||
// import { useSimpleMotion } from '@/hooks/useSimpleMotion';
|
||||
import { useHAStore, useEntityAttribute } from '@/stores/haStore';
|
||||
import { useHAStore } from '@/stores/haStore';
|
||||
import { useUIStore, useCameraOverlay } from '@/stores/uiStore';
|
||||
import { useSettingsStore } from '@/stores/settingsStore';
|
||||
import { env } from '@/config/environment';
|
||||
@@ -71,12 +70,6 @@ function PersonAlert({ cameraName, onClose }: { cameraName: string; onClose: ()
|
||||
);
|
||||
}
|
||||
|
||||
// Simple thermostat temp display
|
||||
function ThermostatTemp({ entityId }: { entityId: string }) {
|
||||
const currentTemp = useEntityAttribute<number>(entityId, 'current_temperature');
|
||||
return <>{currentTemp?.toFixed(0) ?? '--'}°</>;
|
||||
}
|
||||
|
||||
function ConnectionPrompt() {
|
||||
const openSettings = useUIStore((state) => state.openSettings);
|
||||
|
||||
@@ -104,72 +97,20 @@ function ConnectionPrompt() {
|
||||
|
||||
function DashboardContent() {
|
||||
const config = useSettingsStore((state) => state.config);
|
||||
const openLightsOverlay = useUIStore((state) => state.openLightsOverlay);
|
||||
const openLocksOverlay = useUIStore((state) => state.openLocksOverlay);
|
||||
const openThermostatsOverlay = useUIStore((state) => state.openThermostatsOverlay);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Left Column - Calendar (spans 2 columns) */}
|
||||
<div className="col-span-8 flex flex-col gap-4">
|
||||
{config.calendar && (
|
||||
<div className="flex-1 min-h-0">
|
||||
<CalendarWidget />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Column - Controls, Alarm, Todo */}
|
||||
<div className="col-span-4 flex flex-col gap-3">
|
||||
{/* Control Buttons Row - Lights, Locks, Thermostats */}
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{config.lights.length > 0 && (
|
||||
<button
|
||||
onClick={openLightsOverlay}
|
||||
className="widget flex-col items-center justify-center gap-1 py-3 hover:bg-dark-hover transition-colors cursor-pointer"
|
||||
>
|
||||
<svg className="w-6 h-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
<span className="text-xs">Lights</span>
|
||||
</button>
|
||||
)}
|
||||
{config.locks.length > 0 && (
|
||||
<button
|
||||
onClick={openLocksOverlay}
|
||||
className="widget flex-col items-center justify-center gap-1 py-3 hover:bg-dark-hover transition-colors cursor-pointer"
|
||||
>
|
||||
<svg className="w-6 h-6 text-status-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
<span className="text-xs">Locks</span>
|
||||
</button>
|
||||
)}
|
||||
{config.thermostats.map((thermostat) => (
|
||||
<button
|
||||
key={thermostat.entityId}
|
||||
onClick={openThermostatsOverlay}
|
||||
className="widget flex-col items-center justify-center gap-1 py-3 hover:bg-dark-hover transition-colors cursor-pointer"
|
||||
>
|
||||
<span className="text-xl font-light text-orange-400">
|
||||
<ThermostatTemp entityId={thermostat.entityId} />
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">{thermostat.name}</span>
|
||||
</button>
|
||||
))}
|
||||
<div className="col-span-12 flex flex-col gap-3 min-h-0">
|
||||
{config.calendar && (
|
||||
<div className="flex-[9] min-h-0">
|
||||
<CalendarWidget />
|
||||
</div>
|
||||
|
||||
{/* Alarm Panel */}
|
||||
{config.alarm && <AlarmoPanel />}
|
||||
|
||||
{/* Todo List */}
|
||||
{config.todoList && (
|
||||
<div className="flex-1 min-h-0">
|
||||
<TodoWidget />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{config.todoList && (
|
||||
<div className="flex-[1] min-h-0">
|
||||
<TodoWidget />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -191,9 +132,6 @@ export default function App() {
|
||||
const [alertCamera, setAlertCamera] = useState<string | null>(null);
|
||||
const alertShownForRef = useRef<Set<string>>(new Set());
|
||||
|
||||
// Motion detection now runs in the Electron main process (MotionDetector.ts)
|
||||
// This prevents browser throttling when the screensaver is active
|
||||
|
||||
// Report touch/click activity to main process for screen wake on Wayland
|
||||
useEffect(() => {
|
||||
const handleActivity = () => {
|
||||
|
||||
Reference in New Issue
Block a user