From 46b029cb0e7483ba93f377ce87b78ce786c3cc1a Mon Sep 17 00:00:00 2001
From: sdairs <sdairs@users.noreply.github.com>
Date: Sun, 5 Jan 2025 20:59:04 +0000
Subject: [PATCH 1/5] sidebar notoken & perm state, add DS read to read token

---
 apps/web/src/components/sidebar.tsx         | 40 ++++++++++++---------
 tinybird/datasources/auth0.datasource       |  1 +
 tinybird/datasources/clerk.datasource       |  1 +
 tinybird/datasources/github.datasource      |  1 +
 tinybird/datasources/gitlab.datasource      |  1 +
 tinybird/datasources/knock.datasource       |  1 +
 tinybird/datasources/mailgun.datasource     |  1 +
 tinybird/datasources/orb.datasource         |  1 +
 tinybird/datasources/pagerduty.datasource   |  1 +
 tinybird/datasources/resend.datasource      |  1 +
 tinybird/datasources/sentry.datasource      |  1 +
 tinybird/datasources/stripe.datasource      |  1 +
 tinybird/datasources/vercel.datasource      |  1 +
 tinybird/datasources/vercel_logs.datasource |  1 +
 14 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/components/sidebar.tsx b/apps/web/src/components/sidebar.tsx
