MichaelScottsman--LiquidAss-Frame/docs/phase2/mockups/settings-storage.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Glass Shell P2 — Settings: Storage in selection mode (gamepad on a selected row; X / Y as ornament buttons)</title>
<link rel="stylesheet" href="kit.css">
<link rel="stylesheet" href="window-nav-shared.css">
<link rel="stylesheet" href="settings.css">
<style>
  .sto-row { gap: 20px; }
  .sto-row .lgk-art { width: 44px; height: 64px; border-radius: 10px; flex: none; background-size: cover; }
  .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; }
</style>
</head>
<body>
<div class="lgk-view" data-room="lounge">

  <div data-wn="tabbar" data-right="302" data-cy="426" data-sel="steam settings"></div>

  <div class="lgk-overlay" style="left:320px; top:66px">
    <div class="lgk-glass st-win" data-mat="window" data-dz="0" data-tier="T5 window cover (T1: smoky tint + edge cues)">
      <div data-st="sidebar" data-sel="storage"></div>
      <!-- Storage has no hero (its virtualised list sizes itself from the space it gets); the title is inline from the start -->
      <div data-st="toolbar" data-title="Storage"></div>

      <div class="st-scroll orn">
        <div class="st-col" style="top:112px">
          <!-- drive tabs: Steam's %{InstallFolder} group as a segmented control: 64 px track, contiguous segments >= 290 px -->
          <div style="display:flex; justify-content:center">
            <span class="st-seg"><span class="is-selected" style="min-width:300px">Internal · 512 GB</span><span style="min-width:300px">microSD · 256 GB</span></span>
          </div>
          <div style="margin:24px 4px 0; height:24px; border-radius:12px; background:var(--lg-fill-thick); box-shadow:inset 0 2px 4px rgb(0 0 0 / .3); overflow:hidden; display:flex">
            <span style="width:41%; background:var(--lg-blue)"></span><span style="width:6%; background:rgb(175 82 222)"></span><span style="width:4%; background:var(--lg-orange)"></span><span style="width:7%; background:rgb(40 190 80)"></span><span style="width:5%; background:rgb(160 162 170)"></span>
          </div>
          <div style="display:flex; gap:16px; margin:14px 8px 0; font:500 18px/1 var(--lg-font); color:var(--lg-text-2); white-space:nowrap">
            <span><i class="dot" style="background:var(--lg-blue)"></i>Games 210 GB</span>
            <span><i class="dot" style="background:rgb(175 82 222)"></i>Workshop 31 GB</span>
            <span><i class="dot" style="background:var(--lg-orange)"></i>Shaders 20 GB</span>
            <span><i class="dot" style="background:rgb(40 190 80)"></i>Media 36 GB</span>
            <span style="margin-left:auto; color:var(--lg-text-1)">214 GB free</span>
          </div>
          <div style="display:flex; align-items:center; margin:26px 0 12px; padding-left:26px">
            <span class="t-headline" style="flex:1; color:var(--lg-text-2); font-size:22px">Items · 17</span>
            <span class="st-pop" style="min-width:240px"><i data-i="sort" style="--is:22px; color:var(--lg-text-2)"></i>Size on Disk<i data-si="updown"></i></span>
          </div>
          <!-- selection mode (Steam's %{AppSelected} + checkbox, restyled; never seen live, T-STORE-SEL checks a detached clone):
               a leading 40 px check circle, blue when selected. Rows 80 px through T3 rowHeight, else 58 px (exemption E-ROW58).
               Gamepad focus on an app row: the row itself is the focusable, so it carries the focus -->
          <div class="st-plat">
            <div class="st-r first sto-row"><span class="st-ck on"><i data-si="check"></i></span><span class="lgk-art" data-art="poster:0:"></span><span class="lab">Starfall Drift<span class="desc">Last played yesterday</span></span><span class="val">48.2 GB</span></div>
            <div class="st-r sto-row is-focus"><span class="st-ck on"><i data-si="check"></i></span><span class="lgk-art" data-art="poster:1:"></span><span class="lab">Hollow Peaks<span class="desc">Last played 3 days ago</span></span><span class="val">31.7 GB</span></div>
            <div class="st-r sto-row"><span class="st-ck"></span><span class="lgk-art" data-art="poster:2:"></span><span class="lab">Neon Orchard<span class="desc">Last played last week</span></span><span class="val">22.9 GB</span></div>
            <div class="st-r last sto-row"><span class="st-ck"></span><span class="lgk-art" data-art="poster:3:"></span><span class="lab">Tidebreaker<span class="desc">Never played</span></span><span class="val">12.4 GB</span></div>
          </div>
        </div>
      </div>
    </div>

    <!-- the legend carries actions other than A and B, so it is the capsule ornament (PLAN §1.10), and its X / Y actions become
         clickable buttons (VP P-89). Uninstall is destructive: red Semibold label at rest, red whole fill on hover or focus.
         Gamepad mode: Steam's glyphs trail the labels; A and B are the quiet trailing members -->
    <div data-st="legend" data-mode="pad" data-legends="X:-Uninstall|Y:Move Content|A:Select|B:Back"></div>
  </div>

  <div data-wn="bar" data-cx="960" data-y="904"></div>
</div>
<script src="settings-shared.js"></script>
<script src="settings-icons.js"></script>
<script src="window-nav-shared.js"></script>
<script src="kit.js"></script>
</body>
</html>