Show icon on view toolbar field picker (#891)

src/ui/views/Board/BoardOptions.svelte

@@ -4,7 +4,7 @@
   import { Field } from "src/ui/components/Field";
   import { SwitchSelect } from "../Table/components/SwitchSelect";
   import { i18n } from "src/lib/stores/i18n";
-  import { fieldToSelectableValue } from "../helpers";
+  import { fieldIcon, fieldToSelectableValue } from "../helpers";
   import { getFieldsByType } from "./board";
   import { DataFieldType, type DataField } from "src/lib/dataframe/dataframe";
   import { getFieldByName } from "src/ui/app/toolbar/viewOptions/filter/helpers";
@@ -81,6 +81,7 @@
   label={$i18n.t("views.board.include-fields")}
   items={fields.map((field) => ({
     label: field.name,
+    icon: fieldIcon(field),
     value: field.name,
     enabled: includedFields.includes(field.name),
   }))}

src/ui/views/Gallery/GalleryOptionsProvider.svelte

@@ -10,7 +10,7 @@
     ViewToolbar,
   } from "src/ui/components/Layout";
   import { SwitchSelect } from "../Table/components/SwitchSelect";
-  import { fieldToSelectableValue } from "../helpers";
+  import { fieldIcon, fieldToSelectableValue } from "../helpers";
   import type { GalleryConfig } from "./types";
 
   export let fields: DataField[];
@@ -80,6 +80,7 @@
           label={$i18n.t("views.gallery.include-fields")}
           items={fields.map((field) => ({
             label: field.name,
+            icon: fieldIcon(field),
             value: field.name,
             enabled: !!config?.includeFields?.includes(field.name),
           }))}

src/ui/views/Table/TableView.svelte

@@ -32,6 +32,7 @@
   import { CreateFieldModal } from "src/ui/modals/createFieldModal";
   import { Icon } from "obsidian-svelte";
   import { TextLabel } from "./components/DataGrid/GridCell/GridTextCell";
+  import { fieldIcon } from "../helpers";
 
   export let project: ProjectDefinition;
   export let frame: DataFrame;
@@ -49,6 +50,11 @@
     onConfigChange(cfg);
   }
 
+  export function getFieldTypeByName(name: string): DataFieldType | undefined {
+    const field = fields.find((field) => name === field.name);
+    return field?.type;
+  }
+
   $: ({ fields, records } = frame);
 
   $: {
@@ -216,6 +222,7 @@
           label={$i18n.t("views.table.hide-fields")}
           items={columns.map((column) => ({
             label: column.field,
+            icon: fieldIcon(column),
             value: column.field,
             enabled: !column.hide,
           }))}

src/ui/views/Table/components/DataGrid/GridHeader/GridColumnHeader.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
   import type { Menu } from "obsidian";
   import { Icon, IconButton } from "obsidian-svelte";
-  import { DataFieldType } from "src/lib/dataframe/dataframe";
-  import { i18n } from "src/lib/stores/i18n";
-  import { get } from "svelte/store";
-  import { fieldIcon } from "src/ui/views/helpers";
+  import { fieldIcon, fieldDisplayText } from "src/ui/views/helpers";
   import type { GridColDef } from "../dataGrid";
   import { TextLabel } from "../GridCell";
 
@@ -28,20 +25,7 @@
   style:width={`${column.width}px`}
   class:pinned={column.pinned}
 >
-  {#if column.repeated}
-    {#if column.field == "tags"}
-      <Icon name="tags" tooltip={get(i18n).t(`data-types.tags`) ?? ""} />
-    {:else if column.field == "aliases"}
-      <Icon name="forward" tooltip={get(i18n).t(`data-types.aliases`) ?? ""} />
-    {:else}
-      <Icon name="list" tooltip={get(i18n).t(`data-types.list`) ?? ""} />
-    {/if}
-  {:else}
-    <Icon
-      name={fieldIcon(column.type ?? DataFieldType.Unknown)}
-      tooltip={get(i18n).t(`data-types.${column.type}`) ?? ""}
-    />
-  {/if}
+  <Icon name={fieldIcon(column)} tooltip={fieldDisplayText(column)} />
 
   <TextLabel value={column.field} />
 

src/ui/views/Table/components/SwitchSelect/SwitchSelect.svelte

@@ -2,6 +2,7 @@
   import { Menu, MenuItem } from "obsidian-svelte";
   interface SwitchItem {
     readonly label: string;
+    readonly icon?: string;
     readonly value: string;
     readonly enabled: boolean;
   }
@@ -25,8 +26,9 @@
 </div>
 
 <Menu anchorEl={ref} open={isOpen} onClose={() => (isOpen = false)}>
-  {#each items as { label, value, enabled }}
+  {#each items as { label, icon, value, enabled }}
     <MenuItem
+      {icon}
       {label}
       checked={enabled}
       on:check={({ detail: checked }) => onChange(value, checked)}

src/ui/views/helpers.ts

@@ -3,9 +3,21 @@ import { DataFieldType, type DataField } from "../../lib/dataframe/dataframe";
 import type { ViewProps } from "../app/useView";
 import type { Menu } from "obsidian";
 
-export function fieldIcon(field: DataFieldType): string {
-  switch (field) {
+import { i18n } from "src/lib/stores/i18n";
+import { get } from "svelte/store";
+
+export function fieldIcon(field: DataField): string {
+  switch (field.type) {
     case DataFieldType.String:
+      if (field.repeated) {
+        switch (field.name) {
+          case "tags":
+            return "tags";
+          case "aliases":
+            return "forward";
+        }
+        return "list";
+      }
       return "text";
     case DataFieldType.Number:
       return "binary";
@@ -17,6 +29,29 @@ export function fieldIcon(field: DataFieldType): string {
   return "file-question";
 }
 
+export function fieldDisplayText(field: DataField): string {
+  switch (field.type) {
+    case DataFieldType.String:
+      if (field.repeated) {
+        switch (field.name) {
+          case "tags":
+            return get(i18n).t("data-types.tags");
+          case "aliases":
+            return get(i18n).t("data-types.aliases");
+        }
+        return get(i18n).t("data-types.list");
+      }
+      return get(i18n).t("data-types.string");
+    case DataFieldType.Number:
+      return get(i18n).t("data-types.number");
+    case DataFieldType.Boolean:
+      return get(i18n).t("data-types.boolean");
+    case DataFieldType.Date:
+      return get(i18n).t("data-types.date");
+  }
+  return get(i18n).t("data-types.unknown");
+}
+
 export function fieldToSelectableValue(field: DataField): {
   label: string;
   value: string;