Squashed commit of the following:

commit 7ab21880d8204d1547af3909a6042b6203a3194d
Author: John Doe <elmehdi.sakout@gmail.com>
Date:   Sat Dec 23 23:24:31 2023 +0100

    update readme

commit 181a4b1469b69db5819d892f63dcea8f0679ded2
Merge: f30f6aa bf76f7e
Author: John Doe <elmehdi.sakout@gmail.com>
Date:   Sat Dec 23 21:59:03 2023 +0100

    Merge branch 'develop' into feat/card-by-ai

commit f30f6aacd20f81e3fca7000645c2c45c524d999d
Merge: 010f059 d235b4e
Author: John Doe <elmehdi.sakout@gmail.com>
Date:   Sat Dec 23 20:55:55 2023 +0100

    Merge branch 'develop' into feat/card-by-ai

commit 010f059a6f6944e5b2e38591871c498f273ed4cf
Author: John Doe <elmehdi.sakout@gmail.com>
Date:   Sat Dec 23 17:53:35 2023 +0100

    check if analytics key exists

commit fbdf1c059984b2c986a829484ce21f567b06c0e8
Author: John Doe <elmehdi.sakout@gmail.com>
Date:   Sat Dec 23 17:48:47 2023 +0100

    fix close icon color

commit 15432ed8e0ac8976fc15fb69a8f7cefee98cb72e
Merge: 0b75404 b84849f
Author: John Doe <elmehdi.sakout@gmail.com>
Date:   Sat Dec 23 17:41:12 2023 +0100

    Merge branch 'develop' into feat/card-by-ai

commit 0b75404c727e47aa27cbe00d2db2dc0a963b48b7
Author: John Doe <elmehdi.sakout@gmail.com>
Date:   Sat Dec 23 12:17:40 2023 +0100

    add close button

commit 8475a4a24416f03107766d8cc5d2c6b464d157ee
Merge: 67a7f98 9036ec2
Author: John Doe <elmehdi.sakout@gmail.com>
Date:   Tue Dec 19 16:46:50 2023 +0100

    Merge branch 'develop' into feat/card-by-ai

commit 67a7f9864b8f106bebfca60c6087cb5c26573919
Author: John Doe <elmehdi.sakout@gmail.com>
Date:   Mon Dec 18 18:30:02 2023 +0100

    add image bloc if available

commit 64e81129ef93102ddf641f8bb2962b493fbda903
Author: John Doe <elmehdi.sakout@gmail.com>
Date:   Mon Dec 18 18:29:48 2023 +0100

    remove redundant share bloc

commit 4d6385aef457c7f2c2850361fdbb17d4e1fc1ad5
Merge: 62f773c 64a02ee
Author: John Doe <elmehdi.sakout@gmail.com>
Date:   Sun Dec 17 21:22:06 2023 +0100

    Merge branch 'develop' into feat/card-by-ai

commit 62f773c1d290ea1cf6ff3d101d1119c173b62c34
Author: John Doe <elmehdi.sakout@gmail.com>
Date:   Sat Dec 16 13:47:55 2023 +0100

    implement powered by AI Card

commit 40045812d4e8c06804ef653edacae16e0bb8a171
Author: John Doe <elmehdi.sakout@gmail.com>
Date:   Sun Dec 10 23:09:26 2023 +0100

    add panel element

commit 4ced4bb6516bda883199cef775059699172ace1b
Author: John Doe <elmehdi.sakout@gmail.com>
Date:   Sat Dec 9 23:48:04 2023 +0100

    update react icons

Author: medyo

README.md

