fix: show tags to the search input header (#262)

* fix: show tags to inputSearch

* fix: login using enter

* fix: change body color

* fix: change ml to post line

Author: flaviomoceri

apps/web/app/global.css

@@ -5,6 +5,5 @@
 @tailwind utilities;
 
 body {
-  background-color: #0a0a10;
-  background-image: linear-gradient(to right, #0a0a10, #0e0e18);
+  background-color: #020203;
 }

apps/web/app/hot-tags/page.tsx

@@ -20,14 +20,8 @@ import Skeletons from '../../components/Skeletons';
 
 export default function Index() {
   const router = useRouter();
-  const {
-    pubky,
-    getHotTags,
-    setSearchTags,
-    searchTags,
-    listFollowers,
-    listFollowing,
-  } = useClientContext();
+  const { pubky, getHotTags, listFollowers, listFollowing } =
+    useClientContext();
   const { hotTagsReach } = useFilterContext();
   const [hotTags, setHotTags] = useState<ITaggedPost[]>([]);
   const [loadingReachTags, setLoadingReachTags] = useState(false);
@@ -119,7 +113,8 @@ export default function Index() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hotTagsReach]);
 
-  const handleTagSearch = (tag: string) => {
+  {
+    /** const handleTagSearch = (tag: string) => {
     if (searchTags.includes(tag)) return;
 
     if (searchTags.length < 3) {
@@ -130,6 +125,8 @@ export default function Index() {
     }
     router.push('/search');
   };
+  */
+  }
 
   return (
     <Content.Main>
@@ -138,7 +135,7 @@ export default function Index() {
         <div className="w-full flex-col inline-flex gap-3">
           <div className="flex gap-6 mb-6">
             <DropDown.HotTagsReach type="text" subtitle="Reach" />
-            <DropDown.TagsTimeframe disabled type="text" subtitle="Timeframe" />
+            {/**<DropDown.TagsTimeframe disabled type="text" subtitle="Timeframe" />*/}
           </div>
           {loading ? (
             <div className="w-full">
@@ -153,9 +150,11 @@ export default function Index() {
                   <HotTags.Rank
                     rank={index + 1}
                     tag={tag.tag}
-                    onClick={() => handleTagSearch(tag.tag)}
+                    onClick={() => router.push(`/search?tags=${tag.tag}`)}
                     color="fuchsia"
-                    counter={`${tag.count}`}
+                    counter={`${tag.count} ${
+                      tag.count > 1 ? ' users' : ' user'
+                    }`}
                   />
                   {tag?.from.slice(0, 5).map((fromItem, fromIndex: number) => (
                     <Image

apps/web/app/onboarding/sign-up/page.tsx

@@ -302,7 +302,7 @@ export default function Index() {
             </Button.Transparent>
           </div>
         </Card.Primary>
-        <Card.Primary className="justify-start" title="Picture">
+        <Card.Primary className="justify-start z-10" title="Picture">
           {image && (
             <div className="relative">
               <Image

apps/web/app/settings/page.tsx

@@ -403,7 +403,7 @@ export default function Index() {
               </Button.Transparent>
             </div>
           </Card.Primary>
-          <Card.Primary className="justify-start" title="Picture">
+          <Card.Primary className="justify-start z-10" title="Picture">
             {image && (
               <div className="relative">
                 <Image

apps/web/app/sign-in/page.tsx

@@ -108,6 +108,12 @@ export default function Index() {
     }
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      handleSubmit();
+    }
+  };
+
   useEffect(() => {
     async function fetchData() {
       const loggedIn = await isLoggedIn();
@@ -169,6 +175,7 @@ export default function Index() {
                   error={errors.password}
                   placeholder="••••••••••••"
                   id="onboarding-password-input"
+                  onKeyDown={handleKeyDown}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                     setPassword(e.target.value)
                   }

apps/web/components/Modal/_SearchInputCard.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/navigation';
-import { Card, Icon, PostUtil, Typography } from '@social/ui-shared';
+import { Card, PostUtil, Typography } from '@social/ui-shared';
 import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useClientContext } from '../../contexts/client';
@@ -14,7 +14,7 @@ export default function SearchInputCard({
   ...rest
 }: SearchInputCardProps) {
   const router = useRouter();
-  const { hotTags, searchTags, setSearchTags } = useClientContext();
+  const { hotTags } = useClientContext();
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -23,7 +23,8 @@ export default function SearchInputCard({
     }
   }, [hotTags]);
 
-  const handleTagSearch = (tag: string) => {
+  {
+    /** const handleTagSearch = (tag: string) => {
     if (searchTags.includes(tag)) return;
 
     if (searchTags.length < 3) {
@@ -33,13 +34,16 @@ export default function SearchInputCard({
       setSearchTags(newSearchTags);
     }
     router.push('/search');
-  };
+  };*/
+  }
 
-  const handleRemoveTag = (indexToRemove: number) => {
+  {
+    /**  const handleRemoveTag = (indexToRemove: number) => {
     const newTags = [...searchTags];
     newTags.splice(indexToRemove, 1);
     setSearchTags(newTags);
-  };
+  };*/
+  }
 
   return (
     <Card.Primary
@@ -49,7 +53,7 @@ export default function SearchInputCard({
       background="bg-gradient-to-t from-[#07040a] to-[#1b1820]"
     >
       <div className="flex-col gap-6 inline-flex">
-        {searchTags.length > 0 && (
+        {/**{searchTags.length > 0 && (
           <div>
             <Typography.Label className="text-opacity-30">
               Searched tags
@@ -73,7 +77,7 @@ export default function SearchInputCard({
               ))}
             </div>
           </div>
-        )}
+        )}*/}
         <div>
           <Typography.Label className="text-opacity-30">
             Hot tags
@@ -88,7 +92,7 @@ export default function SearchInputCard({
                   <PostUtil.Tag
                     key={index}
                     clicked={false}
-                    onClick={() => handleTagSearch(tag.tag)}
+                    onClick={() => router.push(`/search?tags=${tag.tag}`)}
                     color="fuchsia"
                     className="mr-2 my-1"
                   >

apps/web/components/Post/index.tsx

@@ -45,7 +45,8 @@ export default function Post({
   const { setContent, setShow } = useAlertContext();
   const [showTooltipProfile, setShowTooltipProfile] = useState('');
   const router = useRouter();
-  const lineBaseCSS = 'absolute ml-[16px] border-l-2 h-full border-neutral-800';
+  const lineBaseCSS =
+    'absolute ml-[15.5px] border-l-2 h-full border-neutral-800';
 
   const handleDeletePost = async () => {
     const result = await deletePost(post?.id);

apps/web/components/_Header.tsx

@@ -111,6 +111,12 @@ export default function Header({ title, className }: HeaderProps) {
     // }
   };
 
+  const handleRemoveTag = (indexToRemove: number) => {
+    const newTags = [...searchTags];
+    newTags.splice(indexToRemove, 1);
+    setSearchTags(newTags);
+  };
+
   return (
     <HeaderUI.Root>
       <HeaderUI.Logo link={logoLink} />
@@ -122,31 +128,38 @@ export default function Header({ title, className }: HeaderProps) {
         }
         onKeyDown={handleKeyDown}
       >
-        {/**{searchTags && (
+        {searchTags && (
           <Input.SearchTags className="hidden sm:block">
             {searchTags.map((searchTag, index) => (
               <Input.SearchTag
-                color="bg-amber-500 bg-opacity-30"
                 key={index}
                 onClick={() => handleRemoveTag(index)}
-                actions={[<Icon.X key={index} />]}
+                action={
+                  <div className="mt-[3px]">
+                    <Icon.X key={index} />
+                  </div>
+                }
                 value={`${searchTag}`}
                 className="mr-2"
               />
             ))}
           </Input.SearchTags>
-        )}*/}
+        )}
         <Input.SearchInput
           placeholder="Search"
           className="hidden sm:block"
           onClick={() => setSearchInputCard(true)}
+          disabled={!!searchTags.length}
         />
         <Modal.SearchInputCard
           className={searchInputCard ? 'hidden xl:block' : 'hidden'}
           refCard={refSearchInputCard}
         />
         <Input.SearchActions className="hidden sm:flex">
-          <div className="cursor-pointer" onClick={handleSearchTag}>
+          <div
+            className={inputValue && 'cursor-pointer'}
+            onClick={inputValue ? handleSearchTag : undefined}
+          >
             <Icon.MagnifyingGlass />
           </div>
         </Input.SearchActions>

apps/web/components/_HotTags.tsx

@@ -11,7 +11,7 @@ import Skeletons from './Skeletons';
 
 export default function HotTags() {
   const router = useRouter();
-  const { getHotTags, setSearchTags, searchTags } = useClientContext();
+  const { getHotTags } = useClientContext();
   const [hotTags, setHotTags] = useState<ITaggedPost[] | null>(null);
   const [loading, setLoading] = useState(true);
 
@@ -33,7 +33,8 @@ export default function HotTags() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleTagSearch = (tag: string) => {
+  {
+    /** const handleTagSearch = (tag: string) => {
     if (searchTags.includes(tag)) return;
 
     if (searchTags.length < 3) {
@@ -44,6 +45,8 @@ export default function HotTags() {
     }
     router.push('/search');
   };
+  */
+  }
 
   return (
     <div className="self-start sticky top-[120px] col-span-1">
@@ -59,7 +62,7 @@ export default function HotTags() {
               {hotTags.slice(0, 8).map((tag, index) => (
                 <SideCard.Rank
                   key={index}
-                  onClick={() => handleTagSearch(tag.tag)}
+                  onClick={() => router.push(`/search?tags=${tag.tag}`)}
                   rank={index + 1}
                   tag={Utils.minifyText(tag.tag, 15)}
                   color="fuchsia"

libs/ui-shared/src/lib/Input/Input.Search/_SearchTag.tsx

@@ -4,24 +4,20 @@ import React from 'react';
 
 interface SearchTagProps extends React.HTMLAttributes<HTMLDivElement> {
   value: string;
-  color: string;
-  actions: React.ReactNode[];
+  action?: React.ReactNode;
 }
 
-export const SearchTag = ({
-  value,
-  color = 'bg-black',
-  actions,
-  ...rest
-}: SearchTagProps) => {
-  const baseCSS = `cursor-pointer items-center px-2 py-1 backdrop-blur-lg justify-start gap-1 inline-flex rounded-lg`;
+export const SearchTag = ({ value, action, ...rest }: SearchTagProps) => {
+  const baseCSS = `inline-flex border h-8 px-3 py-1 rounded-full cursor-pointer text-center bg-[#391941] border-fuchsia-500 border-opacity-60 rounded-full`;
 
   return (
-    <div {...rest} className={twMerge(baseCSS, color, rest.className)}>
-      <Typography.Body variant="small-bold">{value}</Typography.Body>
-      {actions.map((action, index) => (
-        <div key={index}>{action}</div>
-      ))}
+    <div {...rest} className={twMerge(baseCSS, rest.className)}>
+      <div className="flex gap-2">
+        <Typography.Body className="text-fuchsia-200" variant="small-bold">
+          {value}
+        </Typography.Body>
+        {action}
+      </div>
     </div>
   );
 };