Release/3.1.7

src/assets/changelogs/3.1.7.md

@@ -11,6 +11,10 @@ date: 2024/12/09
 - Improved API Docs performance
 	- Table previews can now be selected using a selection dropdown
 	- This especially improves performance for databases with large amounts of tables
+- Redesigned the start screen experience
+	- The start screen is now available at `/start`
+	- You can click the Surrealist logo in the sidebar to open the start screen
+	- Redesigned the start screen
 - Added a reset chat button to Sidekick
 - Updated .NET SDK documentation
 - Fixed schema parsing errors aborting the connection

src/components/ActionBar/serving.tsx

@@ -6,7 +6,7 @@ import { useIntent } from "~/hooks/routing";
 import { useStable } from "~/hooks/stable";
 import { openConnection } from "~/screens/surrealist/connection/connection";
 import { useDatabaseStore } from "~/stores/database";
-import { getActiveConnection } from "~/util/connection";
+import { getConnection } from "~/util/connection";
 import { isHostLocal } from "~/util/helpers";
 import { iconConsole, iconPlay, iconStop } from "~/util/icons";
 import { dispatchIntent } from "~/util/intents";
@@ -48,11 +48,14 @@ export function DatabaseServing() {
 	});
 
 	useEffect(() => {
-		const { authentication } = getActiveConnection();
-		const isLocal = isHostLocal(authentication.hostname);
+		const connection = getConnection();
 
-		if (isServing && isLocal) {
-			openConnection();
+		if (connection) {
+			const isLocal = isHostLocal(connection.authentication.hostname);
+
+			if (isServing && isLocal) {
+				openConnection();
+			}
 		}
 	}, [isServing]);
 

src/screens/surrealist/sidebar.tsx

@@ -57,9 +57,8 @@ export function DatabaseSidebar({ sidebarMode, className, ...other }: SidebarPro
 	const [canHoverSidebar, hoverSidebarHandle] = useBoolean(true);
 
 	const setLocation = useStable((location: string) => {
-		navigate(location);
 		hoverSidebarHandle.close();
-		console.log("Reee");
+		navigate(location);
 	});
 
 	const navigation = useMemo(() => {

src/screens/surrealist/start/content.tsx

@@ -17,7 +17,7 @@ import {
 
 import { iconChevronRight } from "~/util/icons";
 
-import { PropsWithChildren, useRef } from "react";
+import { PropsWithChildren, ReactNode, useRef } from "react";
 import { Faint } from "~/components/Faint";
 import { Icon } from "~/components/Icon";
 import { Spacer } from "~/components/Spacer";
@@ -26,8 +26,8 @@ import { useStable } from "~/hooks/stable";
 import { dispatchIntent } from "~/util/intents";
 
 export interface StartActionProps extends BoxProps {
-	title: string;
-	subtitle: string;
+	title: ReactNode;
+	subtitle: ReactNode;
 	icon?: string;
 	onClick: () => void;
 }

src/screens/surrealist/start/index.tsx

@@ -10,6 +10,7 @@ import {
 	Box,
 	Button,
 	Center,
+	Group,
 	Image,
 	ScrollArea,
 	SimpleGrid,
@@ -25,9 +26,7 @@ import {
 	iconCloud,
 	iconCog,
 	iconCommunity,
-	iconDiscord,
 	iconPlus,
-	iconQuery,
 	iconSandbox,
 	iconServer,
 	iconSidekick,
@@ -36,6 +35,7 @@ import {
 
 import { useLocation } from "wouter";
 import { adapter } from "~/adapter";
+import { BetaBadge } from "~/components/BetaBadge";
 import { Icon } from "~/components/Icon";
 import { SANDBOX } from "~/constants";
 import { useLatestNewsQuery } from "~/hooks/newsfeed";
@@ -131,7 +131,12 @@ export function StartPage() {
 						gap="lg"
 					>
 						<StartAction
-							title="Explore Surreal Cloud"
+							title={
+								<Group gap="xs">
+									Explore Surreal Cloud
+									<BetaBadge />
+								</Group>
+							}
 							subtitle="Surreal Cloud redefines the database experience, offering the power and flexibility of SurrealDB without the pain of managing infrastructure."
 							icon={iconCloud}
 							onClick={openCloud}

src/screens/surrealist/start/style.module.scss

@@ -16,7 +16,7 @@
 	overflow: hidden;
 	background-color: rgba(0, 0, 0, 0.5);
 	outline: 1px solid transparent;
-	transition: all 0.2s;
+	// transition: all 0.2s;
 
 	@include light {
 		background-color: rgba(255, 255, 255, 0.5);
@@ -37,7 +37,7 @@
 	height: 115px;
 
 	.start-action-icon {
-		transition: all 0.2s;
+		// transition: all 0.2s;
 		color: var(--mantine-color-slate-5);
 	}