From 40b7c41b2e1b84bb8d933ee629f1525309a04440 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 9 Oct 2026 12:23:26 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement]=20?=
 =?UTF-8?q?Embed=20primary=20actions=20directly=20in=20empty=20states?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: markusbrand <4930140+markusbrand@users.noreply.github.com>
---
 .jules/palette.md           |  4 ++++
 web/src/pages/FilesPage.tsx | 44 +++++++++++++++++++++++++++++++++----
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 395009d..3009ecb 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -31,3 +31,7 @@
 ## 2026-10-02 - Add loading state to Save Appearance button
 **Learning:** Adding a loading state to async forms is critical. The "Appearance" dialog lacked a loading state on its "Save" button, which could lead to confusion or double submissions if the API call is slow.
 **Action:** When creating or modifying dialogs that submit data to the backend, always add a `loading` (or similar) state that disables the primary action buttons and provides visual feedback (e.g., `CircularProgress` and updating button text) during execution.
+
+## 2023-10-09 - Embed Primary and Secondary Actions in Empty States
+**Learning:** Embedding primary and secondary actions (e.g., Upload, New Folder) directly into empty states ("No files in your account yet." or "This folder is empty.") significantly reduces cognitive load and intuitively guides users on their next steps, as opposed to forcing them to find buttons elsewhere on the page.
+**Action:** When creating empty states for lists or containers, always embed primary and secondary actions directly into the empty state component to seamlessly guide the user's next steps.
diff --git a/web/src/pages/FilesPage.tsx b/web/src/pages/FilesPage.tsx
index 90a3721..e46c993 100644
--- a/web/src/pages/FilesPage.tsx
+++ b/web/src/pages/FilesPage.tsx
@@ -585,23 +585,59 @@ export default function FilesPage() {
           Loading files…
         </Typography>
       ) : !err && !hasAnyContent ? (
-        <Paper variant="outlined" sx={{ p: 3, textAlign: "center" }}>
-          <Typography variant="body1" color="text.secondary" gutterBottom>
+        <Paper variant="outlined" sx={{ p: 4, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
+          <Typography variant="body1" color="text.secondary">
             No files in your account yet.
           </Typography>
-          <Typography variant="body2" color="text.secondary">
+          <Typography variant="body2" color="text.secondary" sx={{ maxWidth: 400 }}>
             Upload from here, create a folder, or sync from the desktop app — files are listed from
             the server folder for your signed-in email.
           </Typography>
+          <Stack direction="row" spacing={2} justifyContent="center" sx={{ mt: 1 }}>
+            <Button
+              variant="contained"
+              component="label"
+              disabled={uploadBusy}
+              startIcon={uploadBusy ? <CircularProgress size={20} color="inherit" /> : <UploadIcon />}
+            >
+              {uploadBusy ? "Uploading..." : "Upload file"}
+              <input type="file" hidden onChange={onUpload} disabled={uploadBusy} />
+            </Button>
+            <Button
+              variant="outlined"
+              startIcon={<CreateNewFolderIcon />}
+              onClick={openNewFolderDialog}
+            >
+              New folder
+            </Button>
+          </Stack>
         </Paper>
       ) : entries.length === 0 || (entries.length === 1 && entries[0].kind === "parent") ? (
         <Paper variant="outlined">
           <List disablePadding>
             {currentFolder ? renderParentRow(goUp, true) : null}
-            <Box sx={{ p: 3, textAlign: "center" }}>
+            <Box sx={{ p: 4, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
               <Typography variant="body2" color="text.secondary">
                 This folder is empty.
               </Typography>
+              <Stack direction="row" spacing={2} justifyContent="center" sx={{ mt: 1 }}>
+                <Button
+                  variant="contained"
+                  component="label"
+                  disabled={uploadBusy}
+                  startIcon={uploadBusy ? <CircularProgress size={20} color="inherit" /> : <UploadIcon />}
+                >
+                  {uploadBusy ? "Uploading..." : "Upload file"}
+                  <input type="file" hidden onChange={onUpload} disabled={uploadBusy} />
+                </Button>
+                <Button
+                  variant="outlined"
+                  startIcon={<CreateNewFolderIcon />}
+                  onClick={openNewFolderDialog}
+                >
+                  New folder
+                </Button>
+              </Stack>
             </Box>
           </List>
         </Paper>