carmelcity · fluidchunky · Mar 17, 2025 · Mar 17, 2025
diff --git a/components/cards/HomeItemCard.tsx b/components/cards/HomeItemCard.tsx
@@ -0,0 +1,109 @@
+import { ProfileHeaderPlaceholder } from '~/components/placeholders/ProfileHeader'
+import { readexPro } from '~/elements/fonts'
+import { BannerImage, CompositeImage, Engagements, DynamicIcon, SimpleAvatar, Community, Animation, Author, People, Tags, LargeAvatar } from '~/elements';
+import { getImageUrl } from '~/utils/main';
+import Image from 'next/image';
+
+const MAX_TITLE = 80
+const MAX_INTRO = 120
+
+export const HomeItemCard = ({
+  onPress, 
+  isLoading, 
+  title, 
+  banner, 
+  avatar,
+  username,
+  intro, 
+  highlight,
+  wide,
+  actionTitle,
+  section,
+  authorImage,
+  community,
+  author,
+  project,
+  comments,
+  upVotes,
+  followers,
+  projectImage,
+  communityImage,
+  downVotes,
+  noAction,
+  members,
+  tags,
+  shortIntro
+}: any) => {    
+
+  if (isLoading) {
+    return <ProfileHeaderPlaceholder/>
+  }
+
+  const Username = () => {
+    if (!username) {
+      return <div/>
+    }
+
+    let fol = followers ? followers.length : 0
+
+    return <div className={`relative z-10 z-10`}>
+          <h1 className={`${readexPro.className} lg:text-2xl text-2xl text-primary`}>
+            { isLoading ? '' : '@' + username.toLowerCase() }
+          </h1>
+          {/* <div className='flex flex-row'>
+            <div className='text-white font-bold mr-1'>
+            { fol > 0 ? fol : '' }
+            </div>
+            <div className='text-gray-400 mt-2'>
+            { fol === 0 ? 'No followers yet' : fol === 1 ? `follower` : `${fol} followers` }
+            </div>
+          </div> */}
+        </div>
+  }
+
+  const CardAuthor = () => {
+    if (!author) {
+      if (community) {
+        return <div className='flex flex-row mt-2'>
+          <Community
+            image={getImageUrl(community)}
+            username={community}/>
+        </div>
+      }
+      return <div/>
+    }
+
+    return <div className='flex flex-row mt-2'>
+            <Author
+              image={getImageUrl(project || author || '')}
+              community={community}
+              username={project || author}/>
+      </div>
+  }
+
+  return <div onClick={onPress} className={`cursor-pointer flex flex-col justify-start`}>
+              <LargeAvatar src={getImageUrl(username)}/>
+              <div className={`${readexPro.className} mt-1 text-sm text-center`}>
+                  { title }
+              </div>
+    </div>
+}
+
+// { banner && <BannerImage onPress={onPress} wide={wide} isLoading={isLoading} banner={banner} avatar={avatar} section={section} username={username}/> }     
+// <div onClick={onPress} className="flex flex-col p-4 leading-normal text-left w-full">
+//    <h4 className={`${readexPro.className} ${wide ? 'text-3xl lg:text-3xl' : 'text-xl lg:text-xl'} tracking-tight dark:text-white ${shortIntro ? 'line-clamp-2' : ''}`}>
+//    <div className={`${highlight ? '' : 'hidden'} badge badge-success badge-xs animate-pulse text-[#8BC34A] mr-2`}/>
+//    { title }
+//   </h4>
+//   <Username/>
+//   <CardAuthor/>
+//   { tags && <Tags tags={tags || []} containerClass="mt-4" /> }
+//   <p className={`${readexPro.className} text-md font-thin text-gray-400 2xl:w-5/6 mt-4 ${shortIntro ? 'line-clamp-2' : ''}`}>
+//     { intro }
+//   </p>     
+//   <div className='flex flex-col items-start pb-10 w-full'>
+//       {/* { <Engagements comments={comments} upVotes={upVotes} downVotes={downVotes}/> } */}
+//       { members && <People size={3} all={members}/> }
+//       {/* { noAction || <ActionButton highlight={highlight} title={actionTitle} onPress={onPress}/> } */}
+//   </div>
+// </div>
diff --git a/components/cards/index.tsx b/components/cards/index.tsx
@@ -9,4 +9,5 @@ export * from './ProjectCard'
 export * from './CarmelPostCard'
 export * from './CarmelCommentCard'
 export * from './CarmelEditCard'
-export * from './AgentCard'
+export * from './AgentCard'
+export * from './HomeItemCard'
diff --git a/components/layout/Navbar/Navbar.tsx b/components/layout/Navbar/Navbar.tsx
@@ -9,6 +9,7 @@ import { readexPro } from '~/elements/fonts';
 import profile_placeholder from '~/images/profile_placeholder.webp';
 import { ConfirmModal } from '~/components/access/ConfirmModal';
 import { DynamicIcon, showSuccessToast, AuthButton, SoftActionButton } from '~/elements';
