All Feature's using Feature Flag Hook

src/detail-panels/account-header/account-extra-info.jsx

@@ -12,6 +12,7 @@ import { useAccountResolver } from '../account-resolver';
 import './account-extra-info.css';
 import { HandleHistory } from './handle-history';
 import { PDSName } from './handle-history/pds-name';
+import { useFeatureFlag } from '../../api/featureFlags';
 
 /**
  * @param {{
@@ -24,23 +25,25 @@ export function AccountExtraInfo({ className, onInfoClick, ...rest }) {
   const account = accountQuery.data;
   const handleHistoryQuery = useHandleHistory(account?.shortDID);
   const handleHistory = handleHistoryQuery.data?.handle_history;
+  const ishandleHistory = useFeatureFlag('handle-history')
+  const profileDescription = useFeatureFlag('profile-description')
   return (
     <div className={'account-extra-info ' + (className || '')} {...rest}>
       <div className="close-opt" onClick={onInfoClick}>
         &times;
       </div>
-      <div className="bio-section">
+      {profileDescription && (<div className="bio-section">
         {!account?.description ? undefined : (
           <MultilineFormatted text={account?.description} />
         )}
-      </div>
+      </div>)}
       <div className="did-section">
         <DidWithCopyButton
           shortDID={account?.shortDID}
           handleHistory={handleHistory}
         />
       </div>
-      <div className="handle-history-section">
+      {ishandleHistory && (<div className="handle-history-section">
         {!handleHistory ? undefined : (
           <>
             <span className="handle-history-title">
@@ -51,7 +54,7 @@ export function AccountExtraInfo({ className, onInfoClick, ...rest }) {
             <HandleHistory handleHistory={handleHistory} />
           </>
         )}
-      </div>
+      </div>)}
     </div>
   );
 }

src/detail-panels/account-header/account-header.jsx

@@ -14,6 +14,7 @@ import { Button } from '@mui/material';
 import { useAccountResolver } from '../account-resolver';
 import { useHandleHistory } from '../../api/handle-history';
 import { usePlacement } from '../../api/placement';
+import { useFeatureFlag } from '../../api/featureFlags';
 
 /**
  * @param {{
@@ -28,6 +29,8 @@ export function AccountHeader({ className, onInfoClick }) {
   const handleHistoryQuery = useHandleHistory(resolved.data?.shortDID);
   const handleHistory = handleHistoryQuery.data?.handle_history;
 
+  const userPlacement = useFeatureFlag('user-placement')
+
   const placementquery = usePlacement(resolved.data?.shortDID);
   const placement = placementquery.data?.placement?.toLocaleString() ?? '';
 
@@ -114,7 +117,7 @@ export function AccountHeader({ className, onInfoClick }) {
                   </a>
                 </>
               )}
-              {placement && (
+              {userPlacement && placement && (
                 <div className="account-place-number">User #{placement}</div>
               )}
             </span>

src/detail-panels/block-panel-generic/block-panel-generic.jsx

@@ -14,6 +14,7 @@ import { VisibleWithDelay } from '../../common-components/visible';
 
 import './block-panel-generic.css';
 import { localise } from '../../localisation';
+import { useFeatureFlag } from '../../api/featureFlags';
 
 /** @typedef {import('@tanstack/react-query').InfiniteData<{ blocklist: (BlockedByRecord | { did: string; blocked_date: string })[]; count?: number }>} InfBlockData */
 
