diff --git a/apps/x/apps/renderer/src/App.css b/apps/x/apps/renderer/src/App.css
index 05957587..68f16e0b 100644
--- a/apps/x/apps/renderer/src/App.css
+++ b/apps/x/apps/renderer/src/App.css
@@ -215,6 +215,15 @@
letter-spacing: 0.08em;
}
+.gmail-section {
+ display: flex;
+ flex-direction: column;
+}
+
+.gmail-section + .gmail-section {
+ margin-top: 28px;
+}
+
.gmail-row {
display: grid;
grid-template-columns: 12px minmax(140px, 0.22fr) minmax(0, 1fr) 60px;
diff --git a/apps/x/apps/renderer/src/components/email-view.tsx b/apps/x/apps/renderer/src/components/email-view.tsx
index b1de48b5..3edcbc92 100644
--- a/apps/x/apps/renderer/src/components/email-view.tsx
+++ b/apps/x/apps/renderer/src/components/email-view.tsx
@@ -558,8 +558,51 @@ export function EmailView() {
})
}, [query, threads])
+ const { importantThreads, otherThreads } = useMemo(() => {
+ const important: GmailThread[] = []
+ const other: GmailThread[] = []
+ for (const thread of filteredThreads) {
+ if (thread.messages.length > 1) important.push(thread)
+ else other.push(thread)
+ }
+ return { importantThreads: important, otherThreads: other }
+ }, [filteredThreads])
+
const hasThreads = filteredThreads.length > 0
+ const renderRow = (thread: GmailThread) => {
+ const latest = latestMessage(thread)
+ const isSelected = thread.threadId === selectedThreadId
+ const isUnread = thread.unread === true
+ const isMounted = openedThreadIds.includes(thread.threadId)
+ return (
+
+
+ {isMounted && (
+ setSelectedThreadId(null)}
+ hidden={!isSelected}
+ />
+ )}
+
+ )
+ }
+
return (
@@ -581,42 +624,24 @@ export function EmailView() {
Could not load mail: {error}
) : hasThreads ? (
-
- Last 2 days
- {filteredThreads.length} threads
-
- {filteredThreads.map((thread) => {
- const latest = latestMessage(thread)
- const isSelected = thread.threadId === selectedThreadId
- const isUnread = thread.unread === true
- const isMounted = openedThreadIds.includes(thread.threadId)
- return (
-
-
- {isMounted && (
-
setSelectedThreadId(null)}
- hidden={!isSelected}
- />
- )}
+ {importantThreads.length > 0 && (
+
+
+ Important
+ {importantThreads.length} thread{importantThreads.length === 1 ? '' : 's'}
- )
- })}
+ {importantThreads.map(renderRow)}
+
+ )}
+ {otherThreads.length > 0 && (
+
+
+ Everything else
+ {otherThreads.length} thread{otherThreads.length === 1 ? '' : 's'}
+
+ {otherThreads.map(renderRow)}
+
+ )}
) : (