syle compact adapted

Author: RafaelGB

src/components/HeaderMenu.tsx

@@ -8,7 +8,7 @@ import { HeaderMenuProps } from "cdm/HeaderModel";
 import header_action_button_section from "components/headerActions/HeaderActionButtonSection";
 import { HeaderActionResponse } from "cdm/HeaderActionModel";
 import header_action_types_section from "components/headerActions/HeaderActiontypesSection";
-import { TableColumn } from "cdm/FolderModel";
+import { TableColumn, TableDataType } from "cdm/FolderModel";
 
 const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   const { table, header, column } = headerMenuProps.headerProps;
@@ -283,7 +283,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                     className="menu-item sort-button"
                     onClick={() => {
                       new ColumnModal(
-                        (table.options.meta as any).view,
+                        (table.options.meta as TableDataType).view,
                         headerMenuProps
                       ).open();
                       setExpanded(false);

src/components/modals/handlers/SelectedColumnOptionsHandler.tsx

@@ -6,6 +6,7 @@ import { randomColor } from "helpers/Colors";
 import { ButtonComponent, Notice, Setting } from "obsidian";
 import React from "react";
 import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 export class SelectedColumnOptionsHandler extends AbstractColumnHandler {
   settingTitle: string = "Column Options";
@@ -78,10 +79,8 @@ export class SelectedColumnOptionsHandler extends AbstractColumnHandler {
             columnSettingsManager.reset(columnHandlerResponse);
           });
       });
-
-      ReactDOM.render(
-        <ColorPicker {...colorPickerProps} />,
-        optionContainer.settingEl.createDiv()
+      createRoot(optionContainer.settingEl.createDiv()).render(
+        <ColorPicker {...colorPickerProps} />
       );
     });
 

src/components/portals/TagsPortal.tsx

@@ -9,12 +9,13 @@ import { c } from "helpers/StylesHelper";
 import { Literal } from "obsidian-dataview/lib/data-model/value";
 import { ActionTypes } from "helpers/Constants";
 import NoteInfo from "services/NoteInfo";
-import { TableColumn } from "cdm/FolderModel";
+import { TableColumn, TableDataType } from "cdm/FolderModel";
 
 const TagsPortal = (tagsProps: TagsProps) => {
   const { intialState, column, dispatch, cellProperties, columns } = tagsProps;
-  const { row } = cellProperties;
+  const { row, table } = cellProperties;
   const tableColumn = column.columnDef as TableColumn;
+  const state = table.options.meta as TableDataType;
   // Tags reference state
   const [showSelectTags, setShowSelectTags] = useState(false);
   // tags values state
@@ -36,16 +37,21 @@ const TagsPortal = (tagsProps: TagsProps) => {
     } else {
       // In case of new tag, generate random color
       const color = randomColor();
-      dispatch({
-        columns: columns,
-        option: tag,
+      const newOption: RowSelectOption = {
+        label: tag,
         backgroundColor: color,
-        columnId: column.id,
-        type: ActionTypes.ADD_OPTION_TO_COLUMN,
+      };
+      const currentColumn = state.columns.find(
+        (col: TableColumn) => col.key === tableColumn.key
+      );
+      currentColumn.options.push(newOption);
+      state.view.diskConfig.updateColumnProperties(column.id, {
+        options: currentColumn.options,
       });
       return color;
     }
   }
+
   const defaultValue = tagsState.map((tag: string) => ({
     label: tag,
     value: tag,

src/helpers/SelectHelper.ts

@@ -2,8 +2,9 @@ import { OptionSelect } from "cdm/DatabaseModel";
 
 export function obtainUniqueOptionValues(arrayOptions: OptionSelect[]): OptionSelect[] {
     const uniqueValues: OptionSelect[] = [];
-    arrayOptions.forEach(option => {
-        if (!uniqueValues.some(unique => unique.label === option.label)) {
+    // obtain unique values
+    arrayOptions.forEach((option: OptionSelect) => {
+        if (!uniqueValues.some((uniqueOption: OptionSelect) => uniqueOption.label === option.label)) {
             uniqueValues.push(option);
         }
     });