AI pass on redesign

src/routes/spaces/+page.svelte

@@ -303,7 +303,9 @@
               </div>
             {/each}
           {:else if !term}
-            <p class="py-12 text-center">You haven't joined any spaces yet.</p>
+            <p class="py-10 text-center opacity-70">
+              You haven't joined any spaces yet — pick one below to dive in!
+            </p>
           {/if}
           <Divider>{filteredUserUrls.length > 0 ? "More Spaces" : "Browse Spaces"}</Divider>
           {#each otherSpaces.slice(0, limit) as relay (relay.url)}

src/routes/spaces/[relay]/calendar/+page.svelte

@@ -17,6 +17,7 @@
   import SpaceBar from "@app/components/SpaceBar.svelte"
   import CalendarEventItem from "@app/components/CalendarEventItem.svelte"
   import CalendarEventCreate from "@app/components/CalendarEventCreate.svelte"
+  import EmptyState from "@app/components/EmptyState.svelte"
   import {pushModal} from "@app/modal"
   import {decodeRelay} from "@app/relays"
   import {makeCommentFilter} from "@app/content"
@@ -147,7 +148,9 @@
       <Spinner {loading}>Looking for events...</Spinner>
     </p>
   {:else if items.length === 0}
-    <p class="flex h-10 items-center justify-center py-20" transition:fly>No events found.</p>
+    <EmptyState icon={CalendarMinimalistic} title="No events yet">
+      Planning a meetup or call? Add an event so everyone knows when to show up.
+    </EmptyState>
   {:else}
     <p class="flex h-10 items-center justify-center py-20" transition:fly>That's all!</p>
   {/if}

src/routes/spaces/[relay]/goals/+page.svelte

@@ -16,6 +16,7 @@
   import SpaceBar from "@app/components/SpaceBar.svelte"
   import GoalItem from "@app/components/GoalItem.svelte"
   import GoalCreate from "@app/components/GoalCreate.svelte"
+  import EmptyState from "@app/components/EmptyState.svelte"
   import {decodeRelay} from "@app/relays"
   import {makeCommentFilter} from "@app/content"
   import {makeFeed} from "@app/feeds"
@@ -83,15 +84,15 @@
       <GoalItem {url} event={$state.snapshot(event)} />
     </div>
   {/each}
-  <p class="flex h-10 items-center justify-center py-20">
-    <Spinner {loading}>
-      {#if loading}
-        Looking for goals...
-      {:else if items.length === 0}
-        No goals found.
-      {:else}
-        That's all!
-      {/if}
-    </Spinner>
-  </p>
+  {#if loading}
+    <p class="flex h-10 items-center justify-center py-20">
+      <Spinner loading>Looking for goals...</Spinner>
+    </p>
+  {:else if items.length === 0}
+    <EmptyState icon={StarFallMinimalistic} title="No goals yet">
+      Rallying the community around something? Set a goal and watch the support roll in.
+    </EmptyState>
+  {:else}
+    <p class="flex items-center justify-center py-10 text-sm opacity-50">That's all!</p>
+  {/if}
 </PageContent>

src/routes/spaces/[relay]/polls/+page.svelte

@@ -16,6 +16,7 @@
   import SpaceBar from "@app/components/SpaceBar.svelte"
   import PollItem from "@app/components/PollItem.svelte"
   import PollCreate from "@app/components/PollCreate.svelte"
+  import EmptyState from "@app/components/EmptyState.svelte"
   import {decodeRelay} from "@app/relays"
   import {makeCommentFilter} from "@app/content"
   import {makeFeed} from "@app/feeds"
@@ -83,15 +84,15 @@
       <PollItem {url} event={$state.snapshot(event)} />
     </div>
   {/each}
-  <p class="flex h-10 items-center justify-center py-20">
-    <Spinner {loading}>
-      {#if loading}
-        Looking for polls...
-      {:else if items.length === 0}
-        No polls found.
-      {:else}
-        That's all!
-      {/if}
-    </Spinner>
-  </p>
+  {#if loading}
+    <p class="flex h-10 items-center justify-center py-20">
+      <Spinner loading>Looking for polls...</Spinner>
+    </p>
+  {:else if items.length === 0}
+    <EmptyState icon={PollIcon} title="No polls yet">
+      Want to take the room's temperature? Create the first poll and let people weigh in.
+    </EmptyState>
+  {:else}
+    <p class="flex items-center justify-center py-10 text-sm opacity-50">That's all!</p>
+  {/if}
 </PageContent>

src/routes/spaces/[relay]/threads/+page.svelte

@@ -16,6 +16,7 @@
   import SpaceBar from "@app/components/SpaceBar.svelte"
   import ThreadItem from "@app/components/ThreadItem.svelte"
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
+  import EmptyState from "@app/components/EmptyState.svelte"
   import {decodeRelay} from "@app/relays"
   import {makeCommentFilter} from "@app/content"
   import {makeFeed} from "@app/feeds"
@@ -83,15 +84,15 @@
       <ThreadItem {url} event={$state.snapshot(event)} />
     </div>
   {/each}
-  <p class="flex h-10 items-center justify-center py-20">
-    <Spinner {loading}>
-      {#if loading}
-        Looking for threads...
-      {:else if items.length === 0}
-        No threads found.
-      {:else}
-        That's all!
-      {/if}
-    </Spinner>
-  </p>
+  {#if loading}
+    <p class="flex h-10 items-center justify-center py-20">
+      <Spinner loading>Looking for threads...</Spinner>
+    </p>
+  {:else if items.length === 0}
+    <EmptyState icon={NotesMinimalistic} title="No threads yet">
+      Threads keep longer conversations tidy and easy to follow. Be the first to start one!
+    </EmptyState>
+  {:else}
+    <p class="flex items-center justify-center py-10 text-sm opacity-50">That's all!</p>
+  {/if}
 </PageContent>