hide releases page with feature flag (#43)

apps/engine/package.json

@@ -13,6 +13,9 @@
   },
   "prettier": "@ds-project/prettier",
   "dependencies": {
+    "@dicebear/collection": "^9.2.2",
+    "@dicebear/converter": "^9.2.2",
+    "@dicebear/core": "^9.2.2",
     "@ds-project/api": "workspace:*",
     "@ds-project/auth": "workspace:*",
     "@ds-project/components": "workspace:*",
@@ -29,6 +32,7 @@
     "@tanstack/react-query": "^5.51.24",
     "@trpc/react-query": "catalog:",
     "@trpc/server": "catalog:",
+    "@vercel/flags": "^2.6.0",
     "@vercel/kv": "^2.0.0",
     "@vercel/og": "^0.6.2",
     "clsx": "^2.1.1",

apps/engine/src/app/app/integrations/layout.tsx

@@ -33,7 +33,7 @@ export default function Layout({
           <TabsTrigger value="outputs" asChild>
             <Link href={'/app/integrations/outputs'}>Outputs</Link>
           </TabsTrigger>
-          <TabsTrigger value="notifications">
+          <TabsTrigger value="notifications" asChild>
             <Link href={'/app/integrations/notifications'}>Notifications</Link>
           </TabsTrigger>
         </TabsList>

apps/engine/src/app/app/layout.tsx

@@ -1,6 +1,7 @@
 import { AppNavigation } from '@/components';
 import { api } from '@ds-project/api/rsc';
 import { getMetadata } from '@/lib/metadata';
+import { getShowReleasesFlag } from '@/lib/flags';
 
 export const metadata = getMetadata({ title: 'Dashboard' });
 
@@ -11,6 +12,7 @@ export default async function RootLayout({
 }>) {
   const projects = await api.projects.getAll();
   const user = await api.users.getCurrent();
+  const showReleases = await getShowReleasesFlag();
 
   return (
     <>
@@ -19,9 +21,10 @@ export default async function RootLayout({
           className="px-2 pt-2"
           projects={projects}
           email={user.email}
+          showReleases={showReleases}
         />
       </header>
-      <main className="flex min-h-screen w-full flex-col items-center py-2">
+      <main className="flex min-h-screen w-full flex-col items-center">
         {children}
       </main>
     </>

apps/engine/src/app/app/page.tsx

@@ -1,5 +1,71 @@
-import { redirect } from 'next/navigation';
+import { MainContent } from '@/components';
+import { config } from '@/config';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@ds-project/components';
+import Link from 'next/link';
+
+const items = [
+  {
+    title: 'Who am I?',
+    content: (
+      <p>
+        Hello! I'm Tomás, the builder of DS Pro. I'm glad you're here.
+        <br />
+        Reach out to me at{' '}
+        <Link href={`mailto:${config.supportEmail}`}>
+          {config.supportEmail}
+        </Link>{' '}
+        or join our <Link href={config.discordInviteUrl}>Discord</Link>.
+      </p>
+    ),
+  },
+  {
+    title: 'What is DS Pro about?',
+    content: (
+      <p>
+        DS Pro is an open source solution to build Design Systems in an easier
+        and faster way.
+        <br />
+        Think of it as an infrastructure provider that allows designers and
+        developers to connect and run all the pieces of a design system
+        together.
+      </p>
+    ),
+  },
+  {
+    title: 'What can I do with DS Pro?',
+    content: (
+      <p>
+        Currently, DS Pro allows to synchronize your Design Tokens from Figma to
+        your code repository in GitHub.
+        <br />
+        More integrations are coming soon. Any feedback or suggestions in our{' '}
+        <Link href={config.feedbackUrl}>feedback board</Link> is highly welcome.
+      </p>
+    ),
+  },
+];
 
 export default function Home() {
-  return redirect('/app/integrations');
+  return (
+    <MainContent
+      description="DS Pro is in experimental phase. Your data or features might change or get lost with no warning."
+      title="Welcome 👋"
+    >
+      <div className="flex justify-center w-full">
+        <Accordion type="single" collapsible className="w-full max-w-screen-md">
+          {items.map((item, index) => (
+            <AccordionItem value={index.toString()}>
+              <AccordionTrigger>{item.title}</AccordionTrigger>
+              <AccordionContent>{item.content}</AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+    </MainContent>
+  );
 }

apps/engine/src/app/app/releases/page.tsx

@@ -0,0 +1,30 @@
+import { MainContent } from '@/components';
+import { fetchReleases } from './_actions';
+import { SelectReleases } from './_components';
+import { getMetadata } from '@/lib/metadata';
+import { Text } from '@ds-project/components';
+
+export const metadata = getMetadata({ title: 'Tokens' });
+
+export default async function Tokens() {
+  const releases = await fetchReleases();
+
+  return (
+    <MainContent
+      description="Inspect the design tokens releases."
+      title="Releases"
+    >
+      {(releases?.length ?? 0) > 0 ? (
+        <div className="flex flex-col gap-4">
+          <SelectReleases releases={releases} />
+        </div>
+      ) : (
+        <Text>
+          <p>
+            No releases yet. Connect an input and an output to create a release.
+          </p>
+        </Text>
+      )}
+    </MainContent>
+  );
+}

apps/engine/src/app/layout.tsx

@@ -36,7 +36,7 @@ export default function RootLayout({
         <AnalyticsProvider>
           <body
             className={cn(
-              'flex flex-col items-center bg-zinc-100 min-h-screen',
+              'flex flex-col items-center bg-white min-h-screen',
               inter.className
             )}
           >

apps/engine/src/components/account-menu/acocunt-menu.tsx

@@ -1,6 +1,11 @@
 'use client';
 
+import { shapes } from '@dicebear/collection';
+import { createAvatar } from '@dicebear/core';
 import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -12,23 +17,42 @@ import {
   Text,
 } from '@ds-project/components';
 import Link from 'next/link';
+import { useMemo } from 'react';
 
 interface AccountMenuProps {
   email: string;
 }
 
 export function AccountMenu({ email }: AccountMenuProps) {
+  const avatarUri = useMemo(() => {
+    const avatar = createAvatar(shapes, {
+      seed: email,
+    });
+
+    return avatar.toDataUri();
+  }, [email]);
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost">
+        <Button variant="ghost" className="space-x-4">
+          <Avatar className="size-8">
+            <AvatarImage src={avatarUri} />
+            <AvatarFallback>{email}</AvatarFallback>
+          </Avatar>
+
           <Text size="sm">
-            <span>{email}</span>
+            <span>Account</span>
           </Text>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuLabel>
+          <Text mood="muted" weight="normal">
+            <span>{email}</span>
+          </Text>
+        </DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuItem asChild>
           <Link href="/auth/logout">

apps/engine/src/components/app-navigation/app-navigation.tsx

@@ -22,17 +22,19 @@ interface AppNavigationProps {
   className?: string;
   projects?: Pick<SelectProjects, 'id' | 'name'>[];
   email: string;
+  showReleases?: boolean;
 }
 
 export function AppNavigation({
   className,
   projects,
   email,
+  showReleases,
 }: AppNavigationProps) {
   return (
     <nav
       className={cn(
-        'flex w-full justify-between gap-2 border-b border-slate-200 bg-white pb-2',
+        'flex w-full justify-between gap-2 border-b border-slate-200 bg-white pb-2 shadow-sm',
         className
       )}
     >
@@ -66,13 +68,15 @@ export function AppNavigation({
                 </NavigationMenuLink>
               </Link>
             </NavigationMenuItem>
-            <NavigationMenuItem>
-              <Link href="/app/tokens" legacyBehavior passHref>
-                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                  Tokens
-                </NavigationMenuLink>
-              </Link>
-            </NavigationMenuItem>
+            {showReleases ? (
+              <NavigationMenuItem>
+                <Link href="/app/releases" legacyBehavior passHref>
+                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                    Releases
+                  </NavigationMenuLink>
+                </Link>
+              </NavigationMenuItem>
+            ) : null}
           </NavigationMenuList>
         </NavigationMenu>
       </div>

apps/engine/src/components/home-button/home-button.tsx

@@ -11,7 +11,7 @@ export function HomeButton({ className }: { className?: string }) {
       className={cn('border border-slate-200', className)}
       variant="ghost"
     >
-      <Link href="/">
+      <Link href="/app">
         <Image alt="Home" height={32} src={logo} width={32} />
       </Link>
     </Button>

apps/engine/src/components/main-content/main-content.tsx

@@ -15,7 +15,7 @@ export function MainContent({
   actions,
 }: MainContentProps) {
   return (
-    <div className="flex w-full flex-col items-center grow">
+    <div className="flex w-full flex-col items-center grow bg-zinc-50">
       <div className="flex w-full justify-center gap-2 border-b border-slate-200 px-4 py-8">
         <div className="flex w-full max-w-screen-xl justify-between">
           <div className="flex flex-col gap-2">

apps/engine/src/env/server-env.ts

@@ -21,6 +21,8 @@ export const serverEnv = createEnv({
     SENTRY_ORG: z.string().min(1).optional(),
     SENTRY_PROJECT: z.string().min(1).optional(),
     SENTRY_AUTH_TOKEN: z.string().min(1).optional(),
+    // Feature Flags
+    ENABLE_RELEASES_FLAG: z.coerce.boolean(),
   },
   experimental__runtimeEnv: process.env,
 });

apps/engine/src/lib/flags.ts

@@ -0,0 +1,6 @@
+import { serverEnv } from '@/env/server-env';
+import { unstable_flag as flag } from '@vercel/flags/next';
+export const getShowReleasesFlag = flag({
+  key: 'releases-feature',
+  decide: () => serverEnv.ENABLE_RELEASES_FLAG,
+});

packages/api/src/queries/integrations.ts

@@ -1,19 +1,18 @@
 import { eq } from '@ds-project/database';
 import type { DSContext } from '../types/context';
-import { AccountsToProjects, Integrations } from '@ds-project/database/schema';
+import {
+  AccountsToProjects,
+  Integrations,
+  integrationType,
+} from '@ds-project/database/schema';
 
 export const selectGithubIntegration = async ({ ctx }: { ctx: DSContext }) => {
-  const [queryResult] = await ctx.database
-    .select({
-      data: Integrations.data,
-    })
-    .from(Integrations)
-    .leftJoin(
-      AccountsToProjects,
-      eq(AccountsToProjects.projectId, Integrations.projectId)
-    )
-    .where(eq(AccountsToProjects.accountId, ctx.account.id))
-    .limit(1);
+  const queryResult = await ctx.database.query.Integrations.findFirst({
+    where: () => eq(Integrations.type, integrationType.Enum.github),
+    columns: {
+      data: true,
+    },
+  });
 
   if (queryResult?.data?.type === 'github') {
     return {

packages/components/package.json

@@ -33,6 +33,7 @@
   "prettier": "@ds-project/prettier",
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.1.0",
     "@radix-ui/react-avatar": "^1.1.0",