Add empty state, delete draft after posting

src/view/com/composer/Composer.tsx

@@ -831,6 +831,7 @@ export const ComposePost = ({
       onPost?.(postUri)
       onPostSuccess?.(postSuccessData)
     }
+    clearDraft()
     onClose()
     setTimeout(() => {
       Toast.show(
@@ -866,6 +867,7 @@ export const ComposePost = ({
     canPost,
     isPublishing,
     currentLanguages,
+    clearDraft,
     onClose,
     onPost,
     onPostSuccess,
@@ -1088,7 +1090,7 @@ export const ComposePost = ({
             </Prompt.DescriptionText>
             <Prompt.Actions>
               <Prompt.Action
-                cta={_(msg`Update`)}
+                cta={_(msg`Update draft`)}
                 onPress={() => {
                   // Explicitly save the changes before closing
                   saveImmediate(composerState)
@@ -1098,7 +1100,7 @@ export const ComposePost = ({
               />
               <Prompt.Action
                 cta={_(msg`Don't update`)}
-                color="negative"
+                color="negative_subtle"
                 onPress={() => {
                   // Just close without saving - preserve the original draft
                   closeComposer()
@@ -1117,10 +1119,10 @@ export const ComposePost = ({
               <Trans>Save to drafts to edit and post at a later time.</Trans>
             </Prompt.DescriptionText>
             <Prompt.Actions>
-              <Prompt.Action cta={_(msg`Save`)} onPress={onClose} />
+              <Prompt.Action cta={_(msg`Save draft`)} onPress={onClose} />
               <Prompt.Action
                 cta={_(msg`Don't save`)}
-                color="negative"
+                color="negative_subtle"
                 onPress={() => {
                   clearDraft()
                   closeComposer()
@@ -1140,10 +1142,13 @@ export const ComposePost = ({
             <Trans>Save to drafts to edit and post at a later time.</Trans>
           </Prompt.DescriptionText>
           <Prompt.Actions>
-            <Prompt.Action cta={_(msg`Save`)} onPress={onSaveBeforeDrafts} />
+            <Prompt.Action
+              cta={_(msg`Save draft`)}
+              onPress={onSaveBeforeDrafts}
+            />
             <Prompt.Action
               cta={_(msg`Don't save`)}
-              color="negative"
+              color="negative_subtle"
               onPress={onDiscardBeforeDrafts}
             />
             <Prompt.Cancel />
@@ -1159,7 +1164,7 @@ export const ComposePost = ({
           </Prompt.DescriptionText>
           <Prompt.Actions>
             <Prompt.Action
-              cta={_(msg`Update`)}
+              cta={_(msg`Update draft`)}
               onPress={() => {
                 saveImmediate(composerState)
                 setViewMode('drafts')
@@ -1167,7 +1172,7 @@ export const ComposePost = ({
             />
             <Prompt.Action
               cta={_(msg`Don't update`)}
-              color="negative"
+              color="negative_subtle"
               onPress={() => {
                 setViewMode('drafts')
               }}

src/view/com/composer/DraftsDialog.tsx

@@ -10,6 +10,7 @@ import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {DotGrid_Stroke2_Corner0_Rounded as DotsIcon} from '#/components/icons/DotGrid'
+import {PencilLine_Stroke2_Corner0_Rounded as PencilLineIcon} from '#/components/icons/Pencil'
 import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
 import * as Menu from '#/components/Menu'
 import {Text} from '#/components/Typography'
@@ -44,6 +45,7 @@ export function DraftsView({
     <View style={[a.flex_1]}>
       <View
         style={[a.flex_row, a.align_center, a.px_sm, a.gap_xs, {height: 54}]}>
+        <View style={[a.flex_1, a.flex_row, a.justify_start]}>
           <Button
             label={_(msg`Back`)}
             variant="ghost"
@@ -56,24 +58,20 @@ export function DraftsView({
               <Trans>Back</Trans>
             </ButtonText>
           </Button>
+        </View>
+        <Text style={[a.text_lg, a.font_bold]}>
+          <Trans>Drafts</Trans>
+        </Text>
         <View style={[a.flex_1]} />
       </View>
 
-      <ScrollView style={[a.flex_1]} contentContainerStyle={[a.p_lg, a.gap_lg]}>
+      <ScrollView style={[a.flex_1]} contentContainerStyle={[a.p_lg, a.gap_md]}>
-        <Text style={[a.text_2xl, a.font_semi_bold]}>
-          <Trans>Drafts</Trans>
-        </Text>
-
         {drafts.length === 0 ? (
-          <View style={[a.py_xl, a.align_center, a.gap_xs]}>
+          <View style={[a.py_xl, a.align_center, a.gap_md]}>
+            <PencilLineIcon width={64} style={[t.atoms.text_contrast_low]} />
             <Text style={[t.atoms.text_contrast_medium]}>
               <Trans>No drafts yet</Trans>
             </Text>
-            <Text style={[t.atoms.text_contrast_low, a.text_center]}>
-              <Trans>
-                When you close the composer, your post will be saved here.
-              </Trans>
-            </Text>
           </View>
         ) : (
           <View