New version #minor

* improve the import/export bookmarks UI

* change the import/export icons

* feat: Add auth modal ui and show it next to onboarding.

* feat: Add google auth.

* feat: Show user info in setting.

* feat: Fix imports.

* feat: Add github auth

* feat: Add logout and observe current user.

* feat: Moved firebase config variable to .env file.

* feat: Create CurrentUser type.

* feat: Create useAuth hook.

* feat: Add profile button to header and create profile page.

* feat: Separate useAuth and AuthStore.

* feat: Move auth modal state handle to AuthStore.

* feat: Create AuthModalStore without persist.

* feat: Rebame config file to firebase config.

* fix: Code reviews.

* fix modal not showing in other pages

* feat: Create separated file for authModalStore.

* fix: Code reviews.

* feat: New AuthModal ui.

* feat: Add authorization token to request interceptor

* feat: Add user connection and disconnection tracking to analytics

* refactor the button component

* refactor: Simplify signIn function by removing providerName parameter

* style: Adjust button padding for small and medium sizes

* style: Update button component in AuthModal for consistent size and styling

* refactor the Modal component and improve Auth Modal

* style: Adjust authModal width for responsive design

* refactor: Remove bookmark import/export functionality from ProfileSettings component

* feat: Add CircleButton component with customizable sizes and variants

* refactor: Replace button elements with CircleButton and Button components in Header and BookmarkSettings

* refactor: Simplify Button usage in BookmarkSettings component

* refactor: Update button styles and layout in App.css for improved flexibility and alignment

* refactor: Rename round-icon-button class to circle-button for consistency and clarity

* fix: Add validation for Firebase configuration to prevent initialization errors

* refactor: Move input styles to App.css and replace button with Button component in ShareModal

* feat: Add profile image container with streak indicator in Header component

* feat: Implement hit tracking and update user streak in AuthStore

* feat: Remove unused idToken and email

* feat: Remove Profile page + Moved userInfo to General settings.

* feat: Replace button elements with Button component for consistency

* feat: Update logout button size and adjust user info layout for better responsiveness

* refactor: Simplify Header component by removing back navigation for home

* feat: Update user info display to show provider name instead of provider ID

* feat: Adjust user image size and enhance layout for user information in General Settings

* feat: Show auth provider icon in user info.

* feat: Create ConfirmModal component.

* feat: Add logout confirm modal.

* feat: Logout firebase user.

* fix: Merge conflicts.

* feat: Implement logout functionality using Firebase signOut

* feat: Enhance user settings UI with improved logout button and layout adjustments

* refactor: Remove unused searchEngine prop from GeneralSettings component

* feat: Add user streak display to GeneralSettings component

* feat: Refactor streak display in GeneralSettings component for improved styling and structure

* feat: Update manifest files to version 3 and adjust permissions

* feat: Add message listener for token reception in auth.js

* refactor: Clean up background.js by removing commented-out code

* feat: Add content script to handle token reception and messaging

* refactor: Update return types for environment utility functions

* feat: Simplify Firebase configuration by removing unused keys and adding build target

* feat: Add host permission checks for Firefox sign-in functionality

* feat: Refactor auth modal store to include error handling and simplify usage in hooks

* feat: Add dangerToast style for error notifications and adjust modal overflow behavior

* feat: Wrap AppLayout component with AuthProvider for improved authentication context

* feat: Implement getOauthLink API and custom hook for OAuth authentication

* feat: Enhance AuthModal with OAuth link handling and error management

* feat: Add AuthProvider component for handling user authentication via OAuth tokens

* feat: Add error styling to AuthModal for improved user feedback

* feat: Change script injection to document.documentElement for improved compatibility

* feat: Remove unused GitHub and Google auth providers from Firebase setup

* feat: Add Spinner component for loading indicators with customizable sizes

* feat: Add loading state to Button component with spinner indicator

* feat: Add CSS styles for Spinner component with customizable sizes

