Merge pull request #87 from jingle-jew/dev

feat: add camera widgets and refine page creation, touch interactions, and responsive layouts

Author: jingle-jew

dev.html

@@ -15,7 +15,11 @@
     .dev-panel button:hover,.dev-panel select:hover{background:rgba(255,255,255,.2)}
     .dev-panel select{grid-column:1/-1;width:100%}
     @media (max-width:420px){.dev-panel{grid-template-columns:1fr;width:min(260px,calc(100vw - 24px))}.dev-panel button,.dev-panel select{width:100%}}
-    .dev-weather-panel{position:fixed;z-index:9998;left:50%;bottom:max(18px,env(safe-area-inset-bottom));translate:-50% 0;display:grid;gap:10px;width:min(620px,calc(100vw - 28px));padding:12px;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:rgba(10,10,18,.72);backdrop-filter:blur(24px) saturate(155%);box-shadow:0 22px 70px rgba(0,0,0,.36)}
+    .dev-weather-tool{position:fixed;z-index:9998;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));display:grid;justify-items:start;gap:8px}
+    .dev-weather-tool[hidden]{display:none}
+    .dev-weather-toggle{appearance:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.16);border-radius:50%;padding:0;background:rgba(10,10,18,.68);color:inherit;font:inherit;font-size:20px;cursor:pointer;backdrop-filter:blur(22px) saturate(150%);box-shadow:0 14px 42px rgba(0,0,0,.28)}
+    .dev-weather-toggle:hover,.dev-weather-toggle[aria-expanded="true"]{background:rgba(255,255,255,.18)}
+    .dev-weather-panel{position:absolute;left:0;bottom:calc(100% + 8px);display:grid;gap:10px;width:min(620px,calc(100vw - 28px));padding:12px;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:rgba(10,10,18,.72);backdrop-filter:blur(24px) saturate(155%);box-shadow:0 22px 70px rgba(0,0,0,.36)}
     .dev-weather-panel[hidden]{display:none}
     .dev-weather-panel__title{font-size:12px;font-weight:800;letter-spacing:.02em;opacity:.72}
     .dev-weather-panel__controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@@ -616,8 +620,22 @@
     }
 
     function mountDevWeatherPanel() {
+      let tool = document.querySelector("[data-dev-weather-tool]");
       let panel = document.querySelector("[data-dev-weather-panel]");
-      if (!panel) {
+      if (!tool) {
+        tool = document.createElement("div");
+        tool.className = "dev-weather-tool";
+        tool.dataset.devWeatherTool = "true";
+        tool.hidden = true;
+
+        const toggle = document.createElement("button");
+        toggle.type = "button";
+        toggle.className = "dev-weather-toggle";
+        toggle.dataset.devWeatherToggle = "true";
+        toggle.setAttribute("aria-label", "Ouvrir les contrôles météo de développement");
+        toggle.setAttribute("aria-expanded", "false");
+        toggle.textContent = "☁";
+
         panel = document.createElement("section");
         panel.className = "dev-weather-panel";
         panel.dataset.devWeatherPanel = "true";
@@ -666,20 +684,31 @@
         controls.append(weatherControl, momentControl);
 
         panel.append(title, controls);
-        document.body.append(panel);
+        toggle.addEventListener("click", () => {
+          panel.hidden = !panel.hidden;
+          toggle.setAttribute("aria-expanded", String(!panel.hidden));
+        });
+        tool.append(panel, toggle);
+        document.body.append(tool);
       }
 
       syncDevWeatherPanelVisibility();
       return panel;
     }
 
     function syncDevWeatherPanelVisibility() {
+      const tool = document.querySelector("[data-dev-weather-tool]");
       const panel = document.querySelector("[data-dev-weather-panel]");
-      if (!panel) return;
+      const toggle = document.querySelector("[data-dev-weather-toggle]");
+      if (!tool || !panel) return;
       const weatherActive = hub.dataset.weatherPageActive === "true"
         || hub.dataset.activePageType === "weather"
         || Boolean(hub.shadowRoot?.querySelector?.('.mha-page-panel[data-page-type="weather"]'));
-      panel.hidden = !weatherActive;
+      tool.hidden = !weatherActive;
+      if (!weatherActive) {
+        panel.hidden = true;
+        toggle?.setAttribute("aria-expanded", "false");
+      }
     }
 
     function observeDevWeatherPanel() {

mha-widget-hub.js

@@ -271,6 +271,8 @@ constructor(){
     setPageCreatorOpen:(open)=>{this._pageCreatorOpen=open;},
     getNewPageType:()=>this._newPageType,
     setNewPageType:(type)=>{this._newPageType=type;},
+    getNewPageName:()=>this._newPageName,
+    setNewPageName:(name)=>{this._newPageName=name;},
     getNewPageIcon:()=>this._newPageIcon,
     setNewPageIcon:(icon)=>{this._newPageIcon=icon;},
     getDockSettingsPageId:()=>this._dockSettingsPageId,

src/admin/entity-permissions.js

@@ -5,6 +5,7 @@ export const MHA_ENTITY_DOMAINS = Object.freeze([
   Object.freeze({ value: "switch", label: "Switches" }),
   Object.freeze({ value: "input_boolean", label: "Booleans" }),
   Object.freeze({ value: "button", label: "Buttons" }),
+  Object.freeze({ value: "camera", label: "Cameras" }),
   Object.freeze({ value: "weather", label: "Weather" }),
   Object.freeze({ value: "media_player", label: "Media players" }),
   Object.freeze({ value: "climate", label: "Climate" }),

src/core/hub-runtime-defaults.js

@@ -47,6 +47,7 @@ export function createHubRuntimeDefaults() {
     _pendingWidgetPlacement: null,
     _pageCreatorOpen: false,
     _newPageType: "grid",
+    _newPageName: "",
     _newPageIcon: "grid",
     _mediaPageSettingsOpen: false,
     _dockPosition: "left",

src/i18n/en.js

@@ -142,6 +142,8 @@ export const en = Object.freeze({
     pageCreatorTitle: "New page",
     pageCreatorHint: "Choose the kind of page to create.",
     pageCreatorTypeLabel: "Page type",
+    pageCreatorNameLabel: "Name",
+    pageCreatorNamePlaceholder: "Page name",
     pageCreatorIconLabel: "Dock icon",
     pageCreatorCreate: "Create page",
     addWidget: "Add widget",
@@ -447,6 +449,7 @@ export const en = Object.freeze({
       switch: "Switches",
       input_boolean: "Booleans",
       button: "Buttons",
+      camera: "Cameras",
       weather: "Weather",
       media_player: "Media players",
       climate: "Climate",
@@ -486,13 +489,22 @@ export const en = Object.freeze({
       configureSlider: "Configure slider",
       configureToggle: "Configure toggle",
       configureButton: "Configure button",
+      configureCamera: "Configure camera",
+      refresh: "Refresh",
+      refreshOptions: Object.freeze({
+        oneSecond: "Every second",
+        threeSeconds: "Every 3 seconds",
+        fiveSeconds: "Every 5 seconds",
+        onClick: "On click",
+      }),
       configureWeather: "Configure weather",
       configureMedia: "Configure media",
       configureModesRoutines: "Configure Modes & Routines",
       configureLight: "Configure light",
       sliderHint: "Choose the action, device, and display name.",
       toggleHint: "Choose the device type, entity, and display name.",
       buttonHint: "Choose an authorized entity or a Home Assistant service.",
+      cameraHint: "Choose the camera entity and the name displayed in the header.",
       weatherHint: "Choose the authorized weather entity to display.",
       mediaHint: "Choose the media player and display name.",
       scenesButtonHint: "Configure only this button with a Mode or Routine.",
@@ -505,6 +517,10 @@ export const en = Object.freeze({
       device: "Device",
       deviceType: "Device type",
       entity: "Entity",
+      cameraEntity: "Camera entity",
+      displayName: "Display name",
+      iconSearch: "Search icons",
+      iconEmpty: "No icons found",
       haDomain: "HA domain",
       haService: "HA service",
       jsonData: "JSON data",
@@ -518,6 +534,7 @@ export const en = Object.freeze({
       noWeatherEntity: "No authorized and available weather entity.",
       noMediaPlayer: "No authorized and available media player.",
       noEntity: "No authorized and available entity.",
+      noCameraEntity: "No authorized and available camera entity.",
       noMediaDevice: "No media device available",
       noLight: "No light available",
       noSwitch: "No switch available",
@@ -554,6 +571,12 @@ export const en = Object.freeze({
         input_boolean: "No boolean available",
       }),
     }),
+    camera: Object.freeze({
+      title: "Camera",
+      imageAlt: "Camera image",
+      unavailable: "Camera image unavailable",
+      refreshNow: "Refresh camera image",
+    }),
     weather: Object.freeze({
       title: "Weather",
       forecast: "Forecasts",

src/i18n/es.js

@@ -142,6 +142,8 @@ export const es = Object.freeze({
     pageCreatorTitle: "Nueva página",
     pageCreatorHint: "Elige el tipo de página que quieres crear.",
     pageCreatorTypeLabel: "Tipo de página",
+    pageCreatorNameLabel: "Nombre",
+    pageCreatorNamePlaceholder: "Nombre de la página",
     pageCreatorIconLabel: "Icono del dock",
     pageCreatorCreate: "Crear página",
     addWidget: "Añadir widget",
@@ -447,6 +449,7 @@ export const es = Object.freeze({
       switch: "Interruptores",
       input_boolean: "Booleanos",
       button: "Botones",
+      camera: "Cámaras",
       weather: "Clima",
       media_player: "Reproductores multimedia",
       climate: "Clima interior",
@@ -486,13 +489,22 @@ export const es = Object.freeze({
       configureSlider: "Configurar slider",
       configureToggle: "Configurar toggle",
       configureButton: "Configurar botón",
+      configureCamera: "Configurar cámara",
+      refresh: "Actualización",
+      refreshOptions: Object.freeze({
+        oneSecond: "Cada segundo",
+        threeSeconds: "Cada 3 segundos",
+        fiveSeconds: "Cada 5 segundos",
+        onClick: "Al hacer clic",
+      }),
       configureWeather: "Configurar clima",
       configureMedia: "Configurar media",
       configureModesRoutines: "Configurar Modes & Routines",
       configureLight: "Configurar luz",
       sliderHint: "Elige la acción, el dispositivo y el nombre mostrado.",
       toggleHint: "Elige el tipo de dispositivo, la entidad y el nombre mostrado.",
       buttonHint: "Elige una entidad autorizada o un servicio de Home Assistant.",
+      cameraHint: "Elige la entidad de cámara y el nombre mostrado en el encabezado.",
       weatherHint: "Elige la entidad de clima autorizada para mostrar.",
       mediaHint: "Elige el reproductor multimedia y el nombre mostrado.",
       scenesButtonHint: "Configura solo este botón con un Mode o una Routine.",
@@ -505,6 +517,10 @@ export const es = Object.freeze({
       device: "Dispositivo",
       deviceType: "Tipo de dispositivo",
       entity: "Entidad",
+      cameraEntity: "Entidad de cámara",
+      displayName: "Nombre mostrado",
+      iconSearch: "Buscar iconos",
+      iconEmpty: "No se encontraron iconos",
       haDomain: "Dominio HA",
       haService: "Servicio HA",
       jsonData: "Datos JSON",
@@ -518,6 +534,7 @@ export const es = Object.freeze({
       noWeatherEntity: "No hay entidad de clima autorizada y disponible.",
       noMediaPlayer: "No hay reproductor multimedia autorizado y disponible.",
       noEntity: "No hay entidad autorizada y disponible.",
+      noCameraEntity: "No hay entidad de cámara autorizada y disponible.",
       noMediaDevice: "No hay dispositivo multimedia disponible",
       noLight: "No hay luz disponible",
       noSwitch: "No hay interruptor disponible",
@@ -554,6 +571,12 @@ export const es = Object.freeze({
         input_boolean: "No hay booleano disponible",
       }),
     }),
+    camera: Object.freeze({
+      title: "Cámara",
+      imageAlt: "Imagen de la cámara",
+      unavailable: "Imagen de la cámara no disponible",
+      refreshNow: "Actualizar la imagen de la cámara",
+    }),
     weather: Object.freeze({
       title: "Clima",
       forecast: "Pronóstico",

src/i18n/fr.js

@@ -142,6 +142,8 @@ export const fr = Object.freeze({
     pageCreatorTitle: "Nouvelle page",
     pageCreatorHint: "Choisis le type de page à créer.",
     pageCreatorTypeLabel: "Type de page",
+    pageCreatorNameLabel: "Nom",
+    pageCreatorNamePlaceholder: "Nom de la page",
     pageCreatorIconLabel: "Icône du dock",
     pageCreatorCreate: "Créer la page",
     addWidget: "Ajouter un widget",
@@ -447,6 +449,7 @@ export const fr = Object.freeze({
       switch: "Interrupteurs",
       input_boolean: "Booléens",
       button: "Boutons",
+      camera: "Caméras",
       weather: "Météo",
       media_player: "Lecteurs média",
       climate: "Climat",
@@ -486,13 +489,22 @@ export const fr = Object.freeze({
       configureSlider: "Configurer le slider",
       configureToggle: "Configurer le toggle",
       configureButton: "Configurer le bouton",
+      configureCamera: "Configurer la caméra",
+      refresh: "Actualisation",
+      refreshOptions: Object.freeze({
+        oneSecond: "Chaque seconde",
+        threeSeconds: "Toutes les 3 secondes",
+        fiveSeconds: "Toutes les 5 secondes",
+        onClick: "Au clic",
+      }),
       configureWeather: "Configurer la météo",
       configureMedia: "Configurer le média",
       configureModesRoutines: "Configurer Modes & Routines",
       configureLight: "Configurer la lumière",
       sliderHint: "Choisis l’action, l’appareil et le nom affiché.",
       toggleHint: "Choisis le type d’appareil, l’entité et le nom affiché.",
       buttonHint: "Choisis une entité autorisée ou un service Home Assistant.",
+      cameraHint: "Choisis l’entité caméra et le nom affiché dans l’en-tête.",
       weatherHint: "Choisis l’entité météo autorisée à afficher.",
       mediaHint: "Choisis le lecteur média et le nom affiché.",
       scenesButtonHint: "Configure seulement ce bouton avec un Mode ou une Routine.",
@@ -505,6 +517,10 @@ export const fr = Object.freeze({
       device: "Appareil",
       deviceType: "Type d’appareil",
       entity: "Entité",
+      cameraEntity: "Entité caméra",
+      displayName: "Nom affiché",
+      iconSearch: "Rechercher une icône",
+      iconEmpty: "Aucune icône trouvée",
       haDomain: "Domaine HA",
       haService: "Service HA",
       jsonData: "Données JSON",
@@ -518,6 +534,7 @@ export const fr = Object.freeze({
       noWeatherEntity: "Aucune entité météo autorisée et disponible.",
       noMediaPlayer: "Aucun lecteur média autorisé et disponible.",
       noEntity: "Aucune entité autorisée et disponible.",
+      noCameraEntity: "Aucune entité caméra autorisée et disponible.",
       noMediaDevice: "Aucun appareil média disponible",
       noLight: "Aucune lumière disponible",
       noSwitch: "Aucun interrupteur disponible",
@@ -554,6 +571,12 @@ export const fr = Object.freeze({
         input_boolean: "Aucun booléen disponible",
       }),
     }),
+    camera: Object.freeze({
+      title: "Caméra",
+      imageAlt: "Image de la caméra",
+      unavailable: "Image de la caméra indisponible",
+      refreshNow: "Actualiser l’image de la caméra",
+    }),
     weather: Object.freeze({
       title: "Météo",
       forecast: "Prévisions",

src/layout/grid-runtime.js

@@ -181,21 +181,19 @@ export function calculateGridTrackMetrics({
   }
 
   /*
-   * Tablet/desktop keep the shell-owned panel/container rectangle, but tracks
-   * should stay square or close to square. Any excess space remains in the
-   * panel as breathing room instead of stretching widgets vertically or
-   * horizontally.
+   * Tablet/desktop keep horizontal and vertical sizing independent.
+   *
+   * A status-bar or another vertical reservation changes the available
+   * height, but it must not feed back into column width. The grid therefore
+   * continues to fill the same horizontal panel rectangle while row height
+   * adapts to the remaining vertical space. Only excessive vertical stretch
+   * is capped relative to the width-derived column size.
    */
   const safeAspectRatio = Math.max(1, Number(maxTrackAspectRatio) || 1);
-  const minUnit = Math.max(1, Math.min(unitX, unitY));
-  const maxAllowedUnit = minUnit * safeAspectRatio;
-  const columnSize = Math.max(
-    1,
-    unitX <= unitY ? unitX : Math.min(unitX, maxAllowedUnit),
-  );
+  const columnSize = Math.max(1, unitX);
   const rowSize = Math.max(
     1,
-    unitY <= unitX ? unitY : Math.min(unitY, maxAllowedUnit),
+    Math.min(unitY, columnSize * safeAspectRatio),
   );
   if (!Number.isFinite(columnSize) || !Number.isFinite(rowSize)) return null;
 

src/layout/responsive-dock-coordinator.js

@@ -247,8 +247,13 @@ export function createResponsiveDockCoordinator(host) {
     const widgetArea = grid.closest(".mha-widget-area");
     const isMobileLayout = () => isMobileLauncherLayout();
     const isLandscape = () => isMobileLandscapeLayout();
+    const isWeatherBottomDockLayout = () => (
+      !isMobileLayout()
+      && host.dataset?.activePageType === "weather"
+      && host.dataset?.dockPosition === "bottom"
+    );
 
-    if (!widgetArea || !isMobileLayout()) return;
+    if (!widgetArea || (!isMobileLayout() && !isWeatherBottomDockLayout())) return;
     if (isLandscape()) {
       host.classList.add("is-mobile-floating-controls-hidden");
       return;
@@ -268,11 +273,14 @@ export function createResponsiveDockCoordinator(host) {
     syncStatusBarFillScrollState(previousScrollTop > 4);
     const threshold = 10;
     const onScroll = () => {
-      if (!isMobileLayout() || isLandscape()) {
+      const mobileLayout = isMobileLayout();
+      const weatherBottomDockLayout = isWeatherBottomDockLayout();
+      if ((!mobileLayout && !weatherBottomDockLayout) || isLandscape()) {
         host.classList.toggle(
           "is-mobile-floating-controls-hidden",
-          isMobileLayout() && isLandscape(),
+          mobileLayout && isLandscape(),
         );
+        host.classList.remove("is-dock-hidden");
         syncStatusBarFillScrollState(false);
         previousScrollTop = getScrollTop();
         return;
@@ -281,14 +289,19 @@ export function createResponsiveDockCoordinator(host) {
       const currentScrollTop = getScrollTop();
       syncStatusBarFillScrollState(currentScrollTop > 4);
       if (currentScrollTop <= 4) {
-        host.classList.remove("is-mobile-floating-controls-hidden");
+        host.classList.remove("is-mobile-floating-controls-hidden", "is-dock-hidden");
         previousScrollTop = currentScrollTop;
         return;
       }
 
       const delta = currentScrollTop - previousScrollTop;
-      if (delta > threshold) host.classList.add("is-mobile-floating-controls-hidden");
-      else if (delta < -threshold) host.classList.remove("is-mobile-floating-controls-hidden");
+      if (delta > threshold) {
+        if (weatherBottomDockLayout) host.classList.add("is-dock-hidden");
+        else host.classList.add("is-mobile-floating-controls-hidden");
+      } else if (delta < -threshold) {
+        if (weatherBottomDockLayout) host.classList.remove("is-dock-hidden");
+        else host.classList.remove("is-mobile-floating-controls-hidden");
+      }
 
       if (Math.abs(delta) > threshold) previousScrollTop = currentScrollTop;
     };