spb/drive Public

1{#2  ─────────────────────────────────────────────3   SPB Drive — Personal Cloud Drive4  ─────────────────────────────────────────────5   Author  : Simon-Pierre Boucher6   Contact : contact@spboucher.ai7   File    : src/web/views/app.njk8   Purpose : App shell — topbar, sidebar, main pane, info panel, overlays9   License : MIT © Simon-Pierre Boucher10  ─────────────────────────────────────────────11#}12{% extends "base.njk" %}13{% block title %}SPB Drive{% endblock %}14{% block body %}15<div class="shell" id="shell">16  <header class="topbar">17    <button class="btn icon ghost sidebar-toggle" id="sidebarToggle" aria-label="Menu"></button>18    <div class="brand"><div class="mark">SPB</div><span>SPB Drive</span></div>19    <div class="searchbox">20      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>21      <input id="searchInput" type="search" placeholder="Search files, tags, content…  ( / )" autocomplete="off">22    </div>23    <div class="spacer"></div>24    <button class="btn primary" id="uploadBtn">Upload</button>25    <button class="btn icon ghost" id="viewToggle" title="Toggle view (v)"></button>26    <button class="btn icon ghost" id="themeToggle" title="Toggle theme"></button>27    <button class="btn icon ghost" id="settingsBtn" title="Settings"></button>28  </header>29  <div class="body" id="body">30    <nav class="sidebar" id="sidebar">31      <button class="btn primary new-btn" id="newBtn">＋ New</button>32      <div id="navSections"></div>33      <div class="nav-section">Folders</div>34      <div class="tree" id="folderTree"></div>35      <div class="nav-section">Tags</div>36      <div id="tagList"></div>37      <div class="storage-meter" id="storageMeter"></div>38    </nav>39    <main class="main" id="main">40      <div class="toolbar" id="toolbar"></div>41      <div class="content" id="content" tabindex="0"></div>42    </main>43    <aside class="info-panel" id="infoPanel" aria-label="Details"></aside>44  </div>45</div>46<div class="drop-overlay" id="dropOverlay">47  <div class="inner">48    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 16V4m0 0 5 5m-5-5-5 5"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>49    Drop to upload here50  </div>51</div>52<nav class="bottomnav" id="bottomNav" aria-label="Navigation">53  <button data-bn="drive" aria-label="My Drive"></button>54  <button data-bn="search" aria-label="Search"></button>55  <button class="bn-fab" data-bn="new" aria-label="New"></button>56  <button data-bn="shared" aria-label="Shares"></button>57  <button data-bn="menu" aria-label="Menu"></button>58</nav>59<div class="sidebar-scrim" id="sidebarScrim"></div>60<div class="upload-panel" id="uploadPanel"></div>61<div class="toasts" id="toasts"></div>62<input type="file" id="filePick" multiple hidden>63<input type="file" id="folderPick" webkitdirectory hidden>64<script type="module" src="/assets/js/app.js"></script>65{% endblock %}66