refactor(ui): blank page content when no organizations are available (#…

…41)

* refactor(ui): blank page content when no organizations are available

* ci: simply the ci process

.github/workflows/pr.yml

@@ -7,42 +7,9 @@ on:
     branches: [master]
 
 jobs:
-  test:
-    name: test
+  pr-check:
+    name: pr-check
     runs-on: ubuntu-latest
-    steps:
-      # This step uses the actions/checkout action to download a copy of your repository on the runner.
-      - name: Checkout repo
-        uses: actions/checkout@v4
-
-      # This step uses the pnpm/action-setup action to set up pnpm on the runner.
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 9
-
-      # This step uses the actions/setup-node action to set up a Node.js environment on the runner.
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: .nvmrc
-          cache: pnpm
-
-      # This step runs the install script for the selected node package manager.
-      - name: Install dependencies
-        run: pnpm install
-
-      # This step runs the test script if there is one specified under the scripts key in your package.json file.
-      - name: Test
-        run: pnpm test:ci
-
-  build:
-    name: build
-    needs: [test]
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [20]
     steps:
       # This step uses the actions/checkout action to download a copy of your repository on the runner.
       - name: Checkout repo
@@ -68,3 +35,7 @@ jobs:
       # This step runs the build script if there is one specified under the scripts key in your package.json file.
       - name: Build
         run: pnpm build
+
+      # This step runs the test script if there is one specified under the scripts key in your package.json file.
+      - name: Test
+        run: pnpm test:ci

src/routers/app/ui/components/button.tsx

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from "hono/jsx";
+import type { JSX, PropsWithChildren } from "hono/jsx";
 
 const buttonStyles = {
   primary:
@@ -21,10 +21,13 @@ export function Button({
   children,
   variant = "primary",
   size = "md",
+  class: className,
   ...props
-}: PropsWithChildren<{ variant?: keyof typeof buttonStyles; size?: keyof typeof buttonSize }>) {
+}: PropsWithChildren<
+  { variant?: keyof typeof buttonStyles; size?: keyof typeof buttonSize } & JSX.IntrinsicElements["button"]
+>) {
   return (
-    <button class={getButtonStyles(variant, size)} {...props}>
+    <button class={[getButtonStyles(variant, size), className].filter(Boolean).join(" ")} {...props}>
       {children}
     </button>
   );

src/routers/app/ui/index.tsx

@@ -2,7 +2,7 @@ import { Hono } from "hono";
 
 import { db } from "@/config/db/index.mjs";
 
-import { DashboardLandingPage } from "./pages/app.index.js";
+import { NoOrganizationPage } from "./pages/app.index.js";
 import { LoginPage } from "./pages/app.login.js";
 import { WorkspaceLandingPage } from "./pages/app.$workspace.index.js";
 import { WorkspaceEditPage } from "./pages/app.$workspace.edit.js";
@@ -26,12 +26,12 @@ app.get("/", checkUserAuthed, async (c) => {
 
   const tenants = relationships.map((r) => r.tenant);
 
-  if (tenants.length === 1 && view_all !== "true") {
+  if (tenants.length >= 1 && view_all !== "true") {
     const tenant = tenants[0];
     return c.redirect(`/app/${tenant.workspace}`);
   }
 
-  return c.html(<DashboardLandingPage user={user} tenants={tenants} />);
+  return c.html(<NoOrganizationPage user={user} tenants={tenants} />);
 });
 
 app.get("/login", async (c) => {

src/routers/app/ui/pages/app.index.tsx

@@ -2,12 +2,17 @@ import type { FC } from "hono/jsx";
 
 import { RootDocument } from "../layouts/root-document.js";
 import { AppContainer, type AppContainerProps } from "../layouts/app-container.js";
+import { Button } from "../components/button.js";
 
-export const DashboardLandingPage: FC<{} & Omit<AppContainerProps, "tenant">> = ({ user, tenants }) => {
+export const NoOrganizationPage: FC<{} & Omit<AppContainerProps, "tenant">> = ({ user, tenants }) => {
   return (
     <RootDocument title="Simple Logging Server">
       <AppContainer user={user} tenants={tenants} tenant={null} mainClass="p-2 md:p-4">
-        <p>There is no content on this page</p>
+        <div class="grid gap-2">
+          <p>You are not a part of any active organizations.</p>
+          <p>Create your own organization!.</p>
+          <Button class="w-auto">Create organization</Button>
+        </div>
       </AppContainer>
     </RootDocument>
   );