@@ -5,31 +5,38 @@
 [![Chrome Web Store Rating](https://img.shields.io/chrome-web-store/stars/ocoipcahhaedjhnpoanfflhbdcpmalmp.svg?colorB=%234FC828&label=rating&style=flat)](https://chrome.google.com/webstore/detail/hackertabdev/ocoipcahhaedjhnpoanfflhbdcpmalmp/reviews)
 
 # Hackertab.dev — All Developer news in one tab!
+
 **Hackertab makes it easy for you to stay up-to-date with the latest developer news, tools, jobs and events.**
 
 <img src="/demo/demo_hackertab.dev.jpeg" width="100%" alt="Hackertab.dev"/>
 
 As a developer, it can be difficult to stay on top of everything happening in the field. Hackertab makes it easy by allowing you to customize your default tab page to include news, tools and events from top sources such as GitHub Trendings, Hacker News, DevTo, Medium, and Product Hunt. No matter what type of developer you are, you'll find valuable and relevant information with Hackertab. Don't miss out - give it a try today!
 
 #### Demo
+
 👉 [now.hackertab.dev](https://now.hackertab.dev)
 
 ## 👩‍💻 How to use it
+
 - Install the extension from the [Chrome store](https://bit.ly/hackertab-ch), or [Mozilla add-ons](https://bit.ly/hackertab-ff)
 - Open a new tab
 - The extension should now be running and visible
 - Select your preferred programming languages and sources.
 - Enjoy
 
 ## 🔥 Features
-- 🆕 Hourly updated content
-- 💻 Customizable by language or topic
-- 👍 Curated content from the best sources
-- 🔖 Bookmark and read it later
-- 🌙 Dark mode for when it gets late 
+
+- 🆕 Daily updated content
+- 💻 Customizable by programming language, framework and topic.
+- 👍 Curated content from the best sources.
+- 🔖 Bookmark and read it later.
+- 🌙 Dark mode for when it gets late.
+- ✨ AI-powered recommendations exclusively tailored to your preferences.
+
 Even more features are going to come in the future!
 
 ## Data sources
+
 - Github Trendings
 - Hackernews
 - DevTo
@@ -44,10 +51,13 @@ Even more features are going to come in the future!
 - **or create an issue to ask for a new data source**
 
 ## Support
+
 Please do not hesitate to ask a question, report a bug or add a suggestion. or send an email to hello@hackertab.dev
 
 ## Development
-Please use the develop branch
+
+Please use the develop branch. Create an .env file with the necessary
+
 ```bash
 $ git clone --branch develop git@github.com:medyo/hackertab.dev.git
 $ cd hackertab.dev
@@ -57,9 +67,10 @@ $ # Then visit http://localhost:3000
 ```
 
 ## Maintainers
+
 - [medyo](https://github.com/medyo)
-- [chouikane](https://github.com/Chouikane)
 
 ## Licencing
-Hackertab is licensed under the Apache License, Version 2.0. 
+
+Hackertab is licensed under the Apache License, Version 2.0.
 See [LICENSE](/LICENSE) for the full license text.

package.json

@@ -23,7 +23,7 @@
     "react-dom": "^17.0.1",
     "react-easy-sort": "^1.5.1",
     "react-error-boundary": "^3.1.4",
-    "react-icons": "^4.4.0",
+    "react-icons": "^4.12.0",
     "react-markdown": "^7.0.1",
     "react-modal": "^3.12.1",
     "react-router-dom": "^6.21.0",

src/assets/App.css

@@ -329,7 +329,20 @@ a {
   height: 16px;
   width: 16px;
 }
-
+.blockHeaderBadge {
+  width: auto;
+  font-size: 12px;
+  height: 20px;
+  background-color: var(--tooltip-accent-color);
+  border-radius: 20px;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: inline-flex;
+  padding: 0 6px;
+  text-transform: lowercase;
+  color: white;
+}
 .blockHeaderIcon img {
   display: block;
 }
@@ -348,7 +361,7 @@ a {
   position: absolute;
   right: 0;
   top: 0;
-  width: 26%;
+  width: 30%;
 }
 
 .blockActions.active {
@@ -408,14 +421,23 @@ a {
 .blockRow:not(:last-child) {
   border-bottom: 1px solid var(--card-content-divider);
 }
-
+.rowCover {
+  border-radius: 4px;
+  display: block;
+  width: 100%;
+  min-height: auto;
+  object-fit: cover;
+  aspect-ratio: 16/9;
+  background-color: var(--placeholder-background-color);
+  margin-bottom: 12px;
+}
 .rowTitle {
   color: var(--primary-text-color);
   margin: 0;
   padding: 0;
   font-size: 16px;
   text-decoration: none;
-  display: flex;
+  display: block;
   flex-direction: row;
 }
 
@@ -1279,3 +1301,6 @@ Producthunt item
   color: var(--primary-text-color);
   border-radius: 10px;
 }
+.capitalize {
+  text-transform: capitalize;
+}

src/components/Elements/Card/Card.tsx

@@ -16,7 +16,7 @@ type CardProps = {
 
 export const Card = ({ card, titleComponent, children, fullBlock = false }: CardProps) => {
   const { openLinksNewTab } = useUserPreferences()
-  const { link, icon, label } = card
+  const { link, icon, label, badge } = card
   const handleHeaderLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault()
     let url = `${link}?${ref}`
@@ -39,6 +39,7 @@ export const Card = ({ card, titleComponent, children, fullBlock = false }: Card
             <BsBoxArrowInUpRight />
           </a>
         )}
+        {badge && <span className="blockHeaderBadge">{badge}</span>}
       </div>
 
       <div className="blockContent scrollable">{children}</div>

src/components/Elements/CardWithActions/CardItemWithActions.tsx

@@ -1,9 +1,12 @@
 import React, { useEffect, useState } from 'react'
 import { BiBookmarkMinus, BiBookmarkPlus, BiShareAlt } from 'react-icons/bi'
+import { MdBugReport } from 'react-icons/md'
+import { reportLink } from 'src/config'
 import { ShareModal } from 'src/features/shareModal'
 import { ShareModalData } from 'src/features/shareModal/types'
 import { Attributes, trackLinkBookmark, trackLinkUnBookmark } from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
+import { useUserPreferences } from 'src/stores/preferences'
 import { BaseEntry } from 'src/types'
 
 type CardItemWithActionsProps = {
@@ -62,16 +65,30 @@ export const CardItemWithActions = ({
     setShareModalData({ title: item.title, link: item.url, source: source })
   }
 
+  const onReportClicked = () => {
+    const tags = useUserPreferences
+      .getState()
+      .userSelectedTags.map((tag) => tag.label.toLocaleLowerCase())
+    window.open(`${reportLink}?tags=${tags.join(',')}&url=${item.url}`, '_blank')
+  }
+
   return (
     <div key={`${source}-${index}`} className="blockRow">
       <ShareModal
         showModal={setShareModalData !== undefined}
         closeModal={() => setShareModalData(undefined)}
         shareData={shareModalData}
       />
-
       {cardItem}
       <div className={`blockActions ${isBookmarked ? 'active' : ''} `}>
+        {source === 'ai' && (
+          <button
+            className={`blockActionButton `}
+            onClick={onReportClicked}
+            aria-label="Report item">
+            <MdBugReport />
+          </button>
+        )}
         <button
           className={`blockActionButton `}
           onClick={onShareModalClicked}

src/components/Elements/Panel/Panel.tsx

@@ -0,0 +1,20 @@
+import './panel.css'
+
+const variants = {
+  information: 'information',
+  warning: 'bg-yellow-100 border-yellow-500 text-yellow-700',
+}
+type PanelProps = {
+  title: string | React.ReactNode
+  body: string | React.ReactNode
+  variant: keyof typeof variants
+}
+
+export const Panel = ({ title, body, variant = 'information' }: PanelProps) => {
+  return (
+    <div className={`panel ${variants[variant]}`}>
+      <h3 className="title">{title}</h3>
+      <p className="body">{body}</p>
+    </div>
+  )
+}

src/components/Elements/Panel/index.ts

@@ -0,0 +1 @@
+export * from './Panel'

src/components/Elements/Panel/panel.css

@@ -0,0 +1,41 @@
+.panel {
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  scroll-snap-align: start;
+  padding: 16px 18px;
+}
+.panel .title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  padding: 0;
+  display: inline-flex;
+  gap: 6px;
+}
+.panel .body {
+  font-size: 14px;
+  line-height: 20px;
+  margin: 0;
+  padding: 0;
+}
+
+.dark .panel.information {
+  background-color: #3b424b;
+  color: white;
+}
+.light .panel.information {
+  background-color: #cce6ff;
+  color: black;
+}
+.panel .closeBtn {
+  background: none;
+  margin-left: auto;
+  border: 0;
+  cursor: pointer;
+  color: var(--primary-text-color);
+}
+.panel .closeBtn :hover {
+  opacity: 0.7;
+}

src/components/Elements/index.ts

@@ -1,14 +1,14 @@
-export * from "./BottomNavigation"
-export * from "./Card"
-export * from "./CardLink"
-export * from "./CardWithActions"
-export * from "./ChipsSet"
-export * from "./ClickableItem"
-export * from "./ColoredLanguagesBadges"
-export * from "./FloatingFilter"
-export * from "./InlineTextFilter"
-export * from "./SearchBar"
-export * from "./SearchBarWithLogo"
-export * from "./Steps"
-export * from "./UserTags"
-
+export * from './BottomNavigation'
+export * from './Card'
+export * from './CardLink'
+export * from './CardWithActions'
+export * from './ChipsSet'
+export * from './ClickableItem'
+export * from './ColoredLanguagesBadges'
+export * from './FloatingFilter'
+export * from './InlineTextFilter'
+export * from './Panel'
+export * from './SearchBar'
+export * from './SearchBarWithLogo'
+export * from './Steps'
+export * from './UserTags'

src/components/List/ListComponent.tsx

@@ -25,6 +25,7 @@ export type ListComponentPropsType<T extends BaseEntry> = {
   renderItem: (item: T, index: number) => React.ReactNode
   withAds: boolean
   placeholder?: React.ReactNode
+  header?: React.ReactNode
   refresh?: boolean
   error?: any
   limit?: number
@@ -37,6 +38,7 @@ export function ListComponent<T extends BaseEntry>(props: ListComponentPropsType
     error,
     renderItem,
     withAds,
+    header,
     placeholder = <Placeholder />,
     limit = MAX_ITEMS_PER_CARD,
   } = props
@@ -75,9 +77,14 @@ export function ListComponent<T extends BaseEntry>(props: ListComponentPropsType
 
     return items.slice(0, limit).map((item, index) => {
       let content: ReactNode[] = [renderItem(item, index)]
+      if (header && index === 0) {
+        content.unshift(header)
+      }
+
       if (canAdsLoad && adsConfig.enabled && withAds && index === adsConfig.rowPosition) {
         content.unshift(<BannerAd key={'banner-ad'} />)
       }
+
       return content
     })
   }