From d4802b25243c4e43161e456ac067c1406dedef52 Mon Sep 17 00:00:00 2001
From: st4ng <st4ng@users.noreply.github.com>
Date: Wed, 14 Feb 2024 00:34:42 +0100
Subject: [PATCH] Add board custom card order (#586, #652)

---
 src/lib/stores/translations/en.json           |   4 +
 src/ui/app/onboarding/demoProject.ts          |   2 +-
 .../views/Board/BoardOptionsProvider.svelte   |   2 +-
 src/ui/views/Board/BoardView.svelte           | 182 ++++++++++++++++--
 src/ui/views/Board/board.ts                   |  82 +++++---
 src/ui/views/Board/boardView.ts               |   8 +-
 .../views/Board/components/Board/Board.svelte |  35 ++--
 .../Board/components/Board/BoardColumn.svelte |  12 +-
 .../Board/components/Board/CardList.svelte    |  51 +++--
 src/ui/views/Board/components/Board/types.ts  |  32 +++
 .../views/Board/settings/BoardSettings.svelte |  56 ++++--
 src/ui/views/Board/settings/settingsModal.ts  |   3 +
 src/ui/views/Board/types.ts                   |   3 +-
 styles.css                                    |  11 ++
 14 files changed, 382 insertions(+), 101 deletions(-)
 create mode 100644 src/ui/views/Board/components/Board/types.ts

diff --git a/src/lib/stores/translations/en.json b/src/lib/stores/translations/en.json
index d15345c0..b2f7561c 100644
--- a/src/lib/stores/translations/en.json
+++ b/src/lib/stores/translations/en.json
@@ -292,6 +292,10 @@
                     "column-width": {
                         "name": "Column width",
                         "description": "Width of each column in pixels."
+                    },
+                    "order-sync-field": {
+                        "name": "Sync card order with field",
+                        "description": "Field to store the position of cards in the board."
                     }
                 },
                 "note": {
diff --git a/src/ui/app/onboarding/demoProject.ts b/src/ui/app/onboarding/demoProject.ts
index bd8c161e..3856b296 100644
--- a/src/ui/app/onboarding/demoProject.ts
+++ b/src/ui/app/onboarding/demoProject.ts
@@ -84,7 +84,7 @@ export async function createDemoProject(vault: Vault) {
 
   const boardConfig: BoardConfig = {
     groupByField: "status",
-    priorityField: "weight",
+    orderSyncField: "weight",
   };
 
   const calendarConfig: CalendarConfig = {
diff --git a/src/ui/views/Board/BoardOptionsProvider.svelte b/src/ui/views/Board/BoardOptionsProvider.svelte
index abd43f0d..ecafa9fc 100644
--- a/src/ui/views/Board/BoardOptionsProvider.svelte
+++ b/src/ui/views/Board/BoardOptionsProvider.svelte
@@ -48,7 +48,7 @@
         includedFields={config.includeFields ?? []}
         onIncludedFieldsChange={handleIncludedFieldsChange}
         onSettings={() => {
-          new BoardSettingsModal($app, config, (value) => {
+          new BoardSettingsModal($app, config, fields, (value) => {
             onConfigChange(value);
           }).open();
         }}
diff --git a/src/ui/views/Board/BoardView.svelte b/src/ui/views/Board/BoardView.svelte
index 7632de8f..719314f4 100644
--- a/src/ui/views/Board/BoardView.svelte
+++ b/src/ui/views/Board/BoardView.svelte
@@ -1,59 +1,192 @@
 <script lang="ts">
+  import type { ProjectViewProps } from "src/customViewApi";
   import { createDataRecord } from "src/lib/dataApi";
   import type {
     DataField,
     DataFrame,
     DataRecord,
   } from "src/lib/dataframe/dataframe";
+  import { copyRecordWithValues } from "src/lib/datasources/helpers";
+  import { notUndefined } from "src/lib/helpers";
   import { i18n } from "src/lib/stores/i18n";
   import { app } from "src/lib/stores/obsidian";
   import type { ViewApi } from "src/lib/viewApi";
   import type { ProjectDefinition } from "src/settings/settings";
   import { CreateNoteModal } from "src/ui/modals/createNoteModal";
   import { EditNoteModal } from "src/ui/modals/editNoteModal";
-  import { getRecordColorContext } from "src/ui/views/helpers";
-
+  import {
+    getRecordColorContext,
+    sortRecordsContext,
+  } from "src/ui/views/helpers";
   import BoardOptionsProvider from "./BoardOptionsProvider.svelte";
-  import { getColumns } from "./board";
+  import { getColumns, getFieldByName } from "./board";
   import { Board } from "./components";
+  import type {
+    OnRecordAdd,
+    OnRecordClick,
+    OnRecordUpdate,
+    OnSortColumns,
+  } from "./components/Board/types";
   import type { BoardConfig } from "./types";
 
   export let project: ProjectDefinition;
   export let frame: DataFrame;
   export let readonly: boolean;
   export let api: ViewApi;
-  export let getRecordColor: (record: DataRecord) => string | null;
+  export let getRecordColor: ProjectViewProps["getRecordColor"];
+  export let sortRecords: ProjectViewProps["sortRecords"];
+  export let getRecord: ProjectViewProps["getRecord"];
 
   export let config: BoardConfig | undefined;
   export let onConfigChange: (cfg: BoardConfig) => void;
 
+  export let hasSort: boolean;
+  export let hasFilter: boolean;
+
   $: ({ fields, records } = frame);
+  $: orderSyncField =
+    (config?.orderSyncField && getFieldByName(fields, config.orderSyncField)) ||
+    undefined;
 
   getRecordColorContext.set(getRecordColor);
+  sortRecordsContext.set((records) =>
+    hasSort ? sortRecords(records) : [...records]
+  );
 
-  function handleRecordClick(record: DataRecord) {
+  const handleRecordClick: OnRecordClick = (record) => {
     new EditNoteModal(
       $app,
       fields,
       (record) => api.updateRecord(record, fields),
       record
     ).open();
-  }
+  };
 
   const handleRecordUpdate =
-    (field: DataField | undefined) => (column: string, record: DataRecord) => {
-      if (field) {
-        api.updateRecord(
-          copyRecordWithValues(record, {
-            [field.name]: column,
-          }),
-          fields
-        );
+    (groupByField: DataField | undefined): OnRecordUpdate =>
+    (record, { id: column, records }, trigger) => {
+      // Update record groupByField
+      if (trigger === "addToColumn" && groupByField?.name) {
+        record = copyRecordWithValues(record, {
+          [groupByField.name]: column,
+        });
+      }
+
+      // If sort or filter is active, get records from settings hand
+      // and insert record in correct position or remove it
+      let isConfigRecordsLoaded = false;
+      if (hasSort || hasFilter) {
+        const configRecords = config?.columns?.[column]?.records
+          ?.map((r) => getRecord(r))
+          .filter(notUndefined);
+
+        if (configRecords) {
+          const configRecordIndex = configRecords.findIndex(
+            (r) => r.id === record?.id
+          );
+          const isRecordInSameColumn = configRecordIndex !== -1;
+
+          if (
+            isRecordInSameColumn &&
+            (trigger === "removeFromColumn" || !hasSort)
+          ) {
+            configRecords.splice(configRecordIndex, 1);
+          }
+
+          if (trigger === "addToColumn") {
+            if (hasSort) {
+              // Sort is active, insert record at end of column if it's
+              // not the same column, or else keep position
+              if (!isRecordInSameColumn) {
+                configRecords.push(record);
+              }
+            } else if (hasFilter) {
+              // If filter is active insert record in correct position
+              // relative to records before or after it
+              const index = records.findIndex((r) => r.id === record.id);
+              const before = records[index - 1];
+              const after = records[index + 1];
+              let position: number = -1;
+
+              if (before) {
+                const beforeIndex = configRecords.findIndex(
+                  (r) => r.id === before.id
+                );
+                if (beforeIndex !== -1) position = beforeIndex + 1;
+              }
+              if (after && position === -1) {
+                position = configRecords.findIndex((r) => r.id === after.id);
+              }
+              if (position === -1) {
+                position = configRecords.length;
+              }
+
+              configRecords.splice(position, 0, record);
+            }
+          }
+
+          records = [
+            ...configRecords,
+            // In case the config is out of sync, insert any
+            // remaining records at the end
+            ...records.filter(
+              (r1) =>
+                r1.id !== record.id &&
+                !configRecords.find((r2) => r2.id === r1.id)
+            ),
+          ];
+          isConfigRecordsLoaded = true;
+        }
+      }
+
+      saveConfig({
+        ...config,
+        columns: {
+          ...config?.columns,
+          [column]: {
+            ...config?.columns?.[column],
+            records: records.map((r) => r.id),
+          },
+        },
+      });
+
+      // If record was removed from column, there is no need to update
+      // the groupBy or orderSync fields, since order is preserved on removal
+      // and the groupBy field is set on adding the record to the other column
+      if (trigger !== "removeFromColumn") {
+        const recordsToUpdate: DataRecord[] = [];
+
+        // If a sync field is defined, update it according to the order. Only
+        // update if no sort is active or records are loaded from the config,
+        // since they are sorted correctly according to custom order
+        const orderSyncFieldName = orderSyncField?.name;
+        if (orderSyncFieldName && (isConfigRecordsLoaded || !hasSort)) {
+          records.forEach((r, i) => {
+            const recordToUpdate =
+              r.id === record.id
+                ? record
+                : r.values[orderSyncFieldName] !== i && r;
+            if (recordToUpdate) {
+              recordsToUpdate.push(
+                copyRecordWithValues(recordToUpdate, {
+                  [orderSyncFieldName]: i,
+                })
+              );
+            }
+          });
+        } else {
+          recordsToUpdate.push(record);
+        }
+
+        recordsToUpdate.forEach((r, i) => {
+          api.updateRecord(r, fields);
+        });
       }
     };
 
   const handleRecordAdd =
-    (field: DataField | undefined) => (column: string) => {
+    (field: DataField | undefined): OnRecordAdd =>
+    (column: string) => {
       new CreateNoteModal($app, project, (name, templatePath) => {
         api.addRecord(
           createDataRecord(
@@ -73,16 +206,17 @@
       }).open();
     };
 
-  function handleSortColumns(names: string[]) {
+  const handleSortColumns: OnSortColumns = (names) => {
     saveConfig({
       ...config,
       columns: Object.fromEntries(
-        names.map((name, i) => {
-          return [name, { weight: i }];
-        })
+        names.map((name, i) => [
+          name,
+          { ...config?.columns?.[name], weight: i },
+        ])
       ),
     });
-  }
+  };
 
   function saveConfig(cfg: BoardConfig) {
     config = cfg;
@@ -104,7 +238,13 @@
   let:includeFields
 >
   <Board
-    columns={getColumns(records, config?.columns ?? {}, groupByField)}
+    columns={getColumns(
+      records,
+      config?.columns ?? {},
+      groupByField,
+      orderSyncField,
+      !hasSort
+    )}
     {columnWidth}
     includeFields={fields.filter((field) => includeFields.includes(field.name))}
     onRecordClick={handleRecordClick}
diff --git a/src/ui/views/Board/board.ts b/src/ui/views/Board/board.ts
index 388f9b79..a99bacbf 100644
--- a/src/ui/views/Board/board.ts
+++ b/src/ui/views/Board/board.ts
@@ -1,11 +1,11 @@
 import { get } from "svelte/store";
 
 import {
+  DataFieldType,
   isNumber,
   isString,
-  type DataRecord,
   type DataField,
-  DataFieldType,
+  type DataRecord,
 } from "src/lib/dataframe/dataframe";
 import { notEmpty } from "src/lib/helpers";
 import { i18n } from "src/lib/stores/i18n";
@@ -42,37 +42,32 @@ export function unique(records: DataRecord[], fieldName: string): string[] {
 export function getColumns(
   records: DataRecord[],
   columnSettings: ColumnSettings,
-  field?: DataField
+  grouByField?: DataField,
+  orderSyncField?: DataField,
+  sortByCustomOrder?: boolean
 ) {
-  const groupedRecords = groupRecordsByField(records, field?.name);
+  const groupedRecords = groupRecordsByField(records, grouByField?.name);
 
-  const columns = new Set<string>(
-    Object.entries(groupedRecords).map((entry) => entry[0])
-  );
+  const columns = new Set(Object.keys(groupedRecords));
 
-  if (field?.type === DataFieldType.String) {
-    for (const option of field?.typeConfig?.options ?? []) {
+  if (grouByField?.type === DataFieldType.String) {
+    grouByField?.typeConfig?.options?.forEach((option) => {
       columns.add(option);
-    }
+    });
   }
 
   return [...columns]
-    .sort((a, b) => {
-      const aweight = columnSettings[a]?.weight ?? 0;
-      const bweight = columnSettings[b]?.weight ?? 0;
-
-      if (aweight < bweight) {
-        return -1;
-      } else if (aweight > bweight) {
-        return 1;
-      } else {
-        return 0;
+    .sort(
+      (a, b) =>
+        (columnSettings[a]?.weight ?? 0) - (columnSettings[b]?.weight ?? 0)
+    )
+    .map((column) => {
+      const records = groupedRecords[column] ?? [];
+      if (sortByCustomOrder && records.length > 0) {
+        applyCustomRecordOrder(records, columnSettings[column], orderSyncField);
       }
-    })
-    .map((column) => ({
-      id: column,
-      records: groupedRecords[column] ?? [],
-    }));
+      return { id: column, records };
+    });
 }
 
 function groupRecordsByField(
@@ -82,7 +77,7 @@ function groupRecordsByField(
   const noStatus = get(i18n).t("views.board.no-status");
 
   if (!fieldName) {
-    return { [noStatus]: records };
+    return { [noStatus]: [...records] };
   }
 
   const keys = unique(records, fieldName);
@@ -112,3 +107,38 @@ function groupRecordsByField(
 
   return res;
 }
+
+/**
+ * Sorts records in place according to either order sync field if set, or to
+ * order of records in the column settings. This method mutates the array and
+ * returns a reference to the same array.
+ *
+ * @param {DataRecord[]} records - The records to be sorted.
+ * @param {ColumnSettings[string]} [columnSettings] - The column settings for sorting the records.
+ * @param {DataField} [orderSyncField] - The priority field for sorting the records.
+ * @return {DataRecord[]} The sorted records.
+ */
+function applyCustomRecordOrder(
+  records: DataRecord[],
+  columnSettings?: ColumnSettings[string],
+  orderSyncField?: DataField
+): DataRecord[] {
+  let getWeight: (record: DataRecord) => number;
+
+  if (orderSyncField?.name && orderSyncField.type === DataFieldType.Number) {
+    getWeight = (record) => {
+      const weight = record.values[orderSyncField.name];
+      return isNumber(weight) ? weight : Number.POSITIVE_INFINITY;
+    };
+  } else if (columnSettings) {
+    const weights = Object.fromEntries(
+      (columnSettings?.records ?? []).map((r, i) => [r, i])
+    );
+    getWeight = (record: DataRecord) =>
+      weights[record.id] ?? Number.POSITIVE_INFINITY;
+  } else {
+    return records;
+  }
+
+  return records.sort((a, b) => getWeight(a) - getWeight(b));
+}
diff --git a/src/ui/views/Board/boardView.ts b/src/ui/views/Board/boardView.ts
index 9160e93f..d339ac16 100644
--- a/src/ui/views/Board/boardView.ts
+++ b/src/ui/views/Board/boardView.ts
@@ -21,8 +21,8 @@ export class BoardView extends ProjectView<BoardConfig> {
     return "columns";
   }
 
-  async onData({ data }: DataQueryResult) {
-    this.view?.$set({ frame: data });
+  async onData({ data, hasSort, hasFilter }: DataQueryResult) {
+    this.view?.$set({ frame: data, hasSort, hasFilter });
   }
 
   async onOpen(props: ProjectViewProps<BoardConfig>) {
@@ -36,6 +36,10 @@ export class BoardView extends ProjectView<BoardConfig> {
         config: props.config,
         onConfigChange: props.saveConfig,
         getRecordColor: props.getRecordColor,
+        sortRecords: props.sortRecords,
+        getRecord: props.getRecord,
+        hasSort: false,
+        hasFilter: false,
       },
     });
   }
diff --git a/src/ui/views/Board/components/Board/Board.svelte b/src/ui/views/Board/components/Board/Board.svelte
index 5dadccc4..b1ea6276 100644
--- a/src/ui/views/Board/components/Board/Board.svelte
+++ b/src/ui/views/Board/components/Board/Board.svelte
@@ -1,23 +1,25 @@
 <script lang="ts">
-  import type { DataRecord, DataField } from "src/lib/dataframe/dataframe";
+  import type { DataField } from "src/lib/dataframe/dataframe";
   import { dndzone } from "svelte-dnd-action";
 
   import BoardColumn from "./BoardColumn.svelte";
-
-  type Column = {
-    id: string;
-    records: DataRecord[];
-  };
+  import type {
+    Column,
+    OnRecordAdd,
+    OnRecordClick,
+    OnRecordUpdate,
+    OnSortColumns,
+  } from "./types";
 
   export let columns: Column[];
 
   export let readonly: boolean;
   export let richText: boolean;
-  export let onRecordClick: (record: DataRecord) => void;
-  export let onRecordUpdate: (column: string, record: DataRecord) => void;
-  export let onRecordAdd: (column: string) => void;
+  export let onRecordClick: OnRecordClick;
+  export let onRecordUpdate: OnRecordUpdate;
+  export let onRecordAdd: OnRecordAdd;
   export let columnWidth: number;
-  export let onSortColumns: (names: string[]) => void;
+  export let onSortColumns: OnSortColumns;
   export let includeFields: DataField[];
 
   const flipDurationMs = 200;
@@ -54,10 +56,15 @@
       records={column.records}
       {onRecordClick}
       onRecordAdd={() => onRecordAdd(column.id)}
-      onDrop={(records) => {
-        records.forEach((record) => {
-          onRecordUpdate(column.id, record);
-        });
+      onDrop={(record, records, trigger) => {
+        switch (trigger) {
+          case "droppedIntoZone":
+            onRecordUpdate(record, { ...column, records }, "addToColumn");
+            break;
+          case "droppedIntoAnother":
+            onRecordUpdate(record, { ...column, records }, "removeFromColumn");
+            break;
+        }
       }}
       {includeFields}
     />
diff --git a/src/ui/views/Board/components/Board/BoardColumn.svelte b/src/ui/views/Board/components/Board/BoardColumn.svelte
index c61bf4e8..3fd3e484 100644
--- a/src/ui/views/Board/components/Board/BoardColumn.svelte
+++ b/src/ui/views/Board/components/Board/BoardColumn.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
   import { Button, Icon } from "obsidian-svelte";
+  import type { DataField, DataRecord } from "src/lib/dataframe/dataframe";
   import { i18n } from "src/lib/stores/i18n";
-  import ColumnHeader from "./ColumnHeader.svelte";
-
-  import type { DataRecord, DataField } from "src/lib/dataframe/dataframe";
   import CardGroup from "./CardList.svelte";
+  import ColumnHeader from "./ColumnHeader.svelte";
+  import type { OnRecordClick, OnRecordDrop } from "./types";
 
   export let name: string;
   export let records: DataRecord[];
   export let readonly: boolean;
   export let richText: boolean;
-  export let onDrop: (records: DataRecord[]) => void;
   export let includeFields: DataField[];
-
-  export let onRecordClick: (record: DataRecord) => void;
+  
+  export let onDrop: OnRecordDrop;
+  export let onRecordClick: OnRecordClick;
   export let onRecordAdd: () => void;
 </script>
 
diff --git a/src/ui/views/Board/components/Board/CardList.svelte b/src/ui/views/Board/components/Board/CardList.svelte
index 985eb511..b7b56186 100644
--- a/src/ui/views/Board/components/Board/CardList.svelte
+++ b/src/ui/views/Board/components/Board/CardList.svelte
@@ -5,34 +5,54 @@
     type DataField,
     type DataRecord,
   } from "src/lib/dataframe/dataframe";
-  import { dndzone } from "svelte-dnd-action";
-  import { getDisplayName } from "./boardHelpers";
   import { app } from "src/lib/stores/obsidian";
-  import { flip } from "svelte/animate";
-  import { getRecordColorContext } from "src/ui/views/helpers";
+  import { settings } from "src/lib/stores/settings";
   import CardMetadata from "src/ui/components/CardMetadata/CardMetadata.svelte";
   import ColorItem from "src/ui/components/ColorItem/ColorItem.svelte";
-  import { settings } from "src/lib/stores/settings";
+  import {
+    getRecordColorContext,
+    sortRecordsContext,
+  } from "src/ui/views/helpers";
+  import {
+    SHADOW_ITEM_MARKER_PROPERTY_NAME,
+    TRIGGERS,
+    dndzone,
+  } from "svelte-dnd-action";
+  import { flip } from "svelte/animate";
+  import { getDisplayName } from "./boardHelpers";
+  import type { DropTrigger, OnRecordClick, OnRecordDrop } from "./types";
 
   export let items: DataRecord[];
-  export let onRecordClick: (record: DataRecord) => void;
-  export let onDrop: (records: DataRecord[]) => void = () => {};
+  export let onRecordClick: OnRecordClick;
+  export let onDrop: OnRecordDrop;
   export let includeFields: DataField[];
 
+  const getRecordColor = getRecordColorContext.get();
+  const sortRecords = sortRecordsContext.get();
+
   const flipDurationMs = 200;
 
-  function handleDndConsider(e: CustomEvent<DndEvent<DataRecord>>) {
-    items = e.detail.items;
+  let dragItem: DataRecord | undefined;
+  function handleDndConsider({ detail }: CustomEvent<DndEvent<DataRecord>>) {
+    items = sortRecords(detail.items);
+    if (detail.info.trigger === TRIGGERS.DRAG_STARTED) {
+      dragItem = items.find((item) => item.id === detail.info.id);
+    }
   }
 
-  function handleDndFinalize(e: CustomEvent<DndEvent<DataRecord>>) {
-    items = e.detail.items;
-    if (onDrop) {
-      onDrop(e.detail.items);
+  function handleDndFinalize({ detail }: CustomEvent<DndEvent<DataRecord>>) {
+    items = sortRecords(detail.items);
+    if (detail.info.trigger === TRIGGERS.DROPPED_INTO_ZONE) {
+      dragItem = items.find((item) => item.id === detail.info.id);
+    }
+    if (dragItem) {
+      onDrop(dragItem, items, detail.info.trigger as DropTrigger);
+      dragItem = undefined;
     }
   }
 
-  const getRecordColor = getRecordColorContext.get();
+  const isPlaceholder = (item: DataRecord) =>
+    !!(item as any)[SHADOW_ITEM_MARKER_PROPERTY_NAME];
 </script>
 
 <div
@@ -46,7 +66,7 @@
     dropTargetStyle: {
       outline: "none",
       borderRadius: "5px",
-      background: "hsla(var(--interactive-accent-hsl), 0.3)",
+      background: "var(--board-column-drag-accent)",
       transition: "all 150ms ease-in-out",
     },
   }}
@@ -56,6 +76,7 @@
 
     <article
       class="projects--board--card"
+      class:projects--board--card-placeholder={isPlaceholder(item)}
       on:keypress
       on:click={() => onRecordClick(item)}
       animate:flip={{ duration: flipDurationMs }}
diff --git a/src/ui/views/Board/components/Board/types.ts b/src/ui/views/Board/components/Board/types.ts
new file mode 100644
index 00000000..a86d2766
--- /dev/null
+++ b/src/ui/views/Board/components/Board/types.ts
@@ -0,0 +1,32 @@
+import type { DataRecord } from "src/lib/dataframe/dataframe";
+import type { TRIGGERS } from "svelte-dnd-action";
+
+export type Column = {
+  id: string;
+  records: DataRecord[];
+};
+
+export type OnRecordClick = (record: DataRecord) => void;
+export type OnRecordAdd = (column: string) => void;
+export type OnRecordDrop = (
+  record: DataRecord,
+  records: DataRecord[],
+  trigger: DropTrigger
+) => void;
+export type DropTrigger =
+  | TRIGGERS.DROPPED_INTO_ANOTHER
+  | TRIGGERS.DROPPED_INTO_ZONE
+  | TRIGGERS.DROPPED_OUTSIDE_OF_ANY;
+
+export type OnRecordUpdate = (
+  record: DataRecord,
+  column: Column,
+  trigger: RecordUpdateTrigger
+) => void;
+
+export type RecordUpdateTrigger = "addToColumn" | "removeFromColumn";
+
+export type OnSortColumns = (names: string[]) => void;
+export type OnSortRecords = (
+  records: ReadonlyArray<DataRecord>
+) => DataRecord[];
diff --git a/src/ui/views/Board/settings/BoardSettings.svelte b/src/ui/views/Board/settings/BoardSettings.svelte
index b9c525ea..24111f3a 100644
--- a/src/ui/views/Board/settings/BoardSettings.svelte
+++ b/src/ui/views/Board/settings/BoardSettings.svelte
@@ -1,18 +1,40 @@
 <script lang="ts">
   import produce from "immer";
   import {
-    SettingItem,
-    NumberInput,
-    ModalLayout,
     ModalContent,
+    ModalLayout,
+    NumberInput,
+    Select,
+    SettingItem,
   } from "obsidian-svelte";
-  import type { BoardConfig } from "../types";
+  import { DataFieldType, type DataField } from "src/lib/dataframe/dataframe";
   import { i18n } from "src/lib/stores/i18n";
+  import { fieldToSelectableValue } from "../../helpers";
+  import { getFieldByName, getFieldsByType } from "../board";
+  import type { BoardConfig } from "../types";
 
   export let config: BoardConfig;
+  export let fields: DataField[];
   export let onSave: (config: BoardConfig) => void;
 
   let columnWidthValue = config.columnWidth ?? null;
+
+  $: orderSyncField = config.orderSyncField ?? "";
+  $: orderSyncDataField = orderSyncField
+    ? getFieldByName(fields, orderSyncField)
+    : undefined;
+  $: validOrderSyncFields = getFieldsByType(fields, DataFieldType.Number);
+
+  const updateConfig = <T extends keyof BoardConfig>(
+    key: T,
+    value: BoardConfig[T] | null
+  ) =>
+    onSave(
+      produce(config, (draft) => {
+        const { [key]: _, ...rest } = draft;
+        return value ? { ...rest, [key]: value } : rest;
+      })
+    );
 </script>
 
 <ModalLayout title={$i18n.t("views.board.settings.name")}>
@@ -24,16 +46,22 @@
       <NumberInput
         placeholder="270"
         bind:value={columnWidthValue}
-        on:blur={() =>
-          onSave(
-            produce(config, (draft) => {
-              const { columnWidth, ...rest } = draft;
-              if (!columnWidthValue) {
-                return rest;
-              }
-              return { ...rest, columnWidth: columnWidthValue };
-            })
-          )}
+        on:blur={() => updateConfig("columnWidth", columnWidthValue)}
+      />
+    </SettingItem>
+    <SettingItem
+      name={$i18n.t("views.board.settings.order-sync-field.name")}
+      description={$i18n.t("views.board.settings.order-sync-field.description")}
+    >
+      <Select
+        value={orderSyncDataField?.name ?? ""}
+        options={validOrderSyncFields.map(fieldToSelectableValue)}
+        placeholder={$i18n.t("views.board.fields.none") ?? ""}
+        allowEmpty
+        on:change={(event) => {
+          orderSyncField = event.detail;
+          updateConfig("orderSyncField", orderSyncField);
+        }}
       />
     </SettingItem>
   </ModalContent>
diff --git a/src/ui/views/Board/settings/settingsModal.ts b/src/ui/views/Board/settings/settingsModal.ts
index 3a913532..5e9bc0e7 100644
--- a/src/ui/views/Board/settings/settingsModal.ts
+++ b/src/ui/views/Board/settings/settingsModal.ts
@@ -1,4 +1,5 @@
 import { App, Modal } from "obsidian";
+import type { DataField } from "src/lib/dataframe/dataframe";
 import type { BoardConfig } from "../types";
 import BoardSettings from "./BoardSettings.svelte";
 
@@ -8,6 +9,7 @@ export class BoardSettingsModal extends Modal {
   constructor(
     app: App,
     readonly config: BoardConfig,
+    readonly fields: DataField[],
     readonly onSave: (config: BoardConfig) => void
   ) {
     super(app);
@@ -20,6 +22,7 @@ export class BoardSettingsModal extends Modal {
       target: contentEl,
       props: {
         config: this.config,
+        fields: this.fields,
         onSave: (config: BoardConfig) => {
           this.onSave(config);
         },
diff --git a/src/ui/views/Board/types.ts b/src/ui/views/Board/types.ts
index 46f4c82d..bc5ed263 100644
--- a/src/ui/views/Board/types.ts
+++ b/src/ui/views/Board/types.ts
@@ -1,6 +1,6 @@
 export interface BoardConfig {
   readonly groupByField?: string;
-  readonly priorityField?: string;
+  readonly orderSyncField?: string;
   readonly columnWidth?: number;
   readonly columns?: ColumnSettings;
   readonly includeFields?: string[];
@@ -9,5 +9,6 @@ export interface BoardConfig {
 export interface ColumnSettings {
   [name: string]: {
     readonly weight?: number;
+    readonly records?: string[];
   };
 }
diff --git a/styles.css b/styles.css
index 926acfa7..8392217f 100644
--- a/styles.css
+++ b/styles.css
@@ -13,6 +13,13 @@
   gap: var(--size-4-2);
   flex-direction: column;
   padding: var(--size-4-2);
+
+  --board-column-drag-accent: hsla(var(--interactive-accent-hsl), 0.3);
+  --board-column-drop-accent: hsla(var(--interactive-accent-hsl), 0.5);
+  &:has(.projects--board--card-placeholder) {
+    box-shadow: 0px 0px 8px 0px var(--board-column-drop-accent);
+    transition: box-shadow 150ms ease-in-out;
+  }
 }
 
 .projects--board--card {
@@ -31,6 +38,10 @@
   gap: var(--size-4-2);
   min-height: 35px;
   transition: all 150ms ease-in-out;
+
+  &:has(.projects--board--card-placeholder) {
+    background: var(--board-column-drop-accent) !important;
+  }
 }
 
 .projects--gallery--grid {