tabby-tabbyspaces 0.0.1 → 0.2.0

package/src/components/workspaceEditor.component.scss

@@ -1,169 +1,322 @@
-.workspace-editor-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
+@use '../styles/index' as *;
+
+// Editor section
+.editor-section {
+  margin-bottom: $spacing-xl;
+}
+
+.section-title {
+  font-size: 11px;
+  color: var(--theme-fg-more);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: $spacing-lg;
   display: flex;
   align-items: center;
-  justify-content: center;
-  z-index: 1000;
+  gap: $spacing-sm;
 }
 
-.workspace-editor-modal {
-  background: var(--theme-bg);
-  border-radius: 12px;
-  width: 90%;
-  max-width: 700px;
-  max-height: 90vh;
-  overflow: hidden;
+// Form layout
+.form-row {
   display: flex;
-  flex-direction: column;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  gap: $spacing-lg;
+  align-items: flex-end;
 }
 
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--theme-border);
+.form-group {
+  flex: 1;
+  position: relative;
 
-  h4 {
-    margin: 0;
-    font-size: 1.25rem;
+  &.auto-width {
+    flex: none;
   }
 
-  .close-btn {
-    font-size: 1.25rem;
-    color: var(--theme-fg-more);
-    padding: 4px 8px;
+  label {
+    @include form-label;
+  }
 
-    &:hover {
-      color: var(--theme-fg);
+  .form-control {
+    @include form-input(var(--theme-bg-more));
+    width: 100%;
+    font-size: $font-sm;
+    // Override Tabby's global border reset
+    border: 1px solid var(--theme-border, $fallback-border) !important;
+
+    &:focus {
+      border-color: var(--theme-primary) !important;
     }
   }
 }
 
-.modal-body {
-  padding: 20px;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.form-row {
+// Dropdown trigger (icon picker)
+.dropdown-trigger {
   display: flex;
-  gap: 16px;
-  margin-bottom: 16px;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-sm $spacing-md;
+  background: var(--theme-bg-more);
+  border: 1px solid var(--theme-border, $fallback-border);
+  border-radius: $radius-sm;
+  cursor: pointer;
+  transition: border-color $transition-fast;
+  height: 32px;
+  box-sizing: border-box;
 
-  &:last-child {
-    margin-bottom: 0;
+  &:hover {
+    border-color: var(--theme-fg-more);
   }
 }
 
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+.dropdown-icon {
+  font-size: 14px;
+}
 
-  &.flex-grow {
-    flex: 1;
-  }
+.dropdown-chevron {
+  color: var(--theme-fg-more);
+  font-size: 10px;
+}
 
-  label {
-    font-size: 0.9rem;
-    color: var(--theme-fg-more);
+// Icon dropdown
+.icon-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: $spacing-sm;
+  padding: $spacing-md;
+  @include dropdown-panel;
+  z-index: $z-dropdown;
+  display: grid;
+  grid-template-columns: repeat(6, 28px);
+  gap: $spacing-sm;
+}
+
+.icon-option {
+  width: 28px;
+  height: 28px;
+  @include flex-center;
+  border: 1px solid transparent;
+  border-radius: $radius-sm;
+  background: transparent;
+  color: var(--theme-fg-more);
+  cursor: pointer;
+  transition: all $transition-fast;
+  font-size: 0.85rem;
+
+  &:hover {
+    background: var(--theme-bg-more-more);
+    color: var(--theme-fg);
   }
 
-  input[type='checkbox'] {
-    margin-right: 8px;
+  &.selected {
+    border-color: currentColor;
+    background: var(--theme-bg);
   }
 }
 
-.form-control {
-  padding: 8px 12px;
-  border-radius: 6px;
-  border: 1px solid var(--theme-border);
+// Color trigger (wraps native color input)
+.color-trigger {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-sm $spacing-md;
   background: var(--theme-bg-more);
-  color: var(--theme-fg);
-  font-size: 0.95rem;
+  border: 1px solid var(--theme-border, $fallback-border);
+  border-radius: $radius-sm;
+  cursor: pointer;
+  position: relative;
+  transition: border-color $transition-fast;
+  height: 32px;
+  box-sizing: border-box;
 
-  &:focus {
-    outline: none;
+  &:hover {
+    border-color: var(--theme-fg-more);
+  }
+
+  &:focus-within {
     border-color: var(--theme-primary);
   }
+
+  .color-input-hidden {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+  }
 }
 
-.color-input {
-  width: 60px;
-  height: 36px;
-  padding: 2px;
-  cursor: pointer;
+.dropdown-color {
+  width: 16px;
+  height: 16px;
+  border-radius: $radius-xs;
 }
 
-.icon-selector {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
+// Background picker
+.background-picker {
+  position: relative;
 }
 
-.icon-option {
-  width: 36px;
-  height: 36px;
+.background-trigger {
   display: flex;
   align-items: center;
-  justify-content: center;
-  border: 1px solid var(--theme-border);
-  border-radius: 6px;
+  gap: $spacing-sm;
+  padding: $spacing-sm $spacing-md;
   background: var(--theme-bg-more);
-  color: var(--theme-fg-more);
+  border: 1px solid var(--theme-border, $fallback-border);
+  border-radius: $radius-sm;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: border-color $transition-fast;
+  height: 32px;
+  box-sizing: border-box;
 
   &:hover {
-    background: var(--theme-bg-more-more);
-    color: var(--theme-fg);
+    border-color: var(--theme-fg-more);
+  }
+}
+
+.background-preview {
+  width: 48px;
+  height: 18px;
+  border-radius: $radius-xs;
+  border: 1px solid var(--theme-border, $fallback-border);
+  @include flex-center;
+  color: var(--theme-fg-more, $fallback-fg-more);
+  font-size: 10px;
+}
+
+.background-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: $spacing-sm;
+  padding: $spacing-md;
+  @include dropdown-panel;
+  z-index: $z-dropdown;
+  min-width: 260px;
+}
+
+.preset-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: $spacing-sm;
+  margin-bottom: $spacing-md;
+}
+
+.preset-option {
+  aspect-ratio: 1.5;
+  height: 32px;
+  @include flex-center;
+  border: 1px solid var(--theme-border, $fallback-border);
+  border-radius: $radius-sm;
+  cursor: pointer;
+  transition: all $transition-fast;
+  color: var(--theme-fg-more, $fallback-fg-more);
+  font-size: 10px;
+
+  &:hover {
+    border-color: var(--theme-fg-more);
   }
 
   &.selected {
     border-color: var(--theme-primary);
-    background: var(--theme-primary);
-    color: white;
+    border-width: 2px;
   }
 }
 
-.form-section {
-  margin-top: 20px;
+.custom-input-wrapper {
+  .custom-bg-input {
+    width: 100%;
+    font-size: $font-xs;
+  }
+}
 
-  .section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
+// Split preview container
+.split-preview-container {
+  background: var(--theme-bg-more);
+  border: 1px solid var(--theme-border, $fallback-border);
+  border-radius: $radius-md;
+  padding: $spacing-lg;
+}
 
-    h5 {
-      margin: 0;
-      font-size: 1rem;
-    }
-  }
+// Preview toolbar
+.preview-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: $spacing-sm;
+  margin-bottom: $spacing-lg;
+  padding-bottom: $spacing-md;
+  border-bottom: 1px solid var(--theme-border, $fallback-border);
+}
+
+.toolbar-separator {
+  width: 1px;
+  height: 18px;
+  background: var(--theme-border, $fallback-border);
+  margin: 0 $spacing-sm;
+  align-self: center;
+}
+
+.preview-btn {
+  @include icon-btn-sm;
+}
+
+// Layout preview area
+.layout-preview {
+  background: var(--theme-bg);
+  border-radius: $radius-sm;
+  min-height: 150px;
+  max-height: 200px;
+  padding: $spacing-sm;
+}
+
+// Action buttons
+.action-buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: $spacing-xl;
+  border-top: 1px solid var(--theme-border, $fallback-border);
+  margin-top: $spacing-xl;
 }
 
-.orientation-toggle {
+.checkbox-group {
   display: flex;
-  gap: 8px;
+  align-items: center;
+  gap: $spacing-sm;
 
-  .btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
+  input[type="checkbox"] {
+    width: 14px;
+    height: 14px;
+    margin: 0;
+  }
+
+  label {
+    font-size: $font-sm;
+    color: var(--theme-fg);
+    cursor: pointer;
   }
 }
 
-.modal-footer {
+.action-buttons-right {
   display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 16px 20px;
-  border-top: 1px solid var(--theme-border);
+  gap: $spacing-md;
+
+  .btn-ghost {
+    @include btn-ghost;
+  }
+
+  .btn-success {
+    @include btn-base;
+    @include btn-success;
+  }
+
+  .unsaved-indicator {
+    color: $color-warning;
+    font-weight: bold;
+    margin-left: $spacing-xs;
+  }
 }