* feat: Update AuthModal to include Google and GitHub auth providers with dynamic links

* feat: Add success toast notification for user login with dynamic welcome message

* refactor: replace react-device-detect with responsive breakpoints and update media queries

* feat: Refactor OAuth link retrieval to accept dynamic provider strings

* feat: Update API endpoint for OAuth link retrieval

* feat: Simplify content script matches in base manifest

* feat: Refactor isConnected function to use direct user check

* feat: Update isConnected check to use direct reference

* feat: Add pluralization utility and update streak display in user info

* Add ad verification

* rename vite config to mjs

* chore: update dependencies and set Node.js engine version

* fix: update request interceptor to use InternalAxiosRequestConfig

* chore: update Node.js version in GitHub Actions workflow to 18

* fix: add unique keys to list items in UserInfo component

* fix: update logout modal title and description for clarity

* fix: improve auth error handling and update modal styles for better user experience

* fix: restrict content script matches to production URL only

* feat: enhance streak display with new icon and styling adjustments

* fix: update background style for content section with gradient

* fix: update content background color and adjust border styling for consistency

* feat: add new avatar icon and define accent color variables for styling

* fix: correct capitalization of terms in AuthModal component

* feat: refactor user information display into separate UserInfo component

* feat: add user ID to User type and initialize user state in AuthProvider

* feat: implement account deletion functionality and integrate into GeneralSettings

* fix: improve error message for account connection in AuthProvider

* feat: enhance UserInfo component with account connection prompt and styling adjustments

* fix: remove redundant text from UserInfo component

* feat: add avatar placeholder styling and improve layout in GeneralSettings

* feat: add loading state to profile image button and apply overflow hidden styling

* feat: add user delete tracking to analytics and update DeleteAccount component

* improve the displaying when the button is disabled

* add isConnecting status to Auth

* chore: update GitHub Actions to use latest versions of checkout, cache, and setup-node

* feat: add Firebase API key to deployment workflows

* fix: update chrome runtime message listener to handle optional chaining correctly

* chore: update dependencies to latest versions in package.json

* refactor: migrate to React 18's createRoot for rendering

* fix: remove console log for user not logged in in getUserToken function

* refactor: update SVG imports to use new syntax for React components

* fix: ensure chrome runtime message listener is added and removed safely

* fix: disable CSS code splitting in Vite configuration

---------

Co-authored-by: zouhir <rajdaouizouhir.pro@gmail.com>

Author: medyo

.github/workflows/deploy.yml

@@ -10,19 +10,20 @@ env:
   VITE_AMPLITUDE_KEY: ${{ secrets.REACT_APP_AMPLITUDE_KEY }}
   VITE_AMPLITUDE_URL: ${{ secrets.REACT_APP_AMPLITUDE_URL }}
   VITE_API_URL: ${{ secrets.API_URL }}
+  VITE_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
 
 jobs:
   build_and_deploy:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: 18
 
       - name: Install dependencies
         run: yarn

.github/workflows/distribute.yml

@@ -27,12 +27,13 @@ env:
   VITE_AMPLITUDE_KEY: ${{ secrets.REACT_APP_AMPLITUDE_KEY }}
   VITE_AMPLITUDE_URL: ${{ secrets.REACT_APP_AMPLITUDE_URL }}
   VITE_API_URL: ${{ secrets.API_URL }}
+  VITE_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
 
 jobs:
   tag_version:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
@@ -64,10 +65,10 @@ jobs:
     needs: tag_version
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           ref: master
-      - uses: actions/cache@v2
+      - uses: actions/cache@v4
         with:
           path: '**/node_modules'
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
@@ -91,13 +92,17 @@ jobs:
     needs: tag_version
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           ref: master
-      - uses: actions/cache@v2
+      - uses: actions/cache@v4
         with:
           path: '**/node_modules'
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
       - name: Install yarn dependencies
         run: yarn
 

.nvmrc

