empty state for folders

apps/desktop/src/folders/index.tsx

@@ -154,19 +154,27 @@ export function TabContentFolder({ tab }: { tab: Tab }) {
 }
 
 function TabContentFolderTopLevel() {
-  const { topLevel: topLevelFolderIds } = useFolderTree();
-
   return (
-    <div className="flex flex-col gap-6">
-      <Section icon={<FolderIcon className="h-4 w-4" />} title="Folders">
-        {topLevelFolderIds.length > 0 && (
-          <div className="grid grid-cols-4 gap-4">
-            {topLevelFolderIds.map((folderId) => (
-              <FolderCard key={folderId} folderId={folderId} />
-            ))}
-          </div>
-        )}
-      </Section>
+    <div className="justify-left flex h-full items-start p-8">
+      <div className="flex flex-col items-start gap-4 text-left">
+        <div className="flex items-end gap-4">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <img
+              key={i}
+              src="/assets/folder placeholder.svg"
+              alt=""
+              className="size-16 opacity-60"
+            />
+          ))}
+        </div>
+        <h1 className="text-foreground text-lg font-semibold">
+          Folders will be there soon
+        </h1>
+        <p className="text-muted-foreground max-w-xs text-sm">
+          We're working on a way for you to organize your notes <br />
+          Stay tuned!
+        </p>
+      </div>
     </div>
   );
 }

package.json

@@ -10,13 +10,17 @@
     "@tanstack/eslint-plugin-query": "^5.91.4",
     "dprint": "^0.51.1",
     "eslint": "^9.39.2",
+    "lint-staged": "^16.3.2",
     "oxfmt": "^0.35.0",
     "oxlint": "^1.50.0",
     "oxlint-tsgolint": "^0.12.2",
     "supabase": "^2.76.8",
     "turbo": "2.8.3",
     "typescript-eslint": "^8.55.0"
   },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx,json,css,md}": "dprint fmt"
+  },
   "packageManager": "pnpm@10.30.0",
   "engines": {
     "node": ">=22"