adds the ability to remove websites from the dashboard

src/app/(main)/dashboard/DashboardEdit.module.css

@@ -7,6 +7,19 @@
 
 .item {
   padding: 5px 0;
+  position: relative;
+}
+
+.pinActive {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px;
+}
+
+.pin {
+  width: 20px;
+  height: 20px;
 }
 
 .item h1 {
@@ -26,6 +39,10 @@
   background: var(--base50);
 }
 
+.websiteActive .text {
+  border: 1px solid var(--base800);
+}
+
 .active .text {
   border-color: var(--base600);
   box-shadow: 4px 4px 4px var(--base100);

src/app/(main)/dashboard/DashboardEdit.tsx

@@ -2,6 +2,7 @@ import { useState, useMemo, useEffect } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import classNames from 'classnames';
 import { Button, Loading } from 'react-basics';
+import Icons from 'components/icons';
 import { firstBy } from 'thenby';
 import useDashboard, { saveDashboard } from 'store/dashboard';
 import { useMessages, useWebsites } from 'components/hooks';
@@ -11,9 +12,10 @@ const DRAG_ID = 'dashboard-website-ordering';
 
 export function DashboardEdit({ teamId }: { teamId: string }) {
   const settings = useDashboard();
-  const { websiteOrder } = settings;
+  const { websiteOrder, websiteActive } = settings;
   const { formatMessage, labels } = useMessages();
   const [order, setOrder] = useState(websiteOrder || []);
+  const [active, setActive] = useState(websiteActive || []);
   const [websites, setWebsites] = useState([]);
 
   const {
@@ -53,19 +55,27 @@ export function DashboardEdit({ teamId }: { teamId: string }) {
     setOrder(orderedWebsites.map(website => website?.id || 0));
   }
 
+  function handleActiveWebsites(id: string) {
+    setActive(prevActive =>
+      prevActive.includes(id) ? prevActive.filter(a => a !== id) : [...prevActive, id],
+    );
+  }
+
   function handleSave() {
     saveDashboard({
       editing: false,
       websiteOrder: order,
+      websiteActive: active,
     });
   }
 
   function handleCancel() {
-    saveDashboard({ editing: false, websiteOrder });
+    saveDashboard({ editing: false, websiteOrder, websiteActive });
   }
 
   function handleReset() {
     setOrder([]);
+    setActive([]);
   }
 
   if (isLoading) {
@@ -101,11 +111,16 @@ export function DashboardEdit({ teamId }: { teamId: string }) {
                         ref={provided.innerRef}
                         className={classNames(styles.item, {
                           [styles.active]: snapshot.isDragging,
+                          [styles.websiteActive]: active.includes(id),
                         })}
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
+                        onClick={() => handleActiveWebsites(id)}
                       >
                         <div className={styles.text}>
+                          <div className={styles.pinActive}>
+                            {active.includes(id) ? <Icons.PushPin className={styles.pin} /> : null}
+                          </div>
                           <h1>{name}</h1>
                           <h2>{domain}</h2>
                         </div>

src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx

@@ -18,17 +18,16 @@ export default function WebsiteChartList({
   limit?: number;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { websiteOrder } = useDashboard();
+  const { websiteOrder, websiteActive } = useDashboard();
   const { renderTeamUrl } = useTeamUrl();
   const { dir } = useLocale();
 
-  const ordered = useMemo(
-    () =>
-      websites
-        .map(website => ({ ...website, order: websiteOrder.indexOf(website.id) || 0 }))
-        .sort(firstBy('order')),
-    [websites, websiteOrder],
-  );
+  const ordered = useMemo(() => {
+    return websites
+      .filter(website => (websiteActive.length ? websiteActive.includes(website.id) : true))
+      .map(website => ({ ...website, order: websiteOrder.indexOf(website.id) || 0 }))
+      .sort(firstBy('order'));
+  }, [websites, websiteOrder, websiteActive]);
 
   return (
     <div>

src/components/icons.ts

@@ -19,6 +19,7 @@ import Moon from 'assets/moon.svg';
 import Nodes from 'assets/nodes.svg';
 import Overview from 'assets/overview.svg';
 import Profile from 'assets/profile.svg';
+import PushPin from 'assets/pushpin.svg';
 import Reports from 'assets/reports.svg';
 import Sun from 'assets/sun.svg';
 import User from 'assets/user.svg';
@@ -47,6 +48,7 @@ const icons = {
   Nodes,
   Overview,
   Profile,
+  PushPin,
   Reports,
   Sun,
   User,

src/store/dashboard.ts

@@ -6,6 +6,7 @@ export const initialState = {
   showCharts: true,
   limit: DEFAULT_WEBSITE_LIMIT,
   websiteOrder: [],
+  websiteActive: [],
   editing: false,
 };