From 1e6b048d3809a50dc7a4bd248ae28855662a6a33 Mon Sep 17 00:00:00 2001
From: verbiricha <bandarra+gith@protonmail.com>
Date: Sat, 30 Dec 2023 14:43:45 +0100
Subject: [PATCH] feat: emojito fixes

---
 apps/emojis/app/browse/page.tsx               | 34 ++++++-------------
 apps/emojis/app/layout.tsx                    |  2 +-
 apps/emojis/ui/emoji-set.tsx                  |  9 +++--
 apps/emojis/ui/header.tsx                     | 12 ++++---
 apps/emojis/ui/home.tsx                       |  2 +-
 .../src/components/RecommendedAppMenu.tsx     | 34 ++++++++++---------
 6 files changed, 44 insertions(+), 49 deletions(-)

diff --git a/apps/emojis/app/browse/page.tsx b/apps/emojis/app/browse/page.tsx
index 2fce59e..4450b6c 100644
--- a/apps/emojis/app/browse/page.tsx
+++ b/apps/emojis/app/browse/page.tsx
@@ -1,36 +1,22 @@
-"use client"
+"use client";
 
-import { SimpleGrid } from "@chakra-ui/react";
-import { NDKKind, NDKSubscriptionCacheUsage } from "@nostr-dev-kit/ndk";
-import { useEvents } from "@ngine/core";
+import { NDKKind } from "@nostr-dev-kit/ndk";
+import { Feed } from "@ngine/core";
 
 import Layout from "@ui/layout";
 import EmojiSet from "@ui/emoji-set";
 
 export default function Browse() {
-  const { events: emojiSets } = useEvents(
-    {
-      kinds: [NDKKind.EmojiSet],
-    },
-    {
-      closeOnEose: true,
-      cacheUsage: NDKSubscriptionCacheUsage.PARALLEL,
-    },
-    ["wss://relay.nostr.band"]
-  );
   return (
     <Layout>
-      <SimpleGrid
-        columns={{
-          base: 1,
-          md: 2,
+      <Feed
+        closeOnEose
+        pageSize={20}
+        filter={{
+          kinds: [NDKKind.EmojiSet],
         }}
-        spacing={6}
-      >
-        {emojiSets.map((e) => (
-          <EmojiSet key={e.id} event={e} />
-        ))}
-      </SimpleGrid>
+        components={{ [NDKKind.EmojiSet]: EmojiSet }}
+      />
     </Layout>
   );
 }
diff --git a/apps/emojis/app/layout.tsx b/apps/emojis/app/layout.tsx
index 1764bea..f4cc3b6 100644
--- a/apps/emojis/app/layout.tsx
+++ b/apps/emojis/app/layout.tsx
@@ -1,7 +1,7 @@
 export const metadata = {
   metadataBase: new URL("https://emojito.meme"),
   title: "emojito",
-  description: "Stirr up your reactions with custom emoji",
+  description: "Stir up your reactions with custom emoji",
 };
 
 export default function RootLayout({
diff --git a/apps/emojis/ui/emoji-set.tsx b/apps/emojis/ui/emoji-set.tsx
index 12e7444..27ce97f 100644
--- a/apps/emojis/ui/emoji-set.tsx
+++ b/apps/emojis/ui/emoji-set.tsx
@@ -111,7 +111,6 @@ export default function EmojiSet({ event }: EventProps) {
               size="xs"
               variant="outline"
               colorScheme="brand"
-              isDisabled={!canSign}
               rightIcon={<Icon as={ChevronDownIcon} />}
             >
               Options
@@ -125,18 +124,24 @@ export default function EmojiSet({ event }: EventProps) {
               </MenuItem>
               {isBookmarked ? (
                 <MenuItem
+                  isDisabled={!canSign}
                   icon={<Icon as={DeleteIcon} />}
                   onClick={removeBookmark}
                 >
                   Unbookmark
                 </MenuItem>
               ) : (
-                <MenuItem icon={<Icon as={StarIcon} />} onClick={addBookmark}>
+                <MenuItem
+                  isDisabled={!canSign}
+                  icon={<Icon as={StarIcon} />}
+                  onClick={addBookmark}
+                >
                   Bookmark
                 </MenuItem>
               )}
               {isMine && (
                 <MenuItem
+                  isDisabled={!canSign}
                   icon={<Icon as={EditIcon} />}
                   onClick={() => router.push(`/a/${event.encode()}/edit`)}
                 >
diff --git a/apps/emojis/ui/header.tsx b/apps/emojis/ui/header.tsx
index c01c2a2..e10b072 100644
--- a/apps/emojis/ui/header.tsx
+++ b/apps/emojis/ui/header.tsx
@@ -30,11 +30,13 @@ export default function Header() {
       px={4}
     >
       <Flex flexDirection="column">
-        <Link href="/" sx={{ _hover: { textDecoration: "none" } }}>
-          <HStack gap={0}>
-            <Image alt="emojito logo" src="/logo.png" boxSize={20} style={{ transform: "scale(1.2)" }} />
-            <Heading fontSize="3xl">emojito</Heading>
-          </HStack>
+        <Link href="/">
+          <Image
+            alt="emojito logo"
+            src="/logo.png"
+            boxSize={20}
+            style={{ transform: "scale(1.5)" }}
+          />
         </Link>
       </Flex>
       <HStack>
diff --git a/apps/emojis/ui/home.tsx b/apps/emojis/ui/home.tsx
index 58f9002..7cd1e51 100644
--- a/apps/emojis/ui/home.tsx
+++ b/apps/emojis/ui/home.tsx
@@ -129,7 +129,7 @@ function Hero() {
       gap={6}
     >
       <Heading fontSize={{ base: "5xl", sm: "6xl" }}>
-        Stirr up your reactions with{" "}
+        Stir up your reactions with{" "}
         <Box as="mark" color="chakra-body-text" background={bg}>
           custom emoji
         </Box>
diff --git a/packages/core/src/components/RecommendedAppMenu.tsx b/packages/core/src/components/RecommendedAppMenu.tsx
index f7c6f79..c7d8377 100644
--- a/packages/core/src/components/RecommendedAppMenu.tsx
+++ b/packages/core/src/components/RecommendedAppMenu.tsx
@@ -223,22 +223,24 @@ export default function RecommendedAppMenu({
             defaultMessage="Nostr link"
           />
         </MenuItem>
-        <MenuGroup
-          title={formatMessage({
-            id: "ngine.open-nostr-app-title",
-            description: "Title of nostr app menu",
-            defaultMessage: "Apps",
-          })}
-        >
-          {recommended?.map(({ ev, recommenders }) => (
-            <AppMenuItem
-              key={ev.tagId()}
-              unknownEvent={event}
-              event={ev}
-              recommenders={recommenders}
-            />
-          ))}
-        </MenuGroup>
+        {recommended?.length > 0 && (
+          <MenuGroup
+            title={formatMessage({
+              id: "ngine.open-nostr-app-title",
+              description: "Title of nostr app menu",
+              defaultMessage: "Apps",
+            })}
+          >
+            {recommended?.map(({ ev, recommenders }) => (
+              <AppMenuItem
+                key={ev.tagId()}
+                unknownEvent={event}
+                event={ev}
+                recommenders={recommenders}
+              />
+            ))}
+          </MenuGroup>
+        )}
       </MenuList>
     </Menu>
   );