Feat: Use source list component to display list of models

.circleci/continue_config.yml

@@ -155,7 +155,7 @@ jobs:
 
   ui_test:
     docker:
-      - image: mcr.microsoft.com/playwright:v1.40.1-jammy
+      - image: mcr.microsoft.com/playwright:v1.40.1-jammy 
     resource_class: medium
     steps:
       - halt_unless_client

web/Dockerfile.app

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.42.0-jammy 
+FROM mcr.microsoft.com/playwright:v1.40.1-jammy  
 
 WORKDIR /app
 

web/client/.eslintrc.cjs

@@ -43,6 +43,7 @@ module.exports = {
   },
   ignorePatterns: [
     'src/api/client.ts',
+    'src/utils/tbk-components.js',
     'test-results',
     'playwright',
     'playwright-report',

web/client/.prettierignore

@@ -7,4 +7,7 @@ node_modules/
 /playwright/.cache/
 dist
 /public/favicons/
+/public/fonts/
+/src/styles/fonts/
+/src/assets/fonts/
 tsconfig.tsbuildinfo

web/client/index.html

@@ -6,24 +6,230 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
+    <title>SQLMesh by Tobiko</title>
     <link
       rel="icon"
       type="image/png"
       href="/favicons/favicon.svg"
     />
-    <title>SQLMesh by Tobiko</title>
     <link
-      rel="preconnect"
-      href="https://fonts.googleapis.com"
+      rel="stylesheet"
+      href="/css/design.css"
     />
     <link
-      rel="preconnect"
-      href="https://fonts.gstatic.com"
-      crossorigin
+      rel="stylesheet"
+      href="/css/base.css"
     />
+
+    <!-- Inter Fonts -->
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-      rel="stylesheet"
+      rel="prefetch"
+      href="/fonts/Inter/static/Inter-Thin.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Inter/static/Inter-ExtraLight.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Inter/static/Inter-Light.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Inter/static/Inter-Regular.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Inter/static/Inter-Medium.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Inter/static/Inter-SemiBold.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Inter/static/Inter-Bold.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Inter/static/Inter-ExtraBold.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Inter/static/Inter-Black.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+
+    <!-- JetBrains Mono Fonts -->
+    <link
+      rel="prefetch"
+      href="/fonts/JetBrains_Mono/static/JetBrainsMono-Thin.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraLight.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/JetBrains_Mono/static/JetBrainsMono-Light.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/JetBrains_Mono/static/JetBrainsMono-Regular.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/JetBrains_Mono/static/JetBrainsMono-Medium.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/JetBrains_Mono/static/JetBrainsMono-SemiBold.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/JetBrains_Mono/static/JetBrainsMono-Bold.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraBold.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+
+    <!-- Martina Plantijn Fonts -->
+    <link
+      rel="prefetch"
+      href="/fonts/Martina_Plantijn/martina-plantijn-regular.otf"
+      as="font"
+      type="font/otf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Martina_Plantijn/martina-plantijn-regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+
+    <!-- Sohne Fonts -->
+    <link
+      rel="prefetch"
+      href="/fonts/Sohne/sohne-buch.otf"
+      as="font"
+      type="font/otf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Sohne/sohne-buch.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Sohne/sohne-kraftig.otf"
+      as="font"
+      type="font/otf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Sohne/sohne-kraftig.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Sohne/sohne-buch-kursiv.otf"
+      as="font"
+      type="font/otf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Sohne/sohne-buch-kursiv.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Sohne/sohne-mono-buch.otf"
+      as="font"
+      type="font/otf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Sohne/sohne-mono-buch.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Sohne/sohne-mono-kraftig.otf"
+      as="font"
+      type="font/otf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="prefetch"
+      href="/fonts/Sohne/sohne-mono-kraftig.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
     />
   </head>