Refactor sidebar renders into methods (prep for mwc-list conversion)

[donkawechico]

Proposed change

The sidebar render code is large and can be a bit difficult to reason about. This PR extracts the various "sections" of sidebar into their own render methods for better readability.

This is the first step toward converting sidebar to using mwc-list instead of paper-listbox. Related PR: #7326

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue: After navigating to another dashboard or switching browser tabs Quick Bar shortcut doesn't work until page clicked #7442
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[bramkragten]

You didn't change any actual logic here right?

[donkawechico]

You didn't change any actual logic here right?

95% true. I arguably "changed the logic" with how items in edit mode are rendered. That is, I converted this flattened, in-line pattern:

protected oneRenderToRuleThemAll() {
  return html`
    <div>Spacer</div>
    ${this.isEditMode ? "Render items in edit mode" : "Render items in normal mode"}
    <div>Another Spacer</div>
    ${this.isEditMode ? "Do some edit thing" : ""}
  `
}

And refactored into self-contained / parallel renderer structures:

protected renderItems() {
  return html`
    this.editMode ? this.renderEditModeItems() : this.renderNormalModeItems()
  `;
}

protected renderEditModeItems() {
  return html`
    <div>Spacer</div>
    Render items in edit mode
    <div>Another Spacer</div>
    Do some edit thing
  `;
}

protected renderNormalMode() {
  return html`
    <div>Spacer</div>
    Render items in normal mode
    <div>Another Spacer</div>
  `;
}

In other words, you should be able to ignore everything except _renderAllPanels().