Re-design templates table made by e2b indication

src/features/dashboard/templates/by-e2b-badge.tsx

@@ -0,0 +1,21 @@
+import LogoWithoutText from '../../../ui/logo-without-text'
+import { Badge } from '../../../ui/primitives/badge'
+import HelpTooltip from '@/ui/help-tooltip'
+
+export function ByE2BBadge() {
+  return (
+    <HelpTooltip
+      trigger={
+        <Badge className="bg-bg-400 border-border-200 h-4.5 gap-1 border pr-0 pl-1">
+          BY
+          <LogoWithoutText className="-ml-1 h-4 w-4" />
+        </Badge>
+      }
+    >
+      <p className="text-fg-300 font-sans text-xs whitespace-break-spaces">
+        This template was created by E2B. It is one of the default templates
+        every user has access to.
+      </p>
+    </HelpTooltip>
+  )
+}

src/features/dashboard/templates/table-config.tsx

@@ -38,6 +38,7 @@ import posthog from 'posthog-js'
 import { cn } from '@/lib/utils'
 import { useAction } from 'next-safe-action/hooks'
 import { defaultSuccessToast, defaultErrorToast } from '@/lib/hooks/use-toast'
+import { ByE2BBadge } from '@/features/dashboard/templates/by-e2b-badge'
 
 // FILTERS
 export const fuzzyFilter: FilterFn<unknown> = (
@@ -240,13 +241,19 @@ export const useColumns = (deps: unknown[]) => {
         header: 'Name',
         size: 160,
         minSize: 120,
-        cell: ({ getValue }) => (
+        cell: ({ row, getValue }) => (
           <div
-            className={cn('truncate font-mono font-medium', {
-              'text-fg-500': !getValue(),
-            })}
+            className={cn(
+              'flex items-center gap-2 truncate font-mono font-medium',
+              {
+                'text-fg-500': !getValue(),
+              }
+            )}
           >
-            {(getValue() as string) ?? 'N/A'}
+            <span>{(getValue() as string) ?? 'N/A'}</span>
+            {'isDefault' in row.original && row.original.isDefault && (
+              <ByE2BBadge />
+            )}
           </div>
         ),
       },
@@ -329,23 +336,6 @@ export const useColumns = (deps: unknown[]) => {
         enableSorting: false,
         filterFn: 'equals',
       },
-      {
-        accessorKey: 'isDefault',
-        header: 'Made by E2B',
-        size: 100,
-        minSize: 100,
-        cell: ({ getValue }) => {
-          if (!getValue()) {
-            return null
-          }
-
-          return (
-            <Badge className={cn('text-accent font-mono whitespace-nowrap')}>
-              Yes
-            </Badge>
-          )
-        },
-      },
     ],
     deps
   )

src/server/middleware.ts

@@ -2,7 +2,11 @@ import { checkUserTeamAuthorization, resolveTeamId } from '@/lib/utils/server'
 import { kv } from '@/lib/clients/kv'
 import { KV_KEYS } from '@/configs/keys'
 import { NextRequest, NextResponse } from 'next/server'
-import { LANDING_PAGE_DOMAIN, replaceUrls } from '@/configs/domains'
+import {
+  DOCS_NEXT_DOMAIN,
+  LANDING_PAGE_DOMAIN,
+  replaceUrls,
+} from '@/configs/domains'
 import { COOKIE_KEYS } from '@/configs/keys'
 import { AUTH_URLS, PROTECTED_URLS } from '@/configs/urls'
 import { supabaseAdmin } from '@/lib/clients/supabase/admin'
@@ -219,7 +223,10 @@ export const handleUrlRewrites = async (
   }
 
   try {
-    if (url.hostname === LANDING_PAGE_DOMAIN) {
+    if (
+      url.hostname === LANDING_PAGE_DOMAIN ||
+      url.hostname === DOCS_NEXT_DOMAIN
+    ) {
       return NextResponse.rewrite(url.toString())
     }
 

src/ui/help-tooltip.tsx

@@ -8,14 +8,15 @@ import {
 
 interface HelpTooltipProps {
   children: React.ReactNode
+  trigger?: React.ReactNode
 }
 
-export default function HelpTooltip({ children }: HelpTooltipProps) {
+export default function HelpTooltip({ children, trigger }: HelpTooltipProps) {
   return (
     <TooltipProvider delayDuration={200}>
       <Tooltip>
         <TooltipTrigger tabIndex={-1} type="button">
-          <InfoIcon className="text-fg-500 size-4" />
+          {trigger || <InfoIcon className="text-fg-500 size-4" />}
         </TooltipTrigger>
         <TooltipContent className="text-fg-300 max-w-[200px] p-2 font-sans text-xs font-normal normal-case">
           <InfoIcon className="text-fg-500 mb-2 size-4" />