Update the sidebar tab rearranger to use Drag and Drop (again)

This commit is contained in:
Oliver 2026-02-22 23:53:27 -07:00
parent 60034dcee2
commit e28901dcf2
6 changed files with 213 additions and 18 deletions

View file

@ -1,15 +1,33 @@
<main>
<ol>
<div class="top-label">
{{ localize "OFT.apps.SidebarTabRearranger.top" }}
</div>
<div class="tab-list" data-tooltip-direction="UP">
<div
class="drop-zone"
data-move-to-index="0"
></div>
{{#each tabs as | tab |}}
<li>
<span class="emulate-button {{tab.icon}}"></span>
<span>{{tab.name}}</span>
<div style="flex-grow: 1"></div>
<div
class="emulate-button tab"
data-tab-id="{{tab.id}}"
data-tooltip="{{tab.name}}"
>
<span class="sidebar-icon {{tab.icon}}"></span>
<oft-icon
class="drag-handle-icon"
name="icons/drag-handle"
var:fill="currentColor"
var:fill="color-mix(in srgb, currentColor 75%, black 25%)"
var:size="1rem"
></oft-icon>
</li>
</div>
<div
class="drop-zone"
data-move-to-index="{{tab.nextIndex}}"
></div>
{{/each}}
</ol>
</div>
<div class="bottom-label">
{{ localize "OFT.apps.SidebarTabRearranger.bottom" }}
</div>
</main>