Homepage UI Rework! (#348)

* inital homepage rework, sections, card style, srcbook to notebook

* fix lil linter error

* move user facing Srcbook (in ref to notebook) to Notebook

* style up to match figma

packages/components/src/components/ai-generate-tips-dialog.tsx

@@ -12,7 +12,7 @@ export default function AiGenerateTipsDialog({ children }: { children: React.Rea
           <div className="text-sm">
             <p>Here are a few tips to get the AI to work well for you.</p>
             <ul className="list-disc list-inside py-4 leading-5">
-              <li>The AI knows already knows about all of the contents of this srcbook.</li>
+              <li>The AI knows already knows about all of the contents of this notebook.</li>
               <li>It also knows what cell you're updating.</li>
               <li>You can ask the code to add or improve comments or jsdoc.</li>
               <li>You can ask the AI to refactor or rewrite the whole thing.</li>

packages/web/src/components/ai-generate-tips-dialog.tsx

@@ -19,7 +19,7 @@ export default function AiGenerateTipsDialog({ children }: { children: React.Rea
             <p>Here are a few tips to get the AI to work well for you.</p>
 
             <ul className="list-disc list-inside py-4 leading-5">
-              <li>The AI already knows about all of the contents of this srcbook.</li>
+              <li>The AI already knows about all of the contents of this notebook.</li>
               <li>It also knows what cell you're updating.</li>
               <li>You can ask the AI to add or improve comments or JSDoc.</li>
               <li>You can ask the AI to refactor or rewrite the whole thing.</li>

packages/web/src/components/delete-srcbook-dialog.tsx

@@ -45,7 +45,7 @@ export default function DeleteSrcbookModal({
           <DialogTitle>Delete "{getTitleForSession(session)}"?</DialogTitle>
           <DialogDescription asChild>
             <div>
-              <p className="text-foreground">Deleting a Srcbook cannot be undone.</p>
+              <p className="text-foreground">Deleting a Notebook cannot be undone.</p>
             </div>
           </DialogDescription>
         </DialogHeader>

packages/web/src/components/drag-and-drop-srcmd-modal.tsx

@@ -31,7 +31,7 @@ function Modal(props: { open: boolean }) {
             </div>
           </div>
           <div className="flex-1 flex flex-col items-center justify-center gap-2">
-            <strong className="text-lg font-semibold leading-tight">Open Srcbook</strong>
+            <strong className="text-lg font-semibold leading-tight">Open Notebook</strong>
             <p className="text-tertiary-foreground">
               Drop <code className="code">.src.md</code> file to open
             </p>

packages/web/src/components/generate-srcbook-modal.tsx

@@ -81,7 +81,7 @@ export default function GenerateSrcbookModal({
         <div className="flex flex-col gap-3">
           {!aiEnabled && <APIKeyWarning />}
           <Textarea
-            placeholder="Write a prompt to create a Srcbook..."
+            placeholder="Write a prompt to create a Notebook..."
             className="focus-visible:ring-2"
             rows={4}
             value={query}

packages/web/src/components/import-export-srcbook-modal.tsx

@@ -170,9 +170,9 @@ export function ImportSrcbookModal({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-3xl">
         <DialogHeader>
-          <DialogTitle>Open Srcbook</DialogTitle>
+          <DialogTitle>Open Notebook</DialogTitle>
           <DialogDescription asChild>
-            <p>Use one of the options below to open a Srcbook.</p>
+            <p>Use one of the options below to open a Notebook.</p>
           </DialogDescription>
         </DialogHeader>
 
@@ -403,8 +403,8 @@ export function ExportSrcbookModal({
           <DialogTitle>Export Srcbook</DialogTitle>
           <DialogDescription asChild>
             <p>
-              Export this Srcbook to a <code className="code">.src.md</code> file which is shareable
-              and can be imported into any Srcbook application.
+              Export this Notebook to a <code className="code">.src.md</code> file which is
+              shareable and can be imported into any Srcbook application.
             </p>
           </DialogDescription>
         </DialogHeader>

packages/web/src/components/navbar.tsx

@@ -204,7 +204,7 @@ export function SessionNavbar(props: SessionNavbarProps) {
                       className="cursor-pointer"
                     >
                       <ImportIcon className="mr-2 h-4 w-4" />
-                      <span>Open Srcbook</span>
+                      <span>Open Notebook</span>
                     </DropdownMenuItem>
                   </DropdownMenuContent>
                 </DropdownMenu>

packages/web/src/components/session-menu/settings-panel.tsx

@@ -45,7 +45,7 @@ export default function SessionMenuPanelSettings({ readOnly, session, channel }:
           >
             <X size={16} />
           </button>
-          <h2 className="font-bold">Use AI in Srcbook</h2>
+          <h2 className="font-bold">Use AI in notebook</h2>
           <p>
             AI features not enabled. To enable them, set up in{' '}
             <button

packages/web/src/components/srcbook-cards.tsx

@@ -1,4 +1,4 @@
-import { Sparkles, Circle, PlusIcon, Trash2, Upload } from 'lucide-react';
+import { Sparkles, Circle, PlusIcon, Trash2, Import, LayoutGrid } from 'lucide-react';
 import { Button } from '@srcbook/components/src/components/ui/button';
 import { CodeLanguageType } from '@srcbook/shared';
 import { SrcbookLogo } from './logos';
@@ -114,14 +114,10 @@ export function CardContainer({
       {...props}
       onClick={onClick}
       className={cn(
-        'group border relative rounded-sm h-[108px] overflow-clip cursor-pointer transition-colors text-sm',
+        'group border relative rounded-md h-[92px] overflow-clip cursor-pointer transition-colors text-sm',
         className,
       )}
     >
-      <LongDashedHorizontalLine className="absolute top-[10px] text-border" />
-      <LongDashedHorizontalLine className="absolute bottom-[10px] text-border" />
-      <LongDashedVerticalLine className="absolute left-[10px] text-border" />
-      <LongDashedVerticalLine className="absolute right-[10px] text-border" />
       <div className="px-5 py-4 h-full flex flex-col justify-between">{children}</div>
     </div>
   );
@@ -159,12 +155,9 @@ export function SrcbookCard(props: SrcbookCardPropsType) {
               <span>Running</span>
             </>
           ) : (
-            <>
-              <SrcbookLogo className="text-foreground" size={16} />
-              <span>
-                {props.cellCount} {props.cellCount === 1 ? 'Cell' : 'Cells'}
-              </span>
-            </>
+            <span>
+              {props.cellCount} {props.cellCount === 1 ? 'Cell' : 'Cells'}
+            </span>
           )}
         </div>
         <code className="font-mono group-hover:hidden">
@@ -200,13 +193,12 @@ export function AppCard(props: AppCardPropsType) {
       onClick={props.onClick}
       className="active:translate-y-0.5 hover:border-foreground"
     >
-      <h5 className="font-semibold leading-[18px] line-clamp-2">{props.name}</h5>
-      <div className="flex items-center justify-between text-tertiary-foreground">
-        <div className="text-[13px] flex items-center gap-2">
-          <SrcbookLogo className="text-foreground" size={16} />
-          <span>React</span>
-        </div>
-        <code className="font-mono group-hover:hidden">
+      <span className="flex items-center">
+        <LayoutGrid size={20} className="mr-2 text-sb-purple-60" />
+        <h5 className="font-semibold leading-[18px] line-clamp-2">{props.name}</h5>
+      </span>
+      <div className="flex justify-end">
+        <code className="font-mono group-hover:hidden text-tertiary-foreground">
           {props.language === 'javascript' ? 'JS' : 'TS'}
         </code>
         <button
@@ -221,27 +213,17 @@ export function AppCard(props: AppCardPropsType) {
   );
 }
 
-function BigButton(props: { onClick: () => void; className?: string; children: React.ReactNode }) {
-  return (
-    <button
-      onClick={props.onClick}
-      className={cn(
-        'w-full sm:w-[216px] sm:max-w-[216px] h-24 p-3 bg-background border rounded-sm hover:border-ring transition-all',
-        props.className,
-      )}
-    >
-      {props.children}
-    </button>
-  );
-}
 export function GenerateSrcbookButton(props: { onClick: () => void }) {
   return (
-    <BigButton onClick={props.onClick}>
+    <CardContainer
+      onClick={() => props.onClick()}
+      className="active:translate-y-0.5 hover:border-foreground"
+    >
       <div className="flex flex-col h-full items-start justify-between">
         <Sparkles size={20} />
-        <h5 className="font-medium leading-[18px]">Generate Srcbook</h5>
+        <h5 className="font-medium leading-[18px]">Generate Notebook</h5>
       </div>
-    </BigButton>
+    </CardContainer>
   );
 }
 
@@ -253,16 +235,19 @@ export function CreateSrcbookButton(props: {
 
   return (
     <div className="space-y-1">
-      <BigButton onClick={() => props.onSubmit(language)}>
+      <CardContainer
+        onClick={() => props.onSubmit(language)}
+        className="active:translate-y-0.5 hover:border-foreground"
+      >
         <div className="flex flex-col h-full items-start justify-between">
           <PlusIcon size={20} />
-          <h5 className="font-medium leading-[18px]">Create Srcbook</h5>
+          <h5 className="font-medium leading-[18px]">Create Notebook</h5>
         </div>
-      </BigButton>
+      </CardContainer>
 
       <div className="flex border rounded-sm bg-background w-fit">
         <Button
-          title="Use JavaScript for this Srcbook"
+          title="Use JavaScript for this Notebook"
           variant="secondary"
           className={cn(
             'border-none rounded-r-none active:translate-y-0 text-muted-foreground bg-muted w-10',
@@ -273,7 +258,7 @@ export function CreateSrcbookButton(props: {
           JS
         </Button>
         <Button
-          title="Use TypeScript for this Srcbook"
+          title="Use TypeScript for this Notebook"
           variant="secondary"
           className={cn(
             'border-none rounded-l-none active:translate-y-0 text-muted-foreground bg-muted w-10',
@@ -290,32 +275,35 @@ export function CreateSrcbookButton(props: {
 
 export function CreateAppButton(props: { defaultLanguage: CodeLanguageType; onClick: () => void }) {
   return (
-    <div className="space-y-1">
-      <BigButton onClick={() => props.onClick()}>
-        <div className="flex flex-col h-full items-start justify-between">
-          <PlusIcon size={20} />
-          <h5 className="font-medium leading-[18px]">Create App</h5>
+    <CardContainer
+      onClick={() => props.onClick()}
+      className="active:translate-y-0.5 bg-[#F6EEFB80] border-sb-purple-20 hover:border-sb-purple-60 text-sb-purple-70"
+    >
+      <div className="flex flex-col h-full items-start justify-between">
+        <PlusIcon size={20} />
+        <div className="flex items-center">
+          <h5 className="font-medium leading-[18px] mr-2">Create App</h5>
+          <span className="flex items-center justify-center h-[16px] px-2 rounded-lg text-sb-purple-60 bg-sb-core-0">
+            New
+          </span>
         </div>
-      </BigButton>
-    </div>
+      </div>
+    </CardContainer>
   );
 }
 
 export function ImportSrcbookButton(props: { onClick: () => void }) {
   return (
-    <BigButton
-      onClick={props.onClick}
+    <CardContainer
+      onClick={() => props.onClick()}
       className="border-dashed hover:border-solid focus-within:border-foreground"
     >
       <div className="flex flex-col h-full items-start justify-between">
-        <Upload size={20} />
+        <Import size={20} />
         <div className="flex flex-col items-start gap-1">
-          <h5 className="font-medium leading-none">Open Srcbook</h5>
-          <p className="leading-none text-[13px] text-tertiary-foreground">
-            or drag 'n drop <span className="font-medium">.src.md</span> file
-          </p>
+          <h5 className="font-medium leading-none">Import Notebook</h5>
         </div>
       </div>
-    </BigButton>
+    </CardContainer>
   );
 }

packages/web/src/index.css

@@ -54,6 +54,7 @@
     --sb-purple-10: 270 62% 96%;
     --sb-purple-20: 270 78% 91%;
     --sb-purple-60: 277 42% 57%;
+    --sb-purple-70: 277 34% 47%;
     --sb-purple-80: 277 38% 38%;
 
     --sb-green-20: 123 40% 90%;

packages/web/src/routes/home.tsx

@@ -119,21 +119,36 @@ export default function Home() {
       <ImportSrcbookModal open={showImportSrcbookModal} onOpenChange={setShowImportSrcbookModal} />
 
       <div>
-        <h4 className="h4 mx-auto mb-6">New Srcbook</h4>
+        <h4 className="h4 mx-auto mb-6">Apps</h4>
         <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6">
-          <CreateSrcbookButton defaultLanguage={defaultLanguage} onSubmit={onCreateSrcbook} />
           <CreateAppButton
             defaultLanguage={defaultLanguage}
             onClick={() => setShowCreateAppModal(true)}
           />
+          {apps.map((app) => (
+            <AppCard
+              key={app.id}
+              name={app.name}
+              language={app.language}
+              onClick={() => navigate(`/apps/${app.id}`)}
+              onDelete={() => setAppToDelete(app)}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <h4 className="h4 mx-auto mt-8 mb-6">New Notebook</h4>
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6">
+          <CreateSrcbookButton defaultLanguage={defaultLanguage} onSubmit={onCreateSrcbook} />
           <GenerateSrcbookButton onClick={() => setShowGenSrcbookModal(true)} />
           <ImportSrcbookButton onClick={() => setShowImportSrcbookModal(true)} />
         </div>
       </div>
 
       {srcbooks.length > 0 && (
         <div>
-          <h4 className="h4 mx-auto mt-8 mb-6">Your Srcbooks</h4>
+          <h4 className="h4 mx-auto mt-8 mb-6">Your Notebooks</h4>
           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
             {srcbooks
               .sort((a, b) => b.openedAt - a.openedAt)
@@ -152,23 +167,6 @@ export default function Home() {
         </div>
       )}
 
-      {apps.length > 0 && (
-        <div>
-          <h4 className="h4 mx-auto mt-8 mb-6">Your apps</h4>
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-            {apps.map((app) => (
-              <AppCard
-                key={app.id}
-                name={app.name}
-                language={app.language}
-                onClick={() => navigate(`/apps/${app.id}`)}
-                onDelete={() => setAppToDelete(app)}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-
       {examples.length > 0 && (
         <div>
           <h4 className="h4 mt-8 mb-6">Explore</h4>

packages/web/tailwind.config.js

@@ -155,6 +155,7 @@ module.exports = {
           'purple-10': 'hsl(var(--sb-purple-10))',
           'purple-20': 'hsl(var(--sb-purple-20))',
           'purple-60': 'hsl(var(--sb-purple-60))',
+          'purple-70': 'hsl(var(--sb-purple-70))',
           'purple-80': 'hsl(var(--sb-purple-80))',
 
           'green-20': 'hsl(var(--sb-green-20))',