Max Gramser
6148dfd211
The tiles draw what Home Assistant reports (a new /api/states answers for the tiles on the page); the ··· menu gets Identify (the screen's own show_alert with flash), Copy layout from another screen, Export and Import as JSON; the Alerts page opens with Try it (/api/alerts/test, one screen or all); the library filters by room and hides what is placed, with lit icons for what is on; ⌘K searches screens, entities and actions; the Update badge lists what's new from the changelog (copied into the image) and a running update shows a progress bar with the ESPHome stage and the last log line. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
41 lines
1.6 KiB
Vue
41 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onBeforeUnmount, onMounted } from "vue";
|
|
import Sidebar from "./components/Sidebar.vue";
|
|
import Toast from "./components/Toast.vue";
|
|
import CommandPalette from "./components/CommandPalette.vue";
|
|
import ScreenView from "./components/ScreenView.vue";
|
|
import EmptyState from "./components/EmptyState.vue";
|
|
import AppSettingsView from "./components/AppSettingsView.vue";
|
|
import InstallerView from "./components/InstallerView.vue";
|
|
import FirmwareView from "./components/FirmwareView.vue";
|
|
import AlertsView from "./components/AlertsView.vue";
|
|
import OverrideView from "./components/OverrideView.vue";
|
|
import { currentScreen, route, state } from "./store";
|
|
|
|
const view = computed(() => {
|
|
if (route.value === "#settings") return AppSettingsView;
|
|
if (route.value === "#new-screen") return InstallerView;
|
|
if (route.value === "#firmware") return FirmwareView;
|
|
if (route.value === "#alerts") return AlertsView;
|
|
if (route.value === "#override") return OverrideView;
|
|
return currentScreen.value && state.layout ? ScreenView : EmptyState;
|
|
});
|
|
// ⌘K (Ctrl+K) opens the search from anywhere.
|
|
function onKey(e: KeyboardEvent) {
|
|
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); state.palette = !state.palette; }
|
|
}
|
|
onMounted(() => document.addEventListener("keydown", onKey));
|
|
onBeforeUnmount(() => document.removeEventListener("keydown", onKey));
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app" :class="{ dragging: state.drag.active }">
|
|
<Sidebar />
|
|
<main class="main">
|
|
<component :is="view" />
|
|
</main>
|
|
<Toast />
|
|
<CommandPalette />
|
|
</div>
|
|
</template>
|