@@ -41,6 +42,8 @@ export function BlockPanelGeneric({
   const blocklistPages = data?.pages || [];
   const blocklist = blocklistPages.flatMap((page) => page.blocklist);
   const count = totalData?.count;
+  const pageName = (className == 'blocked-by-panel') ? 'blocked-by-count' : 'blocking-count';
+  const pageCount = useFeatureFlag(pageName)
 
   // const [searchParams, setSearchParams] = useSearchParams();
   // const [tick, setTick] = useState(0);
@@ -74,6 +77,7 @@ export function BlockPanelGeneric({
         header={header}
         // Ironically this hides the search button
         showSearch={true}
+        pagecount={pageCount}
         // setShowSearch={setShowSearch}
         // onShowSearch={() => setShowSearch(true)}
         // onToggleView={() => setTableView(!tableView)}
@@ -118,7 +122,8 @@ class PanelHeader extends React.Component {
       count = this.state?.count || 0;
     }
 
-    const { blocklist, header } = this.props;
+    const { blocklist, header, pagecount } = this.props;
+
 
     return (
       <h3
@@ -129,7 +134,7 @@ class PanelHeader extends React.Component {
             : ' blocking-panel-header-loading')
         }
       >
-        {typeof header === 'function' ? header({ count, blocklist }) : header}
+        {pagecount && (typeof header === 'function' ? header({ count, blocklist }) : header)}
 
         <span className="panel-toggles">
           {this.props.showSearch ? undefined : (

src/detail-panels/blocked-by-lists/blocked-by-lists-index.jsx

@@ -14,6 +14,7 @@ import { SearchHeaderDebounced } from '../history/search-header';
 import { VisibleWithDelay } from '../../common-components/visible';
 import { resolveHandleOrDID } from '../../api';
 import { useAccountResolver } from '../account-resolver';
+import { useFeatureFlag } from '../../api/featureFlags';
 
 export function BlockedByLists() {
   const accountQuery = useAccountResolver();
@@ -30,6 +31,7 @@ export function BlockedByLists() {
   const listPages = data?.pages || [];
   const allLists = listPages.flatMap((page) => page.blocklist);
   const filteredLists = !search ? allLists : matchSearch(allLists, search, () => setTick(tick + 1));
+  const listsBlockedByCount = useFeatureFlag('lists-blocked-by-count')
 
   // Show loader for initial load
   if (isLoading) {
@@ -55,7 +57,7 @@ export function BlockedByLists() {
         </div>
       </div>
 
-      <h3 className='lists-header'>
+      {listsBlockedByCount && (<h3 className='lists-header'>
         {(isLoadingTotal && !listsTotal) && <span style={{ opacity: 0.5 }}>{"Counting block lists..."}</span>}
         {listsTotal ?
           <>
@@ -72,7 +74,7 @@ export function BlockedByLists() {
           </> : 
           isLoadingTotal ? null : 'Not blocked by any users via lists'
         }
-      </h3>
+      </h3>)}
 
       <BlockListsView
         list={filteredLists}

src/detail-panels/blocking-lists/blocking-lists-index.jsx

@@ -14,6 +14,7 @@ import { SearchHeaderDebounced } from '../history/search-header';
 import { VisibleWithDelay } from '../../common-components/visible';
 import { resolveHandleOrDID } from '../../api';
 import { useAccountResolver } from '../account-resolver';
+import { useFeatureFlag } from '../../api/featureFlags';
 
 export function BlockingLists() {
   const accountQuery = useAccountResolver();
@@ -30,7 +31,7 @@ export function BlockingLists() {
   const listPages = data?.pages || [];
   const allLists = listPages.flatMap((page) => page.blocklist);
   const filteredLists = !search ? allLists : matchSearch(allLists, search, () => setTick(tick + 1));
-
+  const listsBlockingCount = useFeatureFlag('lists-blocking-count')
   // Show loader for initial load
   if (isLoading) {
     return (
@@ -55,7 +56,7 @@ export function BlockingLists() {
         </div>
       </div>
 
-      <h3 className='lists-header'>
+      {listsBlockingCount && (<h3 className='lists-header'>
         {(isLoadingTotal && !listTotalBlocks) && <span style={{ opacity: 0.5 }}>{"Counting lists..."}</span>}
         {listTotalBlocks ?
           <>
@@ -72,7 +73,7 @@ export function BlockingLists() {
           </> : 
           isLoadingTotal ? null : 'Not blocking any users via lists'
         }
-      </h3>
+      </h3>)}
 
       <BlockListsView
         list={filteredLists} />

src/detail-panels/labeled/index.jsx

@@ -7,6 +7,7 @@ import { AccountShortEntry } from '../../common-components/account-short-entry';
 import { FormatTimestamp } from '../../common-components/format-timestamp';
 import { useAccountResolver } from '../account-resolver';
 import './labeled.css';
+import { useFeatureFlag } from '../../api/featureFlags';
 
 /**
  * @param {{
@@ -96,6 +97,7 @@ export default function LabeledPanel() {
   const { data: labelers, isLoading: isLoadingLabelers } = useLabelers();
 
   const { data: labels, isLoading } = useLabeled(did, labelers);
+  const labelsCount = useFeatureFlag('labels-count')
 
   return (
     <div
@@ -106,7 +108,7 @@ export default function LabeledPanel() {
         minHeight: '100%',
       }}
     >
-      <h3 className="labeled-header">Labeled {labels?.length} Times</h3>
+      {labelsCount && (<h3 className="labeled-header">Labeled {labels?.length} Times</h3>)}
 
       {isLoadingLabelers || isLoading ? (
         <div>Loading...</div>

src/detail-panels/lists/list-view.jsx

@@ -12,6 +12,7 @@ import './list-view.css';
 import { ProgressiveRender } from '../../common-components/progressive-render';
 import { ConditionalAnchor } from '../../common-components/conditional-anchor';
 import { useResolveHandleOrDid } from '../../api';
+import { useFeatureFlag } from '../../api/featureFlags';
 
 /**
  * @param {{
@@ -20,14 +21,15 @@ import { useResolveHandleOrDid } from '../../api';
  * }} _
  */
 export function ListView({ className, list }) {
+  const spamListOverlay = useFeatureFlag('spam-list-overlay')
   return (
     <ul
       className={'lists-as-list-view ' + (className || '')}
       style={{ padding: 0 }}
     >
       <ProgressiveRender
         items={list || []}
-        renderItem={(entry) => <ListViewEntry entry={entry} />}
+        renderItem={(entry) => <ListViewEntry entry={entry} SpamOverlay={spamListOverlay} />}
       />
     </ul>
   );
@@ -37,9 +39,10 @@ export function ListView({ className, list }) {
  * @param {{
  *  className?: string,
  *  entry: AccountListEntry
+ *  SpamOverlay : boolean
  * }} _
  */
-export function ListViewEntry({ className, entry }) {
+export function ListViewEntry({ className, entry, SpamOverlay }) {
   const { data: sizeData, isLoading } = useListSize(entry?.url);
   const count = sizeData?.count?.toLocaleString() || '';
 
@@ -53,7 +56,7 @@ export function ListViewEntry({ className, entry }) {
     setOpen(true);
   };
 
-  const opacity = entry.spam ? 0.4 : 1;
+  const opacity = (entry.spam && SpamOverlay) ? 0.4 : 1;
   const resolved = useResolveHandleOrDid(entry.did);
 
   return (
@@ -80,7 +83,7 @@ export function ListViewEntry({ className, entry }) {
           >
             {entry.name}
           </ConditionalAnchor>
-          {entry.spam && (
+          {entry.spam && SpamOverlay && (
             <ClickAwayListener onClickAway={handleTooltipClose}>
               <Tooltip
                 title={`Flagged as spam. Source: ${entry.source || 'unknown'}`}

src/detail-panels/lists/lists.jsx

@@ -15,6 +15,7 @@ import { localise, localiseNumberSuffix } from '../../localisation';
 import { useAccountResolver } from '../account-resolver';
 import { SearchHeaderDebounced } from '../history/search-header';
 import './lists.css';
+import { useFeatureFlag } from '../../api/featureFlags';
 
 export function Lists() {
 
@@ -29,6 +30,7 @@ export function Lists() {
   const [tick, setTick] = useState(0);
   const search = (searchParams.get('q') || '').trim();
   const [showSearch, setShowSearch] = useState(!!search);
+  const listsOnListCounts = useFeatureFlag('lists-on-list-counts')
 
   const listsTotal = totalData?.count;
   const listPages = data?.pages || [];
@@ -69,7 +71,7 @@ export function Lists() {
             {localise('Counting lists...', {})}
           </span>
         )}
-        {listsTotal ? (
+        {listsOnListCounts && listsTotal ? (
           <>
             {localise(
               'Member of ' +

src/detail-panels/packs/packed.jsx

@@ -14,6 +14,7 @@ import { VisibleWithDelay } from '../../common-components/visible';
 import { localise, localiseNumberSuffix } from '../../localisation';
 import { useAccountResolver } from '../account-resolver';
 import { SearchHeaderDebounced } from '../history/search-header';
+import { useFeatureFlag } from '../../api/featureFlags';
 
 export default function Packed() {
   // STARTER PACKS CONTAINING USERS
@@ -30,6 +31,7 @@ export default function Packed() {
   const search = (searchParams.get('q') || '').trim();
   const [tick, setTick] = useState(0);
   const [showSearch, setShowSearch] = useState(!!search);
+  const starterPacksInCount = useFeatureFlag('starter-packs-in-count');
 
   const packsTotal = totalData?.count;
   const Packlist = data?.pages || [];
@@ -70,11 +72,11 @@ export default function Packed() {
 
         {packsTotal ? (
           <>
-            {'Member of ' +
+            {starterPacksInCount && ('Member of ' +
               packsTotal.toLocaleString() +
               ' ' +
               localiseNumberSuffix('pack', packsTotal) +
-              ':'}
+              ':')}
             <span className="panel-toggles">
               {!showSearch && (
                 <Button

src/detail-panels/packs/packs.jsx

@@ -14,6 +14,7 @@ import { VisibleWithDelay } from '../../common-components/visible';
 import { localise, localiseNumberSuffix } from '../../localisation';
 import { useAccountResolver } from '../account-resolver';
 import { SearchHeaderDebounced } from '../history/search-header';
+import { useFeatureFlag } from '../../api/featureFlags';
 
 export function Packs({ created = false }) {
   // STARTER PACKS CREATED
@@ -30,6 +31,7 @@ export function Packs({ created = false }) {
   const [tick, setTick] = useState(0);
   const search = (searchParams.get('q') || '').trim();
   const [showSearch, setShowSearch] = useState(!!search);
+  const starterPacksMadeCount = useFeatureFlag('starter-packs-made-count');
 
   const packsTotal = totalData?.count;
   const Packlist = data?.pages || [];
@@ -70,7 +72,7 @@ export function Packs({ created = false }) {
         )}
         {packsTotal ? (
           <>
-            {localise(
+            {starterPacksMadeCount && (localise(
               'Creator of  ' +
                 packsTotal.toLocaleString() +
                 ' ' +
@@ -79,7 +81,7 @@ export function Packs({ created = false }) {
               {
                 // todo : add language map
               }
-            )}
+            ))}
             <span className="panel-toggles">
               {!showSearch && (
                 <Button

src/landing/home-stats/home-stats-main.jsx

@@ -25,6 +25,7 @@ export function HomeStatsMain({
   const statsPage = useFeatureFlag('stats-page');
   const topBlocked = useFeatureFlag('top-blocked');
   const topBlockers = useFeatureFlag('top-blockers');
+  const totalUsersWheel = useFeatureFlag('total-users-wheel')
 
   return (
     <div
@@ -41,7 +42,7 @@ export function HomeStatsMain({
         </Button>
       )}
 
-      {/* {features?.['total-users-wheel']?.status && ( */}
+      {totalUsersWheel && (
       <NetworkCircle
         {...{
           activeAccounts,
@@ -51,7 +52,7 @@ export function HomeStatsMain({
           loading,
         }}
       />
-      {/* )} */}
+      )}
 
       {stats && (
         <>