Update deployment.

.github/workflows/publish.yaml

@@ -2,8 +2,8 @@ name: 'Create Release'
 
 on:
   push:
-    tags:
-      - 'v*'
+    branches:
+      - release
   workflow_dispatch:
 
 jobs:

package.json

@@ -15,6 +15,7 @@
         "@blueprintjs/core": "^5.13.0",
         "@blueprintjs/select": "^5.2.4",
         "@monaco-editor/react": "^4.6.0",
+        "@react-three/fiber": "^8.17.9",
         "@tanstack/react-query": "^5.56.2",
         "@tanstack/react-query-devtools": "^5.56.2",
         "@tanstack/react-router": "^1.58.3",
@@ -24,6 +25,7 @@
         "@xyflow/react": "^12.3.0",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
+        "framer-motion": "^11.11.1",
         "jotai": "^2.10.0",
         "mobx": "^6.13.2",
         "mobx-react": "^9.1.1",
@@ -35,6 +37,7 @@
         "react-use": "^17.5.1",
         "react-virtualized-auto-sizer": "^1.0.24",
         "sql-formatter": "^15.4.2",
+        "three": "^0.169.0",
         "zod": "^3.23.8"
     },
     "devDependencies": {
@@ -45,6 +48,7 @@
         "@types/bun": "^1.1.10",
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
+        "@types/three": "^0.169.0",
         "@vitejs/plugin-react": "^4.2.1",
         "autoprefixer": "^10.4.20",
         "browserslist": "^4.24.0",

src-tauri/tauri.conf.json

@@ -19,7 +19,7 @@
   },
   "productName": "database-browser",
   "mainBinaryName": "database-browser",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "identifier": "com.database-browser.app",
   "plugins": {},
   "app": {

src/routes/index.lazy.tsx

@@ -1,12 +1,9 @@
+import { SplashScreen } from "@/views/splashscreen";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { observer } from "mobx-react";
 
 export const Route = createLazyFileRoute("/")({
     component: observer(() => {
-        return (
-            <>
-                <div>Select a connection!</div>
-            </>
-        );
+        return <SplashScreen />;
     }),
 });

src/views/ConnectionInfoView.tsx

@@ -8,7 +8,7 @@ interface ConnectionInfoViewProps {
 
 export const ConnectionInfoView = observer(({ connection }: ConnectionInfoViewProps) => {
     return (
-        <div className="flex flex-col gap-2 p-2">
+        <div className="flex flex-col gap-2 p-2 h-full">
             <H3>
                 <Label>Name</Label>
                 <EditableText

src/views/SplashScreen.tsx

@@ -0,0 +1,50 @@
+import { Canvas, useFrame } from "@react-three/fiber";
+import { observer } from "mobx-react";
+import { useRef, useState } from "react";
+import type { Group } from "three";
+
+function Box() {
+    // This reference gives us direct access to the THREE.Mesh object
+    const ref = useRef<Group>();
+    // Hold state for hovered and clicked events
+    const [hovered, hover] = useState(false);
+    const [clicked, click] = useState(false);
+    // Subscribe this component to the render-loop, rotate the mesh every frame
+    useFrame((state, delta) => {
+        ref.current!.rotation.x += delta * state.pointer.x * 10;
+        ref.current!.rotation.z += delta * state.pointer.y * 10;
+    });
+    // Return the view, these are regular Threejs elements expressed in JSX
+    const plateSize = 0.5;
+    const gap = plateSize + 0.1;
+    return (
+        <group ref={ref as any}>
+            <mesh position={[0, gap, 0]}>
+                <cylinderGeometry args={[1, 1, plateSize]} />
+                <meshStandardMaterial color="lime" />
+            </mesh>
+            <mesh position={[0, 0, 0]}>
+                <cylinderGeometry args={[1, 1, plateSize]} />
+                <meshStandardMaterial color="green" />
+            </mesh>
+            <mesh position={[0, -gap, 0]}>
+                <cylinderGeometry args={[1, 1, plateSize]} />
+                <meshStandardMaterial color="rgb(70, 31, 4)" />
+            </mesh>
+        </group>
+    );
+}
+
+export const SplashScreen = observer(() => {
+    return (
+        <div className="h-full">
+            <Canvas>
+                <ambientLight intensity={Math.PI / 2} />
+                <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
+                <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
+
+                <Box />
+            </Canvas>
+        </div>
+    );
+});