{"id":30615818,"url":"https://github.com/nitaybz/apple-home-dashboard","last_synced_at":"2026-04-25T15:36:05.743Z","repository":{"id":309694057,"uuid":"1037202197","full_name":"nitaybz/apple-home-dashboard","owner":"nitaybz","description":"Apple Home-inspired dashboard strategy for Home Assistant","archived":false,"fork":false,"pushed_at":"2026-03-30T00:37:01.000Z","size":3441,"stargazers_count":68,"open_issues_count":16,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-25T15:35:57.761Z","etag":null,"topics":["dashboard","hacs","home-assistant","lovelace","strategy"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nitaybz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"patreon":"nitaybz","ko_fi":"nitaybz","custom":["https://paypal.me/nitaybz"]}},"created_at":"2025-08-13T08:07:57.000Z","updated_at":"2026-04-23T21:58:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"c7f4e83b-20cc-4a69-b1c3-8dbb416958e1","html_url":"https://github.com/nitaybz/apple-home-dashboard","commit_stats":null,"previous_names":["nitaybz/apple-home-dashboard"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/nitaybz/apple-home-dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitaybz%2Fapple-home-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitaybz%2Fapple-home-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitaybz%2Fapple-home-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitaybz%2Fapple-home-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitaybz","download_url":"https://codeload.github.com/nitaybz/apple-home-dashboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitaybz%2Fapple-home-dashboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32267710,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T09:15:33.318Z","status":"ssl_error","status_checked_at":"2026-04-25T09:15:31.997Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dashboard","hacs","home-assistant","lovelace","strategy"],"created_at":"2025-08-30T08:42:15.168Z","updated_at":"2026-04-25T15:36:05.697Z","avatar_url":"https://github.com/nitaybz.png","language":"TypeScript","funding_links":["https://patreon.com/nitaybz","https://ko-fi.com/nitaybz","https://paypal.me/nitaybz"],"categories":[],"sub_categories":[],"readme":"# 🏠 Apple Home Dashboard Strategy\n\nA pixel‑level Apple Home style dashboard for Home Assistant. Instantly turns your Lovelace dashboard into an iOS Home app experience: familiar layout, section structure, color language, typography, card behaviors, navigation and editing flow – all automatic.\n\n![Home Assistant](https://img.shields.io/badge/Home%20Assistant-2024%2E7%2B-03a9f4)\n![Category](https://img.shields.io/badge/Type-Dashboard%20Strategy-596677)\n![Design](https://img.shields.io/badge/Style-Apple%20Home-lightgrey)\n\n![Home Overview](assets/home_screen.png)\n\n\n\u003e Fully customizable per dashboard: every change you make (favorites, section order, hidden sections, per‑room layouts, tall/regular card toggles, background, included switches, scene \u0026 camera order, etc.) is saved inside that specific dashboard’s Lovelace config. Create multiple Apple Home dashboards (e.g. Family vs Wall Tablet vs Kids) – each keeps its own independent appearance \u0026 layout without extra YAML.\n\n## 🚀 Quick Start (2 minutes)\n1. Install\n   - HACS: Add custom repository (Dashboard), install \"Apple Home Dashboard Strategy\" (resource added automatically).  OR\n   - Manual: Download `apple-home-dashboard.js` to `/config/www/` and add a Lovelace resource: /local/apple-home-dashboard.js (Module).\n2. Create a new Dashboard (Settings → Dashboards → +) – give it a path like `apple-home` and switch it to YAML mode (Enable advanced mode in your profile if needed).\n3. Open Raw Configuration for that dashboard and paste ONLY:\n```yaml\nstrategy:\n  type: custom:apple-home-strategy\nviews: []\n```\n4. Save \u0026 refresh – the Home (My Home) view, Rooms, Groups, Scenes \u0026 Cameras generate automatically. Enter Edit mode to customize.\n\nUsing the default Overview instead: You can replace the Overview dashboard the same way (edit its Raw Configuration and set the same `strategy` block). If you want to keep the original Overview layout, create a separate dashboard instead.\n\n---\n## ✨ What You Get (Apple Home Parity Highlights)\n- Automatic My Home view with smart sections (Favorites, Status, Rooms, Groups, Scenes, Cameras)\n- True Apple Home grouping: Lights, Climate, Security, Media, Other (+ Default Room for unassigned entities)\n- One room page per Home Assistant Area – created automatically, plus a page for entities without an area\n- Group pages (Lights / Climate / Security / Media / Other) just like Apple’s category filters\n- Dedicated Scenes section/page (scenes + scripts) \u0026 Cameras sesction/page\n- Favorites section identical in behavior to Apple Home’s “Favorite Accessories” row\n- Tall vs Regular card layouts (thermostats, locks, alarms, cameras default tall – others regular)\n- Color \u0026 icon language mirroring Apple Home (active vs inactive states, functional group colors)\n- Context‑aware naming (removes redundant area names from accessory labels)\n- Clean navigation with iOS‑style header \u0026 back transitions\n- Camera tiles show latest snapshot \u0026 open live view (simple and Apple‑like)\n- Responsive adaptive grid (mobile, tablet, desktop) following Apple spacing feel\n- Readable in light or dark (neutral inactive surface, bright active surfaces)\n- RTL \u0026 multi‑language aware (mirrors layout \u0026 chevrons)\n\n\n---\n## 🧠 Automatic Behavior\nYou add the strategy – everything else is discovered:\n- Discovers all entities in your instance, groups them by Area \u0026 Domain\n- Generates “Room” pages for every Area (and a Default Room for unassigned entities)\n- Separates special domains into Scenes \u0026 Cameras sections/pages\n- Adapts iconography (garage doors vs blinds, outlets vs generic switches, locks, alarm panels, media states)\n- Applies Apple‑style active/inactive styling \u0026 tall layout defaults\n\nNo manual YAML card definitions required.\n\n---\n## 🗂 Supported Domains \u0026 Interactions\n| Domain | Behavior (Icon Tap) | Card Tap | Notes |\n|--------|---------------------|----------|-------|\n| light | Toggle | More‑info | Standard lighting behavior |\n| switch (outlet) | Toggle | More‑info | Outlets auto‑included |\n| switch (other) | (If enabled) Toggle | More‑info | Hidden by default; can enable globally or pick specific ones |\n| fan | Toggle | More‑info | Styled with climate group color |\n| cover | Open/Close | More‑info | Garage / gate icons auto detected |\n| lock | Lock/Unlock | More‑info | Tall by default |\n| alarm_control_panel | (Arm/Disarm via more‑info) | More‑info | Tall by default |\n| climate | More‑info | More‑info | Shows current temperature / mode (tall by default) |\n| media_player | Play / Pause / Power | More‑info | Active style when playing |\n| vacuum | Status display | More‑info | Tall card design with localized states (Cleaning, Docked, Returning, Paused, Idle, Error) |\n| button / input_button | Trigger | Trigger | Press actions with proper icon styling |\n| input_boolean | Toggle | More‑info | Full toggle functionality |\n| scene | Activate | Activate | Action pill style |\n| script | Run | Run | Same as scenes |\n| camera | Open live view | Open live view | Tall snapshot tile |\n| binary_sensor (smoke) | Status only | More‑info | Shows \"Detected\" / \"Not Detected\" status |\n| binary_sensor (gas) | Status only | More‑info | Shows \"Detected\" / \"Not Detected\" status with gas icon |\n| binary_sensor (flood/moisture) | Status only | More‑info | Shows \"Detected\" / \"Not Detected\" status with water alert icon |\n| sensor / other binary_sensors | Status only | More‑info | Used in Status/Security summaries |\n| Extra Accessories | Custom inclusion | More‑info | Manually include any Home Assistant entity not in standard domains |\n\n**Switch handling:** Regular switches are excluded by default (to avoid clutter from technical / helper switches). Outlets (device_class=outlet) are always shown. You can enable all switches or selectively add specific ones via customization.\n\n---\n## 🆕 Recent Improvements (v1.1.2 \u0026 v1.1.1)\n\n### Automatic Dashboard Updates\n- Dashboard now automatically adapts to changes without requiring page refresh\n  - Entity and device area changes reflect immediately\n  - Hidden, disabled, or deleted entities are automatically removed\n  - Area registry changes update instantly\n  - RTL/language changes trigger automatic re-render\n\n### Enhanced Device Support\n- **Robot Vacuum Support**: Full `vacuum` domain support with tall card design and localized state text\n- **Gas \u0026 Flood Sensors**: Added support for gas sensors and flood/moisture sensors with proper icons and \"Detected\" / \"Not Detected\" status\n- **Button Entities**: Support for `button` and `input_button` domains with press actions\n- **Input Boolean**: Full toggle functionality support\n- **Extra Accessories**: Manually include any Home Assistant entity not in standard domains\n\n### UI/UX Enhancements\n- **iOS 26 Liquid Glass Design**: Circular buttons with frosted backdrop blur and gradient glow borders\n- **Improved Drag \u0026 Drop**: Enhanced SortableJS integration with smoother touch support and variable-speed edge scrolling\n- **Responsive Breakpoint System**: 5 comprehensive breakpoints for mobile, tablet, and desktop (including single-column mode for small screens)\n- **Smart Camera Carousel**: Shows 1.5 cameras on small mobile with intelligent layout for single/dual cameras\n- **Accessibility**: `prefers-reduced-motion` support and fluid typography with `clamp()`\n\n### Bug Fixes\n- **Temperature Unit Detection**: Fixed temperature showing correct unit (°C/°F) for climate states\n- **iOS Safari Background**: Fixed background display issues on iOS Safari with pseudo-element approach\n- **Card Interactivity**: Fixed cards becoming unclickable after navigation\n- **Drag \u0026 Drop**: Fixed section reorder drag and drop after v1.1.0 updates\n\n---\n\n![Room Page](assets/room_page.png)\n\n| View Type | Purpose |\n|-----------|---------|\n| Home (My Home) | Core overview with sections \u0026 quick navigation |\n| Group Pages | Lighting, Climate, Security, Media, Other (filtered accessories) |\n| Room Pages | One per Area (room‑centric collections) |\n| Default Room | Accessories with no assigned Area |\n| Scenes | All scenes \u0026 scripts (trigger actions) |\n| Cameras | All cameras (snapshot tiles) |\n\n---\n## ⭐ Favorites\nJust like Apple Home:\n- Mark any accessory as a Favorite (appears at top of Home view)\n- Reorder Favorites in Edit Mode (drag \u0026 drop)\n- Favorites always use regular (not tall) layout for a compact grid\n\n---\n## 🧩 Sections (Home View)\n| Section | Content | Notes |\n|---------|---------|-------|\n| Favorites | Manually chosen favorites | Hidden if empty |\n| Status (Chips / Summary) | At‑a‑glance counts (e.g., lights on, locks, climate, motion) | Dynamic text \u0026 counts |\n| Rooms | First accessories for each room (tap room name to open page) | Auto omits empty rooms |\n| Groups | Inline shortcuts to group pages | Mirrors Apple’s filter chips concept |\n| Scenes | All scenes \u0026 scripts | Also has dedicated page |\n| Cameras | Camera snapshots | Opens Cameras page or live view |\n\nYou can hide or reorder sections in Edit Mode.\n\n---\n## ✏️ Edit Mode \u0026 Customization\n\n![Home Settings](assets/home_settings.png)\n![Home Settings Modal](assets/home_settings_modal.png)\n![Reorder Sections](assets/reorder_sections.png)\n\nLong‑press the header Edit toggle (or press “Edit”) to enter Edit Mode. You can:\n- Drag \u0026 drop accessories within a Room, Favorites, Scenes, Cameras, or Domain group\n- Reorder sections on the Home view\n- Hide sections you don’t want to see\n- Mark / unmark favorites\n- Toggle tall vs regular size (supported entities only: climate, lock, alarm, camera) per context\n- Reorder Scenes and Cameras individually\n- Per‑room reordering (each Room page keeps its own layout)\n- Per‑domain ordering inside Room pages (Lighting, Climate, Security, Media sub‑groups)\n\nAll changes are stored with the dashboard and persist automatically.\n\n---\n## 🎨 Visual Language\n- Active accessories: white surface, dark text, colored circular icon background (group color) – Apple style\n- Inactive: translucent dark tile, colored icon, subdued text\n- Thermostats: large temperature typography (tall layout) or compact inline (regular)\n- Scenes / Scripts: action style (no state line, clean icon)\n- Locks, alarm panels, cameras: tall for glanceable status \u0026 clarity\n- Group colors:\n  - Lights / Other (Outlets): Warm Yellow\n  - Climate / Fans / Covers: Cool Blue / Mode color accent\n  - Security (Locks, Alarm, Cameras, Sensors): Teal\n  - Media: Neutral White icon on dark / inverted when active\n\n## 🌅 Backgrounds \u0026 Appearance\nPersonalize the dashboard backdrop while keeping accessories readable. Choose or change background styles (solid, translucent, image-based or preset themes) directly from the Home settings – updates apply instantly across all views.\n\n![Background Settings](assets/home_settings_modal2.png)\n\nNotes:\n- Background persists (per dashboard) after reloads\n- Designed to maintain Apple-style contrast \u0026 legibility\n- Works with light/dark system themes\n\n---\n## 🌐 Rooms \u0026 Naming Cleanup\nAccessory names are automatically cleaned to remove redundant room/area names (mirrors Apple’s shorter labels). Example: “Living Room Lamp” in the Living Room page becomes just “Lamp”.\n\n---\n## 🔐 Security \u0026 Accessory Types\n- Garage doors / gates get dedicated icons \u0026 grouping under Security\n- Outlets distinguished from other switches\n- Alarm panels \u0026 locks elevated with tall styling\n- Motion / contact / occupancy sensors feed status summaries\n\n---\n## 📸 Cameras (User View)\n- Snapshot tile (tall) – opens live stream on tap\n- Graceful fallback icon when camera unavailable\n- Shown in Home section and full Cameras page\n\n(Underlying snapshot mechanics intentionally omitted – you just get a native feel.)\n\n---\n## 🛠 Installation\n### Option 1: HACS (Recommended)\n1. Add this repository as a Custom Repository (Category: Dashboard)\n2. Install “Apple Home Dashboard Strategy”\n3. Restart Home Assistant if prompted\n4. Add resource automatically (or manually if needed):\n   - URL: /hacsfiles/apple-home-dashboard/apple-home-dashboard.js\n   - Type: Module\n\n### Option 2: Manual\n1. Download `apple-home-dashboard.js` from the latest release\n2. Place in `/config/www/apple-home-dashboard.js`\n3. Add a Lovelace resource:\n   - Settings → Dashboards → Resources → +\n   - URL: /local/apple-home-dashboard.js\n   - Type: Module\n\n### Create the Dashboard\nCreate a new dashboard (e.g. path: `apple-home`) and set strategy:\n```yaml\nstrategy:\n  type: custom:apple-home-strategy\nviews: []\n```\nOpen the new dashboard – it will populate automatically.\n\n---\n## ⚙️ Optional Strategy Options\n| Option | Default | Description |\n|--------|---------|-------------|\n| title  | Home Assistant location_name | Custom label for the Home (My Home) view header |\n\nExample:\n```yaml\nstrategy:\n  type: custom:apple-home-strategy\n  options:\n    title: Casa\n```\n\n---\n## 🧪 Customization Reference (Settings Stored Automatically)\n| Feature | Where | Persisted | Notes |\n|---------|-------|-----------|-------|\n| Favorites | Home view | Yes | Drag reorders, remove to unfavorite |\n| Section Order | Home view | Yes | Drag entire section handles (in Edit) |\n| Hide Section | Home view | Yes | Toggle visibility in Edit |\n| Entity Order (Room) | Room page | Yes | Per room |\n| Domain Order (Room) | Room page sub‑groups | Yes | Lights / Climate / Security / Media each track order |\n| Tall Card Toggle | Entity (Edit Mode) | Yes | Per context; favorites always regular |\n| Scenes Order | Scenes page \u0026 section | Yes | Unified order |\n| Cameras Order | Cameras page \u0026 section | Yes | Unified order |\n| Switch / Outlet Inclusion | Global logic | Auto | Outlets always shown; other switches configurable (global setting planned) |\n| Background Style | Home view | Yes | (Background presets support – configurable) |\n| Hide Header / Sidebar | UI preference | Yes | Optional minimal mode |\n\nNo YAML needed for any of the above.\n\n---\n## 🔄 Updating\n1. Update via HACS (or replace the single JS file manually)\n2. Refresh the dashboard (customizations persist)\n\n---\n## 🧭 Tips\n\n- Use Areas in Home Assistant – they drive Room generation \u0026 cleaner names\n- Name scenes \u0026 scripts with friendly labels (appear exactly as given)\n- Favor short entity names; area name removal keeps things tidy\n- Use Edit Mode after first load to fine‑tune top‑level order \u0026 favorites\n\n## 📱 Mobile Experience\nOptimized for narrow viewports: adaptive grid, comfortable touch targets, and condensed header.\n\n![Mobile View](assets/mobile_view.png)\n\n---\n## ❓ FAQ (Condensed)\n| Question | Answer |\n|----------|--------|\n| Why is a room empty? | The Area has no supported entities or they’re all hidden/disabled. |\n| Where are my sensors? | Security/status‑relevant sensors feed summary/status; pure sensors may appear under Security/Other. |\n| Can I manually write card YAML? | Not needed; the strategy generates all layout. |\n| How do I reset layout? | Remove / rename the dashboard, recreate – or clear saved customizations (future UI reset button). |\n| Can I localize labels? | Uses HA language automatically (RTL supported). |\n\n---\n## 📄 License\nMIT – see `LICENSE`.\n\n---\n## 🙌 Support \u0026 Reality Check\nThis project represents weeks of focused effort refining countless tiny Apple Home interface details. A large portion of the implementation was accelerated with AI-assisted (\"vibe\") coding, then manually reviewed and polished. That means:\n- You get a lot of functionality fast\n- Edge cases may still surface\n- Feedback \u0026 issue reports are very welcome\n\nIf you find this useful and want to support continued refinement:\n- Patreon: https://patreon.com/nitaybz\n- Ko-fi: https://ko-fi.com/nitaybz\n- PayPal: https://paypal.me/nitaybz\n\nStars, shares, and kind words help too. Thank you.\n\n---\nMade with ❤️ to bring Apple’s Home experience into Home Assistant.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitaybz%2Fapple-home-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitaybz%2Fapple-home-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitaybz%2Fapple-home-dashboard/lists"}