Add support for custom labels for inline metadata (#935)

* Add support for custom labels for inline metadata

The users have the option to provide custom labels associated to certain
metadata keys. If provided, these options will be respected.

* Pass correct metadata to `MetadataValue` component

* Change `getSetting` to `useSetting` for `metaKeys` retrieval

src/components/Item/InlineMetadata.tsx

@@ -2,6 +2,7 @@ import classcat from 'classcat';
 import { useContext } from 'preact/compat';
 import { StateManager } from 'src/StateManager';
 import {
+  InlineField,
   getDataviewPlugin,
   lableToIcon,
   lableToName,
@@ -10,16 +11,34 @@ import {
 
 import { SearchContext } from '../context';
 import { c } from '../helpers';
-import { Item } from '../types';
+import { DataKey, Item, PageData } from '../types';
 import { MetadataValue } from './MetadataTable';
 
 interface InlineMetadataProps {
   item: Item;
   stateManager: StateManager;
 }
 
+function parseMetadataWithOptions(data: InlineField, metadataKeys: DataKey[]): PageData {
+  const options = metadataKeys.find((opts) => opts.metadataKey === data.key);
+
+  return options
+    ? {
+        ...options,
+        value: data.value,
+      }
+    : {
+        containsMarkdown: false,
+        label: data.key,
+        metadataKey: data.key,
+        shouldHideLabel: false,
+        value: data.value,
+      };
+}
+
 export function InlineMetadata({ item, stateManager }: InlineMetadataProps) {
   const search = useContext(SearchContext);
+  const metaKeys = stateManager.useSetting('metadata-keys');
   const moveMetadata = stateManager.useSetting('move-inline-metadata');
   const moveTaskMetadata = stateManager.useSetting('move-task-metadata');
   const { inlineMetadata } = item.data.metadata;
@@ -30,14 +49,17 @@ export function InlineMetadata({ item, stateManager }: InlineMetadataProps) {
   return (
     <span className={c('item-task-metadata')}>
       {inlineMetadata.map((m, i) => {
-        const isTaskMetadata = taskFields.has(m.key);
+        const data = parseMetadataWithOptions(m, metaKeys);
+        const { metadataKey: key, label: metaLabel, value } = data;
+        const isTaskMetadata = taskFields.has(key);
         if (!moveTaskMetadata && isTaskMetadata) return null;
         if (!moveMetadata && !isTaskMetadata) return null;
 
         const isEmoji = m.wrapping === 'emoji-shorthand';
-        const val = dataview?.api?.parse(m.value) ?? m.value;
-        const isEmojiPriority = isEmoji && m.key === 'priority';
+        const val = dataview?.api?.parse(value) ?? value;
+        const isEmojiPriority = isEmoji && key === 'priority';
         const isDate = !!val?.ts;
+
         let label = isEmoji ? lableToIcon(m.key, m.value) : lableToName(m.key);
         const slug = m.key.replace(/[^a-zA-Z0-9_]/g, '-');
 
@@ -62,13 +84,7 @@ export function InlineMetadata({ item, stateManager }: InlineMetadataProps) {
                 <MetadataValue
                   searchQuery={search?.query}
                   dateLabel={isDate ? label : undefined}
-                  data={{
-                    value: val,
-                    label: label,
-                    metadataKey: m.key,
-                    shouldHideLabel: false,
-                    containsMarkdown: false,
-                  }}
+                  data={data}
                 />
               </span>
             )}