Fix: Display error page for non-existent records instead of blank form (fixes #4896)

mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte

@@ -127,7 +127,14 @@
     {#if !disabled}
       <button
         class="dropdown-button passthrough"
-        on:click={launchRecordSelector}
+        on:click={(event) => {
+          if (event.shiftKey) {
+            // Do not open the record selector on Shift+click
+            event.stopPropagation();
+            return;
+          }
+          void launchRecordSelector(event);
+        }}
         aria-label={$_('pick_record')}
         title={$_('pick_record')}
       >

mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordInput.svelte

@@ -119,7 +119,12 @@
     }
   }
 
-  async function toggleRecordSelector() {
+  async function toggleRecordSelector(event: MouseEvent | KeyboardEvent) {
+    if (event.shiftKey) {
+      // Ignore when Shift is pressed to allow multi-selection
+      event.stopPropagation();
+      return;
+    }
     // I added `tick` because I was observing a race condition when opening a
     // nested record selector. It would open correctly about 80% of the time.
     // But 20% of the time it would not open because it would cancel.
@@ -136,7 +141,7 @@
     switch (e.key) {
       case 'Enter':
         if (e.target === element) {
-          void toggleRecordSelector();
+          void toggleRecordSelector(e);
         }
         break;
       case 'Delete':

mathesar_ui/src/i18n/languages/en/dict.json

@@ -544,6 +544,7 @@
   "record": "Record",
   "record_deleted_successfully": "Record deleted successfully!",
   "record_in_table": "Record in [tableName]",
+  "record_not_found": "Record not found.",
   "record_sel_no_support_for_table_without_pk": "The Record selector does not support tables without a Primary key.",
   "record_summary": "Record Summary",
   "record_summary_config_help": "Configure [tableName] record summaries here.",

mathesar_ui/src/pages/record/RecordPage.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { _ } from 'svelte-i18n';
+
   import LayoutWithHeader from '@mathesar/layouts/LayoutWithHeader.svelte';
   import { makeSimplePageTitle } from '@mathesar/pages/pageTitleUtils';
   import type RecordStore from '@mathesar/systems/record-view/RecordStore';
@@ -7,20 +9,86 @@
 
   import RecordPageContent from './RecordPageContent.svelte';
 
+  function goHome() {
+    window.history.back();
+  }
+
   export let record: RecordStore;
 
   $: recordStoreFetchRequest = record.fetchRequest;
   $: ({ summary } = record);
   $: recordStoreIsLoading = $recordStoreFetchRequest?.state === 'processing';
+  $: recordStoreError =
+    $recordStoreFetchRequest?.state === 'failure'
+      ? $recordStoreFetchRequest?.errors
+      : null;
   $: title = recordStoreIsLoading ? '' : $summary;
 </script>
 
 <svelte:head><title>{makeSimplePageTitle(title)}</title></svelte:head>
 
 <LayoutWithHeader cssVariables={{ '--page-padding': '0' }} fitViewport>
-  <RecordViewGatekeeper {record}>
-    <WithModalRecordView>
-      <RecordPageContent {record} />
-    </WithModalRecordView>
-  </RecordViewGatekeeper>
+  {#if recordStoreError}
+    <div class="record-error-page">
+      <h1>{$_('error')}</h1>
+      <p>{$_('record_not_found')}</p>
+      <button class="go-home-btn" on:click={goHome}>
+        {$_('go_to_homepage')}
+      </button>
+    </div>
+  {:else}
+    <RecordViewGatekeeper {record}>
+      <WithModalRecordView>
+        <RecordPageContent {record} />
+      </WithModalRecordView>
+    </RecordViewGatekeeper>
+  {/if}
 </LayoutWithHeader>
+
+<style lang="scss">
+  .record-error-page {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    min-height: 70vh;
+    /* Adaptive background for light/dark themes */
+    background: var(--color-bg-base, #f6f6f0);
+    padding: 64px 40px;
+    // margin: 0px auto;
+    max-width: 700px;
+    // border-radius: 8px;
+    // box-shadow: var(--shadow-lg, 0 2px 12px rgba(0,0,0,0.08));
+  }
+
+  .record-error-page h1 {
+    font-size: 2.4rem;
+    font-weight: 700;
+    color: var(--color-fg-base, #353533);
+    margin: 0 0 24px 0;
+  }
+
+  .record-error-page p {
+    font-size: 1.3rem;
+    color: var(--color-fg-base, #353533);
+    margin: 0 0 24px 0;
+  }
+
+  .go-home-btn {
+    background: var(--color-success, #46782d);
+    color: var(--color-btn-primary-text, #fff);
+    padding: 12px 22px;
+    font-size: 1.1rem;
+    font-weight: 700;
+    border: none;
+    border-radius: 6px;
+    margin-top: 16px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+
+  .go-home-btn:hover {
+    background: var(--color-success-hover, #355922);
+  }
+</style>