add cell tab in table inspector for showing cell content

mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte

@@ -4,6 +4,7 @@
   import type { ComponentType } from 'svelte';
   import ColumnMode from './column/ColumnMode.svelte';
   import RecordMode from './record/RecordMode.svelte';
+  import CellMode from './cell/CellMode.svelte';
 
   import TableMode from './table/TableMode.svelte';
 
@@ -24,6 +25,11 @@
       component: RecordMode,
       id: 3,
     },
+    {
+      label: 'Cell',
+      component: CellMode,
+      id: 4,
+    },
   ];
 
   let activeTab: TabItem;

mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
+    import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
+    const tabularData = getTabularDataStoreFromContext();
+    $: ({ selection, recordsData, processedColumns } = $tabularData);
+    $: ({ activeCell } = selection);
+    $: cell = $activeCell;
+    $: selectedCellValue = (() => {
+      if (cell) {
+        const rows = recordsData.getRecordRows();
+        if (rows[cell.rowIndex]) {
+          return rows[cell.rowIndex].record[cell.columnId];
+        }
+      }
+      return undefined;
+    })();
+    $: column = (() => {
+      if (cell) {
+        const processedColumn = $processedColumns.get(Number(cell.columnId));
+        if (processedColumn) {
+          return processedColumn;
+        }
+      }
+      return undefined;
+    })();
+  </script>
+
+  <div class="section-content">
+    {#if selectedCellValue !== undefined}
+      <section class="cell-content">
+        <header>Content</header>
+        <div class="content">
+          {#if column}
+            <CellFabric
+              isIndependentOfSheet={true}
+              disabled={true}
+              columnFabric={column}
+              value={selectedCellValue}
+            />
+          {/if}
+        </div>
+      </section>
+    {:else}
+      Select a cell to view it's properties.
+    {/if}
+  </div>
+
+  <style lang="scss">
+    .section-content {
+      padding: var(--size-x-small);
+      .cell-content {
+        header {
+          font-weight: 500;
+        }
+        .content {
+          word-wrap: anywhere;
+          border: 1px solid var(--slate-300);
+          padding: var(--size-xx-small);
+          border-radius: var(--border-radius-m);
+          margin-top: var(--size-x-small);
+        }
+      }
+    }
+  </style>