From b25327a8961376c79e28415e64055168e79081e3 Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Mon, 27 Jan 2025 23:11:41 +0100
Subject: [PATCH 01/75] feat: Add auth modal ui and show it next to onboarding.

---
 src/App.tsx                                |  4 ++
 src/assets/App.css                         | 18 ++++++++
 src/features/auth/components/AuthModal.tsx | 48 ++++++++++++++++++++++
 src/features/auth/index.ts                 |  1 +
 4 files changed, 71 insertions(+)
 create mode 100644 src/features/auth/components/AuthModal.tsx
 create mode 100644 src/features/auth/index.ts

diff --git a/src/App.tsx b/src/App.tsx
index 788dd432..1ff04131 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import { DNDLayout } from 'src/components/Layout'
 import { setupAnalytics, setupIdentification, trackPageView } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { AppContentLayout } from './components/Layout'
+import { AuthModal } from './features/auth'
 import { isWebOrExtensionVersion } from './utils/Environment'
 import { lazyImport } from './utils/lazyImport'
 const { OnboardingModal } = lazyImport(() => import('src/features/onboarding'), 'OnboardingModal')
@@ -19,6 +20,7 @@ const intersectionCallback = (entries: IntersectionObserverEntry[]) => {
 
 export const App = () => {
   const [showOnboarding, setShowOnboarding] = useState(true)
+  const [showAuth, setshowAuth] = useState(true)
   const { onboardingCompleted, maxVisibleCards, isDNDModeActive, DNDDuration, setDNDDuration } =
     useUserPreferences()
 
@@ -62,6 +64,8 @@ export const App = () => {
         <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
       )}
 
+      {<AuthModal showAuth={showAuth} setShowAuth={setshowAuth} />}
+
       <div className="layoutLayers hideScrollBar">
         {isDNDModeActive() && <DNDLayout />}
         <AppContentLayout />
diff --git a/src/assets/App.css b/src/assets/App.css
index d460729b..a35166ef 100644
--- a/src/assets/App.css
+++ b/src/assets/App.css
@@ -162,6 +162,24 @@ a {
   color: var(--dark-mode-text-color);
 }
 
+.extraTextWithIconBtn {
+  background-color: var(--button-background-color);
+  color: var(--button-text-color);
+  height: 40px;
+  width: auto;
+  padding: 0 16px;
+  min-width: 40px;
+  font-weight: bold;
+  font-size: 18px;
+  text-align: center;
+  border: 0;
+  border-radius: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
 .badgeCount {
   width: 20px;
   height: 20px;
diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
new file mode 100644
index 00000000..f5d6c7cd
--- /dev/null
+++ b/src/features/auth/components/AuthModal.tsx
@@ -0,0 +1,48 @@
+import { FaGithub, FaGoogle } from 'react-icons/fa'
+import ReactModal from 'react-modal'
+
+type AuthModalProps = {
+  showAuth: boolean
+  setShowAuth: (show: boolean) => void
+}
+
+export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
+  return (
+    <ReactModal
+      isOpen={showAuth}
+      ariaHideApp={false}
+      shouldCloseOnEsc={true}
+      shouldCloseOnOverlayClick={true}
+      shouldFocusAfterRender={false}
+      onRequestClose={() => setShowAuth(false)}
+      contentLabel="Auth"
+      className="Modal scrollable"
+      style={{
+        overlay: {
+          zIndex: 3,
+        },
+      }}
+      overlayClassName="Overlay">
+      <div>
+        <div>
+          <h1>Welcome to Hackertab</h1>
+          <p>
+            To enhance your experience and unlock our new rewards system, we’ve introduced a simple
+            and secure way to sign in. Connect your account with GitHub or Google to start earning
+            rewards, save your progress, and enjoy personalized features.
+          </p>
+        </div>
+        <div>
+          <button type="button" className="extraTextWithIconBtn">
+            <FaGithub />
+            Sign in with Github
+          </button>
+          <button type="button" className="extraTextWithIconBtn" style={{ marginLeft: 10 }}>
+            <FaGoogle />
+            Sign in with Google
+          </button>
+        </div>
+      </div>
+    </ReactModal>
+  )
+}
diff --git a/src/features/auth/index.ts b/src/features/auth/index.ts
new file mode 100644
index 00000000..d1a4b0d2
--- /dev/null
+++ b/src/features/auth/index.ts
@@ -0,0 +1 @@
+export * from './components/AuthModal'

From 71cd2e64dc01c561d67b5ac0fcfb06c5a54807b0 Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Mon, 27 Jan 2025 23:36:19 +0100
Subject: [PATCH 02/75] feat: Add google auth.

---
 package.json                               |   1 +
 src/features/auth/api/Config.ts            |  20 +
 src/features/auth/components/AuthModal.tsx |  23 +-
 yarn.lock                                  | 650 ++++++++++++++++++++-
 4 files changed, 692 insertions(+), 2 deletions(-)
 create mode 100644 src/features/auth/api/Config.ts

diff --git a/package.json b/package.json
index bf1e0f6c..35f5d255 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "axios-cache-adapter": "^2.7.3",
     "country-emoji": "^1.5.4",
     "dompurify": "^2.2.7",
+    "firebase": "^11.2.0",
     "htmlparser2": "^8.0.1",
     "jsonpath": "^1.1.1",
     "normalize.css": "^8.0.1",
diff --git a/src/features/auth/api/Config.ts b/src/features/auth/api/Config.ts
new file mode 100644
index 00000000..960a7a7b
--- /dev/null
+++ b/src/features/auth/api/Config.ts
@@ -0,0 +1,20 @@
+import { initializeApp } from 'firebase/app'
+import { getAuth, GoogleAuthProvider } from 'firebase/auth'
+
+// TODO This is a temporary firebase project config, to be changed later.
+const firebaseConfig = {
+  apiKey: 'AIzaSyCpD2SbQnCCDjmAPasQ8q5jPcxf5lQLwYI',
+  authDomain: 'hackertab-418813.firebaseapp.com',
+  projectId: 'hackertab-418813',
+  storageBucket: 'hackertab-418813.firebasestorage.app',
+  messagingSenderId: '249160525821',
+  appId: '1:249160525821:web:e729de3eadc14d2242db94',
+  measurementId: 'G-NTMXFLMF00',
+}
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig)
+const auth = getAuth(app)
+const provider = new GoogleAuthProvider()
+
+export { auth, provider }
diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index f5d6c7cd..4ae0179f 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -1,5 +1,8 @@
+import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth'
 import { FaGithub, FaGoogle } from 'react-icons/fa'
 import ReactModal from 'react-modal'
+import toast from 'react-simple-toasts'
+import { auth, provider } from '../api/Config'
 
 type AuthModalProps = {
   showAuth: boolean
@@ -7,6 +10,20 @@ type AuthModalProps = {
 }
 
 export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
+  const signInWithGoogle = () => {
+    signInWithPopup(auth, provider)
+      .then((result) => {
+        const credential = GoogleAuthProvider.credentialFromResult(result)
+        // TODO save this token in user settings maybe!
+        const token = credential.accessToken
+        // The signed-in user info.
+        const user = result.user
+        console.log(user)
+      })
+      .catch((error) => {
+        toast("We couldn't login to you Google account!!", { theme: 'failure' })
+      })
+  }
   return (
     <ReactModal
       isOpen={showAuth}
@@ -37,7 +54,11 @@ export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
             <FaGithub />
             Sign in with Github
           </button>
-          <button type="button" className="extraTextWithIconBtn" style={{ marginLeft: 10 }}>
+          <button
+            type="button"
+            className="extraTextWithIconBtn"
+            style={{ marginLeft: 10 }}
+            onClick={signInWithGoogle}>
             <FaGoogle />
             Sign in with Google
           </button>
diff --git a/yarn.lock b/yarn.lock
index b38ede3b..62c049f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1498,6 +1498,396 @@
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
   integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
 
+"@firebase/analytics-compat@0.2.17":
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/@firebase/analytics-compat/-/analytics-compat-0.2.17.tgz#c3cfc8ffb863d574ec26d86f9c8344d752832995"
+  integrity sha512-SJNVOeTvzdqZQvXFzj7yAirXnYcLDxh57wBFROfeowq/kRN1AqOw1tG6U4OiFOEhqi7s3xLze/LMkZatk2IEww==
+  dependencies:
+    "@firebase/analytics" "0.10.11"
+    "@firebase/analytics-types" "0.8.3"
+    "@firebase/component" "0.6.12"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/analytics-types@0.8.3":
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/@firebase/analytics-types/-/analytics-types-0.8.3.tgz#d08cd39a6209693ca2039ba7a81570dfa6c1518f"
+  integrity sha512-VrIp/d8iq2g501qO46uGz3hjbDb8xzYMrbu8Tp0ovzIzrvJZ2fvmj649gTjge/b7cCCcjT0H37g1gVtlNhnkbg==
+
+"@firebase/analytics@0.10.11":
+  version "0.10.11"
+  resolved "https://registry.yarnpkg.com/@firebase/analytics/-/analytics-0.10.11.tgz#6896413e92613573af775c45050af889a43676da"
+  integrity sha512-zwuPiRE0+hgcS95JZbJ6DFQN4xYFO8IyGxpeePTV51YJMwCf3lkBa6FnZ/iXIqDKcBPMgMuuEZozI0BJWaLEYg==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/installations" "0.6.12"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/app-check-compat@0.3.18":
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/@firebase/app-check-compat/-/app-check-compat-0.3.18.tgz#abe63858fca86b61ea431e0d9e58ccb8bac1b275"
+  integrity sha512-qjozwnwYmAIdrsVGrJk+hnF1WBois54IhZR6gO0wtZQoTvWL/GtiA2F31TIgAhF0ayUiZhztOv1RfC7YyrZGDQ==
+  dependencies:
+    "@firebase/app-check" "0.8.11"
+    "@firebase/app-check-types" "0.5.3"
+    "@firebase/component" "0.6.12"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/app-check-interop-types@0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@firebase/app-check-interop-types/-/app-check-interop-types-0.3.3.tgz#ed9c4a4f48d1395ef378f007476db3940aa5351a"
+  integrity sha512-gAlxfPLT2j8bTI/qfe3ahl2I2YcBQ8cFIBdhAQA4I2f3TndcO+22YizyGYuttLHPQEpWkhmpFW60VCFEPg4g5A==
+
+"@firebase/app-check-types@0.5.3":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@firebase/app-check-types/-/app-check-types-0.5.3.tgz#38ba954acf4bffe451581a32fffa20337f11d8e5"
+  integrity sha512-hyl5rKSj0QmwPdsAxrI5x1otDlByQ7bvNvVt8G/XPO2CSwE++rmSVf3VEhaeOR4J8ZFaF0Z0NDSmLejPweZ3ng==
+
+"@firebase/app-check@0.8.11":
+  version "0.8.11"
+  resolved "https://registry.yarnpkg.com/@firebase/app-check/-/app-check-0.8.11.tgz#3c67148046fea0a0a9a1eecf1a17fdc31a76eda7"
+  integrity sha512-42zIfRI08/7bQqczAy7sY2JqZYEv3a1eNa4fLFdtJ54vNevbBIRSEA3fZgRqWFNHalh5ohsBXdrYgFqaRIuCcQ==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/app-compat@0.2.48":
+  version "0.2.48"
+  resolved "https://registry.yarnpkg.com/@firebase/app-compat/-/app-compat-0.2.48.tgz#4cc013dc53b12c9c2ebda6369bbeb99f3cc59975"
+  integrity sha512-wVNU1foBIaJncUmiALyRxhHHHC3ZPMLIETTAk+2PG87eP9B/IDBsYUiTpHyboDPEI8CgBPat/zN2v+Snkz6lBw==
+  dependencies:
+    "@firebase/app" "0.10.18"
+    "@firebase/component" "0.6.12"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/app-types@0.9.3":
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/@firebase/app-types/-/app-types-0.9.3.tgz#8408219eae9b1fb74f86c24e7150a148460414ad"
+  integrity sha512-kRVpIl4vVGJ4baogMDINbyrIOtOxqhkZQg4jTq3l8Lw6WSk0xfpEYzezFu+Kl4ve4fbPl79dvwRtaFqAC/ucCw==
+
+"@firebase/app@0.10.18":
+  version "0.10.18"
+  resolved "https://registry.yarnpkg.com/@firebase/app/-/app-0.10.18.tgz#219d897beedcc833ab6d7bdc4ea810ece9e32df6"
+  integrity sha512-VuqEwD/QRisKd/zsFsqgvSAx34mZ3WEF47i97FD6Vw4GWAhdjepYf0Hmi6K0b4QMSgWcv/x0C30Slm5NjjERXg==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.10.3"
+    idb "7.1.1"
+    tslib "^2.1.0"
+
+"@firebase/auth-compat@0.5.17":
+  version "0.5.17"
+  resolved "https://registry.yarnpkg.com/@firebase/auth-compat/-/auth-compat-0.5.17.tgz#60d9222dae734fb8740ac565e342dc11f92d2392"
+  integrity sha512-Shi6rqLqzU9KLXnUCmlLvVByq1kiG3oe7Wpbf5m1CgS7NiRx2pSSn0HLaRRozdkaizNzMGGj+3oHmNYQ7kU6xA==
+  dependencies:
+    "@firebase/auth" "1.8.2"
+    "@firebase/auth-types" "0.12.3"
+    "@firebase/component" "0.6.12"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/auth-interop-types@0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@firebase/auth-interop-types/-/auth-interop-types-0.2.4.tgz#176a08686b0685596ff03d7879b7e4115af53de0"
+  integrity sha512-JPgcXKCuO+CWqGDnigBtvo09HeBs5u/Ktc2GaFj2m01hLarbxthLNm7Fk8iOP1aqAtXV+fnnGj7U28xmk7IwVA==
+
+"@firebase/auth-types@0.12.3":
+  version "0.12.3"
+  resolved "https://registry.yarnpkg.com/@firebase/auth-types/-/auth-types-0.12.3.tgz#650e54a36060b5ea012075ddbd3cb26566334c41"
+  integrity sha512-Zq9zI0o5hqXDtKg6yDkSnvMCMuLU6qAVS51PANQx+ZZX5xnzyNLEBO3GZgBUPsV5qIMFhjhqmLDxUqCbnAYy2A==
+
+"@firebase/auth@1.8.2":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@firebase/auth/-/auth-1.8.2.tgz#4559dfabe40bc7a0605fb2a73f401d83cb32fe80"
+  integrity sha512-q+071y2LWe0bVnjqaX3BscqZwzdP0GKN2YBKapLq4bV88MPfCtWwGKmDhNDEDUmioOjudGXkUY5cvvKqk3mlUg==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/component@0.6.12":
+  version "0.6.12"
+  resolved "https://registry.yarnpkg.com/@firebase/component/-/component-0.6.12.tgz#08905a534e9b769164e7e1b1e80f6e7611eb67f3"
+  integrity sha512-YnxqjtohLbnb7raXt2YuA44cC1wA9GiehM/cmxrsoxKlFxBLy2V0OkRSj9gpngAE0UoJ421Wlav9ycO7lTPAUw==
+  dependencies:
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/data-connect@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@firebase/data-connect/-/data-connect-0.2.0.tgz#7133cb40096466dc17ad01a50a5f2c383605df20"
+  integrity sha512-7OrZtQoLSk2fiGijhIdUnTSqEFti3h1EMhw9nNiSZ6jJGduw4Pz6jrVvxjpZJtGH/JiljbMkBnPBS2h8CTRKEw==
+  dependencies:
+    "@firebase/auth-interop-types" "0.2.4"
+    "@firebase/component" "0.6.12"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/database-compat@2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@firebase/database-compat/-/database-compat-2.0.2.tgz#9ddf474b593766a41ea576185cdf115e28f0cb50"
+  integrity sha512-5zvdnMsfDHvrQAVM6jBS7CkBpu+z3YbpFdhxRsrK1FP45IEfxlzpeuEUb17D/tpM10vfq4Ok0x5akIBaCv7gfA==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/database" "1.0.11"
+    "@firebase/database-types" "1.0.8"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/database-types@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@firebase/database-types/-/database-types-1.0.8.tgz#eddcce594be118bf9aebb043b5a6d51cfb6de620"
+  integrity sha512-6lPWIGeufhUq1heofZULyVvWFhD01TUrkkB9vyhmksjZ4XF7NaivQp9rICMk7QNhqwa+uDCaj4j+Q8qqcSVZ9g==
+  dependencies:
+    "@firebase/app-types" "0.9.3"
+    "@firebase/util" "1.10.3"
+
+"@firebase/database@1.0.11":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@firebase/database/-/database-1.0.11.tgz#5b9960a07a0d49361f67fc69affc779cae4e07e3"
+  integrity sha512-gLrw/XeioswWUXgpVKCPAzzoOuvYNqK5fRUeiJTzO7Mlp9P6ylFEyPJlRBl1djqYye641r3MX6AmIeMXwjgwuQ==
+  dependencies:
+    "@firebase/app-check-interop-types" "0.3.3"
+    "@firebase/auth-interop-types" "0.2.4"
+    "@firebase/component" "0.6.12"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.10.3"
+    faye-websocket "0.11.4"
+    tslib "^2.1.0"
+
+"@firebase/firestore-compat@0.3.41":
+  version "0.3.41"
+  resolved "https://registry.yarnpkg.com/@firebase/firestore-compat/-/firestore-compat-0.3.41.tgz#434d86fd603b5ebcde19b5695b9b2a53bb23be8b"
+  integrity sha512-J/PgWKEt0yugETOE7lOabT16hsV21cLzSxERD7ZhaiwBQkBTSf0Mx9RhjZRT0Ttqe4weM90HGZFyUBqYA73fVA==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/firestore" "4.7.6"
+    "@firebase/firestore-types" "3.0.3"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/firestore-types@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@firebase/firestore-types/-/firestore-types-3.0.3.tgz#7d0c3dd8850c0193d8f5ee0cc8f11961407742c1"
+  integrity sha512-hD2jGdiWRxB/eZWF89xcK9gF8wvENDJkzpVFb4aGkzfEaKxVRD1kjz1t1Wj8VZEp2LCB53Yx1zD8mrhQu87R6Q==
+
+"@firebase/firestore@4.7.6":
+  version "4.7.6"
+  resolved "https://registry.yarnpkg.com/@firebase/firestore/-/firestore-4.7.6.tgz#877a37b615d86c61ac9ba7ddd0a967feb99380ac"
+  integrity sha512-aVDboR+upR/44qZDLR4tnZ9pepSOFBbDJnwk7eWzmTyQq2nZAVG+HIhrqpQawmUVcDRkuJv2K2UT2+oqR8F8TA==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.10.3"
+    "@firebase/webchannel-wrapper" "1.0.3"
+    "@grpc/grpc-js" "~1.9.0"
+    "@grpc/proto-loader" "^0.7.8"
+    tslib "^2.1.0"
+
+"@firebase/functions-compat@0.3.18":
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/@firebase/functions-compat/-/functions-compat-0.3.18.tgz#c6a4f6b0762c6990db0aab244420c3e1240fda2b"
+  integrity sha512-N7+RN5GVus2ORB8cqfSNhfSn4iaYws6F8uCCfn4mtjC7zYS/KH6muzNAhZUdUqlv5YazbVmvxlAoYYF39i8Qzg==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/functions" "0.12.1"
+    "@firebase/functions-types" "0.6.3"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/functions-types@0.6.3":
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/@firebase/functions-types/-/functions-types-0.6.3.tgz#f5faf770248b13f45d256f614230da6a11bfb654"
+  integrity sha512-EZoDKQLUHFKNx6VLipQwrSMh01A1SaL3Wg6Hpi//x6/fJ6Ee4hrAeswK99I5Ht8roiniKHw4iO0B1Oxj5I4plg==
+
+"@firebase/functions@0.12.1":
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/@firebase/functions/-/functions-0.12.1.tgz#09ca7386619b0c50c535f6695e5be0712d3e4730"
+  integrity sha512-QucRiFrvMMmIGTRhL7ZK2IeBnAWP7lAmfFREMpEtX47GjVqDqGxdFs+Mg7XBzxSc9UjDO4Rxf+aE9xJHU6bGwg==
+  dependencies:
+    "@firebase/app-check-interop-types" "0.3.3"
+    "@firebase/auth-interop-types" "0.2.4"
+    "@firebase/component" "0.6.12"
+    "@firebase/messaging-interop-types" "0.2.3"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/installations-compat@0.2.12":
+  version "0.2.12"
+  resolved "https://registry.yarnpkg.com/@firebase/installations-compat/-/installations-compat-0.2.12.tgz#ee6396f3cc787c0dd4fc5dd87fec1db9dbb40c97"
+  integrity sha512-RhcGknkxmFu92F6Jb3rXxv6a4sytPjJGifRZj8MSURPuv2Xu+/AispCXEfY1ZraobhEHTG5HLGsP6R4l9qB5aA==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/installations" "0.6.12"
+    "@firebase/installations-types" "0.5.3"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/installations-types@0.5.3":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@firebase/installations-types/-/installations-types-0.5.3.tgz#cac8a14dd49f09174da9df8ae453f9b359c3ef2f"
+  integrity sha512-2FJI7gkLqIE0iYsNQ1P751lO3hER+Umykel+TkLwHj6plzWVxqvfclPUZhcKFVQObqloEBTmpi2Ozn7EkCABAA==
+
+"@firebase/installations@0.6.12":
+  version "0.6.12"
+  resolved "https://registry.yarnpkg.com/@firebase/installations/-/installations-0.6.12.tgz#6d9ad14e60caa8fae4ec0120c0e46ceb9d6fbdae"
+  integrity sha512-ES/WpuAV2k2YtBTvdaknEo7IY8vaGjIjS3zhnHSAIvY9KwTR8XZFXOJoZ3nSkjN1A5R4MtEh+07drnzPDg9vaw==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/util" "1.10.3"
+    idb "7.1.1"
+    tslib "^2.1.0"
+
+"@firebase/logger@0.4.4":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@firebase/logger/-/logger-0.4.4.tgz#29e8379d20fd1149349a195ee6deee4573a86f48"
+  integrity sha512-mH0PEh1zoXGnaR8gD1DeGeNZtWFKbnz9hDO91dIml3iou1gpOnLqXQ2dJfB71dj6dpmUjcQ6phY3ZZJbjErr9g==
+  dependencies:
+    tslib "^2.1.0"
+
+"@firebase/messaging-compat@0.2.16":
+  version "0.2.16"
+  resolved "https://registry.yarnpkg.com/@firebase/messaging-compat/-/messaging-compat-0.2.16.tgz#533af4542a54b932146d175d5687aedd428be972"
+  integrity sha512-9HZZ88Ig3zQ0ok/Pwt4gQcNsOhoEy8hDHoGsV1am6ulgMuGuDVD2gl11Lere2ksL+msM12Lddi2x/7TCqmODZw==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/messaging" "0.12.16"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/messaging-interop-types@0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@firebase/messaging-interop-types/-/messaging-interop-types-0.2.3.tgz#e647c9cd1beecfe6a6e82018a6eec37555e4da3e"
+  integrity sha512-xfzFaJpzcmtDjycpDeCUj0Ge10ATFi/VHVIvEEjDNc3hodVBQADZ7BWQU7CuFpjSHE+eLuBI13z5F/9xOoGX8Q==
+
+"@firebase/messaging@0.12.16":
+  version "0.12.16"
+  resolved "https://registry.yarnpkg.com/@firebase/messaging/-/messaging-0.12.16.tgz#bd8a768274bdc4368396bd9eaa356bffb998bef2"
+  integrity sha512-VJ8sCEIeP3+XkfbJA7410WhYGHdloYFZXoHe/vt+vNVDGw8JQPTQSVTRvjrUprEf5I4Tbcnpr2H34lS6zhCHSA==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/installations" "0.6.12"
+    "@firebase/messaging-interop-types" "0.2.3"
+    "@firebase/util" "1.10.3"
+    idb "7.1.1"
+    tslib "^2.1.0"
+
+"@firebase/performance-compat@0.2.12":
+  version "0.2.12"
+  resolved "https://registry.yarnpkg.com/@firebase/performance-compat/-/performance-compat-0.2.12.tgz#069284005e3f29339b570ee517b813d9bdbc0a89"
+  integrity sha512-DyCbDTIwtBTGsEiQxTz/TD23a0na2nrDozceQ5kVkszyFYvliB0YK/9el0wAGIG91SqgTG9pxHtYErzfZc0VWw==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/logger" "0.4.4"
+    "@firebase/performance" "0.6.12"
+    "@firebase/performance-types" "0.2.3"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/performance-types@0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@firebase/performance-types/-/performance-types-0.2.3.tgz#5ce64e90fa20ab5561f8b62a305010cf9fab86fb"
+  integrity sha512-IgkyTz6QZVPAq8GSkLYJvwSLr3LS9+V6vNPQr0x4YozZJiLF5jYixj0amDtATf1X0EtYHqoPO48a9ija8GocxQ==
+
+"@firebase/performance@0.6.12":
+  version "0.6.12"
+  resolved "https://registry.yarnpkg.com/@firebase/performance/-/performance-0.6.12.tgz#58763cbbe31673351e1494875a5c10c6b68e1322"
+  integrity sha512-8mYL4z2jRlKXAi2hjk4G7o2sQLnJCCuTbyvti/xmHf5ZvOIGB01BZec0aDuBIXO+H1MLF62dbye/k91Fr+yc8g==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/installations" "0.6.12"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/remote-config-compat@0.2.12":
+  version "0.2.12"
+  resolved "https://registry.yarnpkg.com/@firebase/remote-config-compat/-/remote-config-compat-0.2.12.tgz#ae0b597b3228deef0e3c6b2c6e631f19213eca4c"
+  integrity sha512-91jLWPtubIuPBngg9SzwvNCWzhMLcyBccmt7TNZP+y1cuYFNOWWHKUXQ3IrxCLB7WwLqQaEu7fTDAjHsTyBsSw==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/logger" "0.4.4"
+    "@firebase/remote-config" "0.5.0"
+    "@firebase/remote-config-types" "0.4.0"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/remote-config-types@0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@firebase/remote-config-types/-/remote-config-types-0.4.0.tgz#91b9a836d5ca30ced68c1516163b281fbb544537"
+  integrity sha512-7p3mRE/ldCNYt8fmWMQ/MSGRmXYlJ15Rvs9Rk17t8p0WwZDbeK7eRmoI1tvCPaDzn9Oqh+yD6Lw+sGLsLg4kKg==
+
+"@firebase/remote-config@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@firebase/remote-config/-/remote-config-0.5.0.tgz#30212fa77adba8a62fc6408eb32122147ae80790"
+  integrity sha512-weiEbpBp5PBJTHUWR4GwI7ZacaAg68BKha5QnZ8Go65W4oQjEWqCW/rfskABI/OkrGijlL3CUmCB/SA6mVo0qA==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/installations" "0.6.12"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/storage-compat@0.3.15":
+  version "0.3.15"
+  resolved "https://registry.yarnpkg.com/@firebase/storage-compat/-/storage-compat-0.3.15.tgz#02a18e0e1866849206dba7b075a4dcd99489aae7"
+  integrity sha512-Z9afjrK2O9o1ZHWCpprCGZ1BTc3BbvpZvi6tkSteC8H3W/fMM6x+RoSunlzD3hEVV5bkbwdJIqNClLMchvyoPA==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/storage" "0.13.5"
+    "@firebase/storage-types" "0.8.3"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/storage-types@0.8.3":
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/@firebase/storage-types/-/storage-types-0.8.3.tgz#2531ef593a3452fc12c59117195d6485c6632d3d"
+  integrity sha512-+Muk7g9uwngTpd8xn9OdF/D48uiQ7I1Fae7ULsWPuKoCH3HU7bfFPhxtJYzyhjdniowhuDpQcfPmuNRAqZEfvg==
+
+"@firebase/storage@0.13.5":
+  version "0.13.5"
+  resolved "https://registry.yarnpkg.com/@firebase/storage/-/storage-0.13.5.tgz#108c86c9cd359aebd306882eb61ce6a8b1deb417"
+  integrity sha512-sB/7HNuW0N9tITyD0RxVLNCROuCXkml5i/iPqjwOGKC0xiUfpCOjBE+bb0ABMoN1qYZfqk0y9IuI2TdomjmkNw==
+  dependencies:
+    "@firebase/component" "0.6.12"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/util@1.10.3":
+  version "1.10.3"
+  resolved "https://registry.yarnpkg.com/@firebase/util/-/util-1.10.3.tgz#63fc5fea7b36236219c4875731597494416678d1"
+  integrity sha512-wfoF5LTy0m2ufUapV0ZnpcGQvuavTbJ5Qr1Ze9OJGL70cSMvhDyjS4w2121XdA3lGZSTOsDOyGhpoDtYwck85A==
+  dependencies:
+    tslib "^2.1.0"
+
+"@firebase/vertexai@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@firebase/vertexai/-/vertexai-1.0.3.tgz#815efed8c16105676ea090daed963be72a01fb68"
+  integrity sha512-SQHg/RPb3LwQs/xiLcvAZYz9NXyDSZUIIwvgsKh6e4wdULAfyPCZIu6Y2ZYIhZLfk9Q44cKZ+++7RPTaqQJdYA==
+  dependencies:
+    "@firebase/app-check-interop-types" "0.3.3"
+    "@firebase/component" "0.6.12"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.10.3"
+    tslib "^2.1.0"
+
+"@firebase/webchannel-wrapper@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.3.tgz#a73bab8eb491d7b8b7be2f0e6c310647835afe83"
+  integrity sha512-2xCRM9q9FlzGZCdgDMJwc0gyUkWFtkosy7Xxr6sFgQwn+wMNIWd7xIvYNauU1r64B5L5rsGKy/n9TKJ0aAFeqQ==
+
 "@floating-ui/core@^1.4.2":
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.2.tgz#53a0f7a98c550e63134d504f26804f6b83dbc071"
@@ -1518,6 +1908,24 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
   integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
 
+"@grpc/grpc-js@~1.9.0":
+  version "1.9.15"
+  resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.9.15.tgz#433d7ac19b1754af690ea650ab72190bd700739b"
+  integrity sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ==
+  dependencies:
+    "@grpc/proto-loader" "^0.7.8"
+    "@types/node" ">=12.12.47"
+
+"@grpc/proto-loader@^0.7.8":
+  version "0.7.13"
+  resolved "https://registry.yarnpkg.com/@grpc/proto-loader/-/proto-loader-0.7.13.tgz#f6a44b2b7c9f7b609f5748c6eac2d420e37670cf"
+  integrity sha512-AiXO/bfe9bmxBjxxtYxFAXGZvMaN5s8kO+jBHAJCON8rJoB5YS/D6X7ZNc6XQkuHNmyl4CYaMI1fJ/Gn27RGGw==
+  dependencies:
+    lodash.camelcase "^4.3.0"
+    long "^5.0.0"
+    protobufjs "^7.2.5"
+    yargs "^17.7.2"
+
 "@jest/expect-utils@^29.7.0":
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.7.0.tgz#023efe5d26a8a70f21677d0a1afc0f0a44e3a1c6"
@@ -1628,6 +2036,59 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
+  integrity sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==
+
+"@protobufjs/base64@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/base64/-/base64-1.1.2.tgz#4c85730e59b9a1f1f349047dbf24296034bb2735"
+  integrity sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==
+
+"@protobufjs/codegen@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@protobufjs/codegen/-/codegen-2.0.4.tgz#7ef37f0d010fb028ad1ad59722e506d9262815cb"
+  integrity sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==
+
+"@protobufjs/eventemitter@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz#355cbc98bafad5978f9ed095f397621f1d066b70"
+  integrity sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==
+
+"@protobufjs/fetch@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/fetch/-/fetch-1.1.0.tgz#ba99fb598614af65700c1619ff06d454b0d84c45"
+  integrity sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.1"
+    "@protobufjs/inquire" "^1.1.0"
+
+"@protobufjs/float@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/float/-/float-1.0.2.tgz#5e9e1abdcb73fc0a7cb8b291df78c8cbd97b87d1"
+  integrity sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==
+
+"@protobufjs/inquire@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/inquire/-/inquire-1.1.0.tgz#ff200e3e7cf2429e2dcafc1140828e8cc638f089"
+  integrity sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==
+
+"@protobufjs/path@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/path/-/path-1.1.2.tgz#6cc2b20c5c9ad6ad0dccfd21ca7673d8d7fbf68d"
+  integrity sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==
+
+"@protobufjs/pool@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/pool/-/pool-1.1.0.tgz#09fd15f2d6d3abfa9b65bc366506d6ad7846ff54"
+  integrity sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==
+
+"@protobufjs/utf8@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
+  integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
+
 "@reach/portal@^0.13.0":
   version "0.13.2"
   resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.13.2.tgz#6f2a6f4afc14894bde9c6435667bb9b660887ed9"
@@ -1995,6 +2456,13 @@
   dependencies:
     undici-types "~5.26.4"
 
+"@types/node@>=12.12.47", "@types/node@>=13.7.0":
+  version "22.10.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.10.10.tgz#85fe89f8bf459dc57dfef1689bd5b52ad1af07e6"
+  integrity sha512-X47y/mPNzxviAGY5TcYPtYL8JsY3kAq2n8fMmKoRCxq/c4v4pyGNCzM2R6+M5/umG4ZfHuT+sgqDYqWc9rJ6ww==
+  dependencies:
+    undici-types "~6.20.0"
+
 "@types/parse-json@^4.0.0":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
@@ -2213,7 +2681,7 @@ acorn@^8.8.2:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
   integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
 
-ansi-regex@^5.0.0:
+ansi-regex@^5.0.0, ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
@@ -2606,6 +3074,15 @@ classnames@^2.2.5, classnames@^2.3.2:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
 
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
 clsx@^1.1.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
@@ -2887,6 +3364,11 @@ electron-to-chromium@^1.4.601:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.614.tgz#2fe789d61fa09cb875569f37c309d0c2701f91c0"
   integrity sha512-X4ze/9Sc3QWs6h92yerwqv7aB/uU8vCjZcrMjA8N9R1pjMFRe44dLsck5FzLilOYvcXuDn93B+bpGYyufc70gQ==
 
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
 emoji-regex@^9.2.2:
   version "9.2.2"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
@@ -3338,6 +3820,13 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+faye-websocket@0.11.4:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.4.tgz#7f0d9275cfdd86a1c963dc8b65fcc451edcbb1da"
+  integrity sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==
+  dependencies:
+    websocket-driver ">=0.5.1"
+
 filelist@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"
@@ -3357,6 +3846,40 @@ find-root@^1.1.0:
   resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
   integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
 
+firebase@^11.2.0:
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/firebase/-/firebase-11.2.0.tgz#843de48382fcaf8050a4a278f35d094fb9960fda"
+  integrity sha512-ztwPhBLAZMVNZjBeQzzTM4rk2rsRXmdFYcnvjAXh+StbiFVshHKaPO9VRGMUzF48du4Mkz6jN1wkmYCuUJPxLA==
+  dependencies:
+    "@firebase/analytics" "0.10.11"
+    "@firebase/analytics-compat" "0.2.17"
+    "@firebase/app" "0.10.18"
+    "@firebase/app-check" "0.8.11"
+    "@firebase/app-check-compat" "0.3.18"
+    "@firebase/app-compat" "0.2.48"
+    "@firebase/app-types" "0.9.3"
+    "@firebase/auth" "1.8.2"
+    "@firebase/auth-compat" "0.5.17"
+    "@firebase/data-connect" "0.2.0"
+    "@firebase/database" "1.0.11"
+    "@firebase/database-compat" "2.0.2"
+    "@firebase/firestore" "4.7.6"
+    "@firebase/firestore-compat" "0.3.41"
+    "@firebase/functions" "0.12.1"
+    "@firebase/functions-compat" "0.3.18"
+    "@firebase/installations" "0.6.12"
+    "@firebase/installations-compat" "0.2.12"
+    "@firebase/messaging" "0.12.16"
+    "@firebase/messaging-compat" "0.2.16"
+    "@firebase/performance" "0.6.12"
+    "@firebase/performance-compat" "0.2.12"
+    "@firebase/remote-config" "0.5.0"
+    "@firebase/remote-config-compat" "0.2.12"
+    "@firebase/storage" "0.13.5"
+    "@firebase/storage-compat" "0.3.15"
+    "@firebase/util" "1.10.3"
+    "@firebase/vertexai" "1.0.3"
+
 focus-trap@^6.2.2:
   version "6.9.4"
   resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.9.4.tgz#436da1a1d935c48b97da63cd8f361c6f3aa16444"
@@ -3406,6 +3929,11 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
+get-caller-file@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
 get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.2.tgz#281b7622971123e1ef4b3c90fd7539306da93f3b"
@@ -3545,6 +4073,16 @@ htmlparser2@^8.0.1:
     domutils "^3.0.1"
     entities "^4.4.0"
 
+http-parser-js@>=0.5.1:
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.9.tgz#b817b3ca0edea6236225000d795378707c169cec"
+  integrity sha512-n1XsPy3rXVxlqxVioEWdC+0+M+SQw0DpJynwtOPo1X+ZlvdzTLtDBIJJlDQTnwZIFJrZSzSGmIOUdP8tu+SgLw==
+
+idb@7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"
+  integrity sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==
+
 ignore@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.0.tgz#67418ae40d34d6999c95ff56016759c718c82f78"
@@ -3654,6 +4192,11 @@ is-finalizationregistry@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
 is-generator-function@^1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
@@ -3929,6 +4472,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+  integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -3939,6 +4487,11 @@ lodash@^4.17.15, lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+long@^5.0.0:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/long/-/long-5.2.4.tgz#ee651d5c7c25901cfca5e67220ae9911695e99b2"
+  integrity sha512-qtzLbJE8hq7VabR3mISmVGtoXP8KGc2Z/AT8OuqlYD7JTR3oqrgwdjnk07wpj1twXxYmgDXgoKVWUG/fReSzHg==
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -4497,6 +5050,24 @@ property-information@^6.0.0:
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.4.0.tgz#6bc4c618b0c2d68b3bb8b552cbb97f8e300a0f82"
   integrity sha512-9t5qARVofg2xQqKtytzt+lZ4d1Qvj8t5B8fEwXK6qOfgRLgH/b13QlgEyDh033NOS31nXeFbYv7CLUDG1CeifQ==
 
+protobufjs@^7.2.5:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.4.0.tgz#7efe324ce9b3b61c82aae5de810d287bc08a248a"
+  integrity sha512-mRUWCc3KUU4w1jU8sGxICXH/gNS94DvI1gxqDvBzhj1JpcsimQkYiOJfwsPUykUI5ZaspFbSgmBLER8IrQ3tqw==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.2"
+    "@protobufjs/base64" "^1.1.2"
+    "@protobufjs/codegen" "^2.0.4"
+    "@protobufjs/eventemitter" "^1.1.0"
+    "@protobufjs/fetch" "^1.1.0"
+    "@protobufjs/float" "^1.0.2"
+    "@protobufjs/inquire" "^1.1.0"
+    "@protobufjs/path" "^1.1.2"
+    "@protobufjs/pool" "^1.1.0"
+    "@protobufjs/utf8" "^1.1.0"
+    "@types/node" ">=13.7.0"
+    long "^5.0.0"
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -4806,6 +5377,11 @@ remark-rehype@^9.0.0:
     mdast-util-to-hast "^11.0.0"
     unified "^10.0.0"
 
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -4865,6 +5441,11 @@ safe-array-concat@^1.0.1:
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
+safe-buffer@>=5.1.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
 safe-regex-test@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
@@ -4982,6 +5563,15 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string.prototype.matchall@^4.0.8:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz#a1553eb532221d4180c51581d6072cd65d1ee100"
@@ -5024,6 +5614,13 @@ string.prototype.trimstart@^1.0.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -5227,6 +5824,11 @@ undici-types@~5.26.4:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
+undici-types@~6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.20.0.tgz#8171bf22c1f588d1554d55bf204bc624af388433"
+  integrity sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
@@ -5419,6 +6021,20 @@ web-vitals@^0.2.4:
   resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-0.2.4.tgz#ec3df43c834a207fd7cdefd732b2987896e08511"
   integrity sha512-6BjspCO9VriYy12z356nL6JBS0GYeEcA457YyRzD+dD6XYCQ75NKhcOHUMHentOE7OcVCIXXDvOm0jKFfQG2Gg==
 
+websocket-driver@>=0.5.1:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
+  integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
+  dependencies:
+    http-parser-js ">=0.5.1"
+    safe-buffer ">=5.1.0"
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
+  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
+
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
@@ -5474,11 +6090,25 @@ word-wrap@~1.2.3:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 xstate@^4.15.1:
   version "4.38.3"
   resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.38.3.tgz#4e15e7ad3aa0ca1eea2010548a5379966d8f1075"
   integrity sha512-SH7nAaaPQx57dx6qvfcIgqKRXIh4L0A1iYEqim4s1u7c9VoCgzZc+63FY90AKU4ZzOC2cfJzTnpO4zK7fCUzzw==
 
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
 yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
@@ -5494,6 +6124,24 @@ yaml@^1.10.0, yaml@^1.7.2:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yargs-parser@^21.1.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
+yargs@^17.7.2:
+  version "17.7.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
+  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.1.1"
+
 zustand@^4.3.3:
   version "4.4.7"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.4.7.tgz#355406be6b11ab335f59a66d2cf9815e8f24038c"

From 6d26d064d0986049a365ea3c2e86118d3625281e Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Tue, 28 Jan 2025 00:18:28 +0100
Subject: [PATCH 03/75] feat: Show user info in setting.

---
 .../Layout/SettingsLayout/SettingsLayout.tsx  | 15 +++++++++++
 .../Layout/SettingsLayout/settings.css        | 26 +++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/src/components/Layout/SettingsLayout/SettingsLayout.tsx b/src/components/Layout/SettingsLayout/SettingsLayout.tsx
index 32d951ee..b8d6bf1a 100644
--- a/src/components/Layout/SettingsLayout/SettingsLayout.tsx
+++ b/src/components/Layout/SettingsLayout/SettingsLayout.tsx
@@ -1,8 +1,22 @@
 import React from 'react'
 import 'react-contexify/dist/ReactContexify.css'
 import { NavLink, Outlet } from 'react-router-dom'
+import { auth } from '../../../features/auth/api/Config'
 import './settings.css'
 
+const UserInfo = () => {
+  const userInfo = auth.currentUser
+  return (
+    <div className="userCard">
+      {userInfo?.photoURL && <img src={userInfo.photoURL} className="userImage"></img>}
+      <div className="userInfos">
+        <div className="userName">{userInfo?.displayName}</div>
+        <div className="userEmail">{userInfo?.email}</div>
+      </div>
+    </div>
+  )
+}
+
 export const SettingsLayout = () => {
   const navigation = [
     {
@@ -28,6 +42,7 @@ export const SettingsLayout = () => {
   ]
   return (
     <div className="settings">
+      <UserInfo />
       <div className="horizontalTabsLayout">
         <nav className="navigation">
           {navigation.map((item) => {
diff --git a/src/components/Layout/SettingsLayout/settings.css b/src/components/Layout/SettingsLayout/settings.css
index 63f79bc3..512a513f 100644
--- a/src/components/Layout/SettingsLayout/settings.css
+++ b/src/components/Layout/SettingsLayout/settings.css
@@ -40,6 +40,32 @@
   border-right: 4px solid var(--horizontal-tabs-layout-active-color);
   font-weight: bold;
 }
+.userCard {
+  width: auto;
+  background-color: var(--placeholder-background-color);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+}
+.userImage {
+  width: 60px;
+  height: 60px;
+  border-radius: 20%;
+}
+.userInfos {
+  width: auto;
+  margin-left: 10px;
+}
+.userName {
+  font-size: larger;
+  font-weight: 600;
+}
+.userEmail {
+  font-size: medium;
+  margin-top: 6px;
+}
 
 @media only screen and (max-width: 768px) {
   .horizontalTabsLayout {

From 19a3dee59dfb11143261dab3da718016cb67289f Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Thu, 30 Jan 2025 18:12:56 +0100
Subject: [PATCH 04/75] feat: Fix imports.

---
 src/components/Layout/SettingsLayout/SettingsLayout.tsx | 2 +-
 src/features/auth/index.ts                              | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Layout/SettingsLayout/SettingsLayout.tsx b/src/components/Layout/SettingsLayout/SettingsLayout.tsx
index b8d6bf1a..079c9a21 100644
--- a/src/components/Layout/SettingsLayout/SettingsLayout.tsx
+++ b/src/components/Layout/SettingsLayout/SettingsLayout.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import 'react-contexify/dist/ReactContexify.css'
 import { NavLink, Outlet } from 'react-router-dom'
-import { auth } from '../../../features/auth/api/Config'
+import { auth } from 'src/features/auth'
 import './settings.css'
 
 const UserInfo = () => {
diff --git a/src/features/auth/index.ts b/src/features/auth/index.ts
index d1a4b0d2..8558cb56 100644
--- a/src/features/auth/index.ts
+++ b/src/features/auth/index.ts
@@ -1 +1,2 @@
+export * from './api/Config'
 export * from './components/AuthModal'

From b612a4603686a5ed7553290a29381c7341d90254 Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Thu, 30 Jan 2025 19:20:58 +0100
Subject: [PATCH 05/75] feat: Add github auth

---
 src/features/auth/api/Config.ts            |  7 +++---
 src/features/auth/components/AuthModal.tsx | 25 +++++++++++++++++-----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/features/auth/api/Config.ts b/src/features/auth/api/Config.ts
index 960a7a7b..20d99e0c 100644
--- a/src/features/auth/api/Config.ts
+++ b/src/features/auth/api/Config.ts
@@ -1,5 +1,5 @@
 import { initializeApp } from 'firebase/app'
-import { getAuth, GoogleAuthProvider } from 'firebase/auth'
+import { getAuth, GithubAuthProvider, GoogleAuthProvider } from 'firebase/auth'
 
 // TODO This is a temporary firebase project config, to be changed later.
 const firebaseConfig = {
@@ -15,6 +15,7 @@ const firebaseConfig = {
 // Initialize Firebase
 const app = initializeApp(firebaseConfig)
 const auth = getAuth(app)
-const provider = new GoogleAuthProvider()
+const googleProvider = new GoogleAuthProvider()
+const githubProvider = new GithubAuthProvider()
 
-export { auth, provider }
+export { auth, githubProvider, googleProvider }
diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index 4ae0179f..2b772db7 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -1,8 +1,8 @@
-import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth'
+import { GithubAuthProvider, GoogleAuthProvider, signInWithPopup } from 'firebase/auth'
 import { FaGithub, FaGoogle } from 'react-icons/fa'
 import ReactModal from 'react-modal'
 import toast from 'react-simple-toasts'
-import { auth, provider } from '../api/Config'
+import { auth, githubProvider, googleProvider } from '../api/Config'
 
 type AuthModalProps = {
   showAuth: boolean
@@ -11,7 +11,7 @@ type AuthModalProps = {
 
 export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
   const signInWithGoogle = () => {
-    signInWithPopup(auth, provider)
+    signInWithPopup(auth, googleProvider)
       .then((result) => {
         const credential = GoogleAuthProvider.credentialFromResult(result)
         // TODO save this token in user settings maybe!
@@ -24,6 +24,22 @@ export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
         toast("We couldn't login to you Google account!!", { theme: 'failure' })
       })
   }
+
+  const signInWithGithub = () => {
+    signInWithPopup(auth, githubProvider)
+      .then((result) => {
+        const credential = GithubAuthProvider.credentialFromResult(result)
+        // TODO save this token in user settings maybe!
+        const token = credential.accessToken
+        // The signed-in user info.
+        const user = result.user
+        console.log(user)
+      })
+      .catch((error) => {
+        toast("We couldn't login to you Github account!!", { theme: 'failure' })
+      })
+  }
+
   return (
     <ReactModal
       isOpen={showAuth}
@@ -50,12 +66,11 @@ export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
           </p>
         </div>
         <div>
-          <button type="button" className="extraTextWithIconBtn">
+          <button className="extraTextWithIconBtn" onClick={signInWithGithub}>
             <FaGithub />
             Sign in with Github
           </button>
           <button
-            type="button"
             className="extraTextWithIconBtn"
             style={{ marginLeft: 10 }}
             onClick={signInWithGoogle}>

From 49f5683b0d6e1c0ad4c34b324abe3b7cb2192e29 Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Thu, 30 Jan 2025 19:21:45 +0100
Subject: [PATCH 06/75] feat: Add logout and observe current user.

---
 .../Layout/SettingsLayout/SettingsLayout.tsx  | 33 ++++++++++++++++---
 .../Layout/SettingsLayout/settings.css        | 12 +++++++
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/components/Layout/SettingsLayout/SettingsLayout.tsx b/src/components/Layout/SettingsLayout/SettingsLayout.tsx
index 079c9a21..43345786 100644
--- a/src/components/Layout/SettingsLayout/SettingsLayout.tsx
+++ b/src/components/Layout/SettingsLayout/SettingsLayout.tsx
@@ -1,11 +1,26 @@
-import React from 'react'
+import { User } from 'firebase/auth'
+import React, { useEffect, useState } from 'react'
 import 'react-contexify/dist/ReactContexify.css'
 import { NavLink, Outlet } from 'react-router-dom'
+import toast from 'react-simple-toasts'
 import { auth } from 'src/features/auth'
 import './settings.css'
 
-const UserInfo = () => {
-  const userInfo = auth.currentUser
+interface UserInfoProps {
+  userInfo: User // Define the type of userInfo
+}
+
+const UserInfo = ({ userInfo }: UserInfoProps) => {
+  const logout = () => {
+    auth
+      .signOut()
+      .then((result) => {
+        toast('Account logged out successfuly', { theme: 'defaultToast' })
+      })
+      .catch((error) => {
+        toast('Failed to logged out, please try later !!', { theme: 'failure' })
+      })
+  }
   return (
     <div className="userCard">
       {userInfo?.photoURL && <img src={userInfo.photoURL} className="userImage"></img>}
@@ -13,11 +28,21 @@ const UserInfo = () => {
         <div className="userName">{userInfo?.displayName}</div>
         <div className="userEmail">{userInfo?.email}</div>
       </div>
+      <button className="logoutBtn" onClick={logout}>
+        Logout
+      </button>
     </div>
   )
 }
 
 export const SettingsLayout = () => {
+  const [user, setUser] = useState<User | null>(null)
+  useEffect(() => {
+    const unsubscribe = auth.onAuthStateChanged((user) => {
+      setUser(user)
+    })
+    return () => unsubscribe()
+  })
   const navigation = [
     {
       name: 'Topics',
@@ -42,7 +67,7 @@ export const SettingsLayout = () => {
   ]
   return (
     <div className="settings">
-      <UserInfo />
+      {user != null && <UserInfo userInfo={user} />}
       <div className="horizontalTabsLayout">
         <nav className="navigation">
           {navigation.map((item) => {
diff --git a/src/components/Layout/SettingsLayout/settings.css b/src/components/Layout/SettingsLayout/settings.css
index 512a513f..9f66638f 100644
--- a/src/components/Layout/SettingsLayout/settings.css
+++ b/src/components/Layout/SettingsLayout/settings.css
@@ -66,6 +66,18 @@
   font-size: medium;
   margin-top: 6px;
 }
+.logoutBtn {
+  font-size: medium;
+  padding: 8px 20px;
+  background-color: #e57373;
+  color: var(--button-text-color);
+  border: 0;
+  border-radius: 20px;
+  font-weight: bold;
+  font-size: 16px;
+  text-align: center;
+  margin-left: auto;
+}
 
 @media only screen and (max-width: 768px) {
   .horizontalTabsLayout {

From 7c1515292ed3b2296cbb03762681c1c1485b3220 Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Sun, 9 Feb 2025 19:24:05 +0100
Subject: [PATCH 07/75] feat: Moved firebase config variable to .env file.

---
 src/features/auth/api/Config.ts | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/features/auth/api/Config.ts b/src/features/auth/api/Config.ts
index 20d99e0c..9390fcef 100644
--- a/src/features/auth/api/Config.ts
+++ b/src/features/auth/api/Config.ts
@@ -1,15 +1,14 @@
 import { initializeApp } from 'firebase/app'
 import { getAuth, GithubAuthProvider, GoogleAuthProvider } from 'firebase/auth'
 
-// TODO This is a temporary firebase project config, to be changed later.
 const firebaseConfig = {
-  apiKey: 'AIzaSyCpD2SbQnCCDjmAPasQ8q5jPcxf5lQLwYI',
-  authDomain: 'hackertab-418813.firebaseapp.com',
-  projectId: 'hackertab-418813',
-  storageBucket: 'hackertab-418813.firebasestorage.app',
-  messagingSenderId: '249160525821',
-  appId: '1:249160525821:web:e729de3eadc14d2242db94',
-  measurementId: 'G-NTMXFLMF00',
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY || '',
+  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN || '',
+  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID || '',
+  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET || '',
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID || '',
+  appId: import.meta.env.VITE_FIREBASE_APP_ID || '',
+  measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID || '',
 }
 
 // Initialize Firebase

From da9cf879953f30b17768e7e39449430c34e3a74c Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Mon, 10 Feb 2025 19:12:35 +0100
Subject: [PATCH 08/75] feat: Create CurrentUser type.

---
 .../Layout/SettingsLayout/SettingsLayout.tsx  | 21 +++++++++++++------
 src/types/index.ts                            |  6 ++++++
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/Layout/SettingsLayout/SettingsLayout.tsx b/src/components/Layout/SettingsLayout/SettingsLayout.tsx
index 43345786..dcb3c954 100644
--- a/src/components/Layout/SettingsLayout/SettingsLayout.tsx
+++ b/src/components/Layout/SettingsLayout/SettingsLayout.tsx
@@ -1,13 +1,13 @@
-import { User } from 'firebase/auth'
 import React, { useEffect, useState } from 'react'
 import 'react-contexify/dist/ReactContexify.css'
 import { NavLink, Outlet } from 'react-router-dom'
 import toast from 'react-simple-toasts'
 import { auth } from 'src/features/auth'
+import { CurrentUser } from 'src/types'
 import './settings.css'
 
 interface UserInfoProps {
-  userInfo: User // Define the type of userInfo
+  userInfo: CurrentUser
 }
 
 const UserInfo = ({ userInfo }: UserInfoProps) => {
@@ -23,9 +23,9 @@ const UserInfo = ({ userInfo }: UserInfoProps) => {
   }
   return (
     <div className="userCard">
-      {userInfo?.photoURL && <img src={userInfo.photoURL} className="userImage"></img>}
+      {userInfo?.imageURL && <img src={userInfo.imageURL} className="userImage"></img>}
       <div className="userInfos">
-        <div className="userName">{userInfo?.displayName}</div>
+        <div className="userName">{userInfo?.name}</div>
         <div className="userEmail">{userInfo?.email}</div>
       </div>
       <button className="logoutBtn" onClick={logout}>
@@ -36,10 +36,19 @@ const UserInfo = ({ userInfo }: UserInfoProps) => {
 }
 
 export const SettingsLayout = () => {
-  const [user, setUser] = useState<User | null>(null)
+  const [user, setUser] = useState<CurrentUser | null>(null)
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((user) => {
-      setUser(user)
+      if (user) {
+        const currentUser = {
+          name: user?.displayName || '',
+          email: user?.email || '',
+          imageUrl: user?.photoURL || '',
+        }
+        setUser(currentUser)
+      } else {
+        setUser(null)
+      }
     })
     return () => unsubscribe()
   })
diff --git a/src/types/index.ts b/src/types/index.ts
index 7ac14c23..0db5d394 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -123,3 +123,9 @@ export type DNDDuration =
     }
   | 'always'
   | 'never'
+
+export type CurrentUser = {
+  name: string
+  email: string
+  imageURL?: string
+}

From 885dc3d7db04523d27746d80204f51f5e58335e8 Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Mon, 10 Feb 2025 21:10:41 +0100
Subject: [PATCH 09/75] feat: Create useAuth hook.

---
 .../Layout/SettingsLayout/SettingsLayout.tsx  | 48 +++++-------------
 src/features/auth/components/AuthModal.tsx    | 50 +++++++++----------
 src/features/auth/index.ts                    |  1 +
 src/features/auth/types/index.ts              |  5 ++
 src/stores/user.ts                            | 33 ++++++++++++
 src/types/index.ts                            |  6 ---
 6 files changed, 75 insertions(+), 68 deletions(-)
 create mode 100644 src/features/auth/types/index.ts
 create mode 100644 src/stores/user.ts

diff --git a/src/components/Layout/SettingsLayout/SettingsLayout.tsx b/src/components/Layout/SettingsLayout/SettingsLayout.tsx
index dcb3c954..4d19290b 100644
--- a/src/components/Layout/SettingsLayout/SettingsLayout.tsx
+++ b/src/components/Layout/SettingsLayout/SettingsLayout.tsx
@@ -1,32 +1,23 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import 'react-contexify/dist/ReactContexify.css'
 import { NavLink, Outlet } from 'react-router-dom'
-import toast from 'react-simple-toasts'
-import { auth } from 'src/features/auth'
-import { CurrentUser } from 'src/types'
+import { User } from 'src/features/auth/types'
+import { useAuth } from 'src/stores/user'
 import './settings.css'
 
 interface UserInfoProps {
-  userInfo: CurrentUser
+  user: User
 }
 
-const UserInfo = ({ userInfo }: UserInfoProps) => {
-  const logout = () => {
-    auth
-      .signOut()
-      .then((result) => {
-        toast('Account logged out successfuly', { theme: 'defaultToast' })
-      })
-      .catch((error) => {
-        toast('Failed to logged out, please try later !!', { theme: 'failure' })
-      })
-  }
+const UserInfo = ({ user }: UserInfoProps) => {
+  const { logout } = useAuth()
+
   return (
     <div className="userCard">
-      {userInfo?.imageURL && <img src={userInfo.imageURL} className="userImage"></img>}
+      {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
       <div className="userInfos">
-        <div className="userName">{userInfo?.name}</div>
-        <div className="userEmail">{userInfo?.email}</div>
+        <div className="userName">{user.name}</div>
+        <div className="userEmail">{user?.email}</div>
       </div>
       <button className="logoutBtn" onClick={logout}>
         Logout
@@ -36,22 +27,7 @@ const UserInfo = ({ userInfo }: UserInfoProps) => {
 }
 
 export const SettingsLayout = () => {
-  const [user, setUser] = useState<CurrentUser | null>(null)
-  useEffect(() => {
-    const unsubscribe = auth.onAuthStateChanged((user) => {
-      if (user) {
-        const currentUser = {
-          name: user?.displayName || '',
-          email: user?.email || '',
-          imageUrl: user?.photoURL || '',
-        }
-        setUser(currentUser)
-      } else {
-        setUser(null)
-      }
-    })
-    return () => unsubscribe()
-  })
+  const { user } = useAuth()
   const navigation = [
     {
       name: 'Topics',
@@ -76,7 +52,7 @@ export const SettingsLayout = () => {
   ]
   return (
     <div className="settings">
-      {user != null && <UserInfo userInfo={user} />}
+      {user != null && <UserInfo user={user} />}
       <div className="horizontalTabsLayout">
         <nav className="navigation">
           {navigation.map((item) => {
diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index 2b772db7..6fe1b236 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -1,7 +1,8 @@
-import { GithubAuthProvider, GoogleAuthProvider, signInWithPopup } from 'firebase/auth'
+import { AuthProvider, OAuthProvider, signInWithPopup } from 'firebase/auth'
 import { FaGithub, FaGoogle } from 'react-icons/fa'
 import ReactModal from 'react-modal'
 import toast from 'react-simple-toasts'
+import { useAuth } from 'src/stores/user'
 import { auth, githubProvider, googleProvider } from '../api/Config'
 
 type AuthModalProps = {
@@ -10,33 +11,30 @@ type AuthModalProps = {
 }
 
 export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
-  const signInWithGoogle = () => {
-    signInWithPopup(auth, googleProvider)
-      .then((result) => {
-        const credential = GoogleAuthProvider.credentialFromResult(result)
-        // TODO save this token in user settings maybe!
-        const token = credential.accessToken
-        // The signed-in user info.
-        const user = result.user
-        console.log(user)
-      })
-      .catch((error) => {
-        toast("We couldn't login to you Google account!!", { theme: 'failure' })
-      })
-  }
+  const { initState } = useAuth()
 
-  const signInWithGithub = () => {
-    signInWithPopup(auth, githubProvider)
+  const signIn = (provider: AuthProvider, providerName: string) => {
+    signInWithPopup(auth, provider)
       .then((result) => {
-        const credential = GithubAuthProvider.credentialFromResult(result)
-        // TODO save this token in user settings maybe!
-        const token = credential.accessToken
-        // The signed-in user info.
-        const user = result.user
-        console.log(user)
+        const credential = OAuthProvider.credentialFromResult(result)
+        const accessToken = credential?.accessToken
+        const email = result.user.displayName
+        const name = result.user.displayName
+        const imageURL = result.user.photoURL
+        if (accessToken && name && email && imageURL) {
+          initState({
+            accessToken: accessToken,
+            user: {
+              name: name,
+              email: email,
+              imageURL: imageURL,
+            },
+          })
+        }
       })
       .catch((error) => {
-        toast("We couldn't login to you Github account!!", { theme: 'failure' })
+        console.log(error)
+        toast(`We couldn't login to your ${providerName} account!!`, { theme: 'failure' })
       })
   }
 
@@ -66,14 +64,14 @@ export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
           </p>
         </div>
         <div>
-          <button className="extraTextWithIconBtn" onClick={signInWithGithub}>
+          <button className="extraTextWithIconBtn" onClick={() => signIn(githubProvider, 'Github')}>
             <FaGithub />
             Sign in with Github
           </button>
           <button
             className="extraTextWithIconBtn"
             style={{ marginLeft: 10 }}
-            onClick={signInWithGoogle}>
+            onClick={() => signIn(googleProvider, 'Google')}>
             <FaGoogle />
             Sign in with Google
           </button>
diff --git a/src/features/auth/index.ts b/src/features/auth/index.ts
index 8558cb56..986f1fdc 100644
--- a/src/features/auth/index.ts
+++ b/src/features/auth/index.ts
@@ -1,2 +1,3 @@
 export * from './api/Config'
 export * from './components/AuthModal'
+export * from './types'
diff --git a/src/features/auth/types/index.ts b/src/features/auth/types/index.ts
new file mode 100644
index 00000000..e562e593
--- /dev/null
+++ b/src/features/auth/types/index.ts
@@ -0,0 +1,5 @@
+export type User = {
+  name: string
+  email: string
+  imageURL?: string
+}
diff --git a/src/stores/user.ts b/src/stores/user.ts
new file mode 100644
index 00000000..6b25d3d4
--- /dev/null
+++ b/src/stores/user.ts
@@ -0,0 +1,33 @@
+import { User } from 'src/features/auth/types'
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+type AuthState = {
+  accessToken: string | null
+  user: User | null
+}
+
+type AuthActions = {
+  initState: (state: AuthState) => void
+  isLogged: () => boolean
+  logout: () => void
+}
+
+export const useAuth = create(
+  persist<AuthState & AuthActions>(
+    (set, get) => ({
+      accessToken: null,
+      user: null,
+      initState: (newState: AuthState) =>
+        set({
+          accessToken: newState.accessToken,
+          user: newState.user,
+        }),
+      isLogged: () => !!get().user,
+      logout: () => set({ user: null }),
+    }),
+    {
+      name: 'auth-storage', // key in localStorage
+    }
+  )
+)
diff --git a/src/types/index.ts b/src/types/index.ts
index 0db5d394..7ac14c23 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -123,9 +123,3 @@ export type DNDDuration =
     }
   | 'always'
   | 'never'
-
-export type CurrentUser = {
-  name: string
-  email: string
-  imageURL?: string
-}

From 7a7a22e8cce33c680d87f4f2a1f804c30bfd8312 Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Mon, 10 Feb 2025 22:28:33 +0100
Subject: [PATCH 10/75] feat: Add profile button to header and create profile
 page.

---
 src/App.tsx                                   |   4 -
 src/assets/App.css                            |  12 +-
 src/components/Layout/Header.tsx              |  27 ++++
 .../Layout/SettingsLayout/SettingsLayout.tsx  |  29 +----
 .../Layout/SettingsLayout/settings.css        |  38 ------
 .../BookmarkSettings/BookmarkSettings.tsx     |   3 +-
 .../BookmarkSettings/bookmarkSettings.css     |  49 +++++++
 .../settings/components/ProfileSettings.tsx   | 120 ++++++++++++++++++
 src/features/settings/index.ts                |   1 +
 src/routes/AppRoutes.tsx                      |   2 +
 src/stores/user.ts                            |   4 +-
 11 files changed, 213 insertions(+), 76 deletions(-)
 create mode 100644 src/features/settings/components/ProfileSettings.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1ff04131..788dd432 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,6 @@ import { DNDLayout } from 'src/components/Layout'
 import { setupAnalytics, setupIdentification, trackPageView } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { AppContentLayout } from './components/Layout'
-import { AuthModal } from './features/auth'
 import { isWebOrExtensionVersion } from './utils/Environment'
 import { lazyImport } from './utils/lazyImport'
 const { OnboardingModal } = lazyImport(() => import('src/features/onboarding'), 'OnboardingModal')
@@ -20,7 +19,6 @@ const intersectionCallback = (entries: IntersectionObserverEntry[]) => {
 
 export const App = () => {
   const [showOnboarding, setShowOnboarding] = useState(true)
-  const [showAuth, setshowAuth] = useState(true)
   const { onboardingCompleted, maxVisibleCards, isDNDModeActive, DNDDuration, setDNDDuration } =
     useUserPreferences()
 
@@ -64,8 +62,6 @@ export const App = () => {
         <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
       )}
 
-      {<AuthModal showAuth={showAuth} setShowAuth={setshowAuth} />}
-
       <div className="layoutLayers hideScrollBar">
         {isDNDModeActive() && <DNDLayout />}
         <AppContentLayout />
diff --git a/src/assets/App.css b/src/assets/App.css
index a35166ef..0a598a91 100644
--- a/src/assets/App.css
+++ b/src/assets/App.css
@@ -122,7 +122,7 @@ a {
 }
 
 .extras {
-  display: none;
+  display: flex;
   flex-direction: row;
   align-content: center;
   order: 2;
@@ -180,6 +180,12 @@ a {
   gap: 6px;
 }
 
+.profileImage {
+  height: 40px;
+  width: 40px;
+  border-radius: 20px;
+}
+
 .badgeCount {
   width: 20px;
   height: 20px;
@@ -1216,10 +1222,6 @@ Producthunt item
     position: relative;
   }
 
-  .extras {
-    display: block;
-  }
-
   .scrollButton {
     align-items: center;
     display: flex;
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index 749928b7..2da69c19 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { BsFillBookmarksFill, BsFillGearFill, BsMoonFill } from 'react-icons/bs'
 import { CgTab } from 'react-icons/cg'
+import { FaUserLarge } from 'react-icons/fa6'
 import { IoMdSunny } from 'react-icons/io'
 import { MdDoDisturbOff } from 'react-icons/md'
 import { RxArrowLeft } from 'react-icons/rx'
@@ -8,12 +9,22 @@ import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg'
 import { SearchBar } from 'src/components/Elements/SearchBar'
 import { UserTags } from 'src/components/Elements/UserTags'
+import { AuthModal } from 'src/features/auth'
 import { Changelog } from 'src/features/changelog'
 import { identifyUserTheme, trackDNDDisable, trackThemeSelect } from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
 import { useUserPreferences } from 'src/stores/preferences'
+import { useAuth } from 'src/stores/user'
 
 export const Header = () => {
+  const { user } = useAuth()
+  const [showAuth, setshowAuth] = useState(false)
+  useEffect(() => {
+    if (user != null) {
+      setshowAuth(false)
+    }
+  })
+
   const [themeIcon, setThemeIcon] = useState(<BsMoonFill />)
   const { theme, setTheme, setDNDDuration, isDNDModeActive } = useUserPreferences()
   const { userBookmarks } = useBookmarks()
@@ -63,6 +74,8 @@ export const Header = () => {
 
   return (
     <>
+      {<AuthModal showAuth={showAuth} setShowAuth={setshowAuth} />}
+
       <header className="AppHeader">
         <span className="AppName">
           <i className="logo">
@@ -96,6 +109,20 @@ export const Header = () => {
               <BookmarksBadgeCount />
             </>
           </Link>
+          {user != null ? (
+            <Link to="/settings/profile" className="extraBtn" aria-label="Open profile">
+              <img className="profileImage" src={user.imageURL} />
+            </Link>
+          ) : (
+            <button
+              aria-label="open login"
+              className="extraBtn"
+              onClick={() => {
+                setshowAuth(true)
+              }}>
+              <FaUserLarge />
+            </button>
+          )}
         </div>
         {location.pathname === '/' ? (
           <UserTags />
diff --git a/src/components/Layout/SettingsLayout/SettingsLayout.tsx b/src/components/Layout/SettingsLayout/SettingsLayout.tsx
index 4d19290b..0192e470 100644
--- a/src/components/Layout/SettingsLayout/SettingsLayout.tsx
+++ b/src/components/Layout/SettingsLayout/SettingsLayout.tsx
@@ -1,34 +1,14 @@
 import React from 'react'
 import 'react-contexify/dist/ReactContexify.css'
 import { NavLink, Outlet } from 'react-router-dom'
-import { User } from 'src/features/auth/types'
-import { useAuth } from 'src/stores/user'
 import './settings.css'
 
-interface UserInfoProps {
-  user: User
-}
-
-const UserInfo = ({ user }: UserInfoProps) => {
-  const { logout } = useAuth()
-
-  return (
-    <div className="userCard">
-      {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
-      <div className="userInfos">
-        <div className="userName">{user.name}</div>
-        <div className="userEmail">{user?.email}</div>
-      </div>
-      <button className="logoutBtn" onClick={logout}>
-        Logout
-      </button>
-    </div>
-  )
-}
-
 export const SettingsLayout = () => {
-  const { user } = useAuth()
   const navigation = [
+    {
+      name: 'Profile',
+      path: '/settings/profile',
+    },
     {
       name: 'Topics',
       path: '/settings/topics',
@@ -52,7 +32,6 @@ export const SettingsLayout = () => {
   ]
   return (
     <div className="settings">
-      {user != null && <UserInfo user={user} />}
       <div className="horizontalTabsLayout">
         <nav className="navigation">
           {navigation.map((item) => {
diff --git a/src/components/Layout/SettingsLayout/settings.css b/src/components/Layout/SettingsLayout/settings.css
index 9f66638f..63f79bc3 100644
--- a/src/components/Layout/SettingsLayout/settings.css
+++ b/src/components/Layout/SettingsLayout/settings.css
@@ -40,44 +40,6 @@
   border-right: 4px solid var(--horizontal-tabs-layout-active-color);
   font-weight: bold;
 }
-.userCard {
-  width: auto;
-  background-color: var(--placeholder-background-color);
-  padding: 10px;
-  margin: 10px;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-}
-.userImage {
-  width: 60px;
-  height: 60px;
-  border-radius: 20%;
-}
-.userInfos {
-  width: auto;
-  margin-left: 10px;
-}
-.userName {
-  font-size: larger;
-  font-weight: 600;
-}
-.userEmail {
-  font-size: medium;
-  margin-top: 6px;
-}
-.logoutBtn {
-  font-size: medium;
-  padding: 8px 20px;
-  background-color: #e57373;
-  color: var(--button-text-color);
-  border: 0;
-  border-radius: 20px;
-  font-weight: bold;
-  font-size: 16px;
-  text-align: center;
-  margin-left: auto;
-}
 
 @media only screen and (max-width: 768px) {
   .horizontalTabsLayout {
diff --git a/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx b/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx
index 3683e9ed..1bf252dc 100644
--- a/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx
+++ b/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx
@@ -15,7 +15,8 @@ type BookmarkItemProps = {
   item: BookmarkedPost
   appendRef?: boolean
 }
-const BookmarkItem = ({ item, appendRef = false }: BookmarkItemProps) => {
+
+export const BookmarkItem = ({ item, appendRef = false }: BookmarkItemProps) => {
   const { unbookmarkPost } = useBookmarks()
   const { userCustomCards } = useUserPreferences()
 
diff --git a/src/features/settings/components/BookmarkSettings/bookmarkSettings.css b/src/features/settings/components/BookmarkSettings/bookmarkSettings.css
index 889f7920..9c8d536b 100644
--- a/src/features/settings/components/BookmarkSettings/bookmarkSettings.css
+++ b/src/features/settings/components/BookmarkSettings/bookmarkSettings.css
@@ -81,3 +81,52 @@
 .btn:hover {
   filter: brightness(85%);
 }
+
+.container {
+  width: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.userCard {
+  width: auto;
+  background-color: var(--placeholder-background-color);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+}
+.userImage {
+  width: 60px;
+  height: 60px;
+  border-radius: 20%;
+}
+.userInfos {
+  width: auto;
+  margin-left: 10px;
+}
+.userName {
+  font-size: larger;
+  font-weight: 600;
+}
+.userEmail {
+  font-size: medium;
+  margin-top: 6px;
+}
+.actions {
+  margin-left: auto;
+}
+.logoutBtn {
+  font-size: medium;
+  padding: 8px 20px;
+  background-color: #e57373;
+  color: var(--button-text-color);
+  border: 0;
+  border-radius: 20px;
+  font-weight: bold;
+  font-size: 16px;
+  text-align: center;
+  margin-left: 8px;
+}
diff --git a/src/features/settings/components/ProfileSettings.tsx b/src/features/settings/components/ProfileSettings.tsx
new file mode 100644
index 00000000..10b334d7
--- /dev/null
+++ b/src/features/settings/components/ProfileSettings.tsx
@@ -0,0 +1,120 @@
+import { useRef } from 'react'
+import { RiFileDownloadFill, RiFileUploadFill } from 'react-icons/ri'
+import toast from 'react-simple-toasts'
+import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout'
+import { User } from 'src/features/auth'
+import { BookmarkedPost } from 'src/features/bookmarks'
+import { useBookmarks } from 'src/stores/bookmarks'
+import { useAuth } from 'src/stores/user'
+import { BookmarkItem } from './BookmarkSettings'
+import './bookmarkSettings/bookmarkSettings.css'
+
+interface UserInfoProps {
+  user: User
+}
+
+const UserInfo = ({ user }: UserInfoProps) => {
+  const { logout } = useAuth()
+
+  return (
+    <div className="userCard">
+      {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
+      <div className="userInfos">
+        <div className="userName">{user.name}</div>
+        <div className="userEmail">{user?.email}</div>
+      </div>
+      <div className="actions">
+        <button className="logoutBtn" onClick={logout}>
+          Logout
+        </button>
+        <button className="logoutBtn" onClick={() => {}}>
+          Delete account
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export const ProfileSettings = () => {
+  const { user } = useAuth()
+
+  const inputFile = useRef<HTMLInputElement | null>(null)
+  const { initState, userBookmarks } = useBookmarks()
+
+  const importBookmarks = () => {
+    inputFile.current?.click()
+  }
+
+  const exportBookmarks = () => {
+    const blob = new Blob([JSON.stringify(userBookmarks, null, 2)], {
+      type: 'application/json',
+    })
+    const downloadURL = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = downloadURL
+    link.download = 'hackertabBookmarks'
+    link.click()
+  }
+
+  const handleFileChange = (event: any) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onload = () => {
+        const importData: BookmarkedPost[] = JSON.parse(reader.result as string)
+        const validatedData = importData
+          .filter(
+            (data: BookmarkedPost) =>
+              data.title &&
+              data.url &&
+              !userBookmarks.some((bm) => bm.title === data.title && bm.url === data.url)
+          )
+          .map((data) => ({
+            title: data.title,
+            url: data.url,
+            source: data.source || '',
+            sourceType: data.sourceType || '',
+          }))
+        initState({
+          userBookmarks: [...userBookmarks, ...validatedData],
+        })
+        toast('Your bookmarks have been successfully imported', { theme: 'defaultToast' })
+      }
+      reader.readAsText(file)
+    }
+  }
+
+  return (
+    <div className="container">
+      {user != null && <UserInfo user={user} />}
+      <SettingsContentLayout
+        title="Bookmarks"
+        description="Find all your bookmarks here. You can remove a bookmark by clicking on the remove icon."
+        actions={
+          <>
+            <input
+              type="file"
+              id="file"
+              ref={inputFile}
+              accept="application/json"
+              className="hidden"
+              onChange={handleFileChange}
+            />
+            <button className="extraBtn extraTextBtn" onClick={() => importBookmarks()}>
+              <RiFileUploadFill />
+              &nbsp;Import
+            </button>
+            <button className="extraBtn" onClick={() => exportBookmarks()}>
+              <RiFileDownloadFill />
+            </button>
+          </>
+        }>
+        <div className="bookmarks">
+          {userBookmarks.map((bm) => (
+            <BookmarkItem item={bm} key={bm.url} />
+          ))}
+        </div>
+      </SettingsContentLayout>
+    </div>
+  )
+}
diff --git a/src/features/settings/index.ts b/src/features/settings/index.ts
index 0e607d08..40479730 100644
--- a/src/features/settings/index.ts
+++ b/src/features/settings/index.ts
@@ -1,5 +1,6 @@
 export * from './components/BookmarkSettings'
 export * from './components/GeneralSettings'
+export * from './components/ProfileSettings'
 export * from './components/SearchEngineSettings'
 export * from './components/SourceSettings'
 export * from './components/TopicSettings'
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index eb96e47d..1f035de0 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -12,6 +12,7 @@ const { SearchEngineSettings } = lazyImport(
 )
 const { BookmarkSettings } = lazyImport(() => import('src/features/settings'), 'BookmarkSettings')
 const { TopicSettings } = lazyImport(() => import('src/features/settings'), 'TopicSettings')
+const { ProfileSettings } = lazyImport(() => import('src/features/settings'), 'ProfileSettings')
 
 export const AppRoutes = () => {
   return (
@@ -19,6 +20,7 @@ export const AppRoutes = () => {
       <Routes>
         <Route element={<AppLayout />}>
           <Route path="/settings" element={<SettingsLayout />}>
+            <Route path="profile" element={<ProfileSettings />} />
             <Route path="bookmarks" element={<BookmarkSettings />} />
             <Route path="topics" element={<TopicSettings />} />
             <Route path="sources" element={<SourceSettings />} />
diff --git a/src/stores/user.ts b/src/stores/user.ts
index 6b25d3d4..fa7843d5 100644
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -9,13 +9,12 @@ type AuthState = {
 
 type AuthActions = {
   initState: (state: AuthState) => void
-  isLogged: () => boolean
   logout: () => void
 }
 
 export const useAuth = create(
   persist<AuthState & AuthActions>(
-    (set, get) => ({
+    (set) => ({
       accessToken: null,
       user: null,
       initState: (newState: AuthState) =>
@@ -23,7 +22,6 @@ export const useAuth = create(
           accessToken: newState.accessToken,
           user: newState.user,
         }),
-      isLogged: () => !!get().user,
       logout: () => set({ user: null }),
     }),
     {

From c7b0baed035e30dbc92b938c5fe4553b03337e58 Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Tue, 11 Feb 2025 09:11:09 +0100
Subject: [PATCH 11/75] feat: Separate useAuth and AuthStore.

---
 src/components/Layout/Header.tsx              |  3 +-
 src/features/auth/components/AuthModal.tsx    |  2 +-
 src/features/auth/hooks/useAuth.ts            | 14 ++++++
 src/features/auth/index.ts                    |  2 +
 .../auth/stores/authStore.ts}                 |  6 +--
 .../settings/components/ProfileSettings.tsx   |  3 +-
 src/stores/bookmarks.ts                       | 45 ++++++++++++-------
 7 files changed, 51 insertions(+), 24 deletions(-)
 create mode 100644 src/features/auth/hooks/useAuth.ts
 rename src/{stores/user.ts => features/auth/stores/authStore.ts} (86%)

diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index 2da69c19..a8f38947 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -9,12 +9,11 @@ import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg'
 import { SearchBar } from 'src/components/Elements/SearchBar'
 import { UserTags } from 'src/components/Elements/UserTags'
-import { AuthModal } from 'src/features/auth'
+import { AuthModal, useAuth } from 'src/features/auth'
 import { Changelog } from 'src/features/changelog'
 import { identifyUserTheme, trackDNDDisable, trackThemeSelect } from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
 import { useUserPreferences } from 'src/stores/preferences'
-import { useAuth } from 'src/stores/user'
 
 export const Header = () => {
   const { user } = useAuth()
diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index 6fe1b236..1239b377 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -2,7 +2,7 @@ import { AuthProvider, OAuthProvider, signInWithPopup } from 'firebase/auth'
 import { FaGithub, FaGoogle } from 'react-icons/fa'
 import ReactModal from 'react-modal'
 import toast from 'react-simple-toasts'
-import { useAuth } from 'src/stores/user'
+import { useAuth } from 'src/features/auth'
 import { auth, githubProvider, googleProvider } from '../api/Config'
 
 type AuthModalProps = {
diff --git a/src/features/auth/hooks/useAuth.ts b/src/features/auth/hooks/useAuth.ts
new file mode 100644
index 00000000..0b932e8c
--- /dev/null
+++ b/src/features/auth/hooks/useAuth.ts
@@ -0,0 +1,14 @@
+import { AuthStore } from 'src/features/auth'
+import { useBookmarks } from 'src/stores/bookmarks'
+
+export const useAuth = () => {
+  const authStore = AuthStore()
+  const bookmarksStore = useBookmarks()
+  const { initState, accessToken, user } = authStore
+  const logout = () => {
+    bookmarksStore.clear()
+    authStore.clear()
+  }
+
+  return { initState, logout, accessToken, user }
+}
diff --git a/src/features/auth/index.ts b/src/features/auth/index.ts
index 986f1fdc..ceb73d70 100644
--- a/src/features/auth/index.ts
+++ b/src/features/auth/index.ts
@@ -1,3 +1,5 @@
 export * from './api/Config'
 export * from './components/AuthModal'
+export * from './hooks/useAuth'
+export * from './stores/authStore'
 export * from './types'
diff --git a/src/stores/user.ts b/src/features/auth/stores/authStore.ts
similarity index 86%
rename from src/stores/user.ts
rename to src/features/auth/stores/authStore.ts
index fa7843d5..c5109306 100644
--- a/src/stores/user.ts
+++ b/src/features/auth/stores/authStore.ts
@@ -9,10 +9,10 @@ type AuthState = {
 
 type AuthActions = {
   initState: (state: AuthState) => void
-  logout: () => void
+  clear: () => void
 }
 
-export const useAuth = create(
+export const AuthStore = create(
   persist<AuthState & AuthActions>(
     (set) => ({
       accessToken: null,
@@ -22,7 +22,7 @@ export const useAuth = create(
           accessToken: newState.accessToken,
           user: newState.user,
         }),
-      logout: () => set({ user: null }),
+      clear: () => set({ user: null }),
     }),
     {
       name: 'auth-storage', // key in localStorage
diff --git a/src/features/settings/components/ProfileSettings.tsx b/src/features/settings/components/ProfileSettings.tsx
index 10b334d7..97ee60f7 100644
--- a/src/features/settings/components/ProfileSettings.tsx
+++ b/src/features/settings/components/ProfileSettings.tsx
@@ -2,10 +2,9 @@ import { useRef } from 'react'
 import { RiFileDownloadFill, RiFileUploadFill } from 'react-icons/ri'
 import toast from 'react-simple-toasts'
 import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout'
-import { User } from 'src/features/auth'
+import { useAuth, User } from 'src/features/auth'
 import { BookmarkedPost } from 'src/features/bookmarks'
 import { useBookmarks } from 'src/stores/bookmarks'
-import { useAuth } from 'src/stores/user'
 import { BookmarkItem } from './BookmarkSettings'
 import './bookmarkSettings/bookmarkSettings.css'
 
diff --git a/src/stores/bookmarks.ts b/src/stores/bookmarks.ts
index d99827b0..71f63f5c 100644
--- a/src/stores/bookmarks.ts
+++ b/src/stores/bookmarks.ts
@@ -1,24 +1,37 @@
-import { create } from 'zustand';
+import { create } from 'zustand'
 
-import { BookmarkedPost } from "src/features/bookmarks";
-import { persist } from 'zustand/middleware';
+import { BookmarkedPost } from 'src/features/bookmarks'
+import { persist } from 'zustand/middleware'
 
 type BookmarksState = {
   userBookmarks: BookmarkedPost[]
-};
+}
 
 type BookmarksActions = {
-  bookmarkPost: (post: BookmarkedPost) => void;
-  unbookmarkPost: (post: BookmarkedPost) => void;
-  initState: (state: BookmarksState) => void;
+  bookmarkPost: (post: BookmarkedPost) => void
+  unbookmarkPost: (post: BookmarkedPost) => void
+  initState: (state: BookmarksState) => void
+  clear: () => void
 }
 
-
-export const useBookmarks = create(persist<BookmarksState & BookmarksActions>((set) => ({
-  userBookmarks: [],
-  bookmarkPost: (post: BookmarkedPost) => set((state) => ({ userBookmarks: [post, ...state.userBookmarks] })),
-  unbookmarkPost: (post: BookmarkedPost) => set((state) => ({ userBookmarks: state.userBookmarks.filter((bookmarkedPost) => bookmarkedPost.url !== post.url), })),
-  initState: (newState: BookmarksState) => set(() => ({ userBookmarks: newState.userBookmarks }))
-}), {
-  name: 'bookmarks_storage'
-}));
+export const useBookmarks = create(
+  persist<BookmarksState & BookmarksActions>(
+    (set) => ({
+      userBookmarks: [],
+      bookmarkPost: (post: BookmarkedPost) =>
+        set((state) => ({ userBookmarks: [post, ...state.userBookmarks] })),
+      unbookmarkPost: (post: BookmarkedPost) =>
+        set((state) => ({
+          userBookmarks: state.userBookmarks.filter(
+            (bookmarkedPost) => bookmarkedPost.url !== post.url
+          ),
+        })),
+      initState: (newState: BookmarksState) =>
+        set(() => ({ userBookmarks: newState.userBookmarks })),
+      clear: () => set({ userBookmarks: [] }),
+    }),
+    {
+      name: 'bookmarks_storage',
+    }
+  )
+)

From 005b34813b222a551d5f2f909ed9ddef9a7a38e0 Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Wed, 12 Feb 2025 23:13:29 +0100
Subject: [PATCH 12/75] feat: Move auth modal state handle to AuthStore.

---
 src/App.tsx                           |  4 ++++
 src/assets/App.css                    |  1 +
 src/components/Layout/Header.tsx      | 20 ++++++--------------
 src/features/auth/hooks/useAuth.ts    |  5 +++--
 src/features/auth/stores/authStore.ts |  4 ++++
 5 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 788dd432..7e2a45dc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useLayoutEffect, useState } from 'react'
 import { DNDLayout } from 'src/components/Layout'
+import { AuthModal, useAuth } from 'src/features/auth'
 import { setupAnalytics, setupIdentification, trackPageView } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { AppContentLayout } from './components/Layout'
@@ -21,6 +22,7 @@ export const App = () => {
   const [showOnboarding, setShowOnboarding] = useState(true)
   const { onboardingCompleted, maxVisibleCards, isDNDModeActive, DNDDuration, setDNDDuration } =
     useUserPreferences()
+  const { isAuthShowing, setIsAuthShowing, isConnected } = useAuth()
 
   useLayoutEffect(() => {
     document.documentElement.style.setProperty('--max-visible-cards', maxVisibleCards.toString())
@@ -62,6 +64,8 @@ export const App = () => {
         <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
       )}
 
+      {!isConnected() && <AuthModal showAuth={isAuthShowing} setShowAuth={setIsAuthShowing} />}
+
       <div className="layoutLayers hideScrollBar">
         {isDNDModeActive() && <DNDLayout />}
         <AppContentLayout />
diff --git a/src/assets/App.css b/src/assets/App.css
index 0a598a91..a817b67b 100644
--- a/src/assets/App.css
+++ b/src/assets/App.css
@@ -183,6 +183,7 @@ a {
 .profileImage {
   height: 40px;
   width: 40px;
+  margin-left: 8px;
   border-radius: 20px;
 }
 
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index a8f38947..96447886 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -9,20 +9,14 @@ import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg'
 import { SearchBar } from 'src/components/Elements/SearchBar'
 import { UserTags } from 'src/components/Elements/UserTags'
-import { AuthModal, useAuth } from 'src/features/auth'
+import { useAuth } from 'src/features/auth'
 import { Changelog } from 'src/features/changelog'
 import { identifyUserTheme, trackDNDDisable, trackThemeSelect } from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
 import { useUserPreferences } from 'src/stores/preferences'
 
 export const Header = () => {
-  const { user } = useAuth()
-  const [showAuth, setshowAuth] = useState(false)
-  useEffect(() => {
-    if (user != null) {
-      setshowAuth(false)
-    }
-  })
+  const { setIsAuthShowing, user, isConnected } = useAuth()
 
   const [themeIcon, setThemeIcon] = useState(<BsMoonFill />)
   const { theme, setTheme, setDNDDuration, isDNDModeActive } = useUserPreferences()
@@ -73,8 +67,6 @@ export const Header = () => {
 
   return (
     <>
-      {<AuthModal showAuth={showAuth} setShowAuth={setshowAuth} />}
-
       <header className="AppHeader">
         <span className="AppName">
           <i className="logo">
@@ -108,16 +100,16 @@ export const Header = () => {
               <BookmarksBadgeCount />
             </>
           </Link>
-          {user != null ? (
-            <Link to="/settings/profile" className="extraBtn" aria-label="Open profile">
-              <img className="profileImage" src={user.imageURL} />
+          {isConnected() ? (
+            <Link to="/settings/profile" aria-label="Open profile">
+              <img className="profileImage" src={user?.imageURL} />
             </Link>
           ) : (
             <button
               aria-label="open login"
               className="extraBtn"
               onClick={() => {
-                setshowAuth(true)
+                setIsAuthShowing(true)
               }}>
               <FaUserLarge />
             </button>
diff --git a/src/features/auth/hooks/useAuth.ts b/src/features/auth/hooks/useAuth.ts
index 0b932e8c..13355c76 100644
--- a/src/features/auth/hooks/useAuth.ts
+++ b/src/features/auth/hooks/useAuth.ts
@@ -4,11 +4,12 @@ import { useBookmarks } from 'src/stores/bookmarks'
 export const useAuth = () => {
   const authStore = AuthStore()
   const bookmarksStore = useBookmarks()
-  const { initState, accessToken, user } = authStore
+  const { isAuthShowing, accessToken, user, setIsAuthShowing, initState } = authStore
+  const isConnected = () => user != null
   const logout = () => {
     bookmarksStore.clear()
     authStore.clear()
   }
 
-  return { initState, logout, accessToken, user }
+  return { setIsAuthShowing, initState, isConnected, logout, isAuthShowing, accessToken, user }
 }
diff --git a/src/features/auth/stores/authStore.ts b/src/features/auth/stores/authStore.ts
index c5109306..03aacb79 100644
--- a/src/features/auth/stores/authStore.ts
+++ b/src/features/auth/stores/authStore.ts
@@ -3,11 +3,13 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
 type AuthState = {
+  isAuthShowing: boolean
   accessToken: string | null
   user: User | null
 }
 
 type AuthActions = {
+  setIsAuthShowing: (showing: boolean) => void
   initState: (state: AuthState) => void
   clear: () => void
 }
@@ -15,8 +17,10 @@ type AuthActions = {
 export const AuthStore = create(
   persist<AuthState & AuthActions>(
     (set) => ({
+      isAuthShowing: true,
       accessToken: null,
       user: null,
+      setIsAuthShowing: (showing: boolean) => set({ isAuthShowing: showing }),
       initState: (newState: AuthState) =>
         set({
           accessToken: newState.accessToken,

From 9cd92972b2b00e80a02cd1c0a15f94d6a4170b1a Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Sun, 16 Feb 2025 16:21:26 +0100
Subject: [PATCH 13/75] feat: Create AuthModalStore without persist.

---
 src/App.tsx                                |  4 ++--
 src/components/Layout/Header.tsx           |  9 ++-------
 src/features/auth/components/AuthModal.tsx |  9 +++++----
 src/features/auth/hooks/useAuth.ts         | 16 +++++++++++++---
 src/features/auth/stores/authStore.ts      | 16 ++++++++++++----
 5 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7e2a45dc..cc98cc9f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,7 +22,7 @@ export const App = () => {
   const [showOnboarding, setShowOnboarding] = useState(true)
   const { onboardingCompleted, maxVisibleCards, isDNDModeActive, DNDDuration, setDNDDuration } =
     useUserPreferences()
-  const { isAuthShowing, setIsAuthShowing, isConnected } = useAuth()
+  const { isAuthModalOpen, closeAuthModal } = useAuth()
 
   useLayoutEffect(() => {
     document.documentElement.style.setProperty('--max-visible-cards', maxVisibleCards.toString())
@@ -64,7 +64,7 @@ export const App = () => {
         <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
       )}
 
-      {!isConnected() && <AuthModal showAuth={isAuthShowing} setShowAuth={setIsAuthShowing} />}
+      {<AuthModal showAuth={isAuthModalOpen} closeModal={closeAuthModal} />}
 
       <div className="layoutLayers hideScrollBar">
         {isDNDModeActive() && <DNDLayout />}
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index 96447886..8c6a1708 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -16,7 +16,7 @@ import { useBookmarks } from 'src/stores/bookmarks'
 import { useUserPreferences } from 'src/stores/preferences'
 
 export const Header = () => {
-  const { setIsAuthShowing, user, isConnected } = useAuth()
+  const { openAuthModal, user, isConnected } = useAuth()
 
   const [themeIcon, setThemeIcon] = useState(<BsMoonFill />)
   const { theme, setTheme, setDNDDuration, isDNDModeActive } = useUserPreferences()
@@ -105,12 +105,7 @@ export const Header = () => {
               <img className="profileImage" src={user?.imageURL} />
             </Link>
           ) : (
-            <button
-              aria-label="open login"
-              className="extraBtn"
-              onClick={() => {
-                setIsAuthShowing(true)
-              }}>
+            <button aria-label="open login" className="extraBtn" onClick={openAuthModal}>
               <FaUserLarge />
             </button>
           )}
diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index 1239b377..346dadf2 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -7,11 +7,11 @@ import { auth, githubProvider, googleProvider } from '../api/Config'
 
 type AuthModalProps = {
   showAuth: boolean
-  setShowAuth: (show: boolean) => void
+  closeModal: () => void
 }
 
-export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
-  const { initState } = useAuth()
+export const AuthModal = ({ showAuth, closeModal }: AuthModalProps) => {
+  const { closeAuthModal, initState } = useAuth()
 
   const signIn = (provider: AuthProvider, providerName: string) => {
     signInWithPopup(auth, provider)
@@ -22,6 +22,7 @@ export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
         const name = result.user.displayName
         const imageURL = result.user.photoURL
         if (accessToken && name && email && imageURL) {
+          closeAuthModal()
           initState({
             accessToken: accessToken,
             user: {
@@ -45,7 +46,7 @@ export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
       shouldCloseOnEsc={true}
       shouldCloseOnOverlayClick={true}
       shouldFocusAfterRender={false}
-      onRequestClose={() => setShowAuth(false)}
+      onRequestClose={closeModal}
       contentLabel="Auth"
       className="Modal scrollable"
       style={{
diff --git a/src/features/auth/hooks/useAuth.ts b/src/features/auth/hooks/useAuth.ts
index 13355c76..ac88e700 100644
--- a/src/features/auth/hooks/useAuth.ts
+++ b/src/features/auth/hooks/useAuth.ts
@@ -1,15 +1,25 @@
-import { AuthStore } from 'src/features/auth'
+import { AuthModalStore, AuthStore } from 'src/features/auth'
 import { useBookmarks } from 'src/stores/bookmarks'
 
 export const useAuth = () => {
+  const { isAuthModalOpen, openAuthModal, closeAuthModal } = AuthModalStore()
   const authStore = AuthStore()
   const bookmarksStore = useBookmarks()
-  const { isAuthShowing, accessToken, user, setIsAuthShowing, initState } = authStore
+  const { accessToken, user, initState } = authStore
   const isConnected = () => user != null
   const logout = () => {
     bookmarksStore.clear()
     authStore.clear()
   }
 
-  return { setIsAuthShowing, initState, isConnected, logout, isAuthShowing, accessToken, user }
+  return {
+    openAuthModal,
+    closeAuthModal,
+    initState,
+    isConnected,
+    logout,
+    isAuthModalOpen,
+    accessToken,
+    user,
+  }
 }
diff --git a/src/features/auth/stores/authStore.ts b/src/features/auth/stores/authStore.ts
index 03aacb79..b225b24a 100644
--- a/src/features/auth/stores/authStore.ts
+++ b/src/features/auth/stores/authStore.ts
@@ -2,25 +2,33 @@ import { User } from 'src/features/auth/types'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
+interface AuthModalState {
+  isAuthModalOpen: boolean
+  openAuthModal: () => void
+  closeAuthModal: () => void
+}
+
 type AuthState = {
-  isAuthShowing: boolean
   accessToken: string | null
   user: User | null
 }
 
 type AuthActions = {
-  setIsAuthShowing: (showing: boolean) => void
   initState: (state: AuthState) => void
   clear: () => void
 }
 
+export const AuthModalStore = create<AuthModalState>((set) => ({
+  isAuthModalOpen: false,
+  openAuthModal: () => set({ isAuthModalOpen: true }),
+  closeAuthModal: () => set({ isAuthModalOpen: false }),
+}))
+
 export const AuthStore = create(
   persist<AuthState & AuthActions>(
     (set) => ({
-      isAuthShowing: true,
       accessToken: null,
       user: null,
-      setIsAuthShowing: (showing: boolean) => set({ isAuthShowing: showing }),
       initState: (newState: AuthState) =>
         set({
           accessToken: newState.accessToken,

From f563614653c5eaf8d868bfdbbaf35e3db6dcd4cd Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Sun, 16 Feb 2025 19:30:23 +0100
Subject: [PATCH 14/75] feat: Rebame config file to firebase config.

---
 src/features/auth/api/{Config.ts => FirebaseConfig.ts} | 0
 src/features/auth/components/AuthModal.tsx             | 2 +-
 src/features/auth/index.ts                             | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/features/auth/api/{Config.ts => FirebaseConfig.ts} (100%)

diff --git a/src/features/auth/api/Config.ts b/src/features/auth/api/FirebaseConfig.ts
similarity index 100%
rename from src/features/auth/api/Config.ts
rename to src/features/auth/api/FirebaseConfig.ts
diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index 346dadf2..745b9e99 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -3,7 +3,7 @@ import { FaGithub, FaGoogle } from 'react-icons/fa'
 import ReactModal from 'react-modal'
 import toast from 'react-simple-toasts'
 import { useAuth } from 'src/features/auth'
-import { auth, githubProvider, googleProvider } from '../api/Config'
+import { auth, githubProvider, googleProvider } from '../api/FirebaseConfig'
 
 type AuthModalProps = {
   showAuth: boolean
diff --git a/src/features/auth/index.ts b/src/features/auth/index.ts
index ceb73d70..24835c02 100644
--- a/src/features/auth/index.ts
+++ b/src/features/auth/index.ts
@@ -1,4 +1,4 @@
-export * from './api/Config'
+export * from './api/FirebaseConfig'
 export * from './components/AuthModal'
 export * from './hooks/useAuth'
 export * from './stores/authStore'

From fa616c4d8eed2d9d1209d8b8d8629af18433e46b Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Sun, 16 Feb 2025 19:54:43 +0100
Subject: [PATCH 15/75] fix: Code reviews.

---
 src/config/index.tsx                       |  9 +++++++
 src/features/auth/api/FirebaseConfig.ts    | 20 ---------------
 src/features/auth/components/AuthModal.tsx | 16 ++++++------
 src/features/auth/hooks/useAuth.ts         |  9 +++----
 src/features/auth/index.ts                 |  1 -
 src/features/auth/stores/authStore.ts      |  6 ++---
 src/lib/firebase.ts                        | 29 ++++++++++++++++++++++
 7 files changed, 53 insertions(+), 37 deletions(-)
 delete mode 100644 src/features/auth/api/FirebaseConfig.ts
 create mode 100644 src/lib/firebase.ts

diff --git a/src/config/index.tsx b/src/config/index.tsx
index 2f5f622b..a0bdd5e7 100644
--- a/src/config/index.tsx
+++ b/src/config/index.tsx
@@ -50,3 +50,12 @@ export const dateRanges: DateRangeType[] = [
   { label: 'the week', value: 'weekly' },
   { label: 'the month', value: 'monthly' },
 ]
+
+export const FIREBASE_API_KEY = import.meta.env.VITE_FIREBASE_API_KEY as string
+export const FIREBASE_AUTH_DOMAIN = import.meta.env.VITE_FIREBASE_AUTH_DOMAIN as string
+export const FIREBASE_PROJECT_ID = import.meta.env.VITE_FIREBASE_PROJECT_ID as string
+export const FIREBASE_STORAGE_BUCKET = import.meta.env.VITE_FIREBASE_STORAGE_BUCKET as string
+export const FIREBASE_MESSAGING_SENDER_ID = import.meta.env
+  .VITE_FIREBASE_MESSAGING_SENDER_ID as string
+export const FIREBASE_APP_ID = import.meta.env.VITE_FIREBASE_APP_ID as string
+export const FIREBASE_MEASUREMENT_ID = import.meta.env.VITE_FIREBASE_MEASUREMENT_ID as string
diff --git a/src/features/auth/api/FirebaseConfig.ts b/src/features/auth/api/FirebaseConfig.ts
deleted file mode 100644
index 9390fcef..00000000
--- a/src/features/auth/api/FirebaseConfig.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { initializeApp } from 'firebase/app'
-import { getAuth, GithubAuthProvider, GoogleAuthProvider } from 'firebase/auth'
-
-const firebaseConfig = {
-  apiKey: import.meta.env.VITE_FIREBASE_API_KEY || '',
-  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN || '',
-  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID || '',
-  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET || '',
-  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID || '',
-  appId: import.meta.env.VITE_FIREBASE_APP_ID || '',
-  measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID || '',
-}
-
-// Initialize Firebase
-const app = initializeApp(firebaseConfig)
-const auth = getAuth(app)
-const googleProvider = new GoogleAuthProvider()
-const githubProvider = new GithubAuthProvider()
-
-export { auth, githubProvider, googleProvider }
diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index 745b9e99..cf4e9e29 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -3,7 +3,7 @@ import { FaGithub, FaGoogle } from 'react-icons/fa'
 import ReactModal from 'react-modal'
 import toast from 'react-simple-toasts'
 import { useAuth } from 'src/features/auth'
-import { auth, githubProvider, googleProvider } from '../api/FirebaseConfig'
+import { firebaseAuth, githubAuthProvider, googleAuthProvider } from 'src/lib/firebase'
 
 type AuthModalProps = {
   showAuth: boolean
@@ -14,17 +14,17 @@ export const AuthModal = ({ showAuth, closeModal }: AuthModalProps) => {
   const { closeAuthModal, initState } = useAuth()
 
   const signIn = (provider: AuthProvider, providerName: string) => {
-    signInWithPopup(auth, provider)
+    signInWithPopup(firebaseAuth, provider)
       .then((result) => {
         const credential = OAuthProvider.credentialFromResult(result)
-        const accessToken = credential?.accessToken
+        const idToken = credential?.idToken
         const email = result.user.displayName
         const name = result.user.displayName
         const imageURL = result.user.photoURL
-        if (accessToken && name && email && imageURL) {
+        if (idToken && name && email && imageURL) {
           closeAuthModal()
           initState({
-            accessToken: accessToken,
+            idToken: idToken,
             user: {
               name: name,
               email: email,
@@ -65,14 +65,16 @@ export const AuthModal = ({ showAuth, closeModal }: AuthModalProps) => {
           </p>
         </div>
         <div>
-          <button className="extraTextWithIconBtn" onClick={() => signIn(githubProvider, 'Github')}>
+          <button
+            className="extraTextWithIconBtn"
+            onClick={() => signIn(githubAuthProvider, 'Github')}>
             <FaGithub />
             Sign in with Github
           </button>
           <button
             className="extraTextWithIconBtn"
             style={{ marginLeft: 10 }}
-            onClick={() => signIn(googleProvider, 'Google')}>
+            onClick={() => signIn(googleAuthProvider, 'Google')}>
             <FaGoogle />
             Sign in with Google
           </button>
diff --git a/src/features/auth/hooks/useAuth.ts b/src/features/auth/hooks/useAuth.ts
index ac88e700..f964b327 100644
--- a/src/features/auth/hooks/useAuth.ts
+++ b/src/features/auth/hooks/useAuth.ts
@@ -1,15 +1,12 @@
 import { AuthModalStore, AuthStore } from 'src/features/auth'
-import { useBookmarks } from 'src/stores/bookmarks'
 
 export const useAuth = () => {
   const { isAuthModalOpen, openAuthModal, closeAuthModal } = AuthModalStore()
   const authStore = AuthStore()
-  const bookmarksStore = useBookmarks()
-  const { accessToken, user, initState } = authStore
+  const { idToken, user, initState, clear } = authStore
   const isConnected = () => user != null
   const logout = () => {
-    bookmarksStore.clear()
-    authStore.clear()
+    clear()
   }
 
   return {
@@ -19,7 +16,7 @@ export const useAuth = () => {
     isConnected,
     logout,
     isAuthModalOpen,
-    accessToken,
+    idToken,
     user,
   }
 }
diff --git a/src/features/auth/index.ts b/src/features/auth/index.ts
index 24835c02..5f4ccd47 100644
--- a/src/features/auth/index.ts
+++ b/src/features/auth/index.ts
@@ -1,4 +1,3 @@
-export * from './api/FirebaseConfig'
 export * from './components/AuthModal'
 export * from './hooks/useAuth'
 export * from './stores/authStore'
diff --git a/src/features/auth/stores/authStore.ts b/src/features/auth/stores/authStore.ts
index b225b24a..2ec63c83 100644
--- a/src/features/auth/stores/authStore.ts
+++ b/src/features/auth/stores/authStore.ts
@@ -9,7 +9,7 @@ interface AuthModalState {
 }
 
 type AuthState = {
-  accessToken: string | null
+  idToken: string | null
   user: User | null
 }
 
@@ -27,11 +27,11 @@ export const AuthModalStore = create<AuthModalState>((set) => ({
 export const AuthStore = create(
   persist<AuthState & AuthActions>(
     (set) => ({
-      accessToken: null,
+      idToken: null,
       user: null,
       initState: (newState: AuthState) =>
         set({
-          accessToken: newState.accessToken,
+          idToken: newState.idToken,
           user: newState.user,
         }),
       clear: () => set({ user: null }),
diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts
new file mode 100644
index 00000000..159a6435
--- /dev/null
+++ b/src/lib/firebase.ts
@@ -0,0 +1,29 @@
+import { initializeApp } from 'firebase/app'
+import { getAuth, GithubAuthProvider, GoogleAuthProvider } from 'firebase/auth'
+import {
+  FIREBASE_API_KEY,
+  FIREBASE_APP_ID,
+  FIREBASE_AUTH_DOMAIN,
+  FIREBASE_MEASUREMENT_ID,
+  FIREBASE_MESSAGING_SENDER_ID,
+  FIREBASE_PROJECT_ID,
+  FIREBASE_STORAGE_BUCKET,
+} from 'src/config'
+
+const firebaseConfig = {
+  apiKey: FIREBASE_API_KEY,
+  authDomain: FIREBASE_AUTH_DOMAIN,
+  projectId: FIREBASE_PROJECT_ID,
+  storageBucket: FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: FIREBASE_MESSAGING_SENDER_ID,
+  appId: FIREBASE_APP_ID,
+  measurementId: FIREBASE_MEASUREMENT_ID,
+}
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig)
+const firebaseAuth = getAuth(app)
+const googleAuthProvider = new GoogleAuthProvider()
+const githubAuthProvider = new GithubAuthProvider()
+
+export { firebaseAuth, githubAuthProvider, googleAuthProvider }

From 240e15b0c42653517ab89027bed6bdae8a99b5e4 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 16 Feb 2025 21:35:37 +0100
Subject: [PATCH 16/75] fix modal not showing in other pages

---
 src/assets/App.css                            | 82 +++++++++++++++++++
 .../GeneralSettings/generalSettings.css       | 82 -------------------
 2 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/src/assets/App.css b/src/assets/App.css
index a817b67b..20e8fe12 100644
--- a/src/assets/App.css
+++ b/src/assets/App.css
@@ -1373,3 +1373,85 @@ Producthunt item
 .capitalize {
   text-transform: capitalize;
 }
+
+/**
+Modal
+**/
+
+.Modal {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 650px;
+  background-color: var(--card-background-color);
+  padding: 24px;
+  border-radius: 10px;
+  box-shadow: 0 0 20px #00000052;
+  z-index: 3;
+  max-height: 80vh;
+  overflow-y: scroll;
+}
+
+.Overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--overlay-background-color);
+  backdrop-filter: blur(2px);
+}
+
+.modalHeader {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.modalTitle {
+  margin: 0;
+  padding: 0;
+  color: var(--primary-text-color);
+}
+.modalCloseBtn {
+  align-items: center;
+  background-color: transparent;
+  border-radius: 50%;
+  border: none;
+  color: var(--primary-text-color);
+  cursor: pointer;
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  width: 40px;
+}
+.modalCloseBtn:hover {
+  opacity: 0.7;
+}
+
+@media (max-width: 768px) {
+  .Modal {
+    left: 0;
+    top: 0;
+    margin: 0;
+    height: 100vh;
+    max-height: 100vh;
+    transform: translate(0, 0);
+    border-radius: 0;
+    position: relative;
+    box-shadow: none;
+    width: auto;
+  }
+  .settingContent {
+    margin-top: 6px;
+  }
+  .settingRow {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
diff --git a/src/features/settings/components/GeneralSettings/generalSettings.css b/src/features/settings/components/GeneralSettings/generalSettings.css
index 81a3b7dd..c80a8028 100644
--- a/src/features/settings/components/GeneralSettings/generalSettings.css
+++ b/src/features/settings/components/GeneralSettings/generalSettings.css
@@ -1,32 +1,3 @@
-/**
-Modal
-**/
-
-.Modal {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 650px;
-  background-color: var(--card-background-color);
-  padding: 24px;
-  border-radius: 10px;
-  box-shadow: 0 0 20px #00000052;
-  z-index: 3;
-  max-height: 80vh;
-  overflow-y: scroll;
-}
-
-.Overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--overlay-background-color);
-  backdrop-filter: blur(2px);
-}
-
 .settingTitle {
   width: 300px;
   margin: 0;
@@ -110,37 +81,6 @@ Modal
   font-weight: 500;
   color: var(--primary-text-color);
 }
-.modalHeader {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-
-.modalTitle {
-  margin: 0;
-  padding: 0;
-  color: var(--primary-text-color);
-}
-.modalCloseBtn {
-  align-items: center;
-  background-color: transparent;
-  border-radius: 50%;
-  border: none;
-  color: var(--primary-text-color);
-  cursor: pointer;
-  display: flex;
-  height: 40px;
-  justify-content: center;
-  margin: 0;
-  padding: 0;
-  text-align: center;
-  width: 40px;
-}
-.modalCloseBtn:hover {
-  opacity: 0.7;
-}
-
 /**
 Select styles
 **/
@@ -181,25 +121,3 @@ Select styles
   border-radius: 20px !important;
   color: var(--tag-secondary-color) !important;
 }
-
-@media (max-width: 768px) {
-  .Modal {
-    left: 0;
-    top: 0;
-    margin: 0;
-    height: 100vh;
-    max-height: 100vh;
-    transform: translate(0, 0);
-    border-radius: 0;
-    position: relative;
-    box-shadow: none;
-    width: auto;
-  }
-  .settingContent {
-    margin-top: 6px;
-  }
-  .settingRow {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}

From 827f2cf78c6a93b443b34978861d8df8f17a689f Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Sun, 16 Feb 2025 20:18:13 +0100
Subject: [PATCH 17/75] feat: Create separated file for authModalStore.

---
 src/features/auth/index.ts                 |  1 +
 src/features/auth/stores/authModalStore.ts | 13 +++++++++++++
 src/features/auth/stores/authStore.ts      | 12 ------------
 3 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 src/features/auth/stores/authModalStore.ts

diff --git a/src/features/auth/index.ts b/src/features/auth/index.ts
index 5f4ccd47..a93cd5d3 100644
--- a/src/features/auth/index.ts
+++ b/src/features/auth/index.ts
@@ -1,4 +1,5 @@
 export * from './components/AuthModal'
 export * from './hooks/useAuth'
+export * from './stores/authModalStore'
 export * from './stores/authStore'
 export * from './types'
diff --git a/src/features/auth/stores/authModalStore.ts b/src/features/auth/stores/authModalStore.ts
new file mode 100644
index 00000000..b3765c35
--- /dev/null
+++ b/src/features/auth/stores/authModalStore.ts
@@ -0,0 +1,13 @@
+import { create } from 'zustand'
+
+interface AuthModalState {
+  isAuthModalOpen: boolean
+  openAuthModal: () => void
+  closeAuthModal: () => void
+}
+
+export const AuthModalStore = create<AuthModalState>((set) => ({
+  isAuthModalOpen: false,
+  openAuthModal: () => set({ isAuthModalOpen: true }),
+  closeAuthModal: () => set({ isAuthModalOpen: false }),
+}))
diff --git a/src/features/auth/stores/authStore.ts b/src/features/auth/stores/authStore.ts
index 2ec63c83..712d6c5b 100644
--- a/src/features/auth/stores/authStore.ts
+++ b/src/features/auth/stores/authStore.ts
@@ -2,12 +2,6 @@ import { User } from 'src/features/auth/types'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
-interface AuthModalState {
-  isAuthModalOpen: boolean
-  openAuthModal: () => void
-  closeAuthModal: () => void
-}
-
 type AuthState = {
   idToken: string | null
   user: User | null
@@ -18,12 +12,6 @@ type AuthActions = {
   clear: () => void
 }
 
-export const AuthModalStore = create<AuthModalState>((set) => ({
-  isAuthModalOpen: false,
-  openAuthModal: () => set({ isAuthModalOpen: true }),
-  closeAuthModal: () => set({ isAuthModalOpen: false }),
-}))
-
 export const AuthStore = create(
   persist<AuthState & AuthActions>(
     (set) => ({

From 4a0c08e95ea775b7842e26687f7d6e6ae5232397 Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Sun, 16 Feb 2025 21:42:53 +0100
Subject: [PATCH 18/75] fix: Code reviews.

---
 src/App.tsx                                   |  4 --
 src/components/Layout/AppLayout.tsx           |  4 ++
 .../BookmarkSettings/bookmarkSettings.css     | 49 -------------------
 .../{ => Profile}/ProfileSettings.tsx         |  6 +--
 .../components/Profile/profileSettings.css    | 49 +++++++++++++++++++
 src/features/settings/index.ts                |  2 +-
 6 files changed, 57 insertions(+), 57 deletions(-)
 rename src/features/settings/components/{ => Profile}/ProfileSettings.tsx (96%)
 create mode 100644 src/features/settings/components/Profile/profileSettings.css

diff --git a/src/App.tsx b/src/App.tsx
index cc98cc9f..788dd432 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useLayoutEffect, useState } from 'react'
 import { DNDLayout } from 'src/components/Layout'
-import { AuthModal, useAuth } from 'src/features/auth'
 import { setupAnalytics, setupIdentification, trackPageView } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { AppContentLayout } from './components/Layout'
@@ -22,7 +21,6 @@ export const App = () => {
   const [showOnboarding, setShowOnboarding] = useState(true)
   const { onboardingCompleted, maxVisibleCards, isDNDModeActive, DNDDuration, setDNDDuration } =
     useUserPreferences()
-  const { isAuthModalOpen, closeAuthModal } = useAuth()
 
   useLayoutEffect(() => {
     document.documentElement.style.setProperty('--max-visible-cards', maxVisibleCards.toString())
@@ -64,8 +62,6 @@ export const App = () => {
         <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
       )}
 
-      {<AuthModal showAuth={isAuthModalOpen} closeModal={closeAuthModal} />}
-
       <div className="layoutLayers hideScrollBar">
         {isDNDModeActive() && <DNDLayout />}
         <AppContentLayout />
diff --git a/src/components/Layout/AppLayout.tsx b/src/components/Layout/AppLayout.tsx
index 5d9fe243..faf30060 100644
--- a/src/components/Layout/AppLayout.tsx
+++ b/src/components/Layout/AppLayout.tsx
@@ -3,16 +3,20 @@ import 'react-contexify/dist/ReactContexify.css'
 import { Outlet } from 'react-router-dom'
 import { BeatLoader } from 'react-spinners'
 import 'src/assets/App.css'
+import { AuthModal, useAuth } from 'src/features/auth'
 import { MarketingBanner } from 'src/features/MarketingBanner'
 import { Header } from './Header'
 
 export const AppLayout = () => {
+  const { isAuthModalOpen, closeAuthModal } = useAuth()
+
   return (
     <>
       <MarketingBanner />
 
       <div className="App">
         <Header />
+        <AuthModal showAuth={isAuthModalOpen} closeModal={closeAuthModal} />
         <React.Suspense
           fallback={
             <div className="appLoading">
diff --git a/src/features/settings/components/BookmarkSettings/bookmarkSettings.css b/src/features/settings/components/BookmarkSettings/bookmarkSettings.css
index 9c8d536b..889f7920 100644
--- a/src/features/settings/components/BookmarkSettings/bookmarkSettings.css
+++ b/src/features/settings/components/BookmarkSettings/bookmarkSettings.css
@@ -81,52 +81,3 @@
 .btn:hover {
   filter: brightness(85%);
 }
-
-.container {
-  width: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.userCard {
-  width: auto;
-  background-color: var(--placeholder-background-color);
-  padding: 10px;
-  margin: 10px;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-}
-.userImage {
-  width: 60px;
-  height: 60px;
-  border-radius: 20%;
-}
-.userInfos {
-  width: auto;
-  margin-left: 10px;
-}
-.userName {
-  font-size: larger;
-  font-weight: 600;
-}
-.userEmail {
-  font-size: medium;
-  margin-top: 6px;
-}
-.actions {
-  margin-left: auto;
-}
-.logoutBtn {
-  font-size: medium;
-  padding: 8px 20px;
-  background-color: #e57373;
-  color: var(--button-text-color);
-  border: 0;
-  border-radius: 20px;
-  font-weight: bold;
-  font-size: 16px;
-  text-align: center;
-  margin-left: 8px;
-}
diff --git a/src/features/settings/components/ProfileSettings.tsx b/src/features/settings/components/Profile/ProfileSettings.tsx
similarity index 96%
rename from src/features/settings/components/ProfileSettings.tsx
rename to src/features/settings/components/Profile/ProfileSettings.tsx
index 97ee60f7..bab79b57 100644
--- a/src/features/settings/components/ProfileSettings.tsx
+++ b/src/features/settings/components/Profile/ProfileSettings.tsx
@@ -5,8 +5,8 @@ import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayo
 import { useAuth, User } from 'src/features/auth'
 import { BookmarkedPost } from 'src/features/bookmarks'
 import { useBookmarks } from 'src/stores/bookmarks'
-import { BookmarkItem } from './BookmarkSettings'
-import './bookmarkSettings/bookmarkSettings.css'
+import { BookmarkItem } from '../BookmarkSettings'
+import './profileSettings.css'
 
 interface UserInfoProps {
   user: User
@@ -84,7 +84,7 @@ export const ProfileSettings = () => {
   }
 
   return (
-    <div className="container">
+    <div className="profile">
       {user != null && <UserInfo user={user} />}
       <SettingsContentLayout
         title="Bookmarks"
diff --git a/src/features/settings/components/Profile/profileSettings.css b/src/features/settings/components/Profile/profileSettings.css
new file mode 100644
index 00000000..229fba7b
--- /dev/null
+++ b/src/features/settings/components/Profile/profileSettings.css
@@ -0,0 +1,49 @@
+.profile {
+  width: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.profile .userCard {
+  width: auto;
+  background-color: var(--placeholder-background-color);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+}
+.profile .userImage {
+  width: 60px;
+  height: 60px;
+  border-radius: 20%;
+}
+.profile .userInfos {
+  width: auto;
+  margin-left: 10px;
+}
+.profile .userName {
+  font-size: larger;
+  font-weight: 600;
+}
+.profile .userEmail {
+  font-size: medium;
+  margin-top: 6px;
+}
+.profile .actions {
+  margin-left: auto;
+}
+
+.profile .logoutBtn {
+  font-size: medium;
+  padding: 8px 20px;
+  background-color: #e57373;
+  color: var(--button-text-color);
+  border: 0;
+  border-radius: 20px;
+  font-weight: bold;
+  font-size: 16px;
+  text-align: center;
+  margin-left: 8px;
+}
diff --git a/src/features/settings/index.ts b/src/features/settings/index.ts
index 40479730..51b48eb0 100644
--- a/src/features/settings/index.ts
+++ b/src/features/settings/index.ts
@@ -1,6 +1,6 @@
 export * from './components/BookmarkSettings'
 export * from './components/GeneralSettings'
-export * from './components/ProfileSettings'
+export * from './components/Profile/ProfileSettings'
 export * from './components/SearchEngineSettings'
 export * from './components/SourceSettings'
 export * from './components/TopicSettings'

From 217c9a9c2d0f7bdc6d6667b34add9fd98bde3638 Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Mon, 17 Feb 2025 19:45:20 +0100
Subject: [PATCH 19/75] feat: New AuthModal ui.

---
 src/assets/App.css                         |  2 +-
 src/components/Layout/AppLayout.tsx        |  2 +-
 src/features/auth/components/AuthModal.tsx | 61 ++++++++++++----------
 src/features/auth/components/authModal.css | 25 +++++++++
 4 files changed, 59 insertions(+), 31 deletions(-)
 create mode 100644 src/features/auth/components/authModal.css

diff --git a/src/assets/App.css b/src/assets/App.css
index 20e8fe12..5217225b 100644
--- a/src/assets/App.css
+++ b/src/assets/App.css
@@ -122,7 +122,7 @@ a {
 }
 
 .extras {
-  display: flex;
+  display: nore;
   flex-direction: row;
   align-content: center;
   order: 2;
diff --git a/src/components/Layout/AppLayout.tsx b/src/components/Layout/AppLayout.tsx
index faf30060..506387e5 100644
--- a/src/components/Layout/AppLayout.tsx
+++ b/src/components/Layout/AppLayout.tsx
@@ -16,7 +16,7 @@ export const AppLayout = () => {
 
       <div className="App">
         <Header />
-        <AuthModal showAuth={isAuthModalOpen} closeModal={closeAuthModal} />
+        <AuthModal showAuth={isAuthModalOpen} />
         <React.Suspense
           fallback={
             <div className="appLoading">
diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index cf4e9e29..36712483 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -1,16 +1,18 @@
 import { AuthProvider, OAuthProvider, signInWithPopup } from 'firebase/auth'
-import { FaGithub, FaGoogle } from 'react-icons/fa'
+import { FaGithub, FaHeart } from 'react-icons/fa'
+import { FcGoogle } from 'react-icons/fc'
+import { IoMdClose } from 'react-icons/io'
 import ReactModal from 'react-modal'
 import toast from 'react-simple-toasts'
 import { useAuth } from 'src/features/auth'
 import { firebaseAuth, githubAuthProvider, googleAuthProvider } from 'src/lib/firebase'
+import './authModal.css'
 
 type AuthModalProps = {
   showAuth: boolean
-  closeModal: () => void
 }
 
-export const AuthModal = ({ showAuth, closeModal }: AuthModalProps) => {
+export const AuthModal = ({ showAuth }: AuthModalProps) => {
   const { closeAuthModal, initState } = useAuth()
 
   const signIn = (provider: AuthProvider, providerName: string) => {
@@ -46,40 +48,41 @@ export const AuthModal = ({ showAuth, closeModal }: AuthModalProps) => {
       shouldCloseOnEsc={true}
       shouldCloseOnOverlayClick={true}
       shouldFocusAfterRender={false}
-      onRequestClose={closeModal}
+      onRequestClose={closeAuthModal}
       contentLabel="Auth"
-      className="Modal scrollable"
+      className="Modal authModal"
       style={{
         overlay: {
           zIndex: 3,
         },
       }}
       overlayClassName="Overlay">
-      <div>
-        <div>
-          <h1>Welcome to Hackertab</h1>
-          <p>
-            To enhance your experience and unlock our new rewards system, we’ve introduced a simple
-            and secure way to sign in. Connect your account with GitHub or Google to start earning
-            rewards, save your progress, and enjoy personalized features.
-          </p>
-        </div>
-        <div>
-          <button
-            className="extraTextWithIconBtn"
-            onClick={() => signIn(githubAuthProvider, 'Github')}>
-            <FaGithub />
-            Sign in with Github
-          </button>
-          <button
-            className="extraTextWithIconBtn"
-            style={{ marginLeft: 10 }}
-            onClick={() => signIn(googleAuthProvider, 'Google')}>
-            <FaGoogle />
-            Sign in with Google
-          </button>
-        </div>
+      <div className="titleAndCloseBtn">
+        <h3>
+          <FaHeart /> Join the community
+        </h3>
+        <button className="extraBtn" onClick={closeAuthModal}>
+          <IoMdClose />
+        </button>
       </div>
+      <div className="buttons">
+        <button
+          className="extraTextWithIconBtn"
+          onClick={() => signIn(githubAuthProvider, 'Github')}>
+          <FaGithub />
+          Connect with Github
+        </button>
+        <button
+          className="extraTextWithIconBtn"
+          onClick={() => signIn(googleAuthProvider, 'Google')}>
+          <FcGoogle />
+          Connect with Google
+        </button>
+      </div>
+      <p className="description">
+        We use your account to save your settings and track streaks for rowards 🎁 ... or risk
+        losing them like unusaved code!
+      </p>
     </ReactModal>
   )
 }
diff --git a/src/features/auth/components/authModal.css b/src/features/auth/components/authModal.css
new file mode 100644
index 00000000..3b99b7a7
--- /dev/null
+++ b/src/features/auth/components/authModal.css
@@ -0,0 +1,25 @@
+.authModal {
+  display: flex;
+  flex-direction: column;
+  row-gap: 30px;
+  overflow-y: hidden;
+}
+
+.authModal .titleAndCloseBtn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.authModal .buttons {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  margin: auto;
+}
+
+.authModal .description {
+  margin: 20px 100px;
+  text-align: center;
+}

From dfcd2b0036078da2e7773ed8f6521196cdb869ec Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Wed, 19 Feb 2025 22:27:25 +0100
Subject: [PATCH 20/75] feat: Add authorization token to request interceptor

---
 src/lib/interceptors/DefaultRequestInterceptor.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/lib/interceptors/DefaultRequestInterceptor.ts b/src/lib/interceptors/DefaultRequestInterceptor.ts
index be883e3c..3cd9de14 100644
--- a/src/lib/interceptors/DefaultRequestInterceptor.ts
+++ b/src/lib/interceptors/DefaultRequestInterceptor.ts
@@ -1,13 +1,20 @@
 import { AxiosRequestConfig } from 'axios'
 import { API_ENDPOINT } from 'src/config'
 import { isProduction } from 'src/utils/Environment'
+import { firebaseAuth } from '../firebase'
 
-export function DefaultRequestInterceptor(config: AxiosRequestConfig) {
+export async function DefaultRequestInterceptor(config: AxiosRequestConfig) {
   if (config) {
     config.baseURL = isProduction() ? API_ENDPOINT : '/api'
     if (config.headers) {
       config.headers.Accept = 'application/json'
     }
+
+    const user = firebaseAuth.currentUser
+    if (user) {
+      const token = await user.getIdToken()
+      config.headers.Authorization = `Bearer ${token}`
+    }
   }
 
   return config

From 5b44bc84eb796b050ab80219ad76086ac6b91bb8 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Wed, 19 Feb 2025 23:50:44 +0100
Subject: [PATCH 21/75] feat: Add user connection and disconnection tracking to
 analytics

---
 src/features/auth/components/AuthModal.tsx |  2 ++
 src/features/auth/hooks/useAuth.ts         |  4 ++++
 src/lib/analytics.ts                       | 17 +++++++++++++++++
 3 files changed, 23 insertions(+)

diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index 36712483..8e1a2987 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -5,6 +5,7 @@ import { IoMdClose } from 'react-icons/io'
 import ReactModal from 'react-modal'
 import toast from 'react-simple-toasts'
 import { useAuth } from 'src/features/auth'
+import { trackUserConnect } from 'src/lib/analytics'
 import { firebaseAuth, githubAuthProvider, googleAuthProvider } from 'src/lib/firebase'
 import './authModal.css'
 
@@ -24,6 +25,7 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
         const name = result.user.displayName
         const imageURL = result.user.photoURL
         if (idToken && name && email && imageURL) {
+          trackUserConnect(providerName)
           closeAuthModal()
           initState({
             idToken: idToken,
diff --git a/src/features/auth/hooks/useAuth.ts b/src/features/auth/hooks/useAuth.ts
index f964b327..35b9f044 100644
--- a/src/features/auth/hooks/useAuth.ts
+++ b/src/features/auth/hooks/useAuth.ts
@@ -1,11 +1,15 @@
 import { AuthModalStore, AuthStore } from 'src/features/auth'
+import { trackUserDisconnect } from 'src/lib/analytics'
 
 export const useAuth = () => {
   const { isAuthModalOpen, openAuthModal, closeAuthModal } = AuthModalStore()
   const authStore = AuthStore()
   const { idToken, user, initState, clear } = authStore
+
   const isConnected = () => user != null
+
   const logout = () => {
+    trackUserDisconnect()
     clear()
   }
 
diff --git a/src/lib/analytics.ts b/src/lib/analytics.ts
index c03674e1..6462dead 100644
--- a/src/lib/analytics.ts
+++ b/src/lib/analytics.ts
@@ -44,6 +44,8 @@ enum Verbs {
   DISABLE = 'Disable',
   SHARE = 'Share',
   COPY = 'Copy',
+  CONNECT = 'Connect',
+  DISCONNECT = 'Disconnect',
 }
 
 export enum Attributes {
@@ -376,6 +378,21 @@ export const trackLinkCopy = ({
   })
 }
 
+export const trackUserConnect = (provider: string) => {
+  trackEvent({
+    object: Objects.USER,
+    verb: Verbs.CONNECT,
+    attributes: { [Attributes.PROVIDER]: provider },
+  })
+}
+
+export const trackUserDisconnect = () => {
+  trackEvent({
+    object: Objects.USER,
+    verb: Verbs.DISCONNECT,
+  })
+}
+
 // Identification
 
 export const identifyUserLanguages = (languages: string[]) => {

From 18f5ac41359d5f9db7dfab0c0e530e48ad3077f3 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sat, 22 Feb 2025 13:40:47 +0100
Subject: [PATCH 22/75] refactor the button component

---
 src/assets/variables.css                   |  4 ++
 src/components/Elements/Button/Button.css  | 31 +++++++++++++
 src/components/Elements/Button/Button.tsx  | 33 +++++++++++++
 src/components/Elements/Button/index.ts    |  1 +
 src/components/Elements/index.ts           |  1 +
 src/features/auth/components/AuthModal.tsx | 54 ++++++++++++----------
 6 files changed, 99 insertions(+), 25 deletions(-)
 create mode 100644 src/components/Elements/Button/Button.css
 create mode 100644 src/components/Elements/Button/Button.tsx
 create mode 100644 src/components/Elements/Button/index.ts

diff --git a/src/assets/variables.css b/src/assets/variables.css
index e1d8ac7e..96541b82 100644
--- a/src/assets/variables.css
+++ b/src/assets/variables.css
@@ -31,7 +31,9 @@ html.dark {
 
   /** Buttons **/
   --button-background-color: #1c2026;
+  --button-hover-background-color: #181c21;
   --button-text-color: #fff;
+  --button-hover-text-color: #d0d0d0;
 
   /**Card **/
   --card-background-color: #0d1116;
@@ -117,6 +119,8 @@ html.light {
 
   --button-background-color: #d2deeb;
   --button-text-color: #3c5065;
+  --button-hover-background-color: #b9cadc;
+  --button-hover-text-color: #3c5065;
 
   /**Card **/
   --card-background-color: #ffffff;
diff --git a/src/components/Elements/Button/Button.css b/src/components/Elements/Button/Button.css
new file mode 100644
index 00000000..8e0691c4
--- /dev/null
+++ b/src/components/Elements/Button/Button.css
@@ -0,0 +1,31 @@
+.button {
+  background-color: var(--button-background-color);
+  color: var(--button-text-color);
+  font-size: 18px;
+  text-align: center;
+  border: 0;
+  border-radius: 50px;
+  cursor: pointer;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  &:hover {
+    background-color: var(--button-hover-background-color);
+    color: var(--button-hover-text-color);
+  }
+}
+
+button.small {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+button.medium {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+}
+button.large {
+  padding: 1rem 2rem;
+  font-size: 1.25rem;
+}
diff --git a/src/components/Elements/Button/Button.tsx b/src/components/Elements/Button/Button.tsx
new file mode 100644
index 00000000..b84f49cc
--- /dev/null
+++ b/src/components/Elements/Button/Button.tsx
@@ -0,0 +1,33 @@
+import clsx from 'clsx'
+import React from 'react'
+import './Button.css'
+
+const sizes = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+}
+type ButtonProps = {
+  children: React.ReactNode
+  onClick: () => void
+  className?: string
+  size?: keyof typeof sizes
+  startIcon?: React.ReactNode
+  endIcon?: React.ReactNode
+}
+export const Button = ({
+  size = 'medium',
+  onClick,
+  className,
+  startIcon,
+  endIcon,
+  children,
+}: ButtonProps) => {
+  return (
+    <button className={clsx('button', sizes[size], className)} onClick={onClick}>
+      {startIcon}
+      {children}
+      {endIcon}
+    </button>
+  )
+}
diff --git a/src/components/Elements/Button/index.ts b/src/components/Elements/Button/index.ts
new file mode 100644
index 00000000..8486fd6d
--- /dev/null
+++ b/src/components/Elements/Button/index.ts
@@ -0,0 +1 @@
+export * from './Button'
diff --git a/src/components/Elements/index.ts b/src/components/Elements/index.ts
index 850e09f7..93536b60 100644
--- a/src/components/Elements/index.ts
+++ b/src/components/Elements/index.ts
@@ -1,4 +1,5 @@
 export * from './BottomNavigation'
+export * from './Button'
 export * from './Card'
 export * from './CardLink'
 export * from './CardWithActions'
diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index 8e1a2987..a46ad9bd 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -4,6 +4,7 @@ import { FcGoogle } from 'react-icons/fc'
 import { IoMdClose } from 'react-icons/io'
 import ReactModal from 'react-modal'
 import toast from 'react-simple-toasts'
+import { Button } from 'src/components/Elements'
 import { useAuth } from 'src/features/auth'
 import { trackUserConnect } from 'src/lib/analytics'
 import { firebaseAuth, githubAuthProvider, googleAuthProvider } from 'src/lib/firebase'
@@ -59,32 +60,35 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
         },
       }}
       overlayClassName="Overlay">
-      <div className="titleAndCloseBtn">
-        <h3>
-          <FaHeart /> Join the community
-        </h3>
-        <button className="extraBtn" onClick={closeAuthModal}>
-          <IoMdClose />
-        </button>
-      </div>
-      <div className="buttons">
-        <button
-          className="extraTextWithIconBtn"
-          onClick={() => signIn(githubAuthProvider, 'Github')}>
-          <FaGithub />
-          Connect with Github
-        </button>
-        <button
-          className="extraTextWithIconBtn"
-          onClick={() => signIn(googleAuthProvider, 'Google')}>
-          <FcGoogle />
-          Connect with Google
-        </button>
+      <div className="authModal">
+        <div className="titleAndCloseBtn">
+          <h3>
+            <FaHeart /> Join the community
+          </h3>
+          <button className="extraBtn" onClick={closeAuthModal}>
+            <IoMdClose />
+          </button>
+        </div>
+        <div className="buttons">
+          <Button
+            startIcon={<FaGithub />}
+            onClick={() => signIn(githubAuthProvider, 'Github')}
+            size="large">
+            Connect with Github
+          </Button>
+
+          <Button
+            startIcon={<FcGoogle />}
+            onClick={() => signIn(googleAuthProvider, 'Google')}
+            size="large">
+            Connect with Google
+          </Button>
+        </div>
+        <p className="description">
+          We use your account to save your settings and track streaks for rowards 🎁 ... or risk
+          losing them like unusaved code!
+        </p>
       </div>
-      <p className="description">
-        We use your account to save your settings and track streaks for rowards 🎁 ... or risk
-        losing them like unusaved code!
-      </p>
     </ReactModal>
   )
 }

From 005cfadca6f2f385ca0263005cb0ed29e012559a Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sat, 22 Feb 2025 13:43:42 +0100
Subject: [PATCH 23/75] refactor: Simplify signIn function by removing
 providerName parameter

---
 src/features/auth/components/AuthModal.tsx | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index a46ad9bd..4678cb23 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -17,7 +17,7 @@ type AuthModalProps = {
 export const AuthModal = ({ showAuth }: AuthModalProps) => {
   const { closeAuthModal, initState } = useAuth()
 
-  const signIn = (provider: AuthProvider, providerName: string) => {
+  const signIn = (provider: AuthProvider) => {
     signInWithPopup(firebaseAuth, provider)
       .then((result) => {
         const credential = OAuthProvider.credentialFromResult(result)
@@ -26,7 +26,7 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
         const name = result.user.displayName
         const imageURL = result.user.photoURL
         if (idToken && name && email && imageURL) {
-          trackUserConnect(providerName)
+          trackUserConnect(provider.providerId)
           closeAuthModal()
           initState({
             idToken: idToken,
@@ -40,7 +40,7 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
       })
       .catch((error) => {
         console.log(error)
-        toast(`We couldn't login to your ${providerName} account!!`, { theme: 'failure' })
+        toast(`We couldn't login to your ${provider.providerId} account!!`, { theme: 'failure' })
       })
   }
 
@@ -70,17 +70,11 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
           </button>
         </div>
         <div className="buttons">
-          <Button
-            startIcon={<FaGithub />}
-            onClick={() => signIn(githubAuthProvider, 'Github')}
-            size="large">
+          <Button startIcon={<FaGithub />} onClick={() => signIn(githubAuthProvider)} size="large">
             Connect with Github
           </Button>
 
-          <Button
-            startIcon={<FcGoogle />}
-            onClick={() => signIn(googleAuthProvider, 'Google')}
-            size="large">
+          <Button startIcon={<FcGoogle />} onClick={() => signIn(googleAuthProvider)} size="large">
             Connect with Google
           </Button>
         </div>

From 4511c8240ee66bfbd060d638e2238a0e94217178 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sat, 22 Feb 2025 13:47:43 +0100
Subject: [PATCH 24/75] style: Adjust button padding for small and medium sizes

---
 src/components/Elements/Button/Button.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Elements/Button/Button.css b/src/components/Elements/Button/Button.css
index 8e0691c4..29905c37 100644
--- a/src/components/Elements/Button/Button.css
+++ b/src/components/Elements/Button/Button.css
@@ -18,11 +18,11 @@
 }
 
 button.small {
-  padding: 0.5rem 1rem;
+  padding: 0.3rem 0.75rem;
   font-size: 0.875rem;
 }
 button.medium {
-  padding: 0.75rem 1.5rem;
+  padding: 0.5rem 1rem;
   font-size: 1rem;
 }
 button.large {

From 2a2330880d8329ee48be6348e71323dd1d5db7a8 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sat, 22 Feb 2025 13:47:48 +0100
Subject: [PATCH 25/75] style: Update button component in AuthModal for
 consistent size and styling

---
 src/features/auth/components/AuthModal.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index 4678cb23..bdafe2ec 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -70,11 +70,18 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
           </button>
         </div>
         <div className="buttons">
-          <Button startIcon={<FaGithub />} onClick={() => signIn(githubAuthProvider)} size="large">
+          <Button
+            startIcon={<FaGithub style={{ fontSize: '1.6em' }} />}
+            onClick={() => signIn(githubAuthProvider)}
+            className="blockHeaderWhite"
+            size="medium">
             Connect with Github
           </Button>
 
-          <Button startIcon={<FcGoogle />} onClick={() => signIn(googleAuthProvider)} size="large">
+          <Button
+            startIcon={<FcGoogle style={{ fontSize: '1.6em' }} />}
+            onClick={() => signIn(googleAuthProvider)}
+            size="medium">
             Connect with Google
           </Button>
         </div>

From a42a312ee7c63b0887d0ece7cdfa750bb52ff033 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sat, 22 Feb 2025 21:41:20 +0100
Subject: [PATCH 26/75] refactor the Modal component and improve Auth Modal

---
 src/assets/App.css                         | 12 ++++-
 src/components/Elements/Button/Button.css  |  4 +-
 src/components/Elements/Modal/Modal.tsx    | 49 ++++++++++++++++++++
 src/components/Elements/Modal/index.ts     |  1 +
 src/components/Elements/index.ts           |  1 +
 src/features/auth/components/AuthModal.tsx | 52 +++++++---------------
 src/features/auth/components/authModal.css | 24 +++++-----
 7 files changed, 90 insertions(+), 53 deletions(-)
 create mode 100644 src/components/Elements/Modal/Modal.tsx
 create mode 100644 src/components/Elements/Modal/index.ts

diff --git a/src/assets/App.css b/src/assets/App.css
index 5217225b..87b9a033 100644
--- a/src/assets/App.css
+++ b/src/assets/App.css
@@ -1406,29 +1406,37 @@ Modal
 .modalHeader {
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
   margin-bottom: 16px;
+  position: relative;
 }
 
 .modalTitle {
   margin: 0;
   padding: 0;
   color: var(--primary-text-color);
+  font-size: 1.3em;
+  display: inline-flex;
+  width: 100%;
+  column-gap: 8px;
+  align-items: center;
 }
 .modalCloseBtn {
   align-items: center;
+  position: absolute;
   background-color: transparent;
   border-radius: 50%;
+  top: 0;
+  right: 0;
   border: none;
   color: var(--primary-text-color);
   cursor: pointer;
   display: flex;
-  height: 40px;
   justify-content: center;
   margin: 0;
   padding: 0;
   text-align: center;
-  width: 40px;
 }
 .modalCloseBtn:hover {
   opacity: 0.7;
diff --git a/src/components/Elements/Button/Button.css b/src/components/Elements/Button/Button.css
index 29905c37..ebe1ec04 100644
--- a/src/components/Elements/Button/Button.css
+++ b/src/components/Elements/Button/Button.css
@@ -22,8 +22,8 @@ button.small {
   font-size: 0.875rem;
 }
 button.medium {
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
+  padding: 0.75rem 1.2rem;
+  font-size: 1.1rem;
 }
 button.large {
   padding: 1rem 2rem;
diff --git a/src/components/Elements/Modal/Modal.tsx b/src/components/Elements/Modal/Modal.tsx
new file mode 100644
index 00000000..46515014
--- /dev/null
+++ b/src/components/Elements/Modal/Modal.tsx
@@ -0,0 +1,49 @@
+import clsx from 'clsx'
+import { VscClose } from 'react-icons/vsc'
+import ReactModal from 'react-modal'
+type ModalProps = {
+  showModal: boolean
+  onClose: () => void
+  className?: string
+  header: {
+    title: string
+    className?: string
+    icon?: React.ReactNode
+  }
+  children: React.ReactNode
+}
+export const Modal = ({ showModal, className, header, onClose, children }: ModalProps) => {
+  return (
+    <ReactModal
+      isOpen={showModal}
+      ariaHideApp={false}
+      shouldCloseOnEsc={true}
+      shouldCloseOnOverlayClick={true}
+      shouldFocusAfterRender={false}
+      onRequestClose={onClose}
+      className={clsx('Modal', className)}
+      style={{
+        overlay: {
+          zIndex: 3,
+        },
+      }}
+      overlayClassName="Overlay">
+      <div>
+        <header className="modalHeader">
+          <h1 className={clsx('modalTitle', header.className)}>
+            {header.icon}
+            {header.title}
+          </h1>
+          <button
+            className="modalCloseBtn"
+            onClick={() => onClose()}
+            aria-label="Close share modal">
+            <VscClose size="24" />
+          </button>
+        </header>
+
+        {children}
+      </div>
+    </ReactModal>
+  )
+}
diff --git a/src/components/Elements/Modal/index.ts b/src/components/Elements/Modal/index.ts
new file mode 100644
index 00000000..8d3bcd7a
--- /dev/null
+++ b/src/components/Elements/Modal/index.ts
@@ -0,0 +1 @@
+export * from './Modal'
diff --git a/src/components/Elements/index.ts b/src/components/Elements/index.ts
index 93536b60..84a35663 100644
--- a/src/components/Elements/index.ts
+++ b/src/components/Elements/index.ts
@@ -8,6 +8,7 @@ export * from './ClickableItem'
 export * from './ColoredLanguagesBadges'
 export * from './FloatingFilter'
 export * from './InlineTextFilter'
+export * from './Modal'
 export * from './Panel'
 export * from './SearchBar'
 export * from './SearchBarWithLogo'
diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index bdafe2ec..142c75d4 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -1,10 +1,9 @@
 import { AuthProvider, OAuthProvider, signInWithPopup } from 'firebase/auth'
-import { FaGithub, FaHeart } from 'react-icons/fa'
+import { FaGithub } from 'react-icons/fa'
 import { FcGoogle } from 'react-icons/fc'
-import { IoMdClose } from 'react-icons/io'
-import ReactModal from 'react-modal'
+import { IoHeartCircle } from 'react-icons/io5'
 import toast from 'react-simple-toasts'
-import { Button } from 'src/components/Elements'
+import { Button, Modal } from 'src/components/Elements'
 import { useAuth } from 'src/features/auth'
 import { trackUserConnect } from 'src/lib/analytics'
 import { firebaseAuth, githubAuthProvider, googleAuthProvider } from 'src/lib/firebase'
@@ -45,51 +44,32 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
   }
 
   return (
-    <ReactModal
-      isOpen={showAuth}
-      ariaHideApp={false}
-      shouldCloseOnEsc={true}
-      shouldCloseOnOverlayClick={true}
-      shouldFocusAfterRender={false}
-      onRequestClose={closeAuthModal}
-      contentLabel="Auth"
-      className="Modal authModal"
-      style={{
-        overlay: {
-          zIndex: 3,
-        },
+    <Modal
+      showModal={showAuth}
+      onClose={closeAuthModal}
+      header={{
+        className: 'header',
+        title: 'Join Hackertab',
+        icon: <IoHeartCircle style={{ fontSize: '1.2em' }} />,
       }}
-      overlayClassName="Overlay">
-      <div className="authModal">
-        <div className="titleAndCloseBtn">
-          <h3>
-            <FaHeart /> Join the community
-          </h3>
-          <button className="extraBtn" onClick={closeAuthModal}>
-            <IoMdClose />
-          </button>
-        </div>
+      className="authModal">
+      <div>
+        <p className="description">Create an account to sync, save bookmarks, and earn rewards.</p>
         <div className="buttons">
           <Button
-            startIcon={<FaGithub style={{ fontSize: '1.6em' }} />}
+            startIcon={<FaGithub className="blockHeaderWhite" style={{ fontSize: '1.5em' }} />}
             onClick={() => signIn(githubAuthProvider)}
-            className="blockHeaderWhite"
             size="medium">
             Connect with Github
           </Button>
-
           <Button
-            startIcon={<FcGoogle style={{ fontSize: '1.6em' }} />}
+            startIcon={<FcGoogle style={{ fontSize: '1.5em' }} />}
             onClick={() => signIn(googleAuthProvider)}
             size="medium">
             Connect with Google
           </Button>
         </div>
-        <p className="description">
-          We use your account to save your settings and track streaks for rowards 🎁 ... or risk
-          losing them like unusaved code!
-        </p>
       </div>
-    </ReactModal>
+    </Modal>
   )
 }
diff --git a/src/features/auth/components/authModal.css b/src/features/auth/components/authModal.css
index 3b99b7a7..4d956f23 100644
--- a/src/features/auth/components/authModal.css
+++ b/src/features/auth/components/authModal.css
@@ -1,25 +1,23 @@
 .authModal {
-  display: flex;
-  flex-direction: column;
-  row-gap: 30px;
-  overflow-y: hidden;
+  width: 400px;
 }
 
-.authModal .titleAndCloseBtn {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
+.authModal .header {
+  text-align: center;
+  justify-content: center;
 }
-
 .authModal .buttons {
-  display: flex;
+  display: inline-flex;
+  align-items: center;
+  justify-items: center;
   flex-direction: column;
   row-gap: 16px;
-  margin: auto;
+  width: 100%;
+  margin: 0 0 20px 0;
 }
 
 .authModal .description {
-  margin: 20px 100px;
+  padding: 20px;
   text-align: center;
+  font-size: 1em;
 }

From eb3b6db20effc0ae7de2f256fea35e11d0a06d6a Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sat, 22 Feb 2025 22:06:10 +0100
Subject: [PATCH 27/75] style: Adjust authModal width for responsive design

---
 src/features/auth/components/authModal.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/features/auth/components/authModal.css b/src/features/auth/components/authModal.css
index 4d956f23..f355d37c 100644
--- a/src/features/auth/components/authModal.css
+++ b/src/features/auth/components/authModal.css
@@ -1,7 +1,8 @@
-.authModal {
-  width: 400px;
+@media (min-width: 768px) {
+  .authModal {
+    width: 400px;
+  }
 }
-
 .authModal .header {
   text-align: center;
   justify-content: center;

From fe41293d84003e7035931672a11d64f90ae1eb69 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 23 Feb 2025 13:33:40 +0000
Subject: [PATCH 28/75] refactor: Remove bookmark import/export functionality
 from ProfileSettings component

---
 .../components/Profile/ProfileSettings.tsx    | 88 +------------------
 1 file changed, 1 insertion(+), 87 deletions(-)

diff --git a/src/features/settings/components/Profile/ProfileSettings.tsx b/src/features/settings/components/Profile/ProfileSettings.tsx
index bab79b57..12bcf862 100644
--- a/src/features/settings/components/Profile/ProfileSettings.tsx
+++ b/src/features/settings/components/Profile/ProfileSettings.tsx
@@ -1,11 +1,4 @@
-import { useRef } from 'react'
-import { RiFileDownloadFill, RiFileUploadFill } from 'react-icons/ri'
-import toast from 'react-simple-toasts'
-import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout'
 import { useAuth, User } from 'src/features/auth'
-import { BookmarkedPost } from 'src/features/bookmarks'
-import { useBookmarks } from 'src/stores/bookmarks'
-import { BookmarkItem } from '../BookmarkSettings'
 import './profileSettings.css'
 
 interface UserInfoProps {
@@ -36,84 +29,5 @@ const UserInfo = ({ user }: UserInfoProps) => {
 
 export const ProfileSettings = () => {
   const { user } = useAuth()
-
-  const inputFile = useRef<HTMLInputElement | null>(null)
-  const { initState, userBookmarks } = useBookmarks()
-
-  const importBookmarks = () => {
-    inputFile.current?.click()
-  }
-
-  const exportBookmarks = () => {
-    const blob = new Blob([JSON.stringify(userBookmarks, null, 2)], {
-      type: 'application/json',
-    })
-    const downloadURL = URL.createObjectURL(blob)
-    const link = document.createElement('a')
-    link.href = downloadURL
-    link.download = 'hackertabBookmarks'
-    link.click()
-  }
-
-  const handleFileChange = (event: any) => {
-    const file = event.target.files?.[0]
-    if (file) {
-      const reader = new FileReader()
-      reader.onload = () => {
-        const importData: BookmarkedPost[] = JSON.parse(reader.result as string)
-        const validatedData = importData
-          .filter(
-            (data: BookmarkedPost) =>
-              data.title &&
-              data.url &&
-              !userBookmarks.some((bm) => bm.title === data.title && bm.url === data.url)
-          )
-          .map((data) => ({
-            title: data.title,
-            url: data.url,
-            source: data.source || '',
-            sourceType: data.sourceType || '',
-          }))
-        initState({
-          userBookmarks: [...userBookmarks, ...validatedData],
-        })
-        toast('Your bookmarks have been successfully imported', { theme: 'defaultToast' })
-      }
-      reader.readAsText(file)
-    }
-  }
-
-  return (
-    <div className="profile">
-      {user != null && <UserInfo user={user} />}
-      <SettingsContentLayout
-        title="Bookmarks"
-        description="Find all your bookmarks here. You can remove a bookmark by clicking on the remove icon."
-        actions={
-          <>
-            <input
-              type="file"
-              id="file"
-              ref={inputFile}
-              accept="application/json"
-              className="hidden"
-              onChange={handleFileChange}
-            />
-            <button className="extraBtn extraTextBtn" onClick={() => importBookmarks()}>
-              <RiFileUploadFill />
-              &nbsp;Import
-            </button>
-            <button className="extraBtn" onClick={() => exportBookmarks()}>
-              <RiFileDownloadFill />
-            </button>
-          </>
-        }>
-        <div className="bookmarks">
-          {userBookmarks.map((bm) => (
-            <BookmarkItem item={bm} key={bm.url} />
-          ))}
-        </div>
-      </SettingsContentLayout>
-    </div>
-  )
+  return <div className="profile">{user != null && <UserInfo user={user} />}</div>
 }

From c7d52a1543eab04a15168b82536c2d66b3df8252 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 23 Feb 2025 13:35:27 +0000
Subject: [PATCH 29/75] feat: Add CircleButton component with customizable
 sizes and variants

---
 src/components/Elements/Button/Button.css     | 72 ++++++++++++++++---
 .../Elements/Button/CircleButton.tsx          | 36 ++++++++++
 src/components/Elements/Button/index.ts       |  1 +
 3 files changed, 98 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Elements/Button/CircleButton.tsx

diff --git a/src/components/Elements/Button/Button.css b/src/components/Elements/Button/Button.css
index ebe1ec04..722eea52 100644
--- a/src/components/Elements/Button/Button.css
+++ b/src/components/Elements/Button/Button.css
@@ -11,21 +11,71 @@
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
+
   &:hover {
     background-color: var(--button-hover-background-color);
     color: var(--button-hover-text-color);
   }
-}
 
-button.small {
-  padding: 0.3rem 0.75rem;
-  font-size: 0.875rem;
-}
-button.medium {
-  padding: 0.75rem 1.2rem;
-  font-size: 1.1rem;
+  &.small {
+    padding: 0.3rem 0.75rem;
+    font-size: 0.875rem;
+  }
+
+  &.medium {
+    padding: 0.75rem 1rem;
+    font-size: 1.1rem;
+    height: 40px;
+  }
+
+  &.large {
+    padding: 1rem 2rem;
+    font-size: 1.25rem;
+  }
 }
-button.large {
-  padding: 1rem 2rem;
-  font-size: 1.25rem;
+
+.round-icon-button {
+  border-radius: 50px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: none;
+  padding: 0;
+  padding: 0;
+
+  &.small {
+    min-width: 30px;
+    height: 30px;
+  }
+
+  &.medium {
+    min-width: 40px;
+    height: 40px;
+  }
+
+  &.large {
+    min-width: 50px;
+    height: 50px;
+  }
+
+  &.primary {
+    background-color: var(--button-background-color);
+    color: var(--button-text-color);
+
+    &:hover {
+      background-color: var(--button-hover-background-color);
+      color: var(--button-hover-text-color);
+    }
+  }
+
+  &.dark-focus {
+    background-color: var(--dark-mode-background-color);
+    color: var(--dark-mode-text-color);
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
 }
diff --git a/src/components/Elements/Button/CircleButton.tsx b/src/components/Elements/Button/CircleButton.tsx
new file mode 100644
index 00000000..25127c66
--- /dev/null
+++ b/src/components/Elements/Button/CircleButton.tsx
@@ -0,0 +1,36 @@
+import clsx from 'clsx'
+
+const sizes = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+}
+
+const variants = {
+  primary: 'primary',
+  darkfocus: 'dark-focus',
+}
+
+type CircleButtonProps = {
+  className?: string
+  onClick: () => void
+  size?: keyof typeof sizes
+  variant?: keyof typeof variants
+  children: React.ReactNode
+}
+
+export const CircleButton = ({
+  size = 'medium',
+  variant = 'primary',
+  onClick,
+  className,
+  children,
+}: CircleButtonProps) => {
+  return (
+    <button
+      className={clsx('round-icon-button', sizes[size], variants[variant], className)}
+      onClick={onClick}>
+      {children}
+    </button>
+  )
+}
diff --git a/src/components/Elements/Button/index.ts b/src/components/Elements/Button/index.ts
index 8486fd6d..9a7dca3d 100644
--- a/src/components/Elements/Button/index.ts
+++ b/src/components/Elements/Button/index.ts
@@ -1 +1,2 @@
 export * from './Button'
+export * from './CircleButton'

From 359269c1f88f2d9ef968a9e08f9093f316322f70 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 23 Feb 2025 13:35:44 +0000
Subject: [PATCH 30/75] refactor: Replace button elements with CircleButton and
 Button components in Header and BookmarkSettings

---
 src/components/Layout/Header.tsx              | 53 ++++++++++---------
 .../BookmarkSettings/BookmarkSettings.tsx     | 16 +++---
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index 8c6a1708..b9d1c7e2 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { BsFillBookmarksFill, BsFillGearFill, BsMoonFill } from 'react-icons/bs'
 import { CgTab } from 'react-icons/cg'
-import { FaUserLarge } from 'react-icons/fa6'
+import { FaUser } from 'react-icons/fa'
 import { IoMdSunny } from 'react-icons/io'
 import { MdDoDisturbOff } from 'react-icons/md'
 import { RxArrowLeft } from 'react-icons/rx'
@@ -14,6 +14,7 @@ import { Changelog } from 'src/features/changelog'
 import { identifyUserTheme, trackDNDDisable, trackThemeSelect } from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
 import { useUserPreferences } from 'src/stores/preferences'
+import { Button, CircleButton } from '../Elements'
 
 export const Header = () => {
   const { openAuthModal, user, isConnected } = useAuth()
@@ -78,37 +79,37 @@ export const Header = () => {
           <Changelog />
         </span>
         <SearchBar />
-        <div className="extras">
+        <div className="buttonsFlex extras">
           {isDNDModeActive() && (
-            <button className="extraBtn extraTextBtn" onClick={() => onUnpauseClicked()}>
+            <Button onClick={onUnpauseClicked} className="dndButton">
               <MdDoDisturbOff />
-              &nbsp;Unpause
-            </button>
+              Unpause
+            </Button>
           )}
-          <button aria-label="Open settings" className="extraBtn" onClick={onSettingsClick}>
+
+          <CircleButton onClick={onSettingsClick}>
             <BsFillGearFill />
-          </button>
-          <button
-            aria-label="Toggle theme"
-            className="extraBtn darkModeBtn"
-            onClick={onThemeChange}>
+          </CircleButton>
+          <CircleButton onClick={onThemeChange} variant="darkfocus">
             {themeIcon}
-          </button>
-          <Link to="/settings/bookmarks" className="extraBtn" aria-label="Open bookmarks">
-            <>
-              <BsFillBookmarksFill />
-              <BookmarksBadgeCount />
-            </>
-          </Link>
-          {isConnected() ? (
-            <Link to="/settings/profile" aria-label="Open profile">
+          </CircleButton>
+          <CircleButton onClick={() => navigate('/settings/bookmarks')}>
+            <BsFillBookmarksFill />
+          </CircleButton>
+          <CircleButton
+            onClick={() => {
+              if (isConnected()) {
+                navigate('/settings/profile')
+              } else {
+                openAuthModal()
+              }
+            }}>
+            {isConnected() ? (
               <img className="profileImage" src={user?.imageURL} />
-            </Link>
-          ) : (
-            <button aria-label="open login" className="extraBtn" onClick={openAuthModal}>
-              <FaUserLarge />
-            </button>
-          )}
+            ) : (
+              <FaUser style={{ fontSize: '1.2em' }} />
+            )}
+          </CircleButton>
         </div>
         {location.pathname === '/' ? (
           <UserTags />
diff --git a/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx b/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx
index 1bf252dc..ced39f85 100644
--- a/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx
+++ b/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx
@@ -2,7 +2,7 @@ import { useRef } from 'react'
 import { BiBookmarkMinus } from 'react-icons/bi'
 import { RiFileDownloadFill, RiFileUploadFill } from 'react-icons/ri'
 import toast from 'react-simple-toasts'
-import { CardLink } from 'src/components/Elements'
+import { Button, CardLink, CircleButton } from 'src/components/Elements'
 import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout'
 import { SUPPORTED_CARDS } from 'src/config/supportedCards'
 import { BookmarkedPost } from 'src/features/bookmarks'
@@ -115,7 +115,7 @@ export const BookmarkSettings = () => {
         title="Bookmarks"
         description="Find all your bookmarks here. You can remove a bookmark by clicking on the remove icon."
         actions={
-          <>
+          <div className="buttonsFlex">
             <input
               type="file"
               id="file"
@@ -124,14 +124,14 @@ export const BookmarkSettings = () => {
               className="hidden"
               onChange={handleFileChange}
             />
-            <button className="extraBtn extraTextBtn" onClick={() => importBookmarks()}>
+            <Button onClick={importBookmarks} className="dndButton">
               <RiFileUploadFill />
-              &nbsp;Import
-            </button>
-            <button className="extraBtn" onClick={() => exportBookmarks()}>
+              Import
+            </Button>
+            <CircleButton onClick={() => exportBookmarks()}>
               <RiFileDownloadFill />
-            </button>
-          </>
+            </CircleButton>
+          </div>
         }>
         <div className="bookmarks">
           {userBookmarks.map((bm) => (

From b2338b3178cc67396f59ad09803772deb9bec38b Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 23 Feb 2025 13:37:30 +0000
Subject: [PATCH 31/75] refactor: Simplify Button usage in BookmarkSettings
 component

---
 .../settings/components/BookmarkSettings/BookmarkSettings.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx b/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx
index ced39f85..b27d8ce6 100644
--- a/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx
+++ b/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx
@@ -124,7 +124,7 @@ export const BookmarkSettings = () => {
               className="hidden"
               onChange={handleFileChange}
             />
-            <Button onClick={importBookmarks} className="dndButton">
+            <Button onClick={importBookmarks}>
               <RiFileUploadFill />
               Import
             </Button>

From 0914b6c0bf4487f41f319c8788816cbbcf650dea Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 23 Feb 2025 13:38:07 +0000
Subject: [PATCH 32/75] refactor: Update button styles and layout in App.css
 for improved flexibility and alignment

---
 src/assets/App.css | 56 +++++-----------------------------------------
 1 file changed, 6 insertions(+), 50 deletions(-)

diff --git a/src/assets/App.css b/src/assets/App.css
index 87b9a033..6343f399 100644
--- a/src/assets/App.css
+++ b/src/assets/App.css
@@ -122,68 +122,24 @@ a {
 }
 
 .extras {
-  display: nore;
-  flex-direction: row;
-  align-content: center;
   order: 2;
 }
 
-.extraBtn {
-  background-color: var(--button-background-color);
-  color: var(--button-text-color);
-  margin-left: 8px;
-  height: 40px;
-  width: 40px;
-  line-height: 44px;
-  font-size: 18px;
-  text-align: center;
-  border: 0;
-  border-radius: 20px;
-  cursor: pointer;
-  position: relative;
+.buttonsFlex {
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.extraBtn:first-child {
-  margin-left: 0;
-}
-
-.extraTextBtn {
-  padding: 0 16px;
-  width: auto;
-  min-width: 40px;
-  font-weight: bold;
-}
-
-.darkModeBtn {
-  background-color: var(--dark-mode-background-color);
-  color: var(--dark-mode-text-color);
+  flex-direction: row;
+  align-content: center;
+  column-gap: 8px;
+  row-gap: 8px;
 }
 
-.extraTextWithIconBtn {
-  background-color: var(--button-background-color);
-  color: var(--button-text-color);
-  height: 40px;
-  width: auto;
-  padding: 0 16px;
-  min-width: 40px;
+.dndButton {
   font-weight: bold;
-  font-size: 18px;
-  text-align: center;
-  border: 0;
-  border-radius: 20px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
 }
 
 .profileImage {
   height: 40px;
   width: 40px;
-  margin-left: 8px;
   border-radius: 20px;
 }
 

From c4d7f33e22a9a43af198d3e3571efef2f1e1eaad Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 23 Feb 2025 13:47:36 +0000
Subject: [PATCH 33/75] refactor: Rename round-icon-button class to
 circle-button for consistency and clarity

---
 src/components/Elements/Button/Button.css       | 4 ++--
 src/components/Elements/Button/CircleButton.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Elements/Button/Button.css b/src/components/Elements/Button/Button.css
index 722eea52..4a336c1f 100644
--- a/src/components/Elements/Button/Button.css
+++ b/src/components/Elements/Button/Button.css
@@ -34,7 +34,7 @@
   }
 }
 
-.round-icon-button {
+.circle-button {
   border-radius: 50px;
   cursor: pointer;
   display: inline-flex;
@@ -44,7 +44,7 @@
   border: none;
   padding: 0;
   padding: 0;
-
+  font-size: 1.1em;
   &.small {
     min-width: 30px;
     height: 30px;
diff --git a/src/components/Elements/Button/CircleButton.tsx b/src/components/Elements/Button/CircleButton.tsx
index 25127c66..c6877f3d 100644
--- a/src/components/Elements/Button/CircleButton.tsx
+++ b/src/components/Elements/Button/CircleButton.tsx
@@ -28,7 +28,7 @@ export const CircleButton = ({
 }: CircleButtonProps) => {
   return (
     <button
-      className={clsx('round-icon-button', sizes[size], variants[variant], className)}
+      className={clsx('circle-button', sizes[size], variants[variant], className)}
       onClick={onClick}>
       {children}
     </button>

From 31d70b34c881c39baba7e96b798bdcbff37be6b0 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 23 Feb 2025 19:34:52 +0000
Subject: [PATCH 34/75] fix: Add validation for Firebase configuration to
 prevent initialization errors

---
 src/lib/firebase.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts
index 159a6435..a9aec2e1 100644
--- a/src/lib/firebase.ts
+++ b/src/lib/firebase.ts
@@ -20,6 +20,17 @@ const firebaseConfig = {
   measurementId: FIREBASE_MEASUREMENT_ID,
 }
 
+if (
+  !FIREBASE_API_KEY ||
+  !FIREBASE_APP_ID ||
+  !FIREBASE_AUTH_DOMAIN ||
+  !FIREBASE_MEASUREMENT_ID ||
+  !FIREBASE_MESSAGING_SENDER_ID ||
+  !FIREBASE_PROJECT_ID ||
+  !FIREBASE_STORAGE_BUCKET
+) {
+  console.warn('Missing Firebase configuration')
+}
 // Initialize Firebase
 const app = initializeApp(firebaseConfig)
 const firebaseAuth = getAuth(app)

From b20b44aba4307492d9f29139b2dc05ff1336b1e1 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 23 Feb 2025 19:39:59 +0000
Subject: [PATCH 35/75] refactor: Move input styles to App.css and replace
 button with Button component in ShareModal

---
 src/assets/App.css                            | 26 +++++++++++++++++
 .../GeneralSettings/generalSettings.css       | 28 -------------------
 .../shareModal/components/ShareModal.tsx      | 12 ++++++--
 3 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/assets/App.css b/src/assets/App.css
index 6343f399..051f5273 100644
--- a/src/assets/App.css
+++ b/src/assets/App.css
@@ -1397,7 +1397,33 @@ Modal
 .modalCloseBtn:hover {
   opacity: 0.7;
 }
+.settingContent .form {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.settingContent input[type='text'] {
+  flex: 1;
+  background-color: var(--settings-input-background-color);
+  border: 1px solid var(--settings-input-border-color);
+  border-radius: 50px;
+  padding: 6px 18px;
+  color: var(--settings-input-text-color);
+  font-size: 14px;
+}
 
+.settingContent input[type='text']::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: var(--settings-input-placeholder-color);
+  opacity: 1;
+  font-size: 14px;
+}
+
+.settingContent input[type='text']:focus {
+  border-color: var(--settings-input-border-focus-color);
+}
 @media (max-width: 768px) {
   .Modal {
     left: 0;
diff --git a/src/features/settings/components/GeneralSettings/generalSettings.css b/src/features/settings/components/GeneralSettings/generalSettings.css
index c80a8028..7cd58388 100644
--- a/src/features/settings/components/GeneralSettings/generalSettings.css
+++ b/src/features/settings/components/GeneralSettings/generalSettings.css
@@ -16,34 +16,6 @@
   border-bottom: 1px solid var(--card-content-divider);
 }
 
-.settingContent .form {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12px;
-}
-
-.settingContent input[type='text'] {
-  flex: 1;
-  background-color: var(--settings-input-background-color);
-  border: 1px solid var(--settings-input-border-color);
-  border-radius: 50px;
-  padding: 6px 18px;
-  color: var(--settings-input-text-color);
-  font-size: 14px;
-}
-
-.settingContent input[type='text']::placeholder {
-  /* Chrome, Firefox, Opera, Safari 10.1+ */
-  color: var(--settings-input-placeholder-color);
-  opacity: 1;
-  font-size: 14px;
-}
-
-.settingContent input[type='text']:focus {
-  border-color: var(--settings-input-border-focus-color);
-}
-
 .settingContent button {
   display: flex;
   align-items: center;
diff --git a/src/features/shareModal/components/ShareModal.tsx b/src/features/shareModal/components/ShareModal.tsx
index cab95c4c..103e5bd1 100644
--- a/src/features/shareModal/components/ShareModal.tsx
+++ b/src/features/shareModal/components/ShareModal.tsx
@@ -17,6 +17,7 @@ import {
   WhatsappShareButton,
 } from 'react-share'
 import toast from 'react-simple-toasts'
+import { Button } from 'src/components/Elements'
 import { twitterHandle } from 'src/config'
 import { trackLinkCopy, trackLinkShare } from 'src/lib/analytics'
 import { ShareModalData } from '../types'
@@ -118,9 +119,14 @@ export const ShareModal = ({ showModal, closeModal, shareData }: ShareModalProps
           <div className="settingContent">
             <div className="form">
               <input type="text" value={link} disabled />
-              <button aria-label="Copy url to clipboard" onClick={() => onCopyClicked()}>
-                <VscCopy /> Copy
-              </button>
+
+              <Button
+                aria-label="Copy url to clipboard"
+                startIcon={<VscCopy />}
+                onClick={onCopyClicked}
+                size="small">
+                Copy
+              </Button>
             </div>
           </div>
         </div>

From d22b91125e78fb8f57f825536301681d32418feb Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Mon, 24 Feb 2025 21:06:23 +0100
Subject: [PATCH 36/75] feat: Remove unused idToken and email

---
 src/features/auth/components/AuthModal.tsx | 9 ++-------
 src/features/auth/hooks/useAuth.ts         | 3 +--
 src/features/auth/stores/authStore.ts      | 2 --
 src/features/auth/types/index.ts           | 1 -
 4 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index 142c75d4..b34f87e8 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -1,4 +1,4 @@
-import { AuthProvider, OAuthProvider, signInWithPopup } from 'firebase/auth'
+import { AuthProvider, signInWithPopup } from 'firebase/auth'
 import { FaGithub } from 'react-icons/fa'
 import { FcGoogle } from 'react-icons/fc'
 import { IoHeartCircle } from 'react-icons/io5'
@@ -19,19 +19,14 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
   const signIn = (provider: AuthProvider) => {
     signInWithPopup(firebaseAuth, provider)
       .then((result) => {
-        const credential = OAuthProvider.credentialFromResult(result)
-        const idToken = credential?.idToken
-        const email = result.user.displayName
         const name = result.user.displayName
         const imageURL = result.user.photoURL
-        if (idToken && name && email && imageURL) {
+        if (name && imageURL) {
           trackUserConnect(provider.providerId)
           closeAuthModal()
           initState({
-            idToken: idToken,
             user: {
               name: name,
-              email: email,
               imageURL: imageURL,
             },
           })
diff --git a/src/features/auth/hooks/useAuth.ts b/src/features/auth/hooks/useAuth.ts
index 35b9f044..45b0883c 100644
--- a/src/features/auth/hooks/useAuth.ts
+++ b/src/features/auth/hooks/useAuth.ts
@@ -4,7 +4,7 @@ import { trackUserDisconnect } from 'src/lib/analytics'
 export const useAuth = () => {
   const { isAuthModalOpen, openAuthModal, closeAuthModal } = AuthModalStore()
   const authStore = AuthStore()
-  const { idToken, user, initState, clear } = authStore
+  const { user, initState, clear } = authStore
 
   const isConnected = () => user != null
 
@@ -20,7 +20,6 @@ export const useAuth = () => {
     isConnected,
     logout,
     isAuthModalOpen,
-    idToken,
     user,
   }
 }
diff --git a/src/features/auth/stores/authStore.ts b/src/features/auth/stores/authStore.ts
index 712d6c5b..095f97e2 100644
--- a/src/features/auth/stores/authStore.ts
+++ b/src/features/auth/stores/authStore.ts
@@ -3,7 +3,6 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
 type AuthState = {
-  idToken: string | null
   user: User | null
 }
 
@@ -19,7 +18,6 @@ export const AuthStore = create(
       user: null,
       initState: (newState: AuthState) =>
         set({
-          idToken: newState.idToken,
           user: newState.user,
         }),
       clear: () => set({ user: null }),
diff --git a/src/features/auth/types/index.ts b/src/features/auth/types/index.ts
index e562e593..a84ee5da 100644
--- a/src/features/auth/types/index.ts
+++ b/src/features/auth/types/index.ts
@@ -1,5 +1,4 @@
 export type User = {
   name: string
-  email: string
   imageURL?: string
 }

From 9fb260b94cff90492fb723281d48533a2cee7d8e Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Mon, 24 Feb 2025 21:18:07 +0100
Subject: [PATCH 37/75] feat: Remove Profile page + Moved userInfo to General
 settings.

---
 src/components/Layout/Header.tsx              |  2 +-
 .../Layout/SettingsLayout/SettingsLayout.tsx  |  4 --
 src/features/auth/components/AuthModal.tsx    |  1 +
 src/features/auth/hooks/useAuth.ts            |  3 +-
 src/features/auth/stores/authStore.ts         |  4 +-
 .../GeneralSettings/GeneralSettings.tsx       | 27 +++++++++-
 .../GeneralSettings/generalSettings.css       | 28 +++++++++++
 .../components/Profile/ProfileSettings.tsx    | 33 -------------
 .../components/Profile/profileSettings.css    | 49 -------------------
 src/features/settings/index.ts                |  2 +-
 src/routes/AppRoutes.tsx                      |  2 -
 11 files changed, 62 insertions(+), 93 deletions(-)
 delete mode 100644 src/features/settings/components/Profile/ProfileSettings.tsx
 delete mode 100644 src/features/settings/components/Profile/profileSettings.css

diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index b9d1c7e2..183d082a 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -99,7 +99,7 @@ export const Header = () => {
           <CircleButton
             onClick={() => {
               if (isConnected()) {
-                navigate('/settings/profile')
+                navigate('/settings/general')
               } else {
                 openAuthModal()
               }
diff --git a/src/components/Layout/SettingsLayout/SettingsLayout.tsx b/src/components/Layout/SettingsLayout/SettingsLayout.tsx
index 0192e470..32d951ee 100644
--- a/src/components/Layout/SettingsLayout/SettingsLayout.tsx
+++ b/src/components/Layout/SettingsLayout/SettingsLayout.tsx
@@ -5,10 +5,6 @@ import './settings.css'
 
 export const SettingsLayout = () => {
   const navigation = [
-    {
-      name: 'Profile',
-      path: '/settings/profile',
-    },
     {
       name: 'Topics',
       path: '/settings/topics',
diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index b34f87e8..a6ff86b9 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -29,6 +29,7 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
               name: name,
               imageURL: imageURL,
             },
+            providerId: provider.providerId,
           })
         }
       })
diff --git a/src/features/auth/hooks/useAuth.ts b/src/features/auth/hooks/useAuth.ts
index 45b0883c..562d2b0a 100644
--- a/src/features/auth/hooks/useAuth.ts
+++ b/src/features/auth/hooks/useAuth.ts
@@ -4,7 +4,7 @@ import { trackUserDisconnect } from 'src/lib/analytics'
 export const useAuth = () => {
   const { isAuthModalOpen, openAuthModal, closeAuthModal } = AuthModalStore()
   const authStore = AuthStore()
-  const { user, initState, clear } = authStore
+  const { user, providerId, initState, clear } = authStore
 
   const isConnected = () => user != null
 
@@ -21,5 +21,6 @@ export const useAuth = () => {
     logout,
     isAuthModalOpen,
     user,
+    providerId,
   }
 }
diff --git a/src/features/auth/stores/authStore.ts b/src/features/auth/stores/authStore.ts
index 095f97e2..b9c30e95 100644
--- a/src/features/auth/stores/authStore.ts
+++ b/src/features/auth/stores/authStore.ts
@@ -4,6 +4,7 @@ import { persist } from 'zustand/middleware'
 
 type AuthState = {
   user: User | null
+  providerId: string | null
 }
 
 type AuthActions = {
@@ -14,11 +15,12 @@ type AuthActions = {
 export const AuthStore = create(
   persist<AuthState & AuthActions>(
     (set) => ({
-      idToken: null,
       user: null,
+      providerId: null,
       initState: (newState: AuthState) =>
         set({
           user: newState.user,
+          providerId: newState.providerId,
         }),
       clear: () => set({ user: null }),
     }),
diff --git a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
index 0915c0ef..f808834f 100644
--- a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
+++ b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import Toggle from 'react-toggle'
 import 'react-toggle/style.css'
-import { ChipsSet } from 'src/components/Elements'
+import { Button, ChipsSet } from 'src/components/Elements'
 import { Footer } from 'src/components/Layout'
 import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout'
+import { useAuth, User } from 'src/features/auth'
 import {
   identifyUserLinksInNewTab,
   identifyUserListingMode,
@@ -19,6 +20,27 @@ import { Option } from 'src/types'
 import { DNDSettings } from './DNDSettings'
 import './generalSettings.css'
 
+interface UserInfoProps {
+  user: User
+}
+
+const UserInfo = ({ user }: UserInfoProps) => {
+  const { logout, providerId } = useAuth()
+
+  return (
+    <div className="userContent">
+      {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
+      <div className="userInfos">
+        <div className="userName">{user.name}</div>
+        <div className="providerId">Logged using {providerId}</div>
+      </div>
+      <Button className="logoutBtn" onClick={logout}>
+        Logout
+      </Button>
+    </div>
+  )
+}
+
 export const GeneralSettings = () => {
   const {
     openLinksNewTab,
@@ -62,6 +84,8 @@ export const GeneralSettings = () => {
     }
   }
 
+  const { user } = useAuth()
+
   return (
     <SettingsContentLayout
       title="General Settings"
@@ -69,6 +93,7 @@ export const GeneralSettings = () => {
         'Customize your experience by selecting the number of cards you want to see, the search engine you want to use and more.'
       }>
       <div>
+        {user != null && <UserInfo user={user} />}
         <div className="settingRow">
           <p className="settingTitle">Max number of cards to display</p>
           <div className="settingContent">
diff --git a/src/features/settings/components/GeneralSettings/generalSettings.css b/src/features/settings/components/GeneralSettings/generalSettings.css
index 7cd58388..96f97969 100644
--- a/src/features/settings/components/GeneralSettings/generalSettings.css
+++ b/src/features/settings/components/GeneralSettings/generalSettings.css
@@ -93,3 +93,31 @@ Select styles
   border-radius: 20px !important;
   color: var(--tag-secondary-color) !important;
 }
+
+.userContent {
+  width: auto;
+  padding: 20px 10px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--card-content-divider);
+}
+.userContent .userImage {
+  width: 60px;
+  height: 60px;
+  border-radius: 100%;
+}
+.userContent .userInfos {
+  width: auto;
+  margin-left: 10px;
+}
+.userContent .userName {
+  font-size: larger;
+  font-weight: 600;
+}
+.userContent .userEmail {
+  font-size: medium;
+  margin-top: 6px;
+}
+.userContent .logoutBtn {
+  margin-left: auto;
+}
diff --git a/src/features/settings/components/Profile/ProfileSettings.tsx b/src/features/settings/components/Profile/ProfileSettings.tsx
deleted file mode 100644
index 12bcf862..00000000
--- a/src/features/settings/components/Profile/ProfileSettings.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useAuth, User } from 'src/features/auth'
-import './profileSettings.css'
-
-interface UserInfoProps {
-  user: User
-}
-
-const UserInfo = ({ user }: UserInfoProps) => {
-  const { logout } = useAuth()
-
-  return (
-    <div className="userCard">
-      {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
-      <div className="userInfos">
-        <div className="userName">{user.name}</div>
-        <div className="userEmail">{user?.email}</div>
-      </div>
-      <div className="actions">
-        <button className="logoutBtn" onClick={logout}>
-          Logout
-        </button>
-        <button className="logoutBtn" onClick={() => {}}>
-          Delete account
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export const ProfileSettings = () => {
-  const { user } = useAuth()
-  return <div className="profile">{user != null && <UserInfo user={user} />}</div>
-}
diff --git a/src/features/settings/components/Profile/profileSettings.css b/src/features/settings/components/Profile/profileSettings.css
deleted file mode 100644
index 229fba7b..00000000
--- a/src/features/settings/components/Profile/profileSettings.css
+++ /dev/null
@@ -1,49 +0,0 @@
-.profile {
-  width: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.profile .userCard {
-  width: auto;
-  background-color: var(--placeholder-background-color);
-  padding: 10px;
-  margin: 10px;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-}
-.profile .userImage {
-  width: 60px;
-  height: 60px;
-  border-radius: 20%;
-}
-.profile .userInfos {
-  width: auto;
-  margin-left: 10px;
-}
-.profile .userName {
-  font-size: larger;
-  font-weight: 600;
-}
-.profile .userEmail {
-  font-size: medium;
-  margin-top: 6px;
-}
-.profile .actions {
-  margin-left: auto;
-}
-
-.profile .logoutBtn {
-  font-size: medium;
-  padding: 8px 20px;
-  background-color: #e57373;
-  color: var(--button-text-color);
-  border: 0;
-  border-radius: 20px;
-  font-weight: bold;
-  font-size: 16px;
-  text-align: center;
-  margin-left: 8px;
-}
diff --git a/src/features/settings/index.ts b/src/features/settings/index.ts
index 51b48eb0..74f1de9f 100644
--- a/src/features/settings/index.ts
+++ b/src/features/settings/index.ts
@@ -1,6 +1,6 @@
 export * from './components/BookmarkSettings'
 export * from './components/GeneralSettings'
-export * from './components/Profile/ProfileSettings'
+
 export * from './components/SearchEngineSettings'
 export * from './components/SourceSettings'
 export * from './components/TopicSettings'
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index 1f035de0..eb96e47d 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -12,7 +12,6 @@ const { SearchEngineSettings } = lazyImport(
 )
 const { BookmarkSettings } = lazyImport(() => import('src/features/settings'), 'BookmarkSettings')
 const { TopicSettings } = lazyImport(() => import('src/features/settings'), 'TopicSettings')
-const { ProfileSettings } = lazyImport(() => import('src/features/settings'), 'ProfileSettings')
 
 export const AppRoutes = () => {
   return (
@@ -20,7 +19,6 @@ export const AppRoutes = () => {
       <Routes>
         <Route element={<AppLayout />}>
           <Route path="/settings" element={<SettingsLayout />}>
-            <Route path="profile" element={<ProfileSettings />} />
             <Route path="bookmarks" element={<BookmarkSettings />} />
             <Route path="topics" element={<TopicSettings />} />
             <Route path="sources" element={<SourceSettings />} />

From 6c89c50c57efad1ac50e2d6969f4f80e35a6b986 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Mon, 24 Feb 2025 20:39:25 +0000
Subject: [PATCH 38/75] feat: Replace button elements with Button component for
 consistency

---
 src/features/settings/components/AddSearchEngine.tsx  |  7 ++++---
 .../components/GeneralSettings/DNDSettings.tsx        |  5 ++++-
 .../components/GeneralSettings/generalSettings.css    |  8 +++++---
 src/features/settings/components/RssSetting.tsx       | 11 ++++++++---
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/features/settings/components/AddSearchEngine.tsx b/src/features/settings/components/AddSearchEngine.tsx
index 48fb8d26..c3613947 100644
--- a/src/features/settings/components/AddSearchEngine.tsx
+++ b/src/features/settings/components/AddSearchEngine.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { isValidURL } from 'src/utils/UrlUtils'
 
 import { TiPlus } from 'react-icons/ti'
+import { Button } from 'src/components/Elements'
 import { useUserPreferences } from 'src/stores/preferences'
 
 export const AddSearchEngine = () => {
@@ -45,9 +46,9 @@ export const AddSearchEngine = () => {
             placeholder="https://google.com?q="
           />
           <div>
-            <button onClick={onAddSearchEngine}>
-              <TiPlus /> Add
-            </button>
+            <Button startIcon={<TiPlus />} size="small" onClick={onAddSearchEngine}>
+              Add
+            </Button>
           </div>
         </div>
         {RssInputFeedback && (
diff --git a/src/features/settings/components/GeneralSettings/DNDSettings.tsx b/src/features/settings/components/GeneralSettings/DNDSettings.tsx
index 2385ec01..1ac8a1b5 100644
--- a/src/features/settings/components/GeneralSettings/DNDSettings.tsx
+++ b/src/features/settings/components/GeneralSettings/DNDSettings.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import Select, { SingleValue } from 'react-select'
+import { Button } from 'src/components/Elements'
 import { trackDNDEnable } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { diffBetweenTwoDatesInMinutes } from 'src/utils/DateUtils'
@@ -101,7 +102,9 @@ export const DNDSettings = () => {
             />
           </div>
 
-          <button onClick={onApplyClicked}>Apply</button>
+          <Button size="small" onClick={onApplyClicked}>
+            Apply
+          </Button>
         </div>
         {timeoutLabel() && (
           <div className="settingHint">
diff --git a/src/features/settings/components/GeneralSettings/generalSettings.css b/src/features/settings/components/GeneralSettings/generalSettings.css
index 96f97969..ff83201b 100644
--- a/src/features/settings/components/GeneralSettings/generalSettings.css
+++ b/src/features/settings/components/GeneralSettings/generalSettings.css
@@ -35,10 +35,12 @@
 .rssButton {
   background-color: #ee802f;
   color: white;
+  &:hover {
+    background-color: #f99147;
+    color: white;
+  }
 }
-.rssButton:hover {
-  opacity: 0.9;
-}
+
 .settingContent {
   width: 100%;
   flex: 1;
diff --git a/src/features/settings/components/RssSetting.tsx b/src/features/settings/components/RssSetting.tsx
index 54be6d6f..daefce43 100644
--- a/src/features/settings/components/RssSetting.tsx
+++ b/src/features/settings/components/RssSetting.tsx
@@ -5,6 +5,7 @@ import { identifyUserCards, trackRssSourceAdd } from 'src/lib/analytics'
 import { isValidURL } from 'src/utils/UrlUtils'
 
 import { BsRssFill } from 'react-icons/bs'
+import { Button } from 'src/components/Elements'
 import { useUserPreferences } from 'src/stores/preferences'
 import { SupportedCardType } from 'src/types'
 
@@ -78,9 +79,13 @@ export const RssSetting = () => {
             <BeatLoader color={'#A9B2BD'} loading={isRssInputLoading} size={6} />
           ) : (
             <div>
-              <button className="rssButton" onClick={onRssAddClick}>
-                <BsRssFill /> Add
-              </button>
+              <Button
+                startIcon={<BsRssFill />}
+                size="small"
+                className="rssButton"
+                onClick={onRssAddClick}>
+                Add
+              </Button>
             </div>
           )}
         </div>

From f9bf089554f9dd63cc7324fdd42441f8843ec71d Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Mon, 24 Feb 2025 20:54:16 +0000
Subject: [PATCH 39/75] feat: Update logout button size and adjust user info
 layout for better responsiveness

---
 .../settings/components/GeneralSettings/GeneralSettings.tsx     | 2 +-
 .../settings/components/GeneralSettings/generalSettings.css     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
index f808834f..a54de818 100644
--- a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
+++ b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
@@ -34,7 +34,7 @@ const UserInfo = ({ user }: UserInfoProps) => {
         <div className="userName">{user.name}</div>
         <div className="providerId">Logged using {providerId}</div>
       </div>
-      <Button className="logoutBtn" onClick={logout}>
+      <Button onClick={logout} size="small">
         Logout
       </Button>
     </div>
diff --git a/src/features/settings/components/GeneralSettings/generalSettings.css b/src/features/settings/components/GeneralSettings/generalSettings.css
index ff83201b..36133884 100644
--- a/src/features/settings/components/GeneralSettings/generalSettings.css
+++ b/src/features/settings/components/GeneralSettings/generalSettings.css
@@ -109,6 +109,7 @@ Select styles
   border-radius: 100%;
 }
 .userContent .userInfos {
+  flex: 1;
   width: auto;
   margin-left: 10px;
 }

From f62c62ee9c098d8dcbc534bd6cf9c485e8917143 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Mon, 24 Feb 2025 20:54:26 +0000
Subject: [PATCH 40/75] refactor: Simplify Header component by removing back
 navigation for home

---
 src/components/Layout/Header.tsx | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index 183d082a..f7b3403a 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -4,7 +4,6 @@ import { CgTab } from 'react-icons/cg'
 import { FaUser } from 'react-icons/fa'
 import { IoMdSunny } from 'react-icons/io'
 import { MdDoDisturbOff } from 'react-icons/md'
-import { RxArrowLeft } from 'react-icons/rx'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg'
 import { SearchBar } from 'src/components/Elements/SearchBar'
@@ -111,15 +110,7 @@ export const Header = () => {
             )}
           </CircleButton>
         </div>
-        {location.pathname === '/' ? (
-          <UserTags />
-        ) : (
-          <div className="backToHome">
-            <Link to="/">
-              <RxArrowLeft size={20} /> Back
-            </Link>
-          </div>
-        )}
+        {location.pathname === '/' && <UserTags />}
       </header>
     </>
   )

From 03367d534c09fea8f0cd40fd165551f8d85c90f2 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Mon, 24 Feb 2025 22:09:06 +0000
Subject: [PATCH 41/75] feat: Update user info display to show provider name
 instead of provider ID

---
 .../settings/components/GeneralSettings/GeneralSettings.tsx  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
index a54de818..f220128f 100644
--- a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
+++ b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
@@ -26,13 +26,16 @@ interface UserInfoProps {
 
 const UserInfo = ({ user }: UserInfoProps) => {
   const { logout, providerId } = useAuth()
+  const providerName = providerId?.split('.')[0] || 'Unknown'
 
   return (
     <div className="userContent">
       {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
       <div className="userInfos">
         <div className="userName">{user.name}</div>
-        <div className="providerId">Logged using {providerId}</div>
+        <div className="sub providerId">
+          Connected with <span className="capitalize">{providerName}</span>
+        </div>
       </div>
       <Button onClick={logout} size="small">
         Logout

From d67a39c8a4cbd1cdfcadbae0ebb297abce827b3e Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Mon, 24 Feb 2025 22:09:13 +0000
Subject: [PATCH 42/75] feat: Adjust user image size and enhance layout for
 user information in General Settings

---
 .../GeneralSettings/generalSettings.css         | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/features/settings/components/GeneralSettings/generalSettings.css b/src/features/settings/components/GeneralSettings/generalSettings.css
index 36133884..9280141c 100644
--- a/src/features/settings/components/GeneralSettings/generalSettings.css
+++ b/src/features/settings/components/GeneralSettings/generalSettings.css
@@ -104,23 +104,22 @@ Select styles
   border-bottom: 1px solid var(--card-content-divider);
 }
 .userContent .userImage {
-  width: 60px;
-  height: 60px;
+  width: 50px;
+  height: 50px;
   border-radius: 100%;
 }
 .userContent .userInfos {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
   width: auto;
   margin-left: 10px;
 }
 .userContent .userName {
-  font-size: larger;
   font-weight: 600;
 }
-.userContent .userEmail {
-  font-size: medium;
-  margin-top: 6px;
-}
-.userContent .logoutBtn {
-  margin-left: auto;
+.userContent .sub {
+  font-size: 0.9em;
+  opacity: 0.9;
 }

From e4010d4d0c78cbf27f97545edeeb16282d4b06c2 Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Mon, 24 Feb 2025 22:50:36 +0100
Subject: [PATCH 43/75] feat: Show auth provider icon in user info.

---
 .../components/GeneralSettings/GeneralSettings.tsx  |  7 +++++++
 .../components/GeneralSettings/generalSettings.css  | 13 ++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
index f220128f..c89877d2 100644
--- a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
+++ b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
@@ -1,4 +1,6 @@
 import React from 'react'
+import { FaGithub } from 'react-icons/fa'
+import { FcGoogle } from 'react-icons/fc'
 import Toggle from 'react-toggle'
 import 'react-toggle/style.css'
 import { Button, ChipsSet } from 'src/components/Elements'
@@ -34,6 +36,11 @@ const UserInfo = ({ user }: UserInfoProps) => {
       <div className="userInfos">
         <div className="userName">{user.name}</div>
         <div className="sub providerId">
+          {providerId == 'github.com' ? (
+            <FaGithub />
+          ) : providerId == 'google.com' ? (
+            <FcGoogle />
+          ) : null}
           Connected with <span className="capitalize">{providerName}</span>
         </div>
       </div>
diff --git a/src/features/settings/components/GeneralSettings/generalSettings.css b/src/features/settings/components/GeneralSettings/generalSettings.css
index 9280141c..16ae1e2e 100644
--- a/src/features/settings/components/GeneralSettings/generalSettings.css
+++ b/src/features/settings/components/GeneralSettings/generalSettings.css
@@ -98,7 +98,7 @@ Select styles
 
 .userContent {
   width: auto;
-  padding: 20px 10px;
+  padding: 20px 0px;
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--card-content-divider);
@@ -119,7 +119,18 @@ Select styles
 .userContent .userName {
   font-weight: 600;
 }
+
 .userContent .sub {
   font-size: 0.9em;
   opacity: 0.9;
 }
+.userContent .providerId {
+  font-size: medium;
+  margin-top: 6px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.userContent .logoutBtn {
+  margin-left: auto;
+}

From 1b5fd18d714bc6e536905b009b896dfd62332313 Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Tue, 25 Feb 2025 22:57:52 +0100
Subject: [PATCH 44/75] feat: Create ConfirmModal component.

---
 .../Elements/Modal/ConfirmModal.tsx           | 42 +++++++++++++++++++
 .../Elements/Modal/confirmModal.css           | 20 +++++++++
 src/components/Elements/Modal/index.ts        |  1 +
 3 files changed, 63 insertions(+)
 create mode 100644 src/components/Elements/Modal/ConfirmModal.tsx
 create mode 100644 src/components/Elements/Modal/confirmModal.css

diff --git a/src/components/Elements/Modal/ConfirmModal.tsx b/src/components/Elements/Modal/ConfirmModal.tsx
new file mode 100644
index 00000000..a1e70b00
--- /dev/null
+++ b/src/components/Elements/Modal/ConfirmModal.tsx
@@ -0,0 +1,42 @@
+import { Button, Modal } from 'src/components/Elements'
+import './confirmModal.css'
+
+interface LogoutModalProps {
+  showModal: boolean
+  title: string
+  description: string
+  onClose: () => void
+  onConfirm: () => void
+}
+
+export const ConfirmModal = ({
+  showModal,
+  title,
+  description,
+  onClose,
+  onConfirm,
+}: LogoutModalProps) => {
+  return (
+    <Modal
+      showModal={showModal}
+      onClose={onClose}
+      header={{
+        title: title,
+        className: undefined,
+        icon: undefined,
+      }}
+      className="confirmModal">
+      <div className="content">
+        <p className="description">{description}</p>
+        <div className="buttons">
+          <Button onClick={onClose} size="medium">
+            Cancel
+          </Button>
+          <Button onClick={onConfirm} size="medium">
+            Confirm
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
diff --git a/src/components/Elements/Modal/confirmModal.css b/src/components/Elements/Modal/confirmModal.css
new file mode 100644
index 00000000..aa2a27f3
--- /dev/null
+++ b/src/components/Elements/Modal/confirmModal.css
@@ -0,0 +1,20 @@
+@media (min-width: 768px) {
+  .confirmModal {
+    width: 400px;
+    overflow-y: hidden;
+  }
+}
+
+.confirmModal .content {
+  display: flex;
+  flex-direction: column;
+}
+.confirmModal .description {
+  font-size: 1em;
+}
+.confirmModal .buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-self: flex-end;
+}
diff --git a/src/components/Elements/Modal/index.ts b/src/components/Elements/Modal/index.ts
index 8d3bcd7a..701e747d 100644
--- a/src/components/Elements/Modal/index.ts
+++ b/src/components/Elements/Modal/index.ts
@@ -1 +1,2 @@
+export * from './ConfirmModal'
 export * from './Modal'

From 0bc49d45b2d4a296072f673b6b8b65bcc4fc3217 Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Tue, 25 Feb 2025 22:58:13 +0100
Subject: [PATCH 45/75] feat: Add logout confirm modal.

---
 .../GeneralSettings/GeneralSettings.tsx       | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
index c89877d2..01e4c6a1 100644
--- a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
+++ b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { FaGithub } from 'react-icons/fa'
 import { FcGoogle } from 'react-icons/fc'
 import Toggle from 'react-toggle'
 import 'react-toggle/style.css'
-import { Button, ChipsSet } from 'src/components/Elements'
+import { Button, ChipsSet, ConfirmModal } from 'src/components/Elements'
 import { Footer } from 'src/components/Layout'
 import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout'
 import { useAuth, User } from 'src/features/auth'
@@ -28,10 +28,21 @@ interface UserInfoProps {
 
 const UserInfo = ({ user }: UserInfoProps) => {
   const { logout, providerId } = useAuth()
+<<<<<<< HEAD
   const providerName = providerId?.split('.')[0] || 'Unknown'
+=======
+  const [showLogout, setShowLogout] = useState(false)
+>>>>>>> 0314c56 (feat: Add logout confirm modal.)
 
   return (
     <div className="userContent">
+      <ConfirmModal
+        showModal={showLogout}
+        title="Logout !"
+        description="Are you sure you want to logout ?"
+        onClose={() => setShowLogout(false)}
+        onConfirm={logout}
+      />
       {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
       <div className="userInfos">
         <div className="userName">{user.name}</div>
@@ -44,7 +55,11 @@ const UserInfo = ({ user }: UserInfoProps) => {
           Connected with <span className="capitalize">{providerName}</span>
         </div>
       </div>
+<<<<<<< HEAD
       <Button onClick={logout} size="small">
+=======
+      <Button className="logoutBtn" onClick={() => setShowLogout(true)}>
+>>>>>>> 0314c56 (feat: Add logout confirm modal.)
         Logout
       </Button>
     </div>

From e22c85cdf9de2221acbae8715aa94352d693163f Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Tue, 25 Feb 2025 23:04:23 +0100
Subject: [PATCH 46/75] feat: Logout firebase user.

---
 src/features/auth/hooks/useAuth.ts                            | 4 +++-
 .../settings/components/GeneralSettings/GeneralSettings.tsx   | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/features/auth/hooks/useAuth.ts b/src/features/auth/hooks/useAuth.ts
index 562d2b0a..46f5325a 100644
--- a/src/features/auth/hooks/useAuth.ts
+++ b/src/features/auth/hooks/useAuth.ts
@@ -1,5 +1,6 @@
 import { AuthModalStore, AuthStore } from 'src/features/auth'
 import { trackUserDisconnect } from 'src/lib/analytics'
+import { firebaseAuth } from 'src/lib/firebase'
 
 export const useAuth = () => {
   const { isAuthModalOpen, openAuthModal, closeAuthModal } = AuthModalStore()
@@ -8,9 +9,10 @@ export const useAuth = () => {
 
   const isConnected = () => user != null
 
-  const logout = () => {
+  const logout = async () => {
     trackUserDisconnect()
     clear()
+    return await firebaseAuth.signOut()
   }
 
   return {
diff --git a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
index 01e4c6a1..0cc1f3d8 100644
--- a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
+++ b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
@@ -22,6 +22,7 @@ import { Option } from 'src/types'
 import { DNDSettings } from './DNDSettings'
 import './generalSettings.css'
 
+// TODO Maybe we should create a separate folder in components for UserInfo ?
 interface UserInfoProps {
   user: User
 }

From 9a8b8ba8aa4ed974e2a06ac532777f6e9b34091a Mon Sep 17 00:00:00 2001
From: zouhir <rajdaouizouhir.pro@gmail.com>
Date: Tue, 25 Feb 2025 23:22:55 +0100
Subject: [PATCH 47/75] fix: Merge conflicts.

---
 .../components/GeneralSettings/GeneralSettings.tsx         | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
index 0cc1f3d8..32d3a96a 100644
--- a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
+++ b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
@@ -29,11 +29,8 @@ interface UserInfoProps {
 
 const UserInfo = ({ user }: UserInfoProps) => {
   const { logout, providerId } = useAuth()
-<<<<<<< HEAD
   const providerName = providerId?.split('.')[0] || 'Unknown'
-=======
   const [showLogout, setShowLogout] = useState(false)
->>>>>>> 0314c56 (feat: Add logout confirm modal.)
 
   return (
     <div className="userContent">
@@ -56,11 +53,7 @@ const UserInfo = ({ user }: UserInfoProps) => {
           Connected with <span className="capitalize">{providerName}</span>
         </div>
       </div>
-<<<<<<< HEAD
-      <Button onClick={logout} size="small">
-=======
       <Button className="logoutBtn" onClick={() => setShowLogout(true)}>
->>>>>>> 0314c56 (feat: Add logout confirm modal.)
         Logout
       </Button>
     </div>

From 8c918283dd10fc636a91d53ccf8f01bd97ae9bf9 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Tue, 25 Feb 2025 22:32:24 +0000
Subject: [PATCH 48/75] feat: Implement logout functionality using Firebase
 signOut

---
 src/features/auth/hooks/useAuth.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/features/auth/hooks/useAuth.ts b/src/features/auth/hooks/useAuth.ts
index 46f5325a..66b3518a 100644
--- a/src/features/auth/hooks/useAuth.ts
+++ b/src/features/auth/hooks/useAuth.ts
@@ -1,3 +1,4 @@
+import { signOut } from 'firebase/auth'
 import { AuthModalStore, AuthStore } from 'src/features/auth'
 import { trackUserDisconnect } from 'src/lib/analytics'
 import { firebaseAuth } from 'src/lib/firebase'
@@ -11,6 +12,7 @@ export const useAuth = () => {
 
   const logout = async () => {
     trackUserDisconnect()
+    signOut(firebaseAuth)
     clear()
     return await firebaseAuth.signOut()
   }

From 822890b35e5edbf4f7b5118d956e23ce9a12fc6c Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Tue, 25 Feb 2025 22:32:31 +0000
Subject: [PATCH 49/75] feat: Enhance user settings UI with improved logout
 button and layout adjustments

---
 .../components/GeneralSettings/GeneralSettings.tsx | 14 ++++++++------
 .../components/GeneralSettings/generalSettings.css | 13 ++++---------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
index 32d3a96a..330194dc 100644
--- a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
+++ b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
@@ -44,18 +44,20 @@ const UserInfo = ({ user }: UserInfoProps) => {
       {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
       <div className="userInfos">
         <div className="userName">{user.name}</div>
-        <div className="sub providerId">
+        <div className="sub">
           {providerId == 'github.com' ? (
-            <FaGithub />
+            <FaGithub size={18} />
           ) : providerId == 'google.com' ? (
-            <FcGoogle />
+            <FcGoogle size={18} />
           ) : null}
           Connected with <span className="capitalize">{providerName}</span>
         </div>
+        <div>
+          <Button className="logoutBtn" onClick={() => setShowLogout(true)} size="small">
+            Logout
+          </Button>
+        </div>
       </div>
-      <Button className="logoutBtn" onClick={() => setShowLogout(true)}>
-        Logout
-      </Button>
     </div>
   )
 }
diff --git a/src/features/settings/components/GeneralSettings/generalSettings.css b/src/features/settings/components/GeneralSettings/generalSettings.css
index 16ae1e2e..215e0bf8 100644
--- a/src/features/settings/components/GeneralSettings/generalSettings.css
+++ b/src/features/settings/components/GeneralSettings/generalSettings.css
@@ -107,12 +107,13 @@ Select styles
   width: 50px;
   height: 50px;
   border-radius: 100%;
+  align-self: flex-start;
 }
 .userContent .userInfos {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
   width: auto;
   margin-left: 10px;
 }
@@ -123,14 +124,8 @@ Select styles
 .userContent .sub {
   font-size: 0.9em;
   opacity: 0.9;
-}
-.userContent .providerId {
-  font-size: medium;
-  margin-top: 6px;
   display: flex;
+  flex-direction: row;
   align-items: center;
-  gap: 8px;
-}
-.userContent .logoutBtn {
-  margin-left: auto;
+  column-gap: 4px;
 }

From e8020018951c58fe8adfd0935d53644076abf96e Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Tue, 25 Feb 2025 22:38:55 +0000
Subject: [PATCH 50/75] refactor: Remove unused searchEngine prop from
 GeneralSettings component

---
 .../settings/components/GeneralSettings/GeneralSettings.tsx      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
index 330194dc..48d950ab 100644
--- a/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
+++ b/src/features/settings/components/GeneralSettings/GeneralSettings.tsx
@@ -67,7 +67,6 @@ export const GeneralSettings = () => {
     openLinksNewTab,
     listingMode,
     theme,
-    searchEngine,
     maxVisibleCards,
     setTheme,
     setListingMode,

From 329c02cfd2c3cdb479d5736ce1ed88910d10ea1d Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 15:15:48 +0000
Subject: [PATCH 51/75] feat: Update manifest files to version 3 and adjust
 permissions

---
 public/base.manifest.json    | 15 +++++++++++++++
 public/chrome.manifest.json  |  4 +---
 public/firefox.manifest.json | 20 ++++----------------
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/public/base.manifest.json b/public/base.manifest.json
index 13f81829..bc9cb09a 100644
--- a/public/base.manifest.json
+++ b/public/base.manifest.json
@@ -1,10 +1,25 @@
 {
+  "manifest_version": 3,
   "name": "Hackertab.dev - developer news",
   "description": "All developer news in one tab",
   "version": "1.20.1",
   "chrome_url_overrides": {
     "newtab": "index.html"
   },
+  "host_permissions": ["https://*.hackertab.dev/*"],
+  "content_scripts": [
+    {
+      "matches": [
+        "http://127.0.0.1:5173/*",
+        "http://localhost:5173/*",
+        "https://hackertab.dev/*",
+        "http://localhost:5173/*",
+        "https://hackertab-staging.deno.dev/*"
+      ],
+      "run_at": "document_start",
+      "js": ["content.js"]
+    }
+  ],
   "icons": {
     "16": "/logos/logo16.png",
     "32": "/logos/logo32.png",
diff --git a/public/chrome.manifest.json b/public/chrome.manifest.json
index 87acc9f8..fcb931e3 100644
--- a/public/chrome.manifest.json
+++ b/public/chrome.manifest.json
@@ -1,7 +1,5 @@
 {
-  "manifest_version": 3,
   "background": {
     "service_worker": "background.js"
-  },
-  "host_permissions": ["https://*.hackertab.dev/*"]
+  }
 }
diff --git a/public/firefox.manifest.json b/public/firefox.manifest.json
index db181686..769e74b6 100644
--- a/public/firefox.manifest.json
+++ b/public/firefox.manifest.json
@@ -1,17 +1,5 @@
 {
-    "manifest_version": 2,
-    "background": {
-      "scripts": [
-        "background.js"
-      ]
-    },
-    "permissions": [
-      "https://*.hackertab.dev/*"
-    ],
-    "content_security_policy": "script-src 'self' object-src 'self'",
-    "applications": {
-      "gecko": {
-        "id": "{f8793186-e9da-4332-aa1e-dc3d9f7bb04c}"
-      }
-    }
-  }
\ No newline at end of file
+  "background": {
+    "scripts": ["background.js"]
+  }
+}

From 698d5f5479d8fb52cd52d4ca77f147414fdae46a Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 15:16:26 +0000
Subject: [PATCH 52/75] feat: Add message listener for token reception in
 auth.js

---
 public/auth.js | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 public/auth.js

diff --git a/public/auth.js b/public/auth.js
new file mode 100644
index 00000000..2f6f2d02
--- /dev/null
+++ b/public/auth.js
@@ -0,0 +1,6 @@
+window.addEventListener('message', (event) => {
+  if (event.data.type === 'TOKEN_RECEIVED') {
+    // Forward to content script
+    window.postMessage(event.data, '*')
+  }
+})

From 72c294868b68e9733fdffdbee0afa4397c86782f Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 15:17:27 +0000
Subject: [PATCH 53/75] refactor: Clean up background.js by removing
 commented-out code

---
 public/background.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/public/background.js b/public/background.js
index e7861b7e..df8301a7 100644
--- a/public/background.js
+++ b/public/background.js
@@ -1,9 +1,4 @@
-/*chrome.browserAction.onClicked.addListener(function (tab) {
-  chrome.tabs.create({ url: "chrome://newtab" });
-}
-);*/
-
 const uninstallUrl = `https://hackertab.dev/uninstall.html`
 if (chrome.runtime.setUninstallURL) {
   chrome.runtime.setUninstallURL(uninstallUrl)
-}
\ No newline at end of file
+}

From 2eebb3dffcefef97c08a05a4e8f5bc9b96ccd99e Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 15:17:35 +0000
Subject: [PATCH 54/75] feat: Add content script to handle token reception and
 messaging

---
 public/content.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 public/content.js

diff --git a/public/content.js b/public/content.js
new file mode 100644
index 00000000..ccd4d91e
--- /dev/null
+++ b/public/content.js
@@ -0,0 +1,12 @@
+const script = document.createElement('script')
+script.src = chrome.runtime.getURL('auth.js')
+document.body.appendChild(script)
+
+// Listen for messages from the injected script
+window.addEventListener('message', (event) => {
+  if (event.source !== window || !event.data || event.data.type !== 'TOKEN_RECEIVED') {
+    return
+  }
+
+  chrome.runtime.sendMessage({ ...event.data })
+})

From 921134294f527b289f123ba232a627ba6cddec1b Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 15:19:04 +0000
Subject: [PATCH 55/75] refactor: Update return types for environment utility
 functions

---
 src/utils/Environment.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/Environment.ts b/src/utils/Environment.ts
index a80a14ef..1a2f781c 100644
--- a/src/utils/Environment.ts
+++ b/src/utils/Environment.ts
@@ -6,12 +6,12 @@ export const isDevelopment = (): boolean => {
   return import.meta.env.DEV
 }
 
-export const isWebOrExtensionVersion = (): string => {
+export const isWebOrExtensionVersion = (): 'web' | 'extension' => {
   const buildTarget = import.meta.env.VITE_BUILD_TARGET as 'web' | 'extension' | undefined
   return buildTarget || 'web'
 }
 
-export const getBrowserName = (): string => {
+export const getBrowserName = (): 'chrome' | 'firefox' | 'other' => {
   let userAgent = navigator.userAgent
   if (userAgent.match(/chrome|chromium|crios/i)) {
     return 'chrome'

From 2d4d63852967a405a8020e3023dd71d907fddb21 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 15:26:05 +0000
Subject: [PATCH 56/75] feat: Simplify Firebase configuration by removing
 unused keys and adding build target

---
 src/config/index.tsx | 12 +++---------
 src/lib/firebase.ts  | 28 +++-------------------------
 2 files changed, 6 insertions(+), 34 deletions(-)

diff --git a/src/config/index.tsx b/src/config/index.tsx
index a0bdd5e7..d0553ca6 100644
--- a/src/config/index.tsx
+++ b/src/config/index.tsx
@@ -3,6 +3,9 @@ export const ANALYTICS_ENDPOINT = import.meta.env.VITE_AMPLITUDE_URL as string
 export const ANALYTICS_SDK_KEY = import.meta.env.VITE_AMPLITUDE_KEY as string
 export const API_ENDPOINT = import.meta.env.VITE_API_URL as string
 export const LS_ANALYTICS_ID_KEY = 'hackerTabAnalyticsId'
+export const FIREBASE_API_KEY = import.meta.env.VITE_FIREBASE_API_KEY as string
+export const BUILD_TARGET = (import.meta.env.VITE_BUILD_TARGET as 'web' | 'extension') || 'web'
+
 // Meta
 export const name = 'Hackertab.dev'
 export const slogan = '— Stay updated with the new technology and trends'
@@ -50,12 +53,3 @@ export const dateRanges: DateRangeType[] = [
   { label: 'the week', value: 'weekly' },
   { label: 'the month', value: 'monthly' },
 ]
-
-export const FIREBASE_API_KEY = import.meta.env.VITE_FIREBASE_API_KEY as string
-export const FIREBASE_AUTH_DOMAIN = import.meta.env.VITE_FIREBASE_AUTH_DOMAIN as string
-export const FIREBASE_PROJECT_ID = import.meta.env.VITE_FIREBASE_PROJECT_ID as string
-export const FIREBASE_STORAGE_BUCKET = import.meta.env.VITE_FIREBASE_STORAGE_BUCKET as string
-export const FIREBASE_MESSAGING_SENDER_ID = import.meta.env
-  .VITE_FIREBASE_MESSAGING_SENDER_ID as string
-export const FIREBASE_APP_ID = import.meta.env.VITE_FIREBASE_APP_ID as string
-export const FIREBASE_MEASUREMENT_ID = import.meta.env.VITE_FIREBASE_MEASUREMENT_ID as string
diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts
index a9aec2e1..b467c258 100644
--- a/src/lib/firebase.ts
+++ b/src/lib/firebase.ts
@@ -1,35 +1,13 @@
 import { initializeApp } from 'firebase/app'
 import { getAuth, GithubAuthProvider, GoogleAuthProvider } from 'firebase/auth'
-import {
-  FIREBASE_API_KEY,
-  FIREBASE_APP_ID,
-  FIREBASE_AUTH_DOMAIN,
-  FIREBASE_MEASUREMENT_ID,
-  FIREBASE_MESSAGING_SENDER_ID,
-  FIREBASE_PROJECT_ID,
-  FIREBASE_STORAGE_BUCKET,
-} from 'src/config'
+import { FIREBASE_API_KEY } from 'src/config'
 
 const firebaseConfig = {
   apiKey: FIREBASE_API_KEY,
-  authDomain: FIREBASE_AUTH_DOMAIN,
-  projectId: FIREBASE_PROJECT_ID,
-  storageBucket: FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: FIREBASE_MESSAGING_SENDER_ID,
-  appId: FIREBASE_APP_ID,
-  measurementId: FIREBASE_MEASUREMENT_ID,
 }
 
-if (
-  !FIREBASE_API_KEY ||
-  !FIREBASE_APP_ID ||
-  !FIREBASE_AUTH_DOMAIN ||
-  !FIREBASE_MEASUREMENT_ID ||
-  !FIREBASE_MESSAGING_SENDER_ID ||
-  !FIREBASE_PROJECT_ID ||
-  !FIREBASE_STORAGE_BUCKET
-) {
-  console.warn('Missing Firebase configuration')
+if (!FIREBASE_API_KEY) {
+  console.warn('Missing Firebase api Key')
 }
 // Initialize Firebase
 const app = initializeApp(firebaseConfig)

From bde2db3dd597d608ebf61a7d21a0fbb524e4edef Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 15:29:44 +0000
Subject: [PATCH 57/75] feat: Add host permission checks for Firefox sign-in
 functionality

---
 src/utils/Permissions.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/utils/Permissions.ts

diff --git a/src/utils/Permissions.ts b/src/utils/Permissions.ts
new file mode 100644
index 00000000..1390ee21
--- /dev/null
+++ b/src/utils/Permissions.ts
@@ -0,0 +1,28 @@
+import { getBrowserName } from './Environment'
+
+// Check host permissions before allowing the user to sign in with a provider.
+// as Firefox may block the Signin on v3 if the extension does not have host permissions.
+export const checkHostPermissions = async () => {
+  if (getBrowserName() !== 'firefox') {
+    return true
+  }
+
+  const HOST_PERMISSIONS = chrome.runtime.getManifest().content_scripts || []
+  const requiredHosts = HOST_PERMISSIONS.flatMap((permission) => {
+    return permission.matches || []
+  })
+
+  return await chrome.permissions.contains({ origins: requiredHosts })
+}
+
+export const requestHostPermissions = async () => {
+  if (getBrowserName() !== 'firefox') {
+    return true
+  }
+  const HOST_PERMISSIONS = chrome.runtime.getManifest().content_scripts || []
+  const requiredHosts = HOST_PERMISSIONS.flatMap((permission) => {
+    return permission.matches || []
+  })
+
+  return await chrome.permissions.request({ origins: requiredHosts })
+}

From 5b4ff4acdb2c3ad2dafb3f509cf1f49ac89ecbfb Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 15:44:45 +0000
Subject: [PATCH 58/75] feat: Refactor auth modal store to include error
 handling and simplify usage in hooks

---
 src/features/auth/hooks/useAuth.ts         |  6 ++----
 src/features/auth/stores/authModalStore.ts | 10 ++++++++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/features/auth/hooks/useAuth.ts b/src/features/auth/hooks/useAuth.ts
index 66b3518a..6485d148 100644
--- a/src/features/auth/hooks/useAuth.ts
+++ b/src/features/auth/hooks/useAuth.ts
@@ -4,7 +4,7 @@ import { trackUserDisconnect } from 'src/lib/analytics'
 import { firebaseAuth } from 'src/lib/firebase'
 
 export const useAuth = () => {
-  const { isAuthModalOpen, openAuthModal, closeAuthModal } = AuthModalStore()
+  const authModalStore = AuthModalStore()
   const authStore = AuthStore()
   const { user, providerId, initState, clear } = authStore
 
@@ -18,12 +18,10 @@ export const useAuth = () => {
   }
 
   return {
-    openAuthModal,
-    closeAuthModal,
+    ...authModalStore,
     initState,
     isConnected,
     logout,
-    isAuthModalOpen,
     user,
     providerId,
   }
diff --git a/src/features/auth/stores/authModalStore.ts b/src/features/auth/stores/authModalStore.ts
index b3765c35..d68d5642 100644
--- a/src/features/auth/stores/authModalStore.ts
+++ b/src/features/auth/stores/authModalStore.ts
@@ -1,13 +1,23 @@
 import { create } from 'zustand'
 
+type AuthError = {
+  message: string
+  retry?: {
+    label: string
+  } | null
+}
 interface AuthModalState {
   isAuthModalOpen: boolean
+  authError: AuthError | null
   openAuthModal: () => void
   closeAuthModal: () => void
+  setAuthError: (error: AuthError | null) => void
 }
 
 export const AuthModalStore = create<AuthModalState>((set) => ({
   isAuthModalOpen: false,
+  authError: null,
+  setAuthError: (error) => set({ authError: error }),
   openAuthModal: () => set({ isAuthModalOpen: true }),
   closeAuthModal: () => set({ isAuthModalOpen: false }),
 }))

From c62fecffe8c164df9903361f9c9d6d9a6f3cddbf Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 15:56:47 +0000
Subject: [PATCH 59/75] feat: Add dangerToast style for error notifications and
 adjust modal overflow behavior

---
 src/assets/App.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/assets/App.css b/src/assets/App.css
index 051f5273..e0b1f1a2 100644
--- a/src/assets/App.css
+++ b/src/assets/App.css
@@ -1326,6 +1326,14 @@ Producthunt item
   color: var(--primary-text-color);
   border-radius: 10px;
 }
+
+.dangerToast {
+  background-color: #ff4d4f;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 10px;
+}
+
 .capitalize {
   text-transform: capitalize;
 }
@@ -1346,7 +1354,7 @@ Modal
   box-shadow: 0 0 20px #00000052;
   z-index: 3;
   max-height: 80vh;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .Overlay {

From d60f3c4cff89808add7272fd8da4d38367525eb5 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 15:57:01 +0000
Subject: [PATCH 60/75] feat: Wrap AppLayout component with AuthProvider for
 improved authentication context

---
 src/components/Layout/AppLayout.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Layout/AppLayout.tsx b/src/components/Layout/AppLayout.tsx
index 506387e5..1c0f7951 100644
--- a/src/components/Layout/AppLayout.tsx
+++ b/src/components/Layout/AppLayout.tsx
@@ -5,13 +5,14 @@ import { BeatLoader } from 'react-spinners'
 import 'src/assets/App.css'
 import { AuthModal, useAuth } from 'src/features/auth'
 import { MarketingBanner } from 'src/features/MarketingBanner'
+import { AuthProvider } from 'src/providers/AuthProvider'
 import { Header } from './Header'
 
 export const AppLayout = () => {
-  const { isAuthModalOpen, closeAuthModal } = useAuth()
+  const { isAuthModalOpen } = useAuth()
 
   return (
-    <>
+    <AuthProvider>
       <MarketingBanner />
 
       <div className="App">
@@ -26,6 +27,6 @@ export const AppLayout = () => {
           <Outlet />
         </React.Suspense>
       </div>
-    </>
+    </AuthProvider>
   )
 }

From 074b1f914e6c9ea8f772db1e6e849a377d8691d9 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 15:57:07 +0000
Subject: [PATCH 61/75] feat: Implement getOauthLink API and custom hook for
 OAuth authentication

---
 src/features/auth/api/getOauthLink.ts | 28 +++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/features/auth/api/getOauthLink.ts

diff --git a/src/features/auth/api/getOauthLink.ts b/src/features/auth/api/getOauthLink.ts
new file mode 100644
index 00000000..0671ac9e
--- /dev/null
+++ b/src/features/auth/api/getOauthLink.ts
@@ -0,0 +1,28 @@
+import { useMutation } from '@tanstack/react-query'
+import { axios } from 'src/lib/axios'
+import { MutationConfig } from 'src/lib/react-query'
+
+type Provider = 'google.com' | 'github.com'
+
+export type GetOauthLinkDTO = {
+  data: {
+    provider: Provider
+    state: string
+  }
+}
+const getOauthLink = ({ data }: GetOauthLinkDTO): Promise<{ authLink: string }> => {
+  return axios.post('/engine/auth/auth_link', data)
+}
+
+type QueryFnType = typeof getOauthLink
+
+type UseGetArticlesOptions = {
+  config?: MutationConfig<QueryFnType>
+}
+
+export const useGetOauthLink = ({ config }: UseGetArticlesOptions = {}) => {
+  return useMutation({
+    ...config,
+    mutationFn: getOauthLink,
+  })
+}

From 6c9ade336a3f1f67376775785b630adae6274553 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 15:57:18 +0000
Subject: [PATCH 62/75] feat: Enhance AuthModal with OAuth link handling and
 error management

---
 src/features/auth/components/AuthModal.tsx | 110 ++++++++++++++++-----
 1 file changed, 84 insertions(+), 26 deletions(-)

diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index a6ff86b9..86c8da51 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -1,12 +1,16 @@
-import { AuthProvider, signInWithPopup } from 'firebase/auth'
+//import { AuthProvider, signInWithPopup } from 'firebase/auth'
+import { AuthProvider } from 'firebase/auth'
+import { useCallback, useState } from 'react'
 import { FaGithub } from 'react-icons/fa'
 import { FcGoogle } from 'react-icons/fc'
 import { IoHeartCircle } from 'react-icons/io5'
-import toast from 'react-simple-toasts'
 import { Button, Modal } from 'src/components/Elements'
+import { BUILD_TARGET } from 'src/config'
 import { useAuth } from 'src/features/auth'
-import { trackUserConnect } from 'src/lib/analytics'
-import { firebaseAuth, githubAuthProvider, googleAuthProvider } from 'src/lib/firebase'
+import { githubAuthProvider, googleAuthProvider } from 'src/lib/firebase'
+import { getBrowserName } from 'src/utils/Environment'
+import { checkHostPermissions, requestHostPermissions } from 'src/utils/Permissions'
+import { useGetOauthLink } from '../api/getOauthLink'
 import './authModal.css'
 
 type AuthModalProps = {
@@ -14,30 +18,57 @@ type AuthModalProps = {
 }
 
 export const AuthModal = ({ showAuth }: AuthModalProps) => {
-  const { closeAuthModal, initState } = useAuth()
+  const { closeAuthModal, authError, setAuthError } = useAuth()
+  const [selectedProvider, setSelectedProvider] = useState<AuthProvider>(googleAuthProvider)
+  const getOauthLink = useGetOauthLink()
 
-  const signIn = (provider: AuthProvider) => {
-    signInWithPopup(firebaseAuth, provider)
-      .then((result) => {
-        const name = result.user.displayName
-        const imageURL = result.user.photoURL
-        if (name && imageURL) {
-          trackUserConnect(provider.providerId)
-          closeAuthModal()
-          initState({
-            user: {
-              name: name,
-              imageURL: imageURL,
-            },
-            providerId: provider.providerId,
-          })
-        }
+  const requestOauthLink = useCallback(
+    async (provider: AuthProvider) => {
+      const getOauthLinkResponse = await getOauthLink.mutateAsync({
+        data: {
+          provider: provider.providerId as 'google.com' | 'github.com',
+          state: BUILD_TARGET === 'web' ? window.location.origin : getBrowserName(),
+        },
       })
-      .catch((error) => {
-        console.log(error)
-        toast(`We couldn't login to your ${provider.providerId} account!!`, { theme: 'failure' })
+
+      if (getOauthLinkResponse.authLink) {
+        window.open(getOauthLinkResponse.authLink, BUILD_TARGET === 'web' ? '_self' : '_blank')
+      }
+    },
+    [getOauthLink]
+  )
+
+  const signIn = useCallback(async (provider: AuthProvider) => {
+    setSelectedProvider(provider)
+    setAuthError(null)
+
+    if (BUILD_TARGET === 'web') {
+      requestOauthLink(provider)
+    } else {
+      const permissionCheck = await checkHostPermissions()
+
+      if (!permissionCheck) {
+        setAuthError({
+          message: 'Hackertab needs permission to Sign in, Please request it and try again',
+        })
+      } else {
+        requestOauthLink(provider)
+      }
+    }
+  }, [])
+
+  const requestMissingPermission = useCallback(async () => {
+    const permissionRequest = await requestHostPermissions()
+
+    if (!permissionRequest) {
+      setAuthError({
+        message: 'Permission not granted, Request it again',
       })
-  }
+    } else {
+      setAuthError(null)
+      requestOauthLink(selectedProvider)
+    }
+  }, [])
 
   return (
     <Modal
@@ -54,17 +85,44 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
         <div className="buttons">
           <Button
             startIcon={<FaGithub className="blockHeaderWhite" style={{ fontSize: '1.5em' }} />}
-            onClick={() => signIn(githubAuthProvider)}
+            isLoading={getOauthLink.isLoading && getOauthLink.data?.['provider'] === 'github.com'}
+            onClick={() => {
+              signIn(githubAuthProvider)
+            }}
             size="medium">
             Connect with Github
           </Button>
           <Button
+            isLoading={getOauthLink.isLoading && getOauthLink.data?.['provider'] === 'google.com'}
             startIcon={<FcGoogle style={{ fontSize: '1.5em' }} />}
             onClick={() => signIn(googleAuthProvider)}
             size="medium">
             Connect with Google
           </Button>
         </div>
+        {authError && (
+          <div className="errors">
+            <p>{authError.message}</p>
+            {authError.retry && (
+              <Button onClick={() => requestMissingPermission()} size="small" className="cta">
+                {authError.retry.label}
+              </Button>
+            )}
+          </div>
+        )}
+        <div className="footer">
+          <p>
+            By signing in, you agree to our{' '}
+            <a href="https://hackertab.dev/terms-and-conditions" target="_blank" rel="noreferrer">
+              Terms of Service
+            </a>{' '}
+            and{' '}
+            <a href="https://hackertab.dev/privacy-policy" target="_blank" rel="noreferrer">
+              Privacy Policy
+            </a>
+            .
+          </p>
+        </div>
       </div>
     </Modal>
   )

From d30a6d895e22a19f1d10c655685e33bee2b4cb13 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 15:57:26 +0000
Subject: [PATCH 63/75] feat: Add AuthProvider component for handling user
 authentication via OAuth tokens

---
 src/providers/AuthProvider.tsx | 91 ++++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 src/providers/AuthProvider.tsx

diff --git a/src/providers/AuthProvider.tsx b/src/providers/AuthProvider.tsx
new file mode 100644
index 00000000..b64d4f12
--- /dev/null
+++ b/src/providers/AuthProvider.tsx
@@ -0,0 +1,91 @@
+import { GithubAuthProvider, GoogleAuthProvider, signInWithCredential } from 'firebase/auth'
+import { useCallback, useEffect } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import toast from 'react-simple-toasts'
+import { useAuth } from 'src/features/auth'
+import { firebaseAuth } from 'src/lib/firebase'
+
+export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
+  const { closeAuthModal, initState, setAuthError } = useAuth()
+
+  const connectTheUser = useCallback((token?: string | null, provider?: string | null) => {
+    const allowedProviders = ['google', 'github']
+    if ((provider && !allowedProviders.includes(provider)) || !token) {
+      return Promise.resolve()
+    }
+
+    const authProvider =
+      provider === 'google'
+        ? GoogleAuthProvider.credential(null, token)
+        : GithubAuthProvider.credential(token)
+
+    return signInWithCredential(firebaseAuth, authProvider).then((userCredential) => {
+      const user = userCredential.user
+      initState({
+        user: {
+          name: user.displayName || 'Anonymous',
+          imageURL: user.photoURL || '',
+        },
+        providerId: authProvider.providerId,
+      })
+      closeAuthModal()
+      navigate(window.location.pathname, { replace: true })
+    })
+  }, [])
+
+  /**
+   * This effect is used to connect the user when the token is received from the background script
+   * on Chrome and Firefox extensions
+   */
+  useEffect(() => {
+    const messageListener = (message: {
+      action: string
+      type?: string
+      access_token?: string
+      provider?: string
+    }) => {
+      if (message.type === 'TOKEN_RECEIVED') {
+        const { access_token: token, provider } = message
+        connectTheUser(token, provider).catch((error) => {
+          if (error && error.code === 'auth/account-exists-with-different-credential') {
+            setAuthError({
+              message:
+                'You have an account with a different provider. Please sign in with that provider to continue.',
+            })
+          }
+        })
+      }
+    }
+
+    chrome.runtime?.onMessage.addListener(messageListener)
+
+    return () => {
+      chrome.runtime?.onMessage.removeListener(messageListener)
+    }
+  }, [])
+
+  /**
+   * This effect is used to connect the user when the user when the token is received from the URL
+   * on the web
+   */
+  useEffect(() => {
+    const token = searchParams.get('access_token')
+    const provider = searchParams.get('provider')
+    connectTheUser(token, provider).catch((error) => {
+      if (error && error.code === 'auth/account-exists-with-different-credential') {
+        toast(
+          'You have an account with a different provider. Please sign in with that provider to continue.',
+          {
+            theme: 'dangerToast',
+          }
+        )
+      } else {
+        console.log(error)
+        toast('Error signing in, Please try again', { theme: 'dangerToast' })
+      }
+    })
+  }, [searchParams])
+  return <>{children}</>
+}

From 8bc9d3e5b4e793dc719ef015f1156b36f7f959a6 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 15:57:32 +0000
Subject: [PATCH 64/75] feat: Add error styling to AuthModal for improved user
 feedback

---
 src/features/auth/components/authModal.css | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/features/auth/components/authModal.css b/src/features/auth/components/authModal.css
index f355d37c..3007d414 100644
--- a/src/features/auth/components/authModal.css
+++ b/src/features/auth/components/authModal.css
@@ -22,3 +22,25 @@
   text-align: center;
   font-size: 1em;
 }
+.authModal .errors {
+  background-color: rgba(255, 0, 0, 0.064);
+  border: 1px solid rgba(255, 0, 0, 0.363);
+  border-radius: 6px;
+  padding: 8px;
+  display: flex;
+  flex-direction: row;
+  p {
+    padding: 0;
+    margin: 0;
+    font-size: 0.8em;
+    color: red;
+  }
+  .cta {
+    flex: 1;
+  }
+}
+
+.authModal .footer {
+  font-size: 0.7em;
+  text-align: center;
+}

From 90de2badbc9148fadf9a25a5f56603d1d666864b Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 17:21:16 +0000
Subject: [PATCH 65/75] feat: Change script injection to
 document.documentElement for improved compatibility

---
 public/content.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/content.js b/public/content.js
index ccd4d91e..21e9b99b 100644
--- a/public/content.js
+++ b/public/content.js
@@ -1,6 +1,6 @@
 const script = document.createElement('script')
 script.src = chrome.runtime.getURL('auth.js')
-document.body.appendChild(script)
+document.documentElement.appendChild(script)
 
 // Listen for messages from the injected script
 window.addEventListener('message', (event) => {

From 2a5597064abd4d958f837c52bdd80875452cbbce Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 22:48:27 +0000
Subject: [PATCH 66/75] feat: Remove unused GitHub and Google auth providers
 from Firebase setup

---
 src/lib/firebase.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts
index b467c258..8417befc 100644
--- a/src/lib/firebase.ts
+++ b/src/lib/firebase.ts
@@ -1,5 +1,5 @@
 import { initializeApp } from 'firebase/app'
-import { getAuth, GithubAuthProvider, GoogleAuthProvider } from 'firebase/auth'
+import { getAuth } from 'firebase/auth'
 import { FIREBASE_API_KEY } from 'src/config'
 
 const firebaseConfig = {
@@ -12,7 +12,4 @@ if (!FIREBASE_API_KEY) {
 // Initialize Firebase
 const app = initializeApp(firebaseConfig)
 const firebaseAuth = getAuth(app)
-const googleAuthProvider = new GoogleAuthProvider()
-const githubAuthProvider = new GithubAuthProvider()
-
-export { firebaseAuth, githubAuthProvider, googleAuthProvider }
+export { firebaseAuth }

From b0f2c7dae31a8c4e9fd8540e22c2c44aab7f9e70 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 22:49:13 +0000
Subject: [PATCH 67/75] feat: Add Spinner component for loading indicators with
 customizable sizes

---
 src/components/Elements/Spinner/Spinner.tsx | 17 +++++++++++++++++
 src/components/Elements/Spinner/index.ts    |  1 +
 src/components/Elements/index.ts            |  1 +
 3 files changed, 19 insertions(+)
 create mode 100644 src/components/Elements/Spinner/Spinner.tsx
 create mode 100644 src/components/Elements/Spinner/index.ts

diff --git a/src/components/Elements/Spinner/Spinner.tsx b/src/components/Elements/Spinner/Spinner.tsx
new file mode 100644
index 00000000..d55133cb
--- /dev/null
+++ b/src/components/Elements/Spinner/Spinner.tsx
@@ -0,0 +1,17 @@
+import clsx from 'clsx'
+import './Spinner.css'
+
+const sizes = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+}
+
+export type SpinnerProps = {
+  size?: keyof typeof sizes
+  className?: string
+}
+
+export const Spinner = ({ size = 'medium', className = '' }: SpinnerProps) => {
+  return <div className={clsx('spinner', className, sizes[size])}></div>
+}
diff --git a/src/components/Elements/Spinner/index.ts b/src/components/Elements/Spinner/index.ts
new file mode 100644
index 00000000..cf2b71e2
--- /dev/null
+++ b/src/components/Elements/Spinner/index.ts
@@ -0,0 +1 @@
+export * from './Spinner'
diff --git a/src/components/Elements/index.ts b/src/components/Elements/index.ts
index 84a35663..14add55f 100644
--- a/src/components/Elements/index.ts
+++ b/src/components/Elements/index.ts
@@ -12,5 +12,6 @@ export * from './Modal'
 export * from './Panel'
 export * from './SearchBar'
 export * from './SearchBarWithLogo'
+export * from './Spinner'
 export * from './Steps'
 export * from './UserTags'

From b8bd09a2bedcb10051551e60a0b68547ca21a769 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 22:49:22 +0000
Subject: [PATCH 68/75] feat: Add loading state to Button component with
 spinner indicator

---
 src/components/Elements/Button/Button.css |  6 ++++++
 src/components/Elements/Button/Button.tsx | 11 ++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/Elements/Button/Button.css b/src/components/Elements/Button/Button.css
index 4a336c1f..ed30b5fe 100644
--- a/src/components/Elements/Button/Button.css
+++ b/src/components/Elements/Button/Button.css
@@ -32,6 +32,12 @@
     padding: 1rem 2rem;
     font-size: 1.25rem;
   }
+
+  &.loading {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.8;
+  }
 }
 
 .circle-button {
diff --git a/src/components/Elements/Button/Button.tsx b/src/components/Elements/Button/Button.tsx
index b84f49cc..bee7e6b4 100644
--- a/src/components/Elements/Button/Button.tsx
+++ b/src/components/Elements/Button/Button.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import React from 'react'
+import { Spinner } from '../Spinner'
 import './Button.css'
-
 const sizes = {
   small: 'small',
   medium: 'medium',
@@ -14,6 +14,7 @@ type ButtonProps = {
   size?: keyof typeof sizes
   startIcon?: React.ReactNode
   endIcon?: React.ReactNode
+  isLoading?: boolean
 }
 export const Button = ({
   size = 'medium',
@@ -22,10 +23,14 @@ export const Button = ({
   startIcon,
   endIcon,
   children,
+  isLoading = false,
 }: ButtonProps) => {
   return (
-    <button className={clsx('button', sizes[size], className)} onClick={onClick}>
-      {startIcon}
+    <button
+      className={clsx('button', isLoading && 'loading', sizes[size], className)}
+      onClick={onClick}
+      disabled={isLoading}>
+      {isLoading ? <Spinner size="small" /> : startIcon}
       {children}
       {endIcon}
     </button>

From 8972fc3a60a83d845e65860f52e806a5116bc611 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 22:49:27 +0000
Subject: [PATCH 69/75] feat: Add CSS styles for Spinner component with
 customizable sizes

---
 src/components/Elements/Spinner/Spinner.css | 32 +++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/components/Elements/Spinner/Spinner.css

diff --git a/src/components/Elements/Spinner/Spinner.css b/src/components/Elements/Spinner/Spinner.css
new file mode 100644
index 00000000..78e63a02
--- /dev/null
+++ b/src/components/Elements/Spinner/Spinner.css
@@ -0,0 +1,32 @@
+.spinner {
+  position: relative;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  border-top-color: currentColor;
+  border-right-color: currentColor;
+  border-bottom-color: currentColor;
+  animation: spin 1.5s linear infinite;
+  &.small {
+    width: 20px;
+    height: 20px;
+  }
+
+  &.medium {
+    width: 40px;
+    height: 40px;
+  }
+
+  &.large {
+    width: 50px;
+    height: 50px;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

From 0d596f23532c6c61041ddbf7367127cd9fc6b194 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 22:55:12 +0000
Subject: [PATCH 70/75] feat: Update AuthModal to include Google and GitHub
 auth providers with dynamic links

---
 src/features/auth/components/AuthModal.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index 86c8da51..8dcdc954 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -1,13 +1,11 @@
-//import { AuthProvider, signInWithPopup } from 'firebase/auth'
-import { AuthProvider } from 'firebase/auth'
+import { AuthProvider, GithubAuthProvider, GoogleAuthProvider } from 'firebase/auth'
 import { useCallback, useState } from 'react'
 import { FaGithub } from 'react-icons/fa'
 import { FcGoogle } from 'react-icons/fc'
 import { IoHeartCircle } from 'react-icons/io5'
 import { Button, Modal } from 'src/components/Elements'
-import { BUILD_TARGET } from 'src/config'
+import { BUILD_TARGET, privacyPolicyLink, termsAndConditionsLink } from 'src/config'
 import { useAuth } from 'src/features/auth'
-import { githubAuthProvider, googleAuthProvider } from 'src/lib/firebase'
 import { getBrowserName } from 'src/utils/Environment'
 import { checkHostPermissions, requestHostPermissions } from 'src/utils/Permissions'
 import { useGetOauthLink } from '../api/getOauthLink'
@@ -17,6 +15,9 @@ type AuthModalProps = {
   showAuth: boolean
 }
 
+const googleAuthProvider = new GoogleAuthProvider()
+const githubAuthProvider = new GithubAuthProvider()
+
 export const AuthModal = ({ showAuth }: AuthModalProps) => {
   const { closeAuthModal, authError, setAuthError } = useAuth()
   const [selectedProvider, setSelectedProvider] = useState<AuthProvider>(googleAuthProvider)
@@ -113,11 +114,11 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
         <div className="footer">
           <p>
             By signing in, you agree to our{' '}
-            <a href="https://hackertab.dev/terms-and-conditions" target="_blank" rel="noreferrer">
+            <a href={termsAndConditionsLink} target="_blank" rel="noreferrer">
               Terms of Service
             </a>{' '}
             and{' '}
-            <a href="https://hackertab.dev/privacy-policy" target="_blank" rel="noreferrer">
+            <a href={privacyPolicyLink} target="_blank" rel="noreferrer">
               Privacy Policy
             </a>
             .

From 827b755b47766bf1ce4d054d195212309d1c4a96 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sun, 9 Mar 2025 22:56:34 +0000
Subject: [PATCH 71/75] feat: Add success toast notification for user login
 with dynamic welcome message

---
 src/assets/App.css             | 7 ++++++-
 src/providers/AuthProvider.tsx | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/assets/App.css b/src/assets/App.css
index e0b1f1a2..e287471b 100644
--- a/src/assets/App.css
+++ b/src/assets/App.css
@@ -1333,7 +1333,12 @@ Producthunt item
   padding: 10px 20px;
   border-radius: 10px;
 }
-
+.successToast {
+  background-color: #52c41a;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 10px;
+}
 .capitalize {
   text-transform: capitalize;
 }
diff --git a/src/providers/AuthProvider.tsx b/src/providers/AuthProvider.tsx
index b64d4f12..469b6c3b 100644
--- a/src/providers/AuthProvider.tsx
+++ b/src/providers/AuthProvider.tsx
@@ -23,6 +23,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
 
     return signInWithCredential(firebaseAuth, authProvider).then((userCredential) => {
       const user = userCredential.user
+
       initState({
         user: {
           name: user.displayName || 'Anonymous',
@@ -30,6 +31,9 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
         },
         providerId: authProvider.providerId,
       })
+      if (user.displayName) {
+        toast(`Welcome, ${user.displayName}`, { theme: 'successToast' })
+      }
       closeAuthModal()
       navigate(window.location.pathname, { replace: true })
     })

From 1d7de16cdb1c46b4dadaf166f6c0d8bbfaa55814 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sat, 22 Mar 2025 16:31:15 +0000
Subject: [PATCH 72/75] feat: Refactor OAuth link retrieval to accept dynamic
 provider strings

---
 src/features/auth/api/getOauthLink.ts      |  4 +---
 src/features/auth/components/AuthModal.tsx | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/features/auth/api/getOauthLink.ts b/src/features/auth/api/getOauthLink.ts
index 0671ac9e..d2bf764f 100644
--- a/src/features/auth/api/getOauthLink.ts
+++ b/src/features/auth/api/getOauthLink.ts
@@ -2,11 +2,9 @@ import { useMutation } from '@tanstack/react-query'
 import { axios } from 'src/lib/axios'
 import { MutationConfig } from 'src/lib/react-query'
 
-type Provider = 'google.com' | 'github.com'
-
 export type GetOauthLinkDTO = {
   data: {
-    provider: Provider
+    provider: string
     state: string
   }
 }
diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx
index 8dcdc954..e5e2c269 100644
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -25,16 +25,16 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
 
   const requestOauthLink = useCallback(
     async (provider: AuthProvider) => {
-      const getOauthLinkResponse = await getOauthLink.mutateAsync({
-        data: {
-          provider: provider.providerId as 'google.com' | 'github.com',
-          state: BUILD_TARGET === 'web' ? window.location.origin : getBrowserName(),
-        },
-      })
-
-      if (getOauthLinkResponse.authLink) {
-        window.open(getOauthLinkResponse.authLink, BUILD_TARGET === 'web' ? '_self' : '_blank')
-      }
+      getOauthLink
+        .mutateAsync({
+          data: {
+            provider: provider.providerId,
+            state: BUILD_TARGET === 'web' ? window.location.origin : getBrowserName(),
+          },
+        })
+        .then(({ authLink }) => {
+          window.open(authLink, BUILD_TARGET === 'web' ? '_self' : '_blank')
+        })
     },
     [getOauthLink]
   )

From 8c7c9729b7feaf051ea37839efae3c1e6981fcc8 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sat, 22 Mar 2025 17:11:30 +0000
Subject: [PATCH 73/75] feat: Update API endpoint for OAuth link retrieval

---
 src/features/auth/api/getOauthLink.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/auth/api/getOauthLink.ts b/src/features/auth/api/getOauthLink.ts
index d2bf764f..3785f8bb 100644
--- a/src/features/auth/api/getOauthLink.ts
+++ b/src/features/auth/api/getOauthLink.ts
@@ -9,7 +9,7 @@ export type GetOauthLinkDTO = {
   }
 }
 const getOauthLink = ({ data }: GetOauthLinkDTO): Promise<{ authLink: string }> => {
-  return axios.post('/engine/auth/auth_link', data)
+  return axios.post('/engine/auth/oauth-link', data)
 }
 
 type QueryFnType = typeof getOauthLink

From 9d2932d7fb2db1e1dab3dc371e5d03f06a49f928 Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Sat, 22 Mar 2025 17:12:48 +0000
Subject: [PATCH 74/75] feat: Simplify content script matches in base manifest

---
 public/base.manifest.json | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/public/base.manifest.json b/public/base.manifest.json
index bc9cb09a..6b0abd23 100644
--- a/public/base.manifest.json
+++ b/public/base.manifest.json
@@ -9,13 +9,7 @@
   "host_permissions": ["https://*.hackertab.dev/*"],
   "content_scripts": [
     {
-      "matches": [
-        "http://127.0.0.1:5173/*",
-        "http://localhost:5173/*",
-        "https://hackertab.dev/*",
-        "http://localhost:5173/*",
-        "https://hackertab-staging.deno.dev/*"
-      ],
+      "matches": ["http://127.0.0.1:5173/*", "http://localhost:5173/*", "https://hackertab.dev/*"],
       "run_at": "document_start",
       "js": ["content.js"]
     }

From bb81416a3f0b3b7dd6bd9509d2ab45a3e4e47e7f Mon Sep 17 00:00:00 2001
From: John Doe <elmehdi.sakout@gmail.com>
Date: Mon, 24 Mar 2025 01:06:07 +0000
Subject: [PATCH 75/75] feat: Refactor isConnected function to use direct user
 check

---
 src/components/Layout/Header.tsx   | 4 ++--
 src/features/auth/hooks/useAuth.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index f7b3403a..7f53c028 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -97,13 +97,13 @@ export const Header = () => {
           </CircleButton>
           <CircleButton
             onClick={() => {
-              if (isConnected()) {
+              if (isConnected) {
                 navigate('/settings/general')
               } else {
                 openAuthModal()
               }
             }}>
-            {isConnected() ? (
+            {isConnected ? (
               <img className="profileImage" src={user?.imageURL} />
             ) : (
               <FaUser style={{ fontSize: '1.2em' }} />
diff --git a/src/features/auth/hooks/useAuth.ts b/src/features/auth/hooks/useAuth.ts
index 6485d148..4d808d79 100644
--- a/src/features/auth/hooks/useAuth.ts
+++ b/src/features/auth/hooks/useAuth.ts
@@ -8,7 +8,7 @@ export const useAuth = () => {
   const authStore = AuthStore()
   const { user, providerId, initState, clear } = authStore
 
-  const isConnected = () => user != null
+  const isConnected = user != null
 
   const logout = async () => {
     trackUserDisconnect()