feat: reintroduce config.toggles to hide parts of the radar and change behaviour

src/components/Tags/Tags.tsx

@@ -35,9 +35,10 @@ interface TagsProps {
 }
 
 export function Tags({ tags, activeTag, className }: TagsProps) {
+  const label = getLabel("filterByTag");
   return (
     <div className={cn(styles.tags, className)}>
-      <h3>{getLabel("filterByTag")}</h3>
+      {!!label && <h3>{label}</h3>}
       {tags.map((tag) => (
         <Tag key={tag} tag={tag} isActive={activeTag == tag} scroll={false} />
       ))}

src/lib/config.ts

@@ -9,4 +9,8 @@ if (userConfig.colors)
 
 if (userConfig.labels)
   config.labels = { ...defaultConfig.labels, ...userConfig.labels };
+
+if (userConfig.toggles)
+  config.toggles = { ...defaultConfig.toggles, ...userConfig.toggles };
+
 export default config;

src/lib/data.ts

@@ -8,6 +8,10 @@ export function getLabel(key: keyof typeof config.labels) {
   return config.labels[key] || "";
 }
 
+export function getToggle(key: keyof typeof config.toggles) {
+  return config.toggles[key] || false;
+}
+
 export function getAppName() {
   return getLabel("title");
 }
@@ -80,10 +84,11 @@ export const sortByFeaturedAndTitle = (a: Item, b: Item) =>
   Number(b.featured) - Number(a.featured) || a.title.localeCompare(b.title);
 
 export const groupItemsByRing = (items: Item[]) => {
+  const showEmptyRings = getToggle("showEmptyRings");
   return getRings().reduce(
     (acc, ring) => {
       const ringItems = items.filter((item) => item.ring === ring.id);
-      if (ringItems.length) acc[ring.id] = ringItems;
+      if (ringItems.length || showEmptyRings) acc[ring.id] = ringItems;
       return acc;
     },
     {} as { [ringId: string]: Item[] },

src/pages/index.tsx

@@ -11,6 +11,7 @@ import {
   getReleases,
   getRings,
   getTags,
+  getToggle,
 } from "@/lib/data";
 import { CustomPage } from "@/pages/_app";
 
@@ -35,14 +36,18 @@ const Home: CustomPage = () => {
           Version #{version}
         </span>
       </h1>
-      <Radar
-        size={chartConfig.size}
-        quadrants={quadrants}
-        rings={rings}
-        items={items}
-      />
-      {tags.length > 0 && <Tags tags={tags} activeTag={tag} />}
-      <QuadrantList items={items} />
+      {getToggle("showChart") && (
+        <Radar
+          size={chartConfig.size}
+          quadrants={quadrants}
+          rings={rings}
+          items={items}
+        />
+      )}
+      {getToggle("showTagFilter") && tags.length > 0 && (
+        <Tags tags={tags} activeTag={tag} />
+      )}
+      {getToggle("showQuadrantList") && <QuadrantList items={items} />}
     </>
   );
 };