+import { getImageUrl } from '~/utils/main';
 
 export const Navbar = ({ auth }: any) => {
   const [showMenu, setShowMenu] = useState(false);
@@ -89,7 +90,7 @@ export const Navbar = ({ auth }: any) => {
     //   icon: "Cog8ToothIcon"
     }, {
       id: "signout",
-      title: "Sign out",
+      title: "Logout",
       icon: "ArrowLeftOnRectangleIcon"
     }]
   }
@@ -108,7 +109,7 @@ export const Navbar = ({ auth }: any) => {
             <div
               className="w-10 h-10 m-auto z-10 bg-transparent">
               <Image
-                src={auth.session.avatarImage || profile_placeholder}
+                src={getImageUrl(auth.profile.username)}
                 width={180}
                 height={180}
                 alt={'profile'}
@@ -143,7 +144,7 @@ export const Navbar = ({ auth }: any) => {
         <Link href={'/login'} key={'reg1'}>
           <button
             className={`${readexPro.className} text-nowrap text-sm md:text-md shrink-0 hover:opacity-80 border-cyan font-medium text-primary px-4 py-3 shrink-0`}>
-                Sign in
+                Login
           </button>
         </Link>
         <Link href={'/register'} key={'reg1'}>

diff --git a/elements/avatars.tsx b/elements/avatars.tsx
@@ -29,6 +29,46 @@ export const SimpleAvatar = (props: any) => {
   );
 }
 
+// export const LargeAvatar = (props: any) => {
+//   return (
+//     <div className="flex flex-col items-center border">
+//       {/* <div
+//         className="w-20 h-20 bg-primary/30 z-10"
+//         style={{
+//           // clipPath: 'polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)',
+//         }}/> */}
+//       {/* <div
+//         className="z-20 bg-primary absolute"
+//         style={{
+//           // clipPath: 'polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)',
+//         }}> */}
+//         <Image
+//           src={props.src || placeholder}
+//           alt={props.alt ?? ''}
+//           width={100}
+//           height={100}
+//           className="object-cover w-40 h-40"
+//         />
+//       </div>
+//     </div>
+//   );
+// }
+
+
+export const LargeAvatar = (props: any) => {
+  return (
+    <div className="flex flex-col items-center">
+        <Image
+          src={props.src || placeholder}
+          alt={props.alt ?? ''}
+          width={100}
+          height={100}
+          className="object-cover w-32 h-32 mask mask-hexagon"
+        />
+    </div>
+  );
+}
+
 export const Chunky = (props: any) => {
   return (
     <div className="flex flex-col items-center">

diff --git a/elements/people.tsx b/elements/people.tsx
@@ -37,14 +37,14 @@ export const Community = ({
     <ComplexAvatar
       noCommunityLink
       profileImage={image}
-      alt="Community"
-      communityName={"community"}
+      alt="studio"
+      communityName={"studio"}
       username={username}
     />           
   </div>
 }
 
- export const People = ({ all, size }: any) => {
+export const People = ({ all, size }: any) => {
     return <div className="px-4 flex flex-row items-center">
       { all.slice(0, size).map((p: any, i: number) => <div key={`${i}-num`} className='-ml-2 z-10'><SimpleAvatar src={getImageUrl(p)} className=""/></div>) }
           <div className="flex items-center justify-center ml-3 mt-1">

diff --git a/screens/AccountScreen.tsx b/screens/AccountScreen.tsx
@@ -14,9 +14,6 @@ import { DynamicIcon } from '~/elements';
 const CardAuthor = ({
   author, community, communityImage, authorImage
 }: any) => {
-  console.log({
-    author, community, communityImage, authorImage
-  })
   if (!author) {
     if (community) {
       return <div className={`flex flex-row relative z-10 lg:ml-56 mt-4`}>
@@ -117,19 +114,47 @@ export const AccountScreen = (props: any) => {
           setCarmels(all)
     }, [carmel.data])
 
+    const isOnHome = () => {
+      return (props.auth.isLoggedIn && 
+             props.auth.profile.home && 
+             props.auth.profile.home[item.username])
+    }
+
+    const onAddToHome = async () => {
+      if (!props.auth.isLoggedIn()) {
+        router.push("/register")
+        return
+      }
+
+      if (isOnHome()) {
+        router.push(`/app/${item.username}`)
+        return 
+      }
+
+      const result = await props.auth.accountAction("addtohome", {
+        details: {
+          ...item          
+        }
+      })
+
+      await props.auth.getFreshProfile()
+
+      router.push('/')
+    }
+
     const ActionsSection = () => {
       if (item.type !== "product") {
         return <div className='mt-16'>
           </div>
       }
-      
+
       return <div className={`w-full flex flex-row justify-end mt-4`}>
-                <Link href={`/app/${item.username}`} key={'app'}>
                   <button
-                      className={`${readex_pro.className} text-nowrap text-sm md:text-md shrink-0 hover:opacity-80 border-cyan font-medium border text-white px-2 py-2 shadow-early-access-button shrink-0`}>
-                          Open App
+                      onClick={onAddToHome}
+                      className={`${readex_pro.className} text-nowrap text-sm md:text-md shrink-0 hover:opacity-80 border-cyan font-medium border px-2 py-2 shadow-early-access-button shrink-0 flex flex-row items-center text-white`}>
+                            <DynamicIcon name={isOnHome() ? 'PlayIcon' : 'SquaresPlusIcon'} width={24} height={24} className='text-primary mr-3'/>
+                          { isOnHome() ? `Open App` : `Add to Home` }
                   </button>
-                </Link>
             </div>
     }
 

diff --git a/screens/Container.tsx b/screens/Container.tsx
@@ -24,7 +24,7 @@ const PROFILE_PLACEHOLDER = `/images/profile_placeholder.webp`
 
 
 const ProfileImage = ({ avatar, username, isLoading }: any) => {
-  return <div className={`absolute mt-20 lg:-mt-8 ml-2`}>
+  return <div className={`absolute mt-16 lg:-mt-8 ml-2`}>
         <div className="mask mask-hexagon rounded-none bg-primary bg-opacity-20 border border-1 border-cyan/50">
           { isLoading || <Image
             src={avatar ? getImageUrl(username) : PROFILE_PLACEHOLDER}

diff --git a/screens/ListScreen.tsx b/screens/ListScreen.tsx
@@ -62,7 +62,6 @@ export const ListScreen = ({ auth, nodes, sections = [], mainAction, onItemPress
     }
 
     return <div className='mb-8 border-b w-full pb-4 border-primary/40'>
-
           <Tabs
             isLoading={false}
             tabs={tabs}

diff --git a/screens/home/MainHomeScreen.tsx b/screens/home/MainHomeScreen.tsx
@@ -5,9 +5,12 @@ import wire1 from '~/images/stories/Wire1.webp';
 import wire2 from '~/images/stories/Wire2.webp';
 import { ActionButton } from '~/elements';
 import Link from 'next/link';
-
-import { readex_pro, DynamicIcon } from '~/elements';
-
+import { readex_pro } from '~/elements';
+import { ListPlaceholder } from '~/components/placeholders/ListPlaceholder';
+import { HomeItemCard } from '~/components/cards'
+import { ListScreen } from '../ListScreen'
+import { Title, DynamicIcon, InfiniteScrollComponent, readexPro } from '~/elements';
+import { useRouter } from 'next/router'
 
 export const Container = ({ children }: any) => {
     return (
@@ -25,7 +28,7 @@ export const Container = ({ children }: any) => {
   )
 }
 
-export const MainHomeScreen = () => {
+const EmptyHome = () => {
     return <Container>
         <div className="w-full flex flex-col justify-start items-center mt-64 lg:mt-10 pb-80 bg-black/0 z-50">
             <DynamicIcon name={'SquaresPlusIcon'} width={48} height={48} className='text-primary mr-3'/>
@@ -42,5 +45,36 @@ export const MainHomeScreen = () => {
             </Link>
         </div>
     </Container>
+}
+
+const onItemPress = (element: any, router: any) => {
+    router.push(`/app/${element.username}`)
+}
+
+const HomeList = ({ home }: any) => {
+    const items = Object.values(home)
+    const router = useRouter()
+
+    return <div className='w-full mb-20 min-h-screen'>
+        <InfiniteScrollComponent
+          containerClasses={`justify-center gap-4 mt-24 lg:mt-4 grid grid-cols-3 lg:grid-cols-4 p-2`} 
+          renderItem={items.map((element: any, elementId: any) => <HomeItemCard 
+            {...element} 
+            onPress={() => onItemPress(element, router) }
+            />)}
+          elementsNumber={3}
+          loader={<ListPlaceholder />}
+    />
+    </div>
+}
+
+export const MainHomeScreen = (props: any) => {
+    const { home } = props.auth.profile
+
+    if (!home) {
+        return <EmptyHome/>
+    }
+
+    return <HomeList home={home}/>
   }
 
diff --git a/utils/main.ts b/utils/main.ts
@@ -9,7 +9,7 @@ export const getImageUrl = (username: string, kind: string = "avatar", section:
 
   const url = `${process.env['NEXT_PUBLIC_GATEWAY_URL']}/carmel/${kind}/${section}/${username}`
   return url
-}   
+}
 
 export const getCompositeImageUrl = (collection: string, id: number) => {
   const url = `${process.env['NEXT_PUBLIC_GATEWAY_URL']}/carmel/composite/${collection}/${id}`
-Original file line number
+Diff line change
@@ Expand Up @@
         }
         return <div className='mb-8 border-b w-full pb-4 border-primary/40'>
               <Tabs
                 isLoading={false}
                 tabs={tabs}
@@ Expand Down @@