add cell tab in table inspector for showing cell content

mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte

@@ -59,7 +59,10 @@
   on:keydown={handleKeyDown}
   hasPadding={false}
 >
-  <div class="primary-key-cell">
+  <div
+    class="primary-key-cell"
+    class:is-independent-of-sheet={isIndependentOfSheet}
+  >
     <span class="value" on:mousedown={handleValueMouseDown}>
       {#if value === undefined}
         <Default />
@@ -81,8 +84,10 @@
 </CellWrapper>
 
 <style>
-  .primary-key-cell {
+  .primary-key-cell:not(.is-independent-of-sheet) {
     position: absolute;
+  }
+  .primary-key-cell {
     top: 0;
     left: 0;
     width: 100%;

mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte

@@ -1,4 +1,13 @@
 <script lang="ts">
+  /**
+   * @file
+   *
+   * NOTICE: There is some code duplication between this file and
+   * `CellMode.svelte` used for the table view. It might be good to resolve this
+   * duplication at some point. In the mean time, be mindful of propagating
+   * changes to both files as necessary.
+   */
+
   import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
   import type QueryRunner from '../QueryRunner';
 
@@ -61,7 +70,7 @@
         font-weight: 500;
       }
       .content {
-        word-wrap: anywhere;
+        white-space: pre-wrap;
         border: 1px solid var(--slate-300);
         padding: var(--size-xx-small);
         border-radius: var(--border-radius-m);

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,80 @@
+<script lang="ts">
+  /**
+   * @file
+   *
+   * NOTICE: There is some code duplication between this file and
+   * `CellTab.svelte` used for the data explorer. It might be good to resolve
+   * this duplication at some point. In the mean time, be mindful of propagating
+   * changes to both files as necessary.
+   */
+
+  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);
+  $: ({ recordSummaries } = recordsData);
+  $: 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;
+  })();
+  $: recordSummary =
+    column &&
+    $recordSummaries.get(String(column.id))?.get(String(selectedCellValue));
+</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}
+            {recordSummary}
+          />
+        {/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 {
+        white-space: pre-wrap;
+        border: 1px solid var(--slate-300);
+        padding: var(--size-xx-small);
+        border-radius: var(--border-radius-m);
+        margin-top: var(--size-x-small);
+      }
+    }
+  }
+</style>