Merge pull request #253 from medyo/develop

Improve card, onboarding, and topic experience; add lazy loading, clickable tags, and new sources/filters #minor

Author: medyo

.github/workflows/develop.yml

@@ -30,7 +30,7 @@ jobs:
         run: yarn
 
       - name: Build project
-        run: yarn build:web
+        run: yarn build:web --mode development
 
       - name: Copy build to remote host
         uses: appleboy/[email protected]

package.json

@@ -7,6 +7,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@sentry/react": "^9.38.0",
+    "@szhsin/react-menu": "^4.5.0",
     "@tanstack/query-async-storage-persister": "^5.8.3",
     "@tanstack/react-query": "^4.13.0",
     "@tanstack/react-query-persist-client": "^5.8.4",
@@ -33,7 +34,6 @@
     "react-share": "^4.4.1",
     "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",

script/build.sh

@@ -4,7 +4,7 @@ build() {
     echo 'Building Hackertab...'
     rm -rf dist
     tsc
-    vite build
+    vite build "$@"
 }
 
-build
+build "$@"

src/App.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { useEffect, useLayoutEffect, useState } from 'react'
+import { useEffect, useLayoutEffect } from 'react'
 import { DNDLayout } from 'src/components/Layout'
 import {
   identifyAdvBlocked,
@@ -10,7 +10,6 @@ import {
 import { useUserPreferences } from 'src/stores/preferences'
 import { AppContentLayout } from './components/Layout'
 import { verifyAdvStatus } from './features/adv/utils/status'
-import { isWebOrExtensionVersion } from './utils/Environment'
 import { lazyImport } from './utils/lazyImport'
 const { OnboardingModal } = lazyImport(() => import('src/features/onboarding'), 'OnboardingModal')
 
@@ -25,10 +24,9 @@ const intersectionCallback = (entries: IntersectionObserverEntry[]) => {
 }
 
 export const App = () => {
-  const [showOnboarding, setShowOnboarding] = useState(true)
   const {
-    onboardingCompleted,
     maxVisibleCards,
+    onboardingCompleted,
     setAdvStatus,
     isDNDModeActive,
     layout,
@@ -78,10 +76,7 @@ export const App = () => {
 
   return (
     <>
-      {!onboardingCompleted && isWebOrExtensionVersion() === 'extension' && (
-        <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
-      )}
-
+      {!onboardingCompleted && <OnboardingModal />}
       <div
         className={clsx(
           'layoutLayers hideScrollBar',

src/assets/App.css

@@ -35,6 +35,7 @@ a {
   text-align: center;
   margin: auto;
   font-size: 16px;
+  line-height: 24px;
   padding: 16px;
 }
 
@@ -269,16 +270,94 @@ a {
   max-width: 180px;
 }
 
-.blockHeader:hover .blockHeaderLink {
+.blockHeader:hover .blockHeaderLink,
+.blockHeader:hover .blockHeaderSettingsButton {
   opacity: 1;
 }
 
+.menuItem {
+  font-size: 1em;
+  display: flex;
+  flex-direction: row;
+  font-family: 'nunito';
+  column-gap: 8px;
+  svg {
+    font-size: 1.1em;
+  }
+}
+
+.szh-menu__header {
+  margin-bottom: 6px;
+}
+.light {
+  .menuItem {
+    color: var(--card-header-text-color);
+  }
+  .szh-menu__item--disabled {
+    color: var(--secondary-text-color);
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.dark {
+  .szh-menu {
+    background-color: var(--card-background-color);
+    border-radius: 12px;
+    border: 1px solid var(--card-border-color);
+    box-shadow: 0 0 20px var(--card-border-color);
+  }
+  .szh-menu__item {
+    color: var(--primary-text-color);
+  }
+
+  .szh-menu__divider {
+    background-color: var(--card-border-color);
+  }
+
+  .szh-menu__item--hover {
+    background-color: var(--app-name-text-color);
+    color: var(--background-color);
+  }
+  .szh-menu__item--hover {
+    background-color: var(--app-name-text-color);
+  }
+  .szh-menu__submenu {
+    background-color: var(--card-background-color);
+
+    .szh-menu__item--hover {
+      background-color: var(--app-name-text-color);
+      color: var(--background-color);
+    }
+  }
+  .szh-menu__item--disabled {
+    color: var(--secondary-text-color);
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.blockHeaderSettingsButton {
+  color: #96a2ae;
+  display: flex;
+  justify-content: center;
+  opacity: 0;
+  font-size: 1.2em;
+  transition: opacity 0.2s linear;
+  cursor: pointer;
+  &:focus {
+    cursor: pointer;
+    opacity: 1;
+  }
+}
+
 .blockHeaderLink {
   align-items: center;
   color: #96a2ae;
   display: flex;
   justify-content: center;
   opacity: 0;
+  font-size: 1.2em;
   transition: opacity 0.2s linear;
 }
 
@@ -311,7 +390,13 @@ a {
   transform: rotate(3deg);
   opacity: 0.5;
 }
-
+.blockHeaderHighlight {
+  border-radius: 15px;
+  padding: 1px 6px;
+  border: 1px solid var(--chip-border-color);
+  background-color: var(--chip-background);
+  font-size: 0.9em;
+}
 .blockHeaderIcon {
   display: flex;
   height: 16px;
@@ -330,6 +415,11 @@ a {
   padding: 0 6px;
   text-transform: lowercase;
   color: white;
+
+  &.past {
+    background-color: #dd5353;
+    margin-right: 4px;
+  }
 }
 .blockHeaderIcon img {
   display: block;
@@ -567,6 +657,10 @@ a {
   transition: opacity 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s,
     visibility 0.3s ease-out 0.1s;
   width: 100%;
+
+  button.tag {
+    cursor: pointer;
+  }
 }
 
 .tag {
@@ -921,7 +1015,17 @@ Producthunt item
   padding: 0 32px 0 48px;
   width: 100%;
   background-color: var(--card-header-background-color);
+
+  &.noShadow {
+    box-shadow: none;
+  }
+  &::placeholder {
+    color: var(--primary-text-color);
+    font-size: 0.9em;
+    opacity: 0.5;
+  }
 }
+
 .searchBarInput:focus {
   outline: none;
 }
@@ -1159,6 +1263,11 @@ Producthunt item
   right: 16px;
   width: 48px;
   z-index: 2;
+
+  & svg {
+    color: white;
+    font-size: 24px;
+  }
 }
 
 .floatingFilterBottomSheet .title {

src/assets/icon_hackernoon.jpeg

@@ -1,79 +1,78 @@
 import clsx from 'clsx'
 import React, { useEffect, useState } from 'react'
-import { BsBoxArrowInUpRight } from 'react-icons/bs'
-import { ref } from 'src/config'
 import { AdvBanner } from 'src/features/adv'
-import { useRemoteConfigStore } from 'src/features/remoteConfig'
-import { useUserPreferences } from 'src/stores/preferences'
+import { DesktopBreakpoint } from 'src/providers/DesktopBreakpoint'
+import { MobileBreakpoint } from 'src/providers/MobileBreakpoint'
 import { CardPropsType } from 'src/types'
 
 type RootCardProps = CardPropsType & {
   children: React.ReactNode
   titleComponent?: React.ReactNode
+  settingsComponent?: React.ReactNode
   fullBlock?: boolean
 }
+export const Card = React.forwardRef<HTMLDivElement, RootCardProps>(
+  (
+    {
+      meta,
+      titleComponent,
+      settingsComponent,
+      className,
+      withAds = false,
+      children,
+      fullBlock = false,
+      knob,
+    },
+    ref
+  ) => {
+    const { icon, label, badge } = meta
+    const [canAdsLoad, setCanAdsLoad] = useState(true)
 
-export const Card = ({
-  meta,
-  titleComponent,
-  className,
-  withAds = false,
-  children,
-  fullBlock = false,
-  knob,
-}: RootCardProps) => {
-  const { openLinksNewTab } = useUserPreferences()
-  const { link, icon, label, badge } = meta
-  const [canAdsLoad, setCanAdsLoad] = useState(true)
-  const { adsConfig } = useRemoteConfigStore()
-
-  useEffect(() => {
-    if (!adsConfig.enabled || !withAds) {
-      return
-    }
+    useEffect(() => {
+      if (!withAds) {
+        return
+      }
 
-    const handleClassChange = () => {
-      if (document.documentElement.classList.contains('dndState')) {
-        setCanAdsLoad(false)
-      } else {
-        setCanAdsLoad(true)
+      const handleClassChange = () => {
+        if (document.documentElement.classList.contains('dndState')) {
+          setCanAdsLoad(false)
+        } else {
+          setCanAdsLoad(true)
+        }
       }
-    }
 
-    const observer = new MutationObserver(handleClassChange)
-    observer.observe(document.documentElement, { attributes: true })
+      const observer = new MutationObserver(handleClassChange)
+      observer.observe(document.documentElement, { attributes: true })
 
-    return () => {
-      observer.disconnect()
-    }
-  }, [withAds, adsConfig.enabled])
+      return () => {
+        observer.disconnect()
+      }
+    }, [withAds])
 
-  const handleHeaderLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    e.preventDefault()
-    let url = `${link}?${ref}`
-    window.open(url, openLinksNewTab ? '_blank' : '_self')
-  }
+    return (
+      <div ref={ref} className={clsx('block', fullBlock && 'fullBlock', className)}>
+        <MobileBreakpoint>
+          {settingsComponent && <button className="floatingFilter">{settingsComponent}</button>}
+        </MobileBreakpoint>
+        <div className="blockHeader">
+          {knob}
+          <span className="blockHeaderIcon">{icon}</span> {titleComponent || label}{' '}
+          <DesktopBreakpoint>
+            {settingsComponent && (
+              <span className="blockHeaderSettingsButton">{settingsComponent}</span>
+            )}
+          </DesktopBreakpoint>
+          {badge && <span className="blockHeaderBadge">{badge}</span>}
+        </div>
 
-  return (
-    <div className={clsx('block', fullBlock && 'fullBlock', className)}>
-      <div className="blockHeader">
-        {knob}
-        <span className="blockHeaderIcon">{icon}</span> {titleComponent || label}{' '}
-        {link && (
-          <a className="blockHeaderLink" href={link} onClick={handleHeaderLinkClick}>
-            <BsBoxArrowInUpRight />
-          </a>
+        {canAdsLoad && withAds && (
+          <div className="ad-wrapper blockRow">
+            <AdvBanner />
+          </div>
         )}
-        {badge && <span className="blockHeaderBadge">{badge}</span>}
-      </div>
 
-      {canAdsLoad && adsConfig.enabled && withAds && (
-        <div className="ad-wrapper blockRow">
-          <AdvBanner />
-        </div>
-      )}
-
-      <div className="blockContent scrollable">{children}</div>
-    </div>
-  )
-}
+        <div className="blockContent scrollable">{children}</div>
+      </div>
+    )
+  }
+)