webui/components/sidebar/left-sidebar.html

<html>

<head>
  <script type="module">
    import { store as sidebarStore } from "/components/sidebar/sidebar-store.js";
  </script>
  <!-- Wrapper composes existing sidebar components -->
</head>

<body>
  <div x-data>
    <template x-if="$store.sidebar">
      <div class="sidebar-shell"
        @click.window="$store.sidebar.rowMenuClick($event, $refs.rowActionsMenu)"
        @keydown.escape.window="$store.sidebar.rowMenuClose()">
        <x-component path="sidebar/top-section/header-icons.html"></x-component>
        <div id="left-panel" class="panel" x-data :class="{'hidden': !$store.sidebar.isOpen}">
          <x-extension id="sidebar-start"></x-extension>
          <!--Sidebar upper elements-->
          <div class="left-panel-top no-scrollbar">
            <!-- Top Section: Quick Actions -->
            <x-component path="sidebar/top-section/sidebar-top.html"></x-component>
            <!-- Chats List -->
            <div class="config-section" id="chats-section">
              <x-component path="sidebar/chats/chats-list.html"></x-component>
            </div>

            <!-- Tasks List -->
            <div class="config-section" id="tasks-section">
              <x-component path="sidebar/tasks/tasks-list.html"></x-component>
            </div>
          </div>
          <!--Sidebar lower elements-->
          <div class="left-panel-bottom">
            <x-component path="sidebar/bottom/sidebar-bottom.html"></x-component>
          </div>
          <x-extension id="sidebar-end"></x-extension>
        </div>
        <div x-ref="rowActionsMenu" class="dropdown-menu sidebar-row-actions-menu" role="menu"
          x-show="$store.sidebar.rowMenuOpenId" x-transition :style="$store.sidebar.rowMenuStyle"
          style="display: none;" @click.stop>
          <x-extension id="sidebar-row-actions-menu"></x-extension>
        </div>
      </div>
    </template>
  </div>

  <style>
    /* Left Panel styles from index.css */
    #left-panel {
      background-color: var(--color-panel);
      border-right: 1px solid var(--color-border);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: all var(--transition-speed) ease-in-out;
      width: 250px;
      min-width: 250px;
      color: var(--color-text);
      box-shadow: 1px 0 5px rgba(0, 0, 0, 0.3);
      user-select: none;
      -webkit-user-select: none;
      /* Safari compatibility */
      height: 100vh;
      /* Ensure full height */
      overflow: hidden;
      /* Prevent overall panel overflow */
    }

    /* Ensure component host behaves like the original direct children for flex layout */
    #left-panel>.left-panel-top,
    #left-panel>.left-panel-bottom {
      display: flex;
      flex-direction: column;
    }

    #left-panel>.left-panel-top {
      flex: 1;
      min-height: 0;
      /* allow inner flex children to shrink properly */
    }

    #left-panel.hidden {
      margin-left: -250px;
    }

    .left-panel-top {
      flex: 1 1 auto;
      /* Take available space */
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
      min-height: 0;
      /* Critical for allowing flex children to shrink */
      overflow: hidden;
      justify-content: space-between;
      margin-top: 6.5rem;
      padding: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
    }

    .left-panel-bottom {
      position: relative;
      flex-shrink: 0;
      flex-grow: 0;
      /* Prevent bottom from growing */
    }

    .sidebar-row-actions-menu {
      position: fixed;
      z-index: 9999;
      margin: 0;
    }

    .config-list li.sidebar-list-divider {
      border-top: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
      margin-top: var(--spacing-xs);
      padding-top: calc(0.28rem + var(--spacing-xs));
    }

    /* Chats section container inside sidebar */
    #chats-section {
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
      min-height: 0;
      flex: 1 1 auto;
      /* Take all available space */
      max-height: 100%;
      margin-inline-start: calc(0px - var(--spacing-sm));
      width: calc(100% + var(--spacing-sm));
      overflow: hidden;
    }

    /* Tasks section container inside sidebar */
    #tasks-section {
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
      min-height: 0;
      flex: 0 0 auto;
      /* Shrink to content, no reserved space */
      max-height: 40%;
      /* Limit to 40% of viewport height when expanded */
      margin-top: 0;
      margin-inline-start: calc(0px - var(--spacing-sm));
      width: calc(100% + var(--spacing-sm));
      padding-top: var(--spacing-md);
      overflow: hidden;
    }

    #chats-section .section-header-row,
    #tasks-section .section-header {
      margin-inline-start: var(--spacing-sm);
    }

    /* Flatten wrapper elements to maintain flex chain for inner scroll containers */
    #chats-section>x-component,
    #chats-section>x-component>div[x-data],
    #tasks-section>x-component,
    #tasks-section>x-component>div[x-data],
    #tasks-section>x-component>div[x-data]>div[x-data] {
      display: contents;
    }

    /* Bootstrap collapse elements need proper display for animation to work */
    #tasks-section .collapse {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
    }

    /* During the collapsing transition, allow height animation to control size */
    #tasks-section .collapsing {
      flex: 0 0 auto !important;
    }

    /* Common section header styling (Chats, Tasks) - matching Preferences style */
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin: 0 0 0.5rem 0;
      padding: 0;
      -webkit-user-select: none;
      /* Safari compatibility */
      user-select: none;
      font-size: var(--font-size-normal);
    }

    /* Collapsible section headers (Tasks) */
    .section-header-collapsible {
      cursor: pointer;
    }

    .light-mode #left-panel {
      box-shadow: 1px 0 10px rgba(0, 0, 0, 0.1);
    }

    @media (max-width: 768px) {
      #left-panel {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 250px !important;
        /* Force width */
        min-width: 250px;
        z-index: 1003;
        transition: all var(--transition-speed) ease-in-out;
      }

      #left-panel.hidden {
        margin-left: -250px;
      }
    }

    @media (max-height: 600px) {
      #chats-section {
        min-height: 100%;
      }

      .left-panel-top {
        overflow-y: auto;
        -webkit-scroll-behavior: smooth;
        scroll-behavior: smooth;
      }
    }
  </style>
</body>

</html>