[FEATURE] [HaCasa] - Personal Info Sidebar

[Waluicel]

Is your feature request related to a problem? Please describe. Currently, there is no quick and elegant way to access detailed personal information (like to-do tasks, calendar events, and status info) directly from the main interface. Navigating to separate dashboards or different cards disrupts the flow and requires multiple clicks, which can feel cumbersome.

Describe the solution you'd like I would like a new feature where clicking on the user profile icon in the header bar triggers a side navigation drawer (from the right) to smoothly slide in. This drawer would show:

• Basic personal info (name, presence status, etc.)
• Current number of open ToDo list tasks
• Next upcoming calendar events
• Optional custom fields like location, phone battery status, or home/away mode

Ideally, this drawer should be easily customizable via YAML to define which fields/info blocks are shown.

Describe alternatives you've considered Building a custom dashboard with multiple cards displayed together (but this clutters the main view).

Using pop-up cards (e.g., browser_mod popups) to display person info, but it’s less integrated and feels separate from the header bar.

Manual navigation to a separate "Person" view, which interrupts the main dashboard experience.

Why is this feature important to you? It would greatly improve the usability and flow of Home Assistant by allowing quick access to important personal info without leaving the main dashboard. It would feel more modern and app-like (similar to side profiles in mobile apps), providing better UX, faster access to ToDo tasks and appointments, and a more polished smart home experience overall.

Visual Mockups or Examples Example concept: When you tap your avatar in an app like Slack, Discord, or Google apps, a profile panel with more info appears from the side.

Rough Sketch: [Header Bar] → [Tap Profile Icon] → [Right Side Drawer: Personal Info | Tasks | Calendar]

Additional context The drawer could reuse existing components like entities or markdown cards internally. Optionally support user themes (e.g., light/dark mode matching). Should allow extensions by other integrations (e.g., fitness tracker steps, last door unlock time, etc.)

Consider touch optimization for mobile users.

[coasting24]

Not sure if such kind of slide-in card will ever be made available for HaCasa, but a basic concept could be as follows:

## Slide-In Card
##
## [configuration.yaml]
## |input_boolean:
## |  show_slide_card:
## |    initial: off  
##   
     # Button
     - type: custom:button-card
       template: hc_base_card
       entity: input_boolean.show_slide_card
       name: Person
       show_name: false
       show_icon: true
       show_label: false
       show_state: false
       styles:
         card:
           - height: 50px
           - width: 50px
           - background: var(--primary-color)
           - padding: 0px
           - right: 0% 
     # Slide-in card           
     - type: custom:button-card
       name: Slide-in-card
       show_name: true
       show_icon: false
       show_label: false
       show_state: false
       tap_action: none
       styles:
         card:
           - height: 400px
           - width: 200px
           - position: absolute
           - background: white
           - padding: 0px
           - margin-left: 0px 
           - margin-top: 0px
           - opacity: 0.9
           - z-index: 2
           - display: >
               [[[
                 if (states['input_boolean.show_slide_card'].state == "on"){
                   return 'block';
                 } else {
                   return 'none';
                 }
               ]]]
           - animation:
               - slide-in .5s ease-out
               - opacity .5s ease-in
       extra_styles: |
         @keyframes slide-in {
           0% {transform: translateX(-250px);}
           100% {transform: translateX(0);}
         }
         @keyframes opacity {
           0% {opacity:0;}
           20% {opacity:1;}
         }

https://github.com/user-attachments/assets/bf33ce89-77ab-47bb-aca3-e37d7add8cd9