Add toolbox spaces and recover from stale asset bundles

website/src/styles/_tokens.scss

@@ -66,6 +66,7 @@
   --font-size-3xl: 2rem;
   --font-size-4xl: 2.5rem;
 
+  --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 0.75rem;
   --space-4: 1rem;

website/src/styles/toolboxes/_layout.scss

@@ -6,3 +6,4 @@
 @use "layout/add-tools";
 @use "layout/preferences";
 @use "layout/modules";
+@use "layout/spaces";

website/src/styles/toolboxes/_module-shell.scss

@@ -22,6 +22,11 @@
   font-size: 17px;
 }
 
+.module-space-select {
+  width: auto;
+  max-width: 150px;
+}
+
 .module-content {
   min-width: 0;
 }

website/src/styles/toolboxes/layout/_spaces.scss

@@ -0,0 +1,192 @@
+// Rôle : stylise les onglets, actions et états de dépôt des espaces toolbox.
+.toolbox-spaces-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  min-width: 0;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: rgba(16, 20, 38, 0.58);
+}
+
+.toolbox-spaces-toolbar.is-single {
+  justify-content: flex-end;
+}
+
+.toolbox-space-tabs-row {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  overflow-x: auto;
+  padding: var(--space-1);
+}
+
+.toolbox-space-tabs {
+  display: flex;
+  flex: 0 0 auto;
+  gap: var(--space-3);
+}
+
+.toolbox-space-tab-wrap {
+  position: relative;
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  min-height: 40px;
+  overflow: hidden;
+  border: 1px solid rgba(165, 180, 252, 0.14);
+  border-radius: var(--radius-md);
+  background: rgba(7, 10, 24, 0.45);
+  transition:
+    border-color var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard);
+}
+
+.toolbox-space-tab-wrap:hover:not(.active) {
+  border-color: rgba(196, 181, 253, 0.34);
+  background: rgba(139, 92, 246, 0.12);
+  box-shadow:
+    0 0 14px rgba(139, 92, 246, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.toolbox-space-tab-wrap:focus-within {
+  outline: 2px solid var(--color-accent-gold);
+  outline-offset: 2px;
+}
+
+.toolbox-space-tab-wrap.active {
+  border-color: rgba(246, 196, 83, 0.48);
+  background: rgba(246, 196, 83, 0.09);
+}
+
+.toolbox-space-tab-wrap.active:hover {
+  border-color: rgba(246, 196, 83, 0.62);
+  background: rgba(246, 196, 83, 0.13);
+}
+
+.toolbox-space-tab-wrap.is-drop-target {
+  border-color: rgba(246, 196, 83, 0.72);
+  box-shadow: none;
+}
+
+.toolbox-space-tab-wrap.is-drop-target::before {
+  position: absolute;
+  z-index: 3;
+  top: 4px;
+  bottom: 4px;
+  left: 0;
+  width: 3px;
+  border-radius: var(--radius-pill);
+  background: rgba(246, 196, 83, 0.9);
+  box-shadow: 0 0 12px rgba(246, 196, 83, 0.24);
+  content: "";
+  pointer-events: none;
+}
+
+.toolbox-space-tab-wrap.is-drop-target.drop-after::before {
+  right: 0;
+  left: auto;
+}
+
+.toolbox-space-tab-wrap.is-module-drop-target {
+  border-color: rgba(246, 196, 83, 0.72);
+  background: rgba(246, 196, 83, 0.14);
+  box-shadow: inset 0 -3px 0 rgba(246, 196, 83, 0.9);
+}
+
+.toolbox-space-tab,
+.toolbox-space-drag-handle {
+  border: 0;
+  background: transparent;
+}
+
+.toolbox-space-tab {
+  min-height: 38px;
+  padding: 0 var(--space-3) 0 var(--space-2);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+
+.toolbox-space-tab:first-child {
+  padding-inline: var(--space-3);
+}
+
+.toolbox-space-tab.active {
+  color: var(--color-text-primary);
+}
+
+.toolbox-space-tab-wrap.is-module-drop-target .toolbox-space-tab {
+  color: var(--color-accent);
+}
+
+.toolbox-space-drag-handle,
+.toolbox-space-drag-handle.nds-icon-button {
+  flex: 0 0 30px;
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
+  margin-left: var(--space-1);
+  border-right: 1px solid rgba(165, 180, 252, 0.1);
+  border-radius: var(--radius-sm);
+  cursor: grab;
+  opacity: 0.65;
+  touch-action: none;
+}
+
+.toolbox-space-tab-wrap > .toolbox-space-tab:hover:not(:disabled),
+.toolbox-space-tab-wrap > .toolbox-space-drag-handle.nds-icon-button:hover {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+.toolbox-space-tab-wrap > .toolbox-space-tab:focus-visible,
+.toolbox-space-tab-wrap > .toolbox-space-drag-handle.nds-icon-button:focus-visible {
+  outline: none;
+}
+
+.toolbox-space-tab-wrap:hover .toolbox-space-drag-handle,
+.toolbox-space-tab-wrap:focus-within .toolbox-space-drag-handle {
+  opacity: 0.9;
+}
+
+.toolbox-space-actions {
+  display: flex;
+  flex: 0 0 auto;
+  gap: var(--space-2);
+}
+
+.toolbox-space-add-compact {
+  flex: 0 0 auto;
+}
+
+.toolbox-space-empty {
+  grid-column: 1 / -1;
+  width: 100%;
+}
+
+.toolbox-space-modal {
+  width: min(440px, calc(100vw - 32px));
+}
+
+@media (max-width: 760px) {
+  .toolbox-spaces-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .toolbox-space-actions {
+    justify-content: flex-end;
+  }
+
+  .toolbox-space-add {
+    flex: 1 1 auto;
+  }
+}