refactor(ui): view preferences default sort and view rework

Author: alexhb1

frontend/src/app/features/settings/view-preferences-parent/view-preferences/view-preferences.component.html

@@ -26,71 +26,15 @@ <h3 class="section-title">
 
         <div class="multi-sort-editor">
           <span class="multi-sort-label">{{ t('sortOrderLabel') }}</span>
-          <app-multi-sort-popover
-            [sortCriteria]="globalSortAsOptions"
-            [availableSortOptions]="allSortAsOptions"
-            (criteriaChange)="onGlobalSortCriteriaChange($event)">
-          </app-multi-sort-popover>
+          <app-book-browse-multi-sort-editor
+            class="block max-w-96"
+            [terms]="globalSortTerms"
+            [options]="editorSortOptions()"
+            (termsChange)="onGlobalSortTermsChange($event)" />
         </div>
-      </div>
-
-      <div class="setting-item">
-        <div class="setting-header-standalone">
-          <span class="setting-label">{{ t('visibleSortFields') }}</span>
-        </div>
-        <p class="setting-description">
-          {{ t('visibleSortFieldsDesc') }}
-          <span class="sort-field-count">({{ sortFieldSelectionCountText }})</span>
-        </p>
-        <div class="sort-field-order-editor">
-          <div
-            #sortFieldList
-            class="sort-field-order-list"
-            cdkDropList
-            [cdkDropListData]="visibleSortFields"
-            (cdkDropListDropped)="onSortFieldDrop($event)">
-            @for (f of visibleSortFields; track f; let i = $index) {
-              <div class="sort-field-order-row" cdkDrag>
-                <div class="sort-field-drag-handle" cdkDragHandle>
-                  <i class="pi pi-bars"></i>
-                </div>
-                <span class="sort-field-rank">{{ i + 1 }}.</span>
-                <span class="sort-field-label">{{ getSortFieldLabel(f) }}</span>
-                <button
-                  type="button"
-                  class="remove-sort-field-btn"
-                  (click)="removeSortField(i)"
-                  [disabled]="visibleSortFields.length <= minSortFields"
-                  [pTooltip]="t('remove')"
-                  tooltipPosition="top">
-                  <i class="pi pi-times"></i>
-                </button>
-              </div>
-            }
-          </div>
-          <div class="sort-field-actions-row">
-            @if (availableSortFieldsToAdd.length > 0 && visibleSortFields.length < maxSortFields) {
-              <p-select
-                size="small"
-                [options]="availableSortFieldsToAdd"
-                [(ngModel)]="selectedAddSortField"
-                optionLabel="label"
-                optionValue="value"
-                [placeholder]="t('addSortField')"
-                [style]="{ width: '200px' }"
-                appendTo="body"
-                (onChange)="addSortField()">
-              </p-select>
-            }
-            <button
-              type="button"
-              class="reset-sort-fields-btn"
-              (click)="resetSortFieldsToDefaults()"
-              [pTooltip]="t('resetToDefaults')"
-              tooltipPosition="top">
-              <i class="pi pi-refresh"></i>
-            </button>
-          </div>
+        <div class="format-overlay-editor">
+          <p-toggleswitch [(ngModel)]="overlayBookType"></p-toggleswitch>
+          <span class="setting-label">{{ t('formatOverlay') }}</span>
         </div>
       </div>
 
@@ -146,15 +90,8 @@ <h3 class="section-title">
                     icon="pi pi-sort"
                     size="small"
                     [outlined]="true"
-                    (onClick)="overrideSortPop.toggle($event)">
+                    (onClick)="editOverrideSort(rowIndex)">
                   </p-button>
-                  <p-popover #overrideSortPop [dismissable]="true" appendTo="body">
-                    <app-multi-sort-popover
-                      [sortCriteria]="override.sortCriteriaAsOptions"
-                      [availableSortOptions]="allSortAsOptions"
-                      (criteriaChange)="onOverrideSortCriteriaChange(rowIndex, $event)">
-                    </app-multi-sort-popover>
-                  </p-popover>
                 </td>
                 <td>
                   <p-select size="small" [options]="viewModeOptions" [(ngModel)]="override.view"

frontend/src/app/features/settings/view-preferences-parent/view-preferences/view-preferences.component.scss

@@ -73,148 +73,9 @@
   color: var(--text-color);
 }
 
-// Visible sort fields editor styles
-.sort-field-count {
-  font-weight: 500;
-  color: var(--p-primary-color);
-}
-
-.sort-field-order-editor {
-  margin-top: 0.6563rem;
-}
-
-.sort-field-order-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4375rem;
-  min-height: 40px;
-  max-height: 320px;
-  max-width: 350px;
-  overflow-y: auto;
-  margin-bottom: 0.6563rem;
-}
-
-.sort-field-order-row {
-  display: flex;
-  align-items: center;
-  gap: 0.4375rem;
-  padding: 0.4375rem 0.6563rem;
-  background-color: var(--overlay-background);
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  cursor: move;
-  transition: background-color 0.15s ease, box-shadow 0.15s ease;
-
-  &:hover {
-    background-color: var(--ground-background);
-  }
-}
-
-.cdk-drag-preview {
-  display: flex;
-  align-items: center;
-  gap: 0.4375rem;
-  padding: 0.3063rem 0.6563rem;
-  background-color: var(--card-background);
-  border: 1px solid var(--primary-color);
-  border-radius: 6px;
-  box-shadow: 0 5px 15px rgb(0 0 0 / 25%);
-}
-
-.cdk-drag-placeholder {
-  opacity: 0.3;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.sort-field-order-list.cdk-drop-list-dragging .sort-field-order-row:not(.cdk-drag-placeholder) {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.sort-field-drag-handle {
+.format-overlay-editor {
   display: flex;
   align-items: center;
-  justify-content: center;
-  color: var(--text-secondary-color);
-  cursor: grab;
-
-  &:active {
-    cursor: grabbing;
-  }
-
-  i {
-    font-size: 0.7438rem;
-  }
-}
-
-.sort-field-rank {
-  font-weight: 600;
-  color: var(--primary-color);
-  min-width: 1.5313rem;
-}
-
-.sort-field-label {
-  flex: 1;
-  font-size: var(--app-text-sm);
-  color: var(--text-color);
-}
-
-.remove-sort-field-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5313rem;
-  height: 1.5313rem;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background-color: transparent;
-  color: var(--p-red-500);
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-
-  i {
-    font-size: 0.7438rem;
-  }
-
-  &:hover:not(:disabled) {
-    background-color: var(--ground-background);
-  }
-
-  &:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-}
-
-.sort-field-actions-row {
-  display: flex;
-  align-items: center;
-  gap: 0.4375rem;
-}
-
-.reset-sort-fields-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5313rem;
-  height: 1.5313rem;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background-color: transparent;
-  color: var(--text-secondary-color);
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-
-  i {
-    font-size: 0.7438rem;
-  }
-
-  &:hover {
-    background-color: var(--ground-background);
-    color: var(--primary-color);
-  }
+  gap: 0.6563rem;
+  margin-top: 0.875rem;
 }