Merge pull request #39 from cr4yfish/big-update

Added instance blocking + small changes

components/Navbar.tsx

@@ -242,7 +242,6 @@ export default function Navbar() {
                   onClick={() => router.back()}
                 >
                   <span className="material-symbols-outlined">arrow_back</span>
-                  Back
                 </button>
               </div>
             )}

components/PageComponents/CommunityPage.tsx

@@ -46,7 +46,7 @@ export default function CommunityPage({
       showSearch: true,
       showUser: true,
       showback: true,
-      titleOverride: "",
+      titleOverride: `c/${communityData.community_view.community.title}`,
     });
   }, []);
 
@@ -208,13 +208,14 @@ export default function CommunityPage({
 
       <div
         className={`bg-neutral-50 dark:bg-neutral-950
-        dark:pt-4; flex w-full items-center justify-center`}
+        dark:pt-4; flex w-full items-center justify-center pt-2`}
       >
         <PostList
           fetchParams={{
             community_name: `${communityData.community_view.community.name}@${communityInstance}`,
             sort: currentSort,
           }}
+          showCommunity={false}
         />
       </div>
     </>

components/PageComponents/SettingsPage.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { Switch, cn, Checkbox } from "@nextui-org/react";
+import { Switch, cn, Checkbox, Input, Card, Button, CardBody, CardHeader, CardFooter } from "@nextui-org/react";
+import { AnimatePresence, motion } from "framer-motion";
 
 
 import { Account } from "@/utils/authFunctions";
@@ -12,7 +13,7 @@ function Section({ children, title }: { children: any; title: string }) {
     <>
       <div className=" flex w-full flex-col gap-2">
         <span className=" w-full text-xs font-bold">{title}</span>
-        <div className="flex w-full flex-col rounded-lg bg-neutral-200 p-6 dark:bg-neutral-800">
+        <div className="flex w-full flex-col rounded-lg bg-neutral-100 p-6 dark:bg-neutral-800 gap-2">
           {children}
         </div>
       </div>
@@ -29,15 +30,25 @@ export default function SettingsPage({
   const { session, setSession } = useSession()
   const [settings, setSettings] = React.useState<Settings>(currentAccount.settings || {} as Settings)
 
+  const [instanceForm, setInstanceForm] = React.useState<string>("");
   useEffect(() => {
     if (currentAccount) {
       setSession(prevValue => { return { ...prevValue, settings: settings } })
     }
   }, [settings, currentAccount, setSession])
 
+  const handleBlockInstance = () => {
+    setInstanceForm("")
+    setSession(prevVal => { return { ...prevVal, settings: { ...prevVal.settings, blockedInstances: [ ...prevVal.settings.blockedInstances, instanceForm ] } }})
+  }
+
+  const handleRemoveInstanceBlock = (instance: string) => {
+    setSession(prevVal => { return { ...prevVal, settings: { ...prevVal.settings, blockedInstances: [ ...prevVal.settings.blockedInstances.filter((i) => i !== instance) ] } }} ) 
+  }
   return (
     <>
       <div className="flex h-full w-full flex-col gap-8 overflow-y-hidden p-20 max-sm:p-4">
+
         <Section title="Appearance">
           <div className="flex flex-col gap-6">
 
@@ -103,7 +114,7 @@ export default function SettingsPage({
               classNames={{
                 base: cn(
                   "inline-flex flex-row-reverse w-full max-w-md items-center",
-                  "justify-between cursor-pointer rounded-lg gap-2 px-4"
+                  "justify-between cursor-pointer rounded-lg gap-2 px-4 w-full max-w-full"
                 ),
               }}
             >
@@ -122,7 +133,7 @@ export default function SettingsPage({
               classNames={{
                 base: cn(
                   "inline-flex flex-row-reverse w-full max-w-md items-center",
-                  "justify-between cursor-pointer rounded-lg gap-2 px-4"
+                  "justify-between cursor-pointer rounded-lg gap-2 px-4 max-w-full"
                 ),
               }}
             >
@@ -136,6 +147,51 @@ export default function SettingsPage({
           </div>
         </Section>
 
+        <Section title="Instance Blocking">
+
+          <Card className="mb-4">
+            <CardHeader className="pl-4 pb-0 flex flex-row gap-1"> 
+              <span className="material-symbols-outlined text-blue-400" style={{ fontSize: "1rem" }}>info</span>
+              <span className=" capitalize text-xs font-bold">Instance Blocking</span>
+            </CardHeader>
+            <CardBody className="text-xs pt-1">
+              You can block whole instances on Nemmy. What this does is it hide any post from an instance which is in the block list.
+            </CardBody>
+          </Card>
+
+
+          <div className="flex flex-col gap-1">
+            <span className="text-xs">Add an Instance to the block list</span>
+            <Input 
+              value={instanceForm || ""} 
+              onValueChange={(newVal) => newVal && setInstanceForm(newVal)} 
+              variant="bordered" label="Instance URL" labelPlacement="inside" 
+              endContent={<Button color="primary" onClick={() => handleBlockInstance()} isIconOnly><span className="material-symbols-outlined">add</span></Button>} 
+            />
+          </div>
+
+          <motion.div className="flex flex-col gap-1">
+            <span className="text-xs">Your blocked Instances</span>
+            <motion.div >
+              <AnimatePresence>
+              {session.settings.blockedInstances?.map((instance: string, index: number) => (
+                <motion.div key={index} 
+                  initial={{ opacity: 0, y: 5 }} animate={{ opacity: 1, y: 0}} exit={{ opacity: 0, y: -5}}
+                  className="flex flex-row justify-between items-center gap-2 p-2 rounded-lg bg-neutral-100 dark:bg-neutral-800"
+                  >
+                  <span>{instance}</span>
+                  <Button onClick={() => handleRemoveInstanceBlock(instance)} color="danger" isIconOnly><span className="material-symbols-outlined" style={{ fontSize: "1rem" }}>delete</span></Button>  
+                </motion.div>
+              ))}
+              </AnimatePresence>
+              {((!session.settings.blockedInstances) || session.settings.blockedInstances?.length == 0) &&
+              <span className="p-2 text-xs italic text-neutral-400 dark:text-neutral-500">You have no blocked Instances</span>
+              }
+            </motion.div>
+          </motion.div>
+
+        </Section>
+
         <Section title="Textsize">
           <div className="flex flex-col gap-4">
             <div>Small</div>

components/Post.tsx

@@ -21,14 +21,16 @@ export default function Post({
   instance,
   auth,
   postInstance,
-  style="modern"
+  style="modern",
+  showCommunity=true
 }: {
   post: PostView;
   onClick?: () => void;
   instance?: string;
   auth?: string;
   postInstance?: string;
-  style?: "modern" | "compact"
+  style?: "modern" | "compact",
+  showCommunity?: boolean;
 }) {
   if (!post) throw new Error("Post is undefined");
 
@@ -60,12 +62,15 @@ export default function Post({
               <div className={`${styles.header}`}>
                 <div className={`${styles.headerContent}`}>
                   <div className={`${styles.headerMetadata}`}>
+
+                    {showCommunity && (
                     <Link
                       href={`/c/${post?.community?.name}@${
                         new URL(post.post.ap_id).host
                       }`}
                       target="_blank"
                       className={`${styles.communityImage}`}
+                      style={{ width: "50px", height: "50px" }}
                     >
                       {post?.community?.icon ? (
                         <Image
@@ -80,21 +85,26 @@ export default function Post({
                         <div className={`${styles.communityIconFill} bg-neutral-300 dark:bg-neutral-800 rounded-full`}></div>
                       )}
                     </Link>
+                    )}
                     <div className={`flex flex-col gap-0`}>
                         <Link 
                           href={`/c/${post?.community?.name}@${new URL(post.post.ap_id).host}`} 
                           className="flex flex-row gap-1 items-center prose dark:prose-invert"
                           target="_blank"
                           >
+                            {showCommunity && (
+                            <>
                             <span className="font-bold capitalize">
                               {post.community.name}
                             </span>
+
 
                             <span className="font-light text-xs w-fit flex gap-0">
                               <span>@</span> 
                               <span className=" text-neutral-700 dark:text-neutral-400 ">{new URL(post.post.ap_id).host}</span>
                             </span>
-
+                            </>
+                            )}
                         </Link>
                         <div className="">
                           <div className={`${styles.user} text-neutral-500 dark:text-neutral-400`}>
@@ -275,7 +285,7 @@ export default function Post({
             <div className={`${styles.headerMetadata} justify-between text-xs text-neutral-700 dark:text-neutral-400`}>
 
               <div className={`flex flex-row items-center gap-1 max-sm:flex-wrap`}>
-                {post?.community?.icon && (
+                {post?.community?.icon && showCommunity && (
                   <Link
                     href={`/c/${post?.community?.name}@${
                       new URL(post.post.ap_id).host
@@ -293,6 +303,9 @@ export default function Post({
                     />
                   </Link>
                 )}
+
+                {showCommunity && 
+                <>
                 <Link 
                   href={`/c/${post?.community?.name}@${new URL(post.post.ap_id).host}`} 
                   className="flex flex-col prose dark:prose-invert"
@@ -310,6 +323,8 @@ export default function Post({
                 </Link>
 
                 <div className="dividerDot"></div>
+                </>
+                }
 
                 <Username user={post.creator} baseUrl={baseUrl} />
 
@@ -351,7 +366,9 @@ export default function Post({
                   shallow
                   className="h-full w-full flex flex-col items-start justify-start relative"
                 >
-                  <div className={`${styles.title} text-neutral-900 dark:text-neutral-100 text-sm h-fit w-full z-10`} style={{ overflow: "visible"}}>{post.post.name}</div>
+                  <div className={`${styles.title} text-neutral-900 dark:text-neutral-100 text-sm h-fit w-full z-10`} style={{ overflow: "visible"}}>
+                    {post.post.name}
+                  </div>
 
 
                 {/* Display Body if post has body and is not a Link */}
@@ -388,7 +405,8 @@ export default function Post({
                )}
             </div>
 
-            <div className={`${styles.footer} justify-start`}>
+            <div className={`${styles.footer} justify-start text-neutral-400`}>
+
                 <div className="flex">
                   <Vote post={post} horizontal />
                 </div>
@@ -416,6 +434,7 @@ export default function Post({
                     <span className="material-symbols-outlined">more_horiz</span>
                   </button>
                 </div>
+
             </div>
           </div>
         </>

components/PostList.tsx

@@ -25,7 +25,9 @@ export default function PostList({
   fetchParams = { limit: DEFAULT_POST_LIMIT, page: 1 },
   initPosts,
   setCurrentPost = () => null,
-  style="modern"
+  style="modern", // modern or compact
+  showCommunity = true,
+
 }: {
   fetchParams?: {
     type_?: ListingType;
@@ -40,6 +42,7 @@ export default function PostList({
   initPosts?: PostView[];
   setCurrentPost?: Function;
   style?: "modern" | "compact";
+  showCommunity?: boolean;
 }) {
   const { session } = useSession();
   const { navbar, setNavbar } = useNavbar();
@@ -148,7 +151,9 @@ export default function PostList({
           className={`${styles.postList} pb-10`}
           key={"postList"}
         >
-          {posts.map((post: PostView, index: number) => {
+          {posts
+            .filter((post) => !(session.settings.blockedInstances.includes(new URL(post.post.ap_id).host)))
+            .map((post: PostView, index: number) => {
             return (
               <AnimatePresence key={index}>
                 <motion.div
@@ -165,6 +170,7 @@ export default function PostList({
                     key={index}
                     postInstance={new URL(post.post.ap_id).host}
                     style={session.settings.cardType !== "auto" ? session.settings.cardType : isTextPost(post) ? "compact" : "modern"}
+                    showCommunity={showCommunity}
                   />
                 </motion.div>
               </AnimatePresence>

hooks/auth.tsx

@@ -19,6 +19,7 @@ import { DEFAULT_INSTANCE } from "@/constants/settings";
 export interface Settings {
   theme: "light" | "dark" | "system";
   cardType: "modern" | "compact" | "auto";
+  blockedInstances: string[];
   useSystemTheme: boolean;
   showNSFW: boolean;
   showBotAccounts: boolean;
@@ -42,6 +43,7 @@ export const defaultState: SessionState = {
   settings: {
     theme: "dark",
     cardType: "modern",
+    blockedInstances: [],
     useSystemTheme: true,
     showNSFW: true,
     showBotAccounts: true,

styles/User/Username.module.css

@@ -12,7 +12,6 @@
   @apply rounded-full;
   overflow: hidden;
   object-fit: cover;
-  height: 10px; width: 10px;
 }
 
 .hovercatcher {

tailwind.config.js

@@ -37,7 +37,14 @@ module.exports = {
           colors: {
             primary: {
               DEFAULT: "#d946ef",
-            }
+            },
+          }
+        },
+        light: {
+          colors: {
+            primary: {
+              DEFAULT: "#d946ef"
+            },
           }
         }
       }