display Record Not Found for invalid record IDs

.gitignore

@@ -181,6 +181,7 @@ Temporary Items
 .media/
 .secrets/
 docs/_build/
+msar/
 
 ## yaml config files ##
 sso.yml

mathesar_ui/src/App.svelte

@@ -69,11 +69,12 @@
     --Match__highlight-color: var(--color-bg-highlight);
 
     /* Typography variables */
-    --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
-      'Helvetica Neue', sans-serif;
-    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      'Liberation Mono', 'Courier New', monospace;
+    --font-family-base:
+      'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    --font-family-mono:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+      'Courier New', monospace;
     --line-height-base: 1.5;
     --letter-spacing-base: -0.011em;
 

mathesar_ui/src/AppContext.svelte

@@ -63,7 +63,7 @@
     }
   }
 
-  $: commonData, setUserProfileAndReleaseStores();
+  $: (commonData, setUserProfileAndReleaseStores());
 
   const recordSelectorModal = modal.spawnModalController();
   const recordSelectorController = new RecordSelectorController({

mathesar_ui/src/component-library/button/Button.scss

@@ -53,8 +53,7 @@
       ),
       focus: (
         background: var(--color-bg-control-focused),
-        outline-color:
-          color-mix(
+        outline-color: color-mix(
             in srgb,
             var(--color-border-control-focused),
             transparent 70%
@@ -67,8 +66,7 @@
       active: (
         background: var(--color-bg-control-active),
         border-color: var(--color-border-control-active),
-        outline-color:
-          color-mix(
+        outline-color: color-mix(
             in srgb,
             var(--color-border-control-focused),
             transparent 60%
@@ -82,8 +80,7 @@
 
     primary: (
       normal: (
-        background:
-          linear-gradient(
+        background: linear-gradient(
             to bottom right,
             var(--color-action-primary),
             var(--color-action-primary-80)
@@ -93,26 +90,28 @@
         box-shadow: (
           0 1px 2px color-mix(in srgb, var(--color-shadow), transparent 75%),
           0 1px 3px color-mix(in srgb, var(--color-shadow), transparent 80%),
-          0 1px 2px -1px color-mix(in srgb, var(--color-shadow), transparent 80%),
+          0 1px 2px -1px
+            color-mix(in srgb, var(--color-shadow), transparent 80%),
         ),
       ),
       hover: (
-        background:
-          linear-gradient(
+        background: linear-gradient(
             to bottom right,
             var(--color-action-primary-hover),
             var(--color-action-primary-80-hover)
           ),
         border-color: var(--color-action-primary-80),
         box-shadow: (
-          0 1px 2px -1px color-mix(in srgb, var(--color-shadow), transparent 75%),
-          0 1px 3px -2px color-mix(in srgb, var(--color-shadow), transparent 80%),
-          0 1px 2px -1px color-mix(in srgb, var(--color-shadow), transparent 80%),
+          0 1px 2px -1px
+            color-mix(in srgb, var(--color-shadow), transparent 75%),
+          0 1px 3px -2px
+            color-mix(in srgb, var(--color-shadow), transparent 80%),
+          0 1px 2px -1px
+            color-mix(in srgb, var(--color-shadow), transparent 80%),
         ),
       ),
       focus: (
-        background:
-          linear-gradient(
+        background: linear-gradient(
             to bottom right,
             var(--color-action-primary-focused),
             var(--color-action-primary-80-focused)
@@ -122,8 +121,7 @@
         box-shadow: var(--color-shadow) 0 1px 2px 0,
       ),
       active: (
-        background:
-          linear-gradient(
+        background: linear-gradient(
             to bottom right,
             var(--color-action-primary-active),
             var(--color-action-primary-80-active)
@@ -144,8 +142,10 @@
         background: var(--color-action-secondary-25),
         border-color: var(--color-action-secondary-40),
         box-shadow: (
-          0 4px 6px -1px color-mix(in srgb, var(--color-shadow), transparent 10%),
-          0 2px 4px -2px color-mix(in srgb, var(--color-shadow), transparent 10%),
+          0 4px 6px -1px
+            color-mix(in srgb, var(--color-shadow), transparent 10%),
+          0 2px 4px -2px
+            color-mix(in srgb, var(--color-shadow), transparent 10%),
           0 0 0 1px color-mix(in srgb, var(--color-shadow), transparent 70%),
         ),
       ),
@@ -156,7 +156,8 @@
         box-shadow: (
           0 1px 2px color-mix(in srgb, var(--color-shadow), transparent 5%),
           0 1px 3px color-mix(in srgb, var(--color-shadow), transparent 10%),
-          0 1px 2px -1px color-mix(in srgb, var(--color-shadow), transparent 10%),
+          0 1px 2px -1px
+            color-mix(in srgb, var(--color-shadow), transparent 10%),
         ),
       ),
       active: (
@@ -166,7 +167,8 @@
         box-shadow: (
           0 1px 2px color-mix(in srgb, var(--color-shadow), transparent 5%),
           0 1px 3px color-mix(in srgb, var(--color-shadow), transparent 10%),
-          0 1px 2px -1px color-mix(in srgb, var(--color-shadow), transparent 10%),
+          0 1px 2px -1px
+            color-mix(in srgb, var(--color-shadow), transparent 10%),
           inset 1px 1px 2px
             color-mix(in srgb, var(--color-shadow), transparent 10%),
         ),
@@ -184,8 +186,7 @@
         color: var(--color-fg-outcome-hover),
       ),
       focus: (
-        outline-color:
-          color-mix(
+        outline-color: color-mix(
             in srgb,
             var(--color-border-outcome-focused),
             transparent 60%
@@ -195,8 +196,7 @@
         background: var(--color-bg-outcome-active),
         border-color: var(--color-border-outcome-active),
         color: var(--color-fg-outcome-active),
-        outline-color:
-          color-mix(
+        outline-color: color-mix(
             in srgb,
             var(--color-border-outcome-focused),
             transparent 60%
@@ -266,8 +266,11 @@
         border-color: transparent,
       ),
       hover: (
-        background:
-          color-mix(in srgb, var(--color-action-secondary-20), transparent 60%),
+        background: color-mix(
+            in srgb,
+            var(--color-action-secondary-20),
+            transparent 60%
+          ),
         border-color: var(--color-action-secondary-20-hover),
       ),
       focus: (

mathesar_ui/src/component-library/common/styles/components/card.scss

@@ -4,13 +4,13 @@ body {
   --card-box-shadow: none;
   --card-hover-background: var(--color-bg-raised-2-hover);
   --card-hover-border-color: var(--color-border-raised-2-hover);
-  --card-hover-box-shadow: 0 2px 2px
-      color-mix(in srgb, var(--color-shadow), transparent 15%),
+  --card-hover-box-shadow:
+    0 2px 2px color-mix(in srgb, var(--color-shadow), transparent 15%),
     0 1px 2px color-mix(in srgb, var(--color-shadow), transparent 10%);
   --card-focus-background: var(--color-bg-raised-2-focused);
   --card-focus-border-color: var(--color-border-raised-2-focused);
-  --card-focus-box-shadow: 0 2px 4px
-      color-mix(in srgb, var(--color-shadow), transparent 15%),
+  --card-focus-box-shadow:
+    0 2px 4px color-mix(in srgb, var(--color-shadow), transparent 15%),
     0 1px 2px color-mix(in srgb, var(--color-shadow), transparent 10%);
   --card-focus-outline-color: var(--color-border-raised-2-focused);
   --card-disabled-background: var(--color-bg-raised-2-disabled);

mathesar_ui/src/component-library/list-box/ListBox.svelte

@@ -62,7 +62,7 @@
       checkEquality(lastSelectedOption, opt),
     );
   }
-  $: value, $displayedOptions, focusSelected();
+  $: (value, $displayedOptions, focusSelected());
 
   onMount(() => {
     if (mode === 'static') {

mathesar_ui/src/components/GrowableTextArea.svelte

@@ -37,8 +37,8 @@
     fitHeight();
   }
 
-  $: element, handleMountElement();
-  $: value, fitHeight();
+  $: (element, handleMountElement());
+  $: (value, fitHeight());
 </script>
 
 <TextArea

mathesar_ui/src/components/InspectorButton.svelte

@@ -28,15 +28,15 @@
     --button-background: var(--color-navigation-15);
     --button-border-color: var(--color-navigation-20);
     --button-color: var(--color-fg-control);
-    --button-box-shadow: 0 1px 2px
-        color-mix(in srgb, var(--color-shadow), transparent 75%),
+    --button-box-shadow:
+      0 1px 2px color-mix(in srgb, var(--color-shadow), transparent 75%),
       0 1px 3px color-mix(in srgb, var(--color-shadow), transparent 80%),
       0 1px 2px -1px color-mix(in srgb, var(--color-shadow), transparent 80%);
 
     --button-hover-background: var(--color-navigation-20);
     --button-hover-border-color: var(--color-navigation-40-hover);
-    --button-hover-box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--color-shadow), transparent
-            10%),
+    --button-hover-box-shadow:
+      0 4px 6px -1px color-mix(in srgb, var(--color-shadow), transparent 10%),
       0 2px 4px -2px color-mix(in srgb, var(--color-shadow), transparent 10%),
       0 0 0 1px color-mix(in srgb, var(--color-shadow), transparent 10%) inset;
 
@@ -45,8 +45,8 @@
 
     --button-active-background: var(--color-navigation-40);
     --button-active-border-color: var(--color-navigation-60);
-    --button-active-box-shadow: 0 1px 2px
-        color-mix(in srgb, var(--color-shadow), transparent 5%),
+    --button-active-box-shadow:
+      0 1px 2px color-mix(in srgb, var(--color-shadow), transparent 5%),
       0 1px 3px color-mix(in srgb, var(--color-shadow), transparent 10%),
       0 1px 2px -1px color-mix(in srgb, var(--color-shadow), transparent 10%);
   }

mathesar_ui/src/components/NotFoundPage.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let message = 'Not Found';
+</script>
+
+<div class="not-found">
+  <h2>{message}</h2>
+</div>
+
+<style>
+  .not-found {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 4rem 1rem;
+    text-align: center;
+  }
+
+  .not-found h2 {
+    margin: 0;
+    font-weight: 600;
+  }
+</style>

mathesar_ui/src/components/breadcrumb/BreadcrumbSelector.svelte

@@ -35,7 +35,7 @@
 
   // Focus the text input when dropdown is opened
   let textInputEl: HTMLInputElement | undefined;
-  $: isOpen, (filterString = '');
+  $: (isOpen, (filterString = ''));
 
   // Get all filtered entries for keyboard navigation
   $: allFilteredEntries = [
@@ -48,7 +48,7 @@
     ),
     ...persistentLinks,
   ];
-  $: allFilteredEntries, (selectedIndex = -1);
+  $: (allFilteredEntries, (selectedIndex = -1));
 
   function scrollToSelected() {
     if (selectedIndex >= 0 && contentElement) {

mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte

@@ -53,7 +53,7 @@
       return getValueComparisonOutcome(matchParts);
     }
     const formatter = (v: Value | null | undefined) =>
-      v === undefined || v === null ? '' : formatValue?.(v) ?? '';
+      v === undefined || v === null ? '' : (formatValue?.(v) ?? '');
     return compareWholeValues(searchValue, value, formatter);
   })();
 

mathesar_ui/src/components/form/form.ts

@@ -148,11 +148,12 @@ export type Form<FieldsObj extends GenericFieldsObj = GenericFieldsObj> =
 
 type GetFieldsObj<F> = F extends Form<infer FieldsObj> ? FieldsObj : never;
 
-type FilledFieldValue<F> = F extends RequiredField<infer T>
-  ? Filled<T>
-  : F extends FieldStore<infer T>
-    ? T
-    : never;
+type FilledFieldValue<F> =
+  F extends RequiredField<infer T>
+    ? Filled<T>
+    : F extends FieldStore<infer T>
+      ? T
+      : never;
 
 type FilledFieldValues<FieldsObj extends GenericFieldsObj> = {
   [K in keyof FieldsObj]: FilledFieldValue<FieldsObj[K]>;

mathesar_ui/src/components/form/validators.ts

@@ -49,9 +49,8 @@ function valueIsFilled<T>(v: T | undefined | null): v is T {
   );
 }
 
-type FilledFieldValue<F> = FieldValue<F> extends infer T | undefined | null
-  ? T
-  : never;
+type FilledFieldValue<F> =
+  FieldValue<F> extends infer T | undefined | null ? T : never;
 
 export function required(
   msg = get(_)('value_cannot_be_empty'),

mathesar_ui/src/components/group-entry/GroupEntry.svelte

@@ -97,10 +97,10 @@
     return (preprocId: string) =>
       preprocId === undefined
         ? $_('value')
-        : _columns
+        : (_columns
             .get(_columnIdentifier)
             ?.preprocFunctions.find((entry) => entry.id === preprocId)?.name ??
-          preprocId;
+          preprocId);
   }
   $: getPreprocLabel = functionToGetPreprocLabel(columns, columnIdentifier);
 </script>

mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte

@@ -79,8 +79,8 @@
   }
 
   :global(
-      [data-sheet-element='data-cell']:has(.is-edit-mode) .active-indicator
-    ) {
+    [data-sheet-element='data-cell']:has(.is-edit-mode) .active-indicator
+  ) {
     // Hide the active indicator when the cell is in edit mode
     display: none;
   }
@@ -99,7 +99,8 @@
 
   .active-indicator.is-selecting-cell-range {
     border: none;
-    background-image: repeating-linear-gradient(
+    background-image:
+      repeating-linear-gradient(
         90deg,
         var(--color) 0 10px,
         transparent 10px 20px

mathesar_ui/src/packages/json-rpc-client-builder/builder.ts

@@ -3,14 +3,12 @@ import { RpcRequest } from './requests';
 type MethodTypeContainer<Params, Result> = [Params, Result];
 type MethodTree = { [key: string]: MethodTreeNode };
 type MethodTreeNode = MethodTree | MethodTypeContainer<unknown, unknown>;
-type Api<Node extends MethodTreeNode> = Node extends MethodTypeContainer<
-  infer Params,
-  infer Result
->
-  ? (params: Params) => RpcRequest<Result>
-  : Node extends MethodTree
-    ? { [MethodName in keyof Node]: Api<Node[MethodName]> }
-    : never;
+type Api<Node extends MethodTreeNode> =
+  Node extends MethodTypeContainer<infer Params, infer Result>
+    ? (params: Params) => RpcRequest<Result>
+    : Node extends MethodTree
+      ? { [MethodName in keyof Node]: Api<Node[MethodName]> }
+      : never;
 
 function nodeIsMethod(
   node: MethodTreeNode,

mathesar_ui/src/pages/database/schemas/SchemasSection.svelte

@@ -54,7 +54,7 @@
   }
 
   // Don't highlight items when the filter query changes
-  $: filterQuery, void momentarilyPauseHighlighting();
+  $: (filterQuery, void momentarilyPauseHighlighting());
 
   function addSchema() {
     targetSchema = undefined;