Restyle matching Outerbase (#166)

* styling sidebar

* change query tab editor to match outerbase

* add more style

* fixing explain query

* redesign side menu

* restyle sidebar

* add sidemenu

* change all the libsql studio name to outerbase studio

* pull the version from package

* restyle the connection list match turso style

* upgrade everything to mono color

* reskin to outerbase

next.config.js

@@ -1,10 +1,14 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const withMDX = require("@next/mdx")();
+const pkg = require("./package.json");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false,
   pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
+  env: {
+    NEXT_PUBLIC_STUDIO_VERSION: pkg.version,
+  },
 };
 
 module.exports = withMDX(nextConfig);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@libsqlstudio/studio",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "private": false,
   "scripts": {
     "dev": "next dev -p 3008",
@@ -42,6 +42,7 @@
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.4",
+    "@phosphor-icons/react": "^2.1.7",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",

src/app/(public)/databases/mysql/page.tsx

@@ -1,16 +1,16 @@
 import { MySQLIcon } from "@/components/icons/outerbase-icon";
 import WebsiteLayout from "@/components/website-layout";
+import { WEBSITE_NAME } from "@/const";
 import { Metadata } from "next";
 
-const siteDescription =
-  "LibSQL Studio is a fully-featured, lightweight GUI client for managing MySQL databases";
+const siteDescription = `${WEBSITE_NAME} is a fully-featured, lightweight GUI client for managing MySQL databases`;
 
 export const metadata: Metadata = {
-  title: "MySQL - LibSQL Studio",
+  title: `MySQL - ${WEBSITE_NAME}`,
   keywords: ["mysql", "studio", "browser", "editor", "gui", "online", "client"],
   description: siteDescription,
   openGraph: {
-    siteName: "LibSQL Studio",
+    siteName: WEBSITE_NAME,
     description: siteDescription,
   },
 };
@@ -34,7 +34,7 @@ function HeroSection() {
             <span>MySQL Support</span>
           </h2>
           <p className="max-w-[700px] mt-6 text-lg">
-            LibSQL Studio is a lightweight, fully-featured GUI client for MySQL
+            {WEBSITE_NAME} is a lightweight, fully-featured GUI client for MySQL
             databases. It enables you to manage and view your database, or
             expose your database interface externally and much more.
           </p>

src/app/(public)/docs/layout.tsx

@@ -1,8 +1,9 @@
 import { DocLayout } from "@/components/mdx/docs";
+import { WEBSITE_NAME } from "@/const";
 
 const TableContent = [
   {
-    title: "LibSQL Studio",
+    title: WEBSITE_NAME,
     href: "/docs",
   },
   {

src/app/(public)/login/page.tsx

@@ -1,5 +1,6 @@
 "use server";
 import LogoLoading from "@/components/gui/logo-loading";
+import { WEBSITE_NAME } from "@/const";
 import { env } from "@/env";
 import Link from "next/link";
 
@@ -18,7 +19,7 @@ export default async function LoginPage() {
           </p>
 
           <p>
-            LibSQL Studio is free and doesn&apos;t require login. However,
+            {WEBSITE_NAME} is free and doesn&apos;t require login. However,
             logged-in users get extra features:
           </p>
 

src/app/(public)/page.tsx

@@ -5,16 +5,14 @@ import {
 } from "@/components/icons/outerbase-icon";
 import { buttonVariants } from "@/components/ui/button";
 import WebsiteLayout from "@/components/website-layout";
+import { WEBSITE_GENERAL_DESCRIPTION, WEBSITE_NAME } from "@/const";
 import { cn } from "@/lib/utils";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { PropsWithChildren } from "react";
 
-const siteDescription =
-  "LibSQL Studio is a fully-featured, lightweight GUI client for managing SQLite-based databases like Turso, LibSQL, and rqlite. It runs entirely in your browser, so there's no need to download anything";
-
 export const metadata: Metadata = {
-  title: "LibSQL Studio",
+  title: WEBSITE_NAME,
   keywords: [
     "libsql",
     "rqlite",
@@ -27,10 +25,10 @@ export const metadata: Metadata = {
     "online",
     "client",
   ],
-  description: siteDescription,
+  description: WEBSITE_GENERAL_DESCRIPTION,
   openGraph: {
-    siteName: "LibSQL Studio",
-    description: siteDescription,
+    siteName: WEBSITE_NAME,
+    description: WEBSITE_GENERAL_DESCRIPTION,
   },
 };
 
@@ -84,14 +82,14 @@ function HeroSection() {
             Powerful Database Client
           </h2>
           <p className="max-w-[700px] mt-6 text-lg">
-            LibSQL Studio is a fully-featured, lightweight GUI client for
+            {WEBSITE_NAME} is a fully-featured, lightweight GUI client for
             managing Turso, LibSQL, Cloudflare D1, rqlite, MySQL, and
             PostgreSQL. It runs entirely in your browser, so there&apos;s no
             need to download anything.
           </p>
 
           <div className="flex gap-4 mt-8">
-            <LinkButton title="Open LibSQL Studio" url="/connect" />
+            <LinkButton title={`Open ${WEBSITE_NAME}`} url="/connect" />
           </div>
         </div>
       </div>
@@ -121,7 +119,7 @@ function SupportDriver() {
             <PostgreIcon />
             <span>PostgreSQL</span>
             <span className="text-xs -mt-2 text-yellow-500">
-              Coming Soon 15th Sep 2024
+              Coming Soon 7th Oct 2024
             </span>
           </DatabaseBlock>
 
@@ -186,8 +184,8 @@ function FeatureList() {
           </h1>
 
           <p className="mt-2 text-zinc-400">
-            LibSQL Studio allows you to save your queries and organize them into
-            folders, with the ability to sync across multiple devices.
+            {WEBSITE_NAME} allows you to save your queries and organize them
+            into folders, with the ability to sync across multiple devices.
           </p>
         </div>
 
@@ -204,7 +202,7 @@ function FeatureList() {
           </h1>
 
           <p className="mt-2 text-zinc-400">
-            LibSQL Studio features a user-friendly query editor equipped with
+            {WEBSITE_NAME} features a user-friendly query editor equipped with
             auto-completion and function hint tooltips. It allows you to execute
             multiple queries simultaneously and view their results efficiently.
           </p>
@@ -223,8 +221,8 @@ function FeatureList() {
           </h1>
 
           <p className="mt-2 text-zinc-400">
-            LibSQL Studio allows you to quickly create, modify, and remove table
-            columns with just a few clicks without writing any SQL.
+            {WEBSITE_NAME} allows you to quickly create, modify, and remove
+            table columns with just a few clicks without writing any SQL.
           </p>
         </div>
       </div>
@@ -239,7 +237,7 @@ function CommunitySection() {
 
       <p className="mt-2 text-zinc-400 max-w-[500px] mb-8">
         Join our community for the latest updates, roadmap insights, and
-        discussions on the future of LibSQL Studio.
+        discussions on the future of {WEBSITE_NAME}.
       </p>
 
       <div className="grid md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-4">
@@ -310,7 +308,7 @@ export default async function MainPage() {
           </div>
 
           <p className="tmb-4 max-w-[500px] text-zinc-400">
-            LibSQL Studio has many features and is regularly updated. Since it
+            {WEBSITE_NAME} has many features and is regularly updated. Since it
             is an{" "}
             <Link
               href="https://github.com/outerbase/libsql-studio"

src/app/(public)/privacy/page.tsx

@@ -1,4 +1,5 @@
 import WebsiteLayout from "@/components/website-layout";
+import { WEBSITE_NAME } from "@/const";
 
 export default function PrivacyPage() {
   return (
@@ -8,7 +9,7 @@ export default function PrivacyPage() {
         <p>Effective Date: 2024-06-23</p>
         <p>
           {`
-          Welcome to LibSQL Studio ("we," "our," or "us"). We are committed to protecting your privacy and ensuring
+          Welcome to ${WEBSITE_NAME} ("we," "our," or "us"). We are committed to protecting your privacy and ensuring
           that your personal information is handled in a safe and responsible manner. This Privacy Policy explains how we
           collect, use, and protect your information when you use our tool.
         `}

src/app/(public)/terms/page.tsx

@@ -1,4 +1,5 @@
 import WebsiteLayout from "@/components/website-layout";
+import { WEBSITE_NAME } from "@/const";
 
 export default function TermPage() {
   return (
@@ -9,7 +10,7 @@ export default function TermPage() {
         <p>Effective Date: 2024-06-23</p>
 
         <p>{`
-        Welcome to LibSQL Studio ("we," "our," or "us"). 
+        Welcome to ${WEBSITE_NAME} ("we," "our," or "us"). 
         By accessing or using our tool, you agree to be bound by these Terms and Conditions ("Terms").
         If you do not agree to these Terms, please do not use the Tool.
       `}</p>
@@ -53,7 +54,7 @@ export default function TermPage() {
         </p>
 
         <h2 className="font-bold text-lg">6. Limitation of Liability</h2>
-        <p>{`LibSQL Studio is provided "as is" without warranties of any kind. We are not liable for any damages arising from your use of the Tool.`}</p>
+        <p>{`${WEBSITE_NAME} is provided "as is" without warranties of any kind. We are not liable for any damages arising from your use of the Tool.`}</p>
 
         <p>
           By using the Tool, you acknowledge that you have read, understood, and