@@ -0,0 +1 @@
+18.20.0

package.json

@@ -7,39 +7,40 @@
     "@tanstack/query-async-storage-persister": "^5.8.3",
     "@tanstack/react-query": "^4.13.0",
     "@tanstack/react-query-persist-client": "^5.8.4",
-    "@types/dompurify": "^2.3.4",
-    "@types/jspath": "^0.4.0",
-    "axios": "^0.21.2",
+    "axios": "^1.8.4",
     "axios-cache-adapter": "^2.7.3",
     "country-emoji": "^1.5.4",
-    "dompurify": "^2.2.7",
+    "dompurify": "^3.2.4",
+    "firebase": "^11.2.0",
     "htmlparser2": "^8.0.1",
     "jsonpath": "^1.1.1",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.0.0-0",
-    "react": "^17.0.1",
+    "react": "^19.1.0",
     "react-contexify": "^5.0.0",
-    "react-device-detect": "^1.17.0",
-    "react-dom": "^17.0.1",
+    "react-dom": "^19.1.0",
     "react-easy-sort": "^1.5.1",
     "react-error-boundary": "^3.1.4",
     "react-icons": "^5.2.1",
     "react-markdown": "^7.0.1",
     "react-modal": "^3.12.1",
+    "react-responsive": "^10.0.1",
     "react-router-dom": "^6.21.0",
     "react-select": "^5.0.1",
     "react-share": "^4.4.1",
-    "react-simple-toasts": "^5.10.0",
+    "react-simple-toasts": "^6.1.0",
     "react-spinners": "^0.10.4",
     "react-spring-bottom-sheet": "^3.4.1",
     "react-toggle": "^4.1.1",
     "react-tooltip": "^4.2.21",
     "timeago.js": "^4.0.2",
     "type-fest": "^1.2.0",
     "vite-plugin-ejs": "^1.6.4",
-    "web-vitals": "^0.2.4",
     "zustand": "^4.3.3"
   },
+  "engines": {
+    "node": "18"
+  },
   "scripts": {
     "start": "vite",
     "preview": "vite preview",
@@ -69,15 +70,16 @@
     "@types/chrome": "^0.0.241",
     "@types/jest": "^29.1.2",
     "@types/jsonpath": "^0.2.0",
+    "@types/dompurify": "^2.3.4",
+    "@types/jspath": "^0.4.0",
     "@types/node": "^20.4.2",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^19.0.4",
+    "@types/react-dom": "^19.0.4",
     "@types/react-modal": "^3.13.1",
     "@types/react-toggle": "^4.0.3",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.40.1",
     "@vitejs/plugin-react": "^4.0.3",
-    "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react": "^1.1.7",
@@ -91,8 +93,8 @@
     "prettier": "^2.7.1",
     "terser": "^5.19.2",
     "typescript": "^5.1.6",
-    "vite": "^4.4.5",
-    "vite-plugin-svgr": "^3.2.0",
+    "vite": "^6.2.3",
+    "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^4.2.0"
   }
 }

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, '*')
+  }
+})

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)
-}
+}

public/base.manifest.json

@@ -1,10 +1,19 @@
 {
+  "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": ["https://hackertab.dev/*"],
+      "run_at": "document_start",
+      "js": ["content.js"]
+    }
+  ],
   "icons": {
     "16": "/logos/logo16.png",
     "32": "/logos/logo32.png",

public/chrome.manifest.json

@@ -1,7 +1,5 @@
 {
-  "manifest_version": 3,
   "background": {
     "service_worker": "background.js"
-  },
-  "host_permissions": ["https://*.hackertab.dev/*"]
+  }
 }

public/content.js

@@ -0,0 +1,12 @@
+const script = document.createElement('script')
+script.src = chrome.runtime.getURL('auth.js')
+document.documentElement.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 })
+})

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}"
-      }
-    }
-  }
+  "background": {
+    "scripts": ["background.js"]
+  }
+}