refactor: empty files view

packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx

@@ -41,6 +41,7 @@ import { FeaturesController } from '@/Controllers/FeaturesController'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'
 import { PaneController } from '@/Controllers/PaneController/PaneController'
+import EmptyFilesView from './EmptyFilesView'
 
 type Props = {
   accountMenuController: AccountMenuController
@@ -352,7 +353,11 @@ const ContentListView = forwardRef<HTMLDivElement, Props>(
           />
         )}
         {!dailyMode && completedFullSync && !renderedItems.length ? (
-          <p className="empty-items-list opacity-50">No items.</p>
+          isFilesSmartView ? (
+            <EmptyFilesView addNewItem={addNewItem} />
+          ) : (
+            <p className="empty-items-list opacity-50">No items.</p>
+          )
         ) : null}
         {!dailyMode && !completedFullSync && !renderedItems.length ? (
           <p className="empty-items-list opacity-50">Loading...</p>

packages/web/src/javascripts/Components/ContentListView/EmptyFilesView.tsx

@@ -0,0 +1,23 @@
+import { FilesIllustration } from '@standardnotes/icons'
+import Button from '../Button/Button'
+
+type Props = {
+  addNewItem: () => void
+}
+
+const EmptyFilesView = ({ addNewItem }: Props) => {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center">
+      <FilesIllustration className="h-32 w-32" />
+      <div className="mt-4 mb-2 text-lg font-bold">You don't have any files yet</div>
+      <div className="mb-4 max-w-[35ch] text-center text-sm text-passive-0">
+        Files attached to your notes appear here. You can also upload files directly from this page.
+      </div>
+      <Button primary onClick={addNewItem}>
+        Upload files
+      </Button>
+    </div>
+  )
+}
+
+export default EmptyFilesView