index 988b3a2..cfa5bc6 100644
--- a/apps/web/src/components/sidebar.tsx
+++ b/apps/web/src/components/sidebar.tsx
@@ -39,7 +39,7 @@ function AppCard({
           <div>
             <div className="flex items-center gap-2">
               <h3 className="font-semibold text-sm">{app.name}</h3>
-              <span className="text-xs text-muted-foreground">({state})</span>
+              {/* <span className="text-xs text-muted-foreground">({state})</span> */}
             </div>
           </div>
         </div>
@@ -75,28 +75,34 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
 
   useEffect(() => {
     async function fetchToolStates() {
-      if (!token) return;
-      setIsLoading(true);
-      // setError(undefined);
-      try {
-        const allStates = await checkToolState(token);
+      if (!token) {
         const states = Object.values(TOOLS).map((app) => {
-          return [app.id, allStates[app.ds]] as const;
+          return [app.id, 'available'] as const;
         });
         setToolStates(Object.fromEntries(states));
-      } catch (error) {
-        if (error instanceof InvalidTokenError) {
-          // setError('Invalid token');
-          setToken(null);
-        } else {
-          console.error('Failed to fetch tool states:', error);
-          // setError('Failed to fetch tool states');
+      } else {
+        setIsLoading(true);
+        // setError(undefined);
+        try {
+          const allStates = await checkToolState(token);
+          const states = Object.values(TOOLS).map((app) => {
+            return [app.id, allStates[app.ds] ?? 'available'] as const;
+          });
+          setToolStates(Object.fromEntries(states));
+        } catch (error) {
+          if (error instanceof InvalidTokenError) {
+            // setError('Invalid token');
+            setToken(null);
+          } else {
+            console.error('Failed to fetch tool states:', error);
+            // setError('Failed to fetch tool states');
+          }
+        } finally {
+          setIsLoading(false);
         }
-      } finally {
-        setIsLoading(false);
       }
     }
-    if (token) fetchToolStates();
+    fetchToolStates();
   }, [token, setToken]);
 
   return (
diff --git a/tinybird/datasources/auth0.datasource b/tinybird/datasources/auth0.datasource
index 8cfad4e..0943c9d 100644
--- a/tinybird/datasources/auth0.datasource
+++ b/tinybird/datasources/auth0.datasource
@@ -1,4 +1,5 @@
 TOKEN "append" APPEND
+TOKEN "read" READ
 
 # Refer to https://github.com/auth0/auth0-log-schemas and https://auth0.com/docs/deploy-monitor/logs/log-event-type-codes for the type codes
 
diff --git a/tinybird/datasources/clerk.datasource b/tinybird/datasources/clerk.datasource
index 0fe5ea7..54d3dc9 100644
--- a/tinybird/datasources/clerk.datasource
+++ b/tinybird/datasources/clerk.datasource
@@ -1,4 +1,5 @@
 TOKEN "append" APPEND
+TOKEN "read" READ
 
 # Refer to https://clerk.com/docs/webhooks/overview#payload-structure
 
diff --git a/tinybird/datasources/github.datasource b/tinybird/datasources/github.datasource
index 5613c80..6a2a78d 100644
--- a/tinybird/datasources/github.datasource
+++ b/tinybird/datasources/github.datasource
@@ -1,4 +1,5 @@
 TOKEN "append" APPEND
+TOKEN "read" READ
 
 # Refer to https://docs.github.com/en/webhooks/webhook-events-and-payloads
 
diff --git a/tinybird/datasources/gitlab.datasource b/tinybird/datasources/gitlab.datasource
index a5da26f..edcc383 100644
--- a/tinybird/datasources/gitlab.datasource
+++ b/tinybird/datasources/gitlab.datasource
@@ -1,4 +1,5 @@
 TOKEN "append" APPEND
+TOKEN "read" READ
 
 # Refer to https://docs.gitlab.com/ee/user/project/integrations/webhook_events.html
 
diff --git a/tinybird/datasources/knock.datasource b/tinybird/datasources/knock.datasource
index 971ac67..77fe3ed 100644
--- a/tinybird/datasources/knock.datasource
+++ b/tinybird/datasources/knock.datasource
@@ -1,4 +1,5 @@
 TOKEN "append" APPEND
+TOKEN "read" READ
 
 # Refer to https://docs.knock.app/developer-tools/outbound-webhooks/event-types
 
diff --git a/tinybird/datasources/mailgun.datasource b/tinybird/datasources/mailgun.datasource
index 7bcd658..0459c57 100644
--- a/tinybird/datasources/mailgun.datasource
+++ b/tinybird/datasources/mailgun.datasource
@@ -1,4 +1,5 @@
 TOKEN "append" APPEND
+TOKEN "read" READ
 
 # Refer to https://mailgun-docs.redoc.ly/docs/mailgun/user-manual/events/#event-structure
 
diff --git a/tinybird/datasources/orb.datasource b/tinybird/datasources/orb.datasource
index 1c4e53a..ff44a38 100644
--- a/tinybird/datasources/orb.datasource
+++ b/tinybird/datasources/orb.datasource
@@ -1,4 +1,5 @@
 TOKEN "append" APPEND
+TOKEN "read" READ
 
 # Refer to https://docs.withorb.com/guides/integrations-and-exports/webhooks for the `details` schema definition for each resource type
 
diff --git a/tinybird/datasources/pagerduty.datasource b/tinybird/datasources/pagerduty.datasource
index 880243b..cbaca23 100644
--- a/tinybird/datasources/pagerduty.datasource
+++ b/tinybird/datasources/pagerduty.datasource
@@ -1,4 +1,5 @@
 TOKEN "append" APPEND
+TOKEN "read" READ
 
 # Refer to https://developer.pagerduty.com/docs/webhooks-overview#webhook-payload
 
diff --git a/tinybird/datasources/resend.datasource b/tinybird/datasources/resend.datasource
index 827a094..2e6cc10 100644
--- a/tinybird/datasources/resend.datasource
+++ b/tinybird/datasources/resend.datasource
@@ -1,4 +1,5 @@
 TOKEN "append" APPEND
+TOKEN "read" READ
 
 # Refer to https://resend.com/docs/dashboard/webhooks/event-types
 
diff --git a/tinybird/datasources/sentry.datasource b/tinybird/datasources/sentry.datasource
index 9942b5f..fa438e0 100644
--- a/tinybird/datasources/sentry.datasource
+++ b/tinybird/datasources/sentry.datasource
@@ -1,4 +1,5 @@
 TOKEN "append" APPEND
+TOKEN "read" READ
 
 # Refer to https://docs.sentry.io/organization/integrations/integration-platform/webhooks/ for the json schemas
 
diff --git a/tinybird/datasources/stripe.datasource b/tinybird/datasources/stripe.datasource
index 143e128..1428dba 100644
--- a/tinybird/datasources/stripe.datasource
+++ b/tinybird/datasources/stripe.datasource
@@ -1,4 +1,5 @@
 TOKEN "append" APPEND
+TOKEN "read" READ
 
 # Refer to https://docs.stripe.com/api/events/object for the event schemas
 
diff --git a/tinybird/datasources/vercel.datasource b/tinybird/datasources/vercel.datasource
index 8a04bb1..d94742c 100644
--- a/tinybird/datasources/vercel.datasource
+++ b/tinybird/datasources/vercel.datasource
@@ -1,4 +1,5 @@
 TOKEN "append" APPEND
+TOKEN "read" READ
 
 # Refer to https://vercel.com/docs/observability/webhooks-overview#events for the event types and payload schema
 
diff --git a/tinybird/datasources/vercel_logs.datasource b/tinybird/datasources/vercel_logs.datasource
index 2c666f2..bfcf6d5 100644
--- a/tinybird/datasources/vercel_logs.datasource
+++ b/tinybird/datasources/vercel_logs.datasource
@@ -1,4 +1,5 @@
 TOKEN "append" APPEND
+TOKEN "read" READ
 
 # Refer to https://vercel.com/docs/observability/log-drains/log-drains-reference for the logs schema
 

From 1ad33da3c46c9fe1a5729a27e220521ffe0abbbf Mon Sep 17 00:00:00 2001
From: sdairs <sdairs@users.noreply.github.com>
Date: Sun, 5 Jan 2025 21:08:15 +0000
Subject: [PATCH 2/5] remove color, use icons, change headers

---
 apps/web/src/components/sidebar.tsx | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/sidebar.tsx b/apps/web/src/components/sidebar.tsx
index cfa5bc6..77c067d 100644
--- a/apps/web/src/components/sidebar.tsx
+++ b/apps/web/src/components/sidebar.tsx
@@ -8,7 +8,7 @@ import { checkToolState, InvalidTokenError } from '@/lib/tinybird';
 import { TOOLS, type AppGridItem, type ToolState } from '@/lib/constants';
 import { SectionHeader } from '@/components/section-header';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { MessageSquare } from 'lucide-react';
+import { MessageSquare, HardDriveDownload, Settings } from 'lucide-react';
 import Image from 'next/image';
 
 function AppCard({
@@ -23,8 +23,8 @@ function AppCard({
   isActive: boolean;
 }) {
   const stateColors = {
-    configured: 'border-green-500',
-    installed: 'border-blue-500',
+    configured: '',
+    installed: '',
     available: ''
   };
 
@@ -34,13 +34,14 @@ function AppCard({
       href={`/${app.id}${token ? `?token=${token}` : ''}`}
     >
       <Card className={`p-3 hover:bg-accent mb-2 ${stateColors[state]} ${isActive ? 'bg-accent' : ''}`}>
-        <div className="flex items-center gap-3">
-          {app.icon_url && <Image src={app.icon_url} width={16} height={16} alt={app.name} />}
+        <div className="flex items-center justify-between w-full">
+          <div className="flex items-center gap-3">
+            {app.icon_url && <Image src={app.icon_url} width={16} height={16} alt={app.name} />}
+            <span className="font-medium">{app.name}</span>
+          </div>
           <div>
-            <div className="flex items-center gap-2">
-              <h3 className="font-semibold text-sm">{app.name}</h3>
-              {/* <span className="text-xs text-muted-foreground">({state})</span> */}
-            </div>
+            {state === 'available' && <HardDriveDownload className="w-4 h-4 text-muted-foreground" />}
+            {state === 'installed' && <Settings className="w-4 h-4 text-muted-foreground" />}
           </div>
         </div>
       </Card>
@@ -141,7 +142,7 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
             {Object.values(TOOLS).some(app => toolStates[app.id] === 'configured') && (
               <div className="space-y-2">
                 <SectionHeader
-                  title="Configured Apps"
+                  title="Dashboards"
                   tooltip="These apps are fully set up and have data. They're ready to use!"
                 />
                 <div className="space-y-2">
@@ -164,7 +165,7 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
             {Object.values(TOOLS).some(app => toolStates[app.id] === 'installed') && (
               <div className="space-y-2">
                 <SectionHeader
-                  title="Installed Apps"
+                  title="Installed"
                   tooltip="Your Tinybird Workspace has the Data Sources installed, but you're not receiving data. Click an app to learn how to add data."
                 />
                 <div className="space-y-2">
@@ -187,7 +188,7 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
             {Object.values(TOOLS).some(app => toolStates[app.id] === 'available') && (
               <div className="space-y-2">
                 <SectionHeader
-                  title="Available Apps"
+                  title="Available"
                   tooltip="Your Tinybird Workspace doesn't have the Data Sources installed yet. Click an app to learn how to install it."
                 />
                 <div className="space-y-2">

From 0566f2eeddb43d2868be07a0de585aaca77bb8a2 Mon Sep 17 00:00:00 2001
From: sdairs <sdairs@users.noreply.github.com>
Date: Sun, 5 Jan 2025 21:39:46 +0000
Subject: [PATCH 3/5] collapsible, mobile

---
 apps/web/src/components/sidebar.tsx  | 165 ++++++++++++++++++++-------
 apps/web/src/components/ui/sheet.tsx | 140 +++++++++++++++++++++++
 2 files changed, 266 insertions(+), 39 deletions(-)
 create mode 100644 apps/web/src/components/ui/sheet.tsx

diff --git a/apps/web/src/components/sidebar.tsx b/apps/web/src/components/sidebar.tsx
index 77c067d..01f7d51 100644
--- a/apps/web/src/components/sidebar.tsx
+++ b/apps/web/src/components/sidebar.tsx
@@ -8,7 +8,9 @@ import { checkToolState, InvalidTokenError } from '@/lib/tinybird';
 import { TOOLS, type AppGridItem, type ToolState } from '@/lib/constants';
 import { SectionHeader } from '@/components/section-header';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { MessageSquare, HardDriveDownload, Settings } from 'lucide-react';
+import { MessageSquare, HardDriveDownload, Settings, ChevronRight, ChevronLeft, Menu, LayoutDashboard, Download, Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import Image from 'next/image';
 
 function AppCard({
@@ -16,11 +18,13 @@ function AppCard({
   state,
   token,
   isActive,
+  isCollapsed
 }: {
   app: AppGridItem;
   state: ToolState;
   token?: string | null;
   isActive: boolean;
+  isCollapsed?: boolean;
 }) {
   const stateColors = {
     configured: '',
@@ -30,19 +34,21 @@ function AppCard({
 
   return (
     <Link
-      key={app.id}
+      className="block"
       href={`/${app.id}${token ? `?token=${token}` : ''}`}
     >
-      <Card className={`p-3 hover:bg-accent mb-2 ${stateColors[state]} ${isActive ? 'bg-accent' : ''}`}>
-        <div className="flex items-center justify-between w-full">
-          <div className="flex items-center gap-3">
-            {app.icon_url && <Image src={app.icon_url} width={16} height={16} alt={app.name} />}
-            <span className="font-medium">{app.name}</span>
-          </div>
-          <div>
-            {state === 'available' && <HardDriveDownload className="w-4 h-4 text-muted-foreground" />}
-            {state === 'installed' && <Settings className="w-4 h-4 text-muted-foreground" />}
+      <Card className={`h-[42px] hover:bg-accent mb-2 ${stateColors[state]} ${isActive ? 'bg-accent' : ''} ${isCollapsed ? 'w-10' : ''}`}>
+        <div className={`flex items-center justify-between h-full ${isCollapsed ? 'px-2' : 'px-3'} w-full`}>
+          <div className={`flex items-center gap-3 min-w-0 ${isCollapsed && 'mx-auto'}`}>
+            {app.icon_url && <Image src={app.icon_url} width={16} height={16} alt={app.name} className="flex-shrink-0" />}
+            {!isCollapsed && <span className="font-medium truncate">{app.name}</span>}
           </div>
+          {!isCollapsed && (
+            <div>
+              {state === 'available' && <HardDriveDownload className="w-4 h-4 text-muted-foreground" />}
+              {state === 'installed' && <Settings className="w-4 h-4 text-muted-foreground" />}
+            </div>
+          )}
         </div>
       </Card>
     </Link>
@@ -72,7 +78,7 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
   const [token, setToken] = useQueryState('token');
   const [toolStates, setToolStates] = useState<Record<string, ToolState>>({});
   const [isLoading, setIsLoading] = useState(false);
-  // const [error,setError] = useState<string>();
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
   useEffect(() => {
     async function fetchToolStates() {
@@ -83,7 +89,6 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
         setToolStates(Object.fromEntries(states));
       } else {
         setIsLoading(true);
-        // setError(undefined);
         try {
           const allStates = await checkToolState(token);
           const states = Object.values(TOOLS).map((app) => {
@@ -92,11 +97,9 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
           setToolStates(Object.fromEntries(states));
         } catch (error) {
           if (error instanceof InvalidTokenError) {
-            // setError('Invalid token');
             setToken(null);
           } else {
             console.error('Failed to fetch tool states:', error);
-            // setError('Failed to fetch tool states');
           }
         } finally {
           setIsLoading(false);
@@ -107,17 +110,78 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
   }, [token, setToken]);
 
   return (
-    <div className="w-64 border-r h-screen">
+    <>
+      {/* Mobile Menu Button */}
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="ghost" size="icon" className="fixed top-4 left-4 md:hidden">
+            <Menu className="h-6 w-6" />
+          </Button>
+        </SheetTrigger>
+        <SheetContent side="left" className="p-0 w-80">
+          <SidebarInner 
+            token={token}
+            activeAppId={activeAppId}
+            toolStates={toolStates}
+            isLoading={isLoading}
+          />
+        </SheetContent>
+      </Sheet>
+
+      {/* Desktop Sidebar */}
+      <div className={`border-r h-screen hidden md:block relative ${isCollapsed ? 'w-auto' : 'w-64'} transition-all duration-300`}>
+        <SidebarInner 
+          token={token}
+          activeAppId={activeAppId}
+          toolStates={toolStates}
+          isLoading={isLoading}
+          isCollapsed={isCollapsed}
+        />
+        
+        {/* Collapse Button */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className={`absolute ${isCollapsed ? '-right-4' : '-right-3'} bottom-4 rounded-full border shadow-md bg-background`}
+          onClick={() => setIsCollapsed(!isCollapsed)}
+        >
+          {isCollapsed ? (
+            <ChevronRight className="h-4 w-4" />
+          ) : (
+            <ChevronLeft className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
+    </>
+  );
+}
+
+// New component for the inner content of the sidebar
+function SidebarInner({ 
+  token, 
+  activeAppId, 
+  toolStates, 
+  isLoading,
+  isCollapsed 
+}: { 
+  token: string | null | undefined;
+  activeAppId?: string;
+  toolStates: Record<string, ToolState>;
+  isLoading: boolean;
+  isCollapsed?: boolean;
+}) {
+  return (
+    <>
       <div className="p-4 border-b">
         <Link
           href={token ? `/?token=${token}` : '/'}
-          className="text-xl font-bold hover:text-primary transition-colors"
+          className={`font-bold hover:text-primary transition-colors ${isCollapsed ? 'text-lg' : 'text-xl'}`}
         >
-          tinynest
+          {isCollapsed ? 'tn' : 'tinynest'}
         </Link>
       </div>
 
-      <ScrollArea className="h-[calc(100vh-65px)] px-4 py-6">
+      <ScrollArea className={`h-[calc(100vh-65px)] py-6 ${isCollapsed ? 'px-1' : 'px-4'}`}>
         {isLoading ? (
           <div className="flex items-center justify-center">
             <p className="text-sm font-semibold">Loading...</p>
@@ -128,11 +192,15 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
               href={token ? `/chat?token=${token}` : '/chat'}
               className="block"
             >
-              <Card className={`p-3 hover:bg-accent mb-2 ${activeAppId === 'chat' ? 'bg-accent' : ''}`}>
-                <div className="flex items-center gap-3">
-                  <MessageSquare className="w-5 h-5" />
-                  <div>
-                    <h3 className="font-semibold text-sm">Chat</h3>
+              <Card className={`h-[42px] hover:bg-accent mb-2 ${activeAppId === 'chat' ? 'bg-accent' : ''} ${isCollapsed ? 'w-10' : ''}`}>
+                <div className={`flex items-center h-full ${isCollapsed ? 'px-2' : 'px-3'} w-full`}>
+                  <div className={`flex items-center gap-3 min-w-0 ${isCollapsed && 'mx-auto'}`}>
+                    <MessageSquare className="w-4 h-4 flex-shrink-0" />
+                    {!isCollapsed && (
+                      <div>
+                        <h3 className="font-medium text-sm">Chat</h3>
+                      </div>
+                    )}
                   </div>
                 </div>
               </Card>
@@ -141,10 +209,16 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
             {/* Configured Apps */}
             {Object.values(TOOLS).some(app => toolStates[app.id] === 'configured') && (
               <div className="space-y-2">
-                <SectionHeader
-                  title="Dashboards"
-                  tooltip="These apps are fully set up and have data. They're ready to use!"
-                />
+                {isCollapsed ? (
+                  <div className="h-[24px] flex items-center justify-center mb-2 w-10">
+                    <LayoutDashboard className="w-4 h-4 text-muted-foreground" />
+                  </div>
+                ) : (
+                  <SectionHeader
+                    title="Dashboards"
+                    tooltip="These apps are fully set up and have data. They're ready to use!"
+                  />
+                )}
                 <div className="space-y-2">
                   {Object.values(TOOLS)
                     .filter(app => toolStates[app.id] === 'configured')
@@ -155,6 +229,7 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
                         state={toolStates[app.id]}
                         token={token}
                         isActive={app.id === activeAppId}
+                        isCollapsed={isCollapsed}
                       />
                     ))}
                 </div>
@@ -164,10 +239,16 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
             {/* Installed Apps */}
             {Object.values(TOOLS).some(app => toolStates[app.id] === 'installed') && (
               <div className="space-y-2">
-                <SectionHeader
-                  title="Installed"
-                  tooltip="Your Tinybird Workspace has the Data Sources installed, but you're not receiving data. Click an app to learn how to add data."
-                />
+                {isCollapsed ? (
+                  <div className="h-[24px] flex items-center justify-center mb-2 w-10">
+                    <Settings className="w-4 h-4 text-muted-foreground" />
+                  </div>
+                ) : (
+                  <SectionHeader
+                    title="Installed"
+                    tooltip="Your Tinybird Workspace has the Data Sources installed, but you're not receiving data. Click an app to learn how to add data."
+                  />
+                )}
                 <div className="space-y-2">
                   {Object.values(TOOLS)
                     .filter(app => toolStates[app.id] === 'installed')
@@ -178,6 +259,7 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
                         state={toolStates[app.id]}
                         token={token}
                         isActive={app.id === activeAppId}
+                        isCollapsed={isCollapsed}
                       />
                     ))}
                 </div>
@@ -187,10 +269,16 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
             {/* Available Apps */}
             {Object.values(TOOLS).some(app => toolStates[app.id] === 'available') && (
               <div className="space-y-2">
-                <SectionHeader
-                  title="Available"
-                  tooltip="Your Tinybird Workspace doesn't have the Data Sources installed yet. Click an app to learn how to install it."
-                />
+                {isCollapsed ? (
+                  <div className="h-[24px] flex items-center justify-center mb-2 w-10">
+                    <Plus className="w-4 h-4 text-muted-foreground" />
+                  </div>
+                ) : (
+                  <SectionHeader
+                    title="Available"
+                    tooltip="Your Tinybird Workspace doesn't have the Data Sources installed yet. Click an app to learn how to install it."
+                  />
+                )}
                 <div className="space-y-2">
                   {Object.values(TOOLS)
                     .filter(app => !toolStates[app.id] || toolStates[app.id] === 'available')
@@ -201,16 +289,15 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
                         state={toolStates[app.id] || 'available'}
                         token={token}
                         isActive={app.id === activeAppId}
+                        isCollapsed={isCollapsed}
                       />
                     ))}
                 </div>
               </div>
             )}
-
           </div>
-
         )}
       </ScrollArea>
-    </div>
+    </>
   );
 }
diff --git a/apps/web/src/components/ui/sheet.tsx b/apps/web/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..272cb72
--- /dev/null
+++ b/apps/web/src/components/ui/sheet.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

From e7850b30fc91f8f19732b6408673f3bfa6e26aae Mon Sep 17 00:00:00 2001
From: sdairs <sdairs@users.noreply.github.com>
Date: Sun, 5 Jan 2025 21:41:42 +0000
Subject: [PATCH 4/5] err on mobile

---
 apps/web/src/components/sidebar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/sidebar.tsx b/apps/web/src/components/sidebar.tsx
index 01f7d51..bb47f6a 100644
--- a/apps/web/src/components/sidebar.tsx
+++ b/apps/web/src/components/sidebar.tsx
@@ -10,7 +10,7 @@ import { SectionHeader } from '@/components/section-header';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { MessageSquare, HardDriveDownload, Settings, ChevronRight, ChevronLeft, Menu, LayoutDashboard, Download, Plus } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Sheet, SheetContent, SheetTrigger, SheetTitle } from '@/components/ui/sheet';
 import Image from 'next/image';
 
 function AppCard({
@@ -119,6 +119,7 @@ function SidebarContent({ activeAppId }: { activeAppId?: string }) {
           </Button>
         </SheetTrigger>
         <SheetContent side="left" className="p-0 w-80">
+          <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
           <SidebarInner 
             token={token}
             activeAppId={activeAppId}

From 0ae5978235e7deb1b95e10779c33ead65f14459a Mon Sep 17 00:00:00 2001
From: sdairs <sdairs@users.noreply.github.com>
Date: Mon, 6 Jan 2025 11:12:35 +0000
Subject: [PATCH 5/5] fix build err

---
 apps/web/src/components/sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/sidebar.tsx b/apps/web/src/components/sidebar.tsx
index bb47f6a..345c283 100644
--- a/apps/web/src/components/sidebar.tsx
+++ b/apps/web/src/components/sidebar.tsx
@@ -8,7 +8,7 @@ import { checkToolState, InvalidTokenError } from '@/lib/tinybird';
 import { TOOLS, type AppGridItem, type ToolState } from '@/lib/constants';
 import { SectionHeader } from '@/components/section-header';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { MessageSquare, HardDriveDownload, Settings, ChevronRight, ChevronLeft, Menu, LayoutDashboard, Download, Plus } from 'lucide-react';
+import { MessageSquare, HardDriveDownload, Settings, ChevronRight, ChevronLeft, Menu, LayoutDashboard, Plus } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger, SheetTitle } from '@/components/ui/sheet';
 import Image from 'next/image';