From cea27978f31e29909fd8d717fce5db8bea05d10b Mon Sep 17 00:00:00 2001 From: celine Date: Wed, 1 Apr 2026 20:22:00 -0400 Subject: [PATCH] just moving the content to the side --- .../home/LeafletList/LeafletListItem.tsx | 13 +-- .../BskyPostEmbedNotification.tsx | 2 +- .../notifications/Notification.tsx | 11 +-- .../notifications/NotificationList.tsx | 16 ++-- .../notifications/QuoteNotification.tsx | 7 +- .../p/[didOrHandle]/PostsContent.tsx | 3 +- .../p/[didOrHandle]/ProfileHeader.tsx | 2 +- .../p/[didOrHandle]/ProfileLayout.tsx | 6 +- .../p/[didOrHandle]/ProfileTabs.tsx | 6 +- .../comments/CommentsContent.tsx | 7 +- .../subscriptions/SubscriptionsContent.tsx | 5 +- app/(home-pages)/reader/GlobalContent.tsx | 7 +- app/(home-pages)/reader/NewContent.tsx | 7 +- .../reader/ReaderMentionsContent.tsx | 16 ++-- app/(home-pages)/tag/[tag]/page.tsx | 34 +++----- .../dashboard/PublishedPostsLists.tsx | 7 +- .../dashboard/settings/GeneralSettings.tsx | 5 +- .../dashboard/settings/PostSettings.tsx | 85 ++++++++++--------- .../dashboard/settings/SettingsContent.tsx | 26 +++--- components/EmptyState.tsx | 30 +++++++ components/PageLayouts/DashboardLayout.tsx | 2 +- 21 files changed, 153 insertions(+), 144 deletions(-) create mode 100644 components/EmptyState.tsx diff --git a/app/(home-pages)/home/LeafletList/LeafletListItem.tsx b/app/(home-pages)/home/LeafletList/LeafletListItem.tsx index af30a578..05907c33 100644 --- a/app/(home-pages)/home/LeafletList/LeafletListItem.tsx +++ b/app/(home-pages)/home/LeafletList/LeafletListItem.tsx @@ -48,7 +48,7 @@ export const LeafletListItem = (props: { ref={previewRef} className={`relative flex gap-3 w-full ${props.isHidden ? "hidden" : "flex"} - ${cardBorderHidden ? "" : "px-2 py-1 block-border hover:outline-border relative"}`} + ${cardBorderHidden ? "" : "px-2 py-1 block-border hover:outline-border! relative"}`} style={{ backgroundColor: cardBorderHidden ? "transparent" @@ -84,7 +84,7 @@ export const LeafletListItem = (props: { className={` relative flex flex-col gap-1 p-1 h-52 w-full - block-border border-border! hover:outline-border + block-border border-border! hover:outline-border! ${props.isHidden ? "hidden" : "flex"} `} style={{ @@ -111,12 +111,3 @@ export const LeafletListItem = (props: { ); }; - -const LeafletLink = (props: { id: string; className: string }) => { - return ( - - ); -}; diff --git a/app/(home-pages)/notifications/BskyPostEmbedNotification.tsx b/app/(home-pages)/notifications/BskyPostEmbedNotification.tsx index 66cf0018..0bcc7404 100644 --- a/app/(home-pages)/notifications/BskyPostEmbedNotification.tsx +++ b/app/(home-pages)/notifications/BskyPostEmbedNotification.tsx @@ -28,7 +28,7 @@ export const BskyPostEmbedNotification = ( {props.bskyPostText && ( 
               {props.bskyPostText}
diff --git a/app/(home-pages)/notifications/Notification.tsx b/app/(home-pages)/notifications/Notification.tsx
index 205d15a8..62fbc905 100644
--- a/app/(home-pages)/notifications/Notification.tsx
+++ b/app/(home-pages)/notifications/Notification.tsx
@@ -23,14 +23,9 @@ export const Notification = (props: {
     

       
       
       
         
-        
no notifications yet...

-        Here, you'll find notifications about new follows, comments,
-        mentions, and replies!
-      

+      
     );
   return (
-    

-      

+    

+      

+        
Notifications

+
         {notifications.map((n) => {
           if (n.type === "comment") {
             if (n.parentData) return ;
diff --git a/app/(home-pages)/notifications/QuoteNotification.tsx b/app/(home-pages)/notifications/QuoteNotification.tsx
index 6c7b3f16..27335ad7 100644
--- a/app/(home-pages)/notifications/QuoteNotification.tsx
+++ b/app/(home-pages)/notifications/QuoteNotification.tsx
@@ -27,12 +27,9 @@ export const QuoteNotification = (props: HydratedQuoteNotification) => {
       content={
         
           

-            
+            
             
               {postText}
diff --git a/app/(home-pages)/p/[didOrHandle]/PostsContent.tsx b/app/(home-pages)/p/[didOrHandle]/PostsContent.tsx
index 7bd67c3c..b5022e1c 100644
--- a/app/(home-pages)/p/[didOrHandle]/PostsContent.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/PostsContent.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { EmptyState } from "components/EmptyState";
 import { PostListing } from "components/PostListing";
 import type { Post } from "app/(home-pages)/reader/getReaderFeed";
 import type { Cursor } from "./getProfilePosts";
@@ -64,7 +65,7 @@ export const ProfilePostsContent = (props: {
   const allPosts = data ? data.flatMap((page) => page.posts) : [];
 
   if (allPosts.length === 0 && !isValidating) {
-    return 
No posts yet
;
+    return ;
   }
 
   return (
diff --git a/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx b/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
index 3589e780..56627e9d 100644
--- a/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
@@ -45,7 +45,7 @@ export const ProfileHeader = (props: {
 
   return (
     

       {!props.popover && }
diff --git a/app/(home-pages)/p/[didOrHandle]/ProfileLayout.tsx b/app/(home-pages)/p/[didOrHandle]/ProfileLayout.tsx
index 15e598d0..df27af0e 100644
--- a/app/(home-pages)/p/[didOrHandle]/ProfileLayout.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/ProfileLayout.tsx
@@ -10,10 +10,10 @@ export function ProfileLayout(props: { children: React.ReactNode }) {
       className={`
           ${
             cardBorderHidden
-              ? ""
-              : "overflow-y-scroll h-full border border-border-light rounded-lg  bg-bg-page px-3 sm:px-4"
+              ? "bg-transparent"
+              : "overflow-y-scroll h-full border border-border-light rounded-lg! container px-3 sm:px-4 sm:-mt-2"
           }
-          max-w-prose mx-auto w-full
+          max-w-prose w-full
           flex flex-col pb-3
           text-center
     `}
diff --git a/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx b/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
index bb058749..5155bde4 100644
--- a/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
@@ -41,7 +41,9 @@ export const ProfileTabs = (props: { didOrHandle: string }) => {
   const bgColor = cardBorderHidden ? "var(--bg-leaflet)" : "var(--bg-page)";
 
   return (
-    

+    

       
 {
             scrollPosWithinTabContent < 20
               ? {
                   backgroundColor: !cardBorderHidden
-                    ? `rgba(${bgColor}, ${scrollPosWithinTabContent / 60 + 0.75})`
+                    ? `rgba(${bgColor}, ${scrollPosWithinTabContent / 60})`
                     : `rgba(${bgColor}, ${scrollPosWithinTabContent / 20})`,
                   paddingLeft: !cardBorderHidden
                     ? "4px"
diff --git a/app/(home-pages)/p/[didOrHandle]/comments/CommentsContent.tsx b/app/(home-pages)/p/[didOrHandle]/comments/CommentsContent.tsx
index a2a3f474..39b183ac 100644
--- a/app/(home-pages)/p/[didOrHandle]/comments/CommentsContent.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/comments/CommentsContent.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { EmptyState } from "components/EmptyState";
 import { useEffect, useRef, useMemo } from "react";
 import useSWRInfinite from "swr/infinite";
 import { AppBskyActorProfile, AtUri } from "@atproto/api";
@@ -79,9 +80,7 @@ export const ProfileCommentsContent = (props: {
   const allComments = data ? data.flatMap((page) => page.comments) : [];
 
   if (allComments.length === 0 && !isValidating) {
-    return (
-      
No comments yet

-    );
+    return ;
   }
 
   return (
@@ -206,7 +205,7 @@ const CommentItem = ({ comment }: { comment: ProfileComment }) => {
             

           )}
           
             No subscriptions yet

-    );
+    return ;
   }
 
   return (
diff --git a/app/(home-pages)/reader/GlobalContent.tsx b/app/(home-pages)/reader/GlobalContent.tsx
index 94134cfe..31ae8004 100644
--- a/app/(home-pages)/reader/GlobalContent.tsx
+++ b/app/(home-pages)/reader/GlobalContent.tsx
@@ -2,6 +2,7 @@
 import { use } from "react";
 import useSWR from "swr";
 import { callRPC } from "app/api/rpc/client";
+import { EmptyState } from "components/EmptyState";
 import { PostListing } from "components/PostListing";
 import type { Post } from "./getReaderFeed";
 import {
@@ -33,11 +34,7 @@ export const GlobalContent = (props: {
   let selectedPost = useSelectedPostListing((s) => s.selectedPostListing);
 
   if (posts.length === 0) {
-    return (
-      

-        Nothing trending right now. Check back soon!
-      

-    );
+    return ;
   }
 
   return (
diff --git a/app/(home-pages)/reader/NewContent.tsx b/app/(home-pages)/reader/NewContent.tsx
index 9a0e7296..0c8d477b 100644
--- a/app/(home-pages)/reader/NewContent.tsx
+++ b/app/(home-pages)/reader/NewContent.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { use } from "react";
+import { EmptyState } from "components/EmptyState";
 import type { Cursor, Post } from "./getReaderFeed";
 import useSWRInfinite from "swr/infinite";
 import { getNewFeed } from "./getNewFeed";
@@ -65,11 +66,7 @@ export const NewContent = (props: {
   const allPosts = data ? data.flatMap((page) => page.posts) : [];
 
   if (allPosts.length === 0) {
-    return (
-      

-        No posts yet. Check back soon!
-      

-    );
+    return ;
   }
 
   return (
diff --git a/app/(home-pages)/reader/ReaderMentionsContent.tsx b/app/(home-pages)/reader/ReaderMentionsContent.tsx
index 517e6be0..b379075a 100644
--- a/app/(home-pages)/reader/ReaderMentionsContent.tsx
+++ b/app/(home-pages)/reader/ReaderMentionsContent.tsx
@@ -2,6 +2,7 @@
 import useSWR from "swr";
 import { PostView } from "@atproto/api/dist/client/types/app/bsky/feed/defs";
 import { BskyPostContent } from "app/lish/[did]/[publication]/[rkey]/BskyPostContent";
+import { EmptyState } from "components/EmptyState";
 import { DotLoader } from "components/utils/DotLoader";
 
 async function fetchBskyPosts(uris: string[]): Promise {
@@ -17,9 +18,10 @@ export function ReaderMentionsContent(props: {
   quotesAndMentions: { uri: string; link?: string }[];
 }) {
   const uris = props.quotesAndMentions.map((q) => q.uri);
-  const key = uris.length > 0
-    ? `/api/bsky/hydrate?${new URLSearchParams({ uris: JSON.stringify(uris) }).toString()}`
-    : null;
+  const key =
+    uris.length > 0
+      ? `/api/bsky/hydrate?${new URLSearchParams({ uris: JSON.stringify(uris) }).toString()}`
+      : null;
 
   const { data: bskyPosts, isLoading } = useSWR(key, () =>
     fetchBskyPosts(uris),
@@ -27,9 +29,11 @@ export function ReaderMentionsContent(props: {
 
   if (props.quotesAndMentions.length === 0) {
     return (
-      

-        
no mentions yet!

-      

+      
     );
   }
 
diff --git a/app/(home-pages)/tag/[tag]/page.tsx b/app/(home-pages)/tag/[tag]/page.tsx
index 2121ab72..29edf137 100644
--- a/app/(home-pages)/tag/[tag]/page.tsx
+++ b/app/(home-pages)/tag/[tag]/page.tsx
@@ -41,37 +41,27 @@ const TagContent = (props: {
   posts: Awaited>["posts"];
 }) => {
   return (
-    

-      

-        
-      

-      

+    

+      
Tag: {props.tag}

+
+      

         {props.posts.length === 0 ? (
           
         ) : (
-          props.posts.map((post) => (
-            
-          ))
+          <>
+            

+              {props.posts.length} {props.posts.length === 1 ? "post" : "posts"}
+            

+            {props.posts.map((post) => (
+              
+            ))}
+          
         )}
       

     

   );
 };
 
-const TagHeader = (props: { tag: string; postCount: number }) => {
-  return (
-    

-      

-        
-        
{props.tag}

-      

-      

-        {props.postCount} {props.postCount === 1 ? "post" : "posts"}
-      

-    

-  );
-};
-
 const EmptyState = (props: { tag: string }) => {
   return (
     

diff --git a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
index 83a12aea..47b18411 100644
--- a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { AtUri } from "@atproto/syntax";
 import { EditTiny } from "components/Icons/EditTiny";
+import { EmptyState } from "components/EmptyState";
 
 import {
   usePublicationData,
@@ -29,11 +30,7 @@ export function PublishedPostsList(props: {
 
   if (!publication) return null;
   if (!documents || documents.length === 0)
-    return (
-      

-        Nothing's been published yet...
-      

-    );
+    return ;
 
   // Sort by publishedAt (most recent first)
   const sortedDocuments = [...documents].sort((a, b) => {
diff --git a/app/lish/[did]/[publication]/dashboard/settings/GeneralSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/GeneralSettings.tsx
index 6c2f8f18..8f1c9721 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/GeneralSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/GeneralSettings.tsx
@@ -1,6 +1,7 @@
 import { useRef } from "react";
 import { Input } from "components/Input";
 import { AddTiny } from "components/Icons/AddTiny";
+import { DashboardContainer } from "./SettingsContent";
 
 export function GeneralSettings(props: {
   nameValue: string;
@@ -14,7 +15,7 @@ export function GeneralSettings(props: {
   let fileInputRef = useRef(null);
 
   return (
-    

+    
       
General Settings

 
       

@@ -80,6 +81,6 @@ export function GeneralSettings(props: {
           onChange={(e) => props.setDescriptionValue(e.currentTarget.value)}
         />
       
-    

+    
   );
 }
diff --git a/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
index b1c68a5b..f1f314bd 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
@@ -1,4 +1,6 @@
 import { Toggle } from "components/Toggle";
+import { DashboardContainer } from "./SettingsContent";
+import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
 
 export function PostSettings(props: {
   showComments: boolean;
@@ -12,10 +14,11 @@ export function PostSettings(props: {
   showInDiscover: boolean;
   setShowInDiscover: (v: boolean) => void;
 }) {
+  let cardBorderHidden = useCardBorderHidden();
   return (
     <>
-      

-        
Discovery

+      
+        
Discovery

          props.setShowInDiscover(!props.showInDiscover)}
@@ -31,52 +34,54 @@ export function PostSettings(props: {
             

           

         
-      

-      

+      
+      {cardBorderHidden && 
}
 
-      
Post Layout

-       props.setShowPrevNext(!props.showPrevNext)}
-      >
-        
Show Prev/Next Buttons on Post

-      
-
-      

-
-      
Post Interactions

-      

+      
+        
Post Layout

          props.setShowComments(!props.showComments)}
+          toggle={props.showPrevNext}
+          onToggle={() => props.setShowPrevNext(!props.showPrevNext)}
         >
-          
Show Comments

+          
Show Prev/Next Buttons on Post

         
+      
+      {cardBorderHidden && 
}
+      
+        
Post Interactions

+        

+           props.setShowComments(!props.showComments)}
+          >
+            
Show Comments

+          
 
-         props.setShowMentions(!props.showMentions)}
-        >
-          

-            
Show Mentions

-            

-              Display a list of Bluesky mentions about your post
+           props.setShowMentions(!props.showMentions)}
+          >
+            

+              
Show Mentions

+              

+                Display a list of Bluesky mentions about your post
+              

             

-          

-        
+          
 
-         props.setShowRecommends(!props.showRecommends)}
-        >
-          

-            
Show Recommends

-            

-              Allow readers to recommend/like your post
+           props.setShowRecommends(!props.showRecommends)}
+          >
+            

+              
Show Recommends

+              

+                Allow readers to recommend/like your post
+              

             

-          

-        
-      

+          
+        

+      
     
   );
 }
diff --git a/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx b/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
index cfc0311e..00ba73d0 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
@@ -25,7 +25,7 @@ export function SettingsContent(props: { showPageBackground: boolean }) {
 
   if (view === "theme") {
     return (
-      

+      

          setView("all")}
           loading={themeLoading}
@@ -41,11 +41,11 @@ export function SettingsContent(props: { showPageBackground: boolean }) {
 function SettingsForm(props: { onOpenTheme: () => void }) {
   let { data } = usePublicationData();
   let { publication: pubData } = data || {};
+  let cardBorderHidden = useCardBorderHidden();
   let record = useNormalizedPublicationRecord();
   let [loading, setLoading] = useState(false);
   let toast = useToaster();
 
-  // --- General Settings state ---
   let [nameValue, setNameValue] = useState(record?.name || "");
   let [descriptionValue, setDescriptionValue] = useState(
     record?.description || "",
@@ -94,7 +94,7 @@ function SettingsForm(props: { onOpenTheme: () => void }) {
 
   return (
     
 {
         e.preventDefault();
         if (!pubData) return;
@@ -117,7 +117,7 @@ function SettingsForm(props: { onOpenTheme: () => void }) {
         mutate("publication-data");
       }}
     >
-      

+      

         {/* ── General Settings ── */}
          void }) {
           setIconFile={setIconFile}
         />
 
-        

+        {cardBorderHidden && 
}
 
         {/* ── Post Settings ── */}
          void }) {
           setShowInDiscover={setShowInDiscover}
         />
 
-        

+        {cardBorderHidden && 
}
 
-        {/* ── Theme ── */}
-        
+        
+          
+        
 
-        

+        {cardBorderHidden && 
}
 
-        {/* ── Domains ── */}
-        
+        
+          
+        
       

 
       {/* ── Sticky Save Footer ── */}
@@ -173,7 +175,7 @@ export const DashboardContainer = (props: {
   let cardBorderHidden = useCardBorderHidden();
   return (
     

       {props.children}
     

diff --git a/components/EmptyState.tsx b/components/EmptyState.tsx
new file mode 100644
index 00000000..c85b036e
--- /dev/null
+++ b/components/EmptyState.tsx
@@ -0,0 +1,30 @@
+export function EmptyState({
+  title,
+  description,
+  className,
+  container = "frosted",
+  children,
+}: {
+  title?: string;
+  description?: string;
+  className?: string;
+  container?: "frosted" | "opaque" | "none";
+  children?: React.ReactNode;
+}) {
+  const containerClass =
+    container === "frosted"
+      ? "frosted-container"
+      : container === "opaque"
+        ? "opaque-container"
+        : "";
+
+  return (
+    

+      {title && 
{title}
}
+      {description && {description}}
+      {children}
+    

+  );
+}
diff --git a/components/PageLayouts/DashboardLayout.tsx b/components/PageLayouts/DashboardLayout.tsx
index d3e02f1b..e285b0a5 100644
--- a/components/PageLayouts/DashboardLayout.tsx
+++ b/components/PageLayouts/DashboardLayout.tsx
@@ -187,7 +187,7 @@ export function DashboardLayout<
           

         
         

-- 
2.51.2