From f779dc345f91e964d1b4d9d9b35e60e2fb9dc2ee Mon Sep 17 00:00:00 2001
From: Janaka-Steph <kakobaba1212@protonmail.com>
Date: Tue, 31 Oct 2023 09:02:26 +0100
Subject: [PATCH 1/2] Display red dot for new feature

---
 src/shared/components/DashboardSidebar.tsx |  5 +++++
 src/shared/components/NavLinkItem.tsx      | 16 +++++++++++++---
 src/shared/store/setting.ts                |  2 ++
 src/shared/types/index.ts                  |  3 +++
 tailwind.config.js                         |  1 +
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/DashboardSidebar.tsx b/src/shared/components/DashboardSidebar.tsx
index 6afe5118..be193c97 100644
--- a/src/shared/components/DashboardSidebar.tsx
+++ b/src/shared/components/DashboardSidebar.tsx
@@ -1,5 +1,7 @@
 import brandLogo from "assets/images/brand-logo.svg";
 
+import useSettingStore from "../store/setting";
+
 import DashboardIcon from "./DashboardIcon";
 import DocumentationIcon from "./DocumentationIcon";
 import NavLinkContainer from "./NavLinkContainer";
@@ -7,6 +9,8 @@ import NavLinkItem from "./NavLinkItem";
 import SettingIcon from "./SettingIcon";
 
 const DashboardSidebar = () => {
+  const newFeature = useSettingStore((state) => state.newFeature);
+
   return (
     <div className="sidebar-main sidebar-toggle">
       <div className="pt-10 flex-col px-2 flex md:h-screen sidebar max-md:px-4">
@@ -29,6 +33,7 @@ const DashboardSidebar = () => {
             to="/settings"
             label="Settings"
             icon={<SettingIcon className="svg-stroke" />}
+            newFeature={newFeature}
           />
         </NavLinkContainer>
       </div>
diff --git a/src/shared/components/NavLinkItem.tsx b/src/shared/components/NavLinkItem.tsx
index df38535b..efe08108 100644
--- a/src/shared/components/NavLinkItem.tsx
+++ b/src/shared/components/NavLinkItem.tsx
@@ -1,21 +1,31 @@
-import { NavLink } from "react-router-dom";
 import "react-tooltip/dist/react-tooltip.css";
+
+import clsx from "clsx";
+import { NavLink } from "react-router-dom";
 import { Tooltip } from "react-tooltip";
 import type { NavLinkItemProps } from "shared/types";
 import { useMediaQuery } from "usehooks-ts";
 
-const NavLinkItem = ({ to, icon, label, target }: NavLinkItemProps) => {
+import useSettingStore from "../store/setting";
+
+const NavLinkItem = ({ to, icon, label, target, newFeature = false }: NavLinkItemProps) => {
   const onlyDesktopShow = useMediaQuery("(min-width: 768px)");
+  const setNewFeature = useSettingStore((state) => state.setNewFeature);
+
   return (
     <li>
       <NavLink
         to={to}
         target={target}
         rel="noopener noreferrer"
-        className={({ isActive }) => (isActive ? "active" : "")}
+        className={({ isActive }) => clsx({ active: isActive }, "relative")}
         data-tooltip-id="sidebar-tooltip"
         data-tooltip-content={label}
+        onClick={() => newFeature && setNewFeature(false)}
       >
+        {newFeature ? (
+          <div className="w-2 h-2 bg-danger rounded-full absolute top-[9px] right-[9px]"></div>
+        ) : null}
         {icon}
         <span>{label}</span>
       </NavLink>
diff --git a/src/shared/store/setting.ts b/src/shared/store/setting.ts
index 61117e5d..d5148202 100644
--- a/src/shared/store/setting.ts
+++ b/src/shared/store/setting.ts
@@ -86,6 +86,8 @@ const useSettingStore = create<SettingStore>()(
             "removeAllServiceAsDownloading",
           );
         },
+        newFeature: true,
+        setNewFeature: (newFeature: boolean) => set(() => ({ newFeature }), false, "setNewFeature"),
         swarmMode: Swarm.Inactive,
         setSwarmMode: (swarmMode: Swarm) => set(() => ({ swarmMode }), false, "setSwarmMode"),
         swarmInfo: null,
diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts
index d3e73ee9..305b0eae 100644
--- a/src/shared/types/index.ts
+++ b/src/shared/types/index.ts
@@ -33,6 +33,7 @@ export type NavLinkItemProps = {
   label: string;
   to: string;
   target?: "_blank";
+  newFeature?: boolean;
 };
 
 export enum Swarm {
@@ -108,6 +109,8 @@ export type SettingStore = {
   addServiceAsDownloading: (serviceId: string) => void;
   removeServiceAsDownloading: (serviceId: string) => void;
   removeAllServiceAsDownloading: () => void;
+  newFeature: boolean;
+  setNewFeature: (newFeature: boolean) => void;
   swarmMode: Swarm;
   setSwarmMode: (mode: Swarm) => void;
   swarmInfo: SwarmInfo | null;
diff --git a/tailwind.config.js b/tailwind.config.js
index 01287e22..50367fa6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -31,6 +31,7 @@ module.exports = {
       },
       ok: "#2ED291",
       warning: "#F9B96D",
+      danger: "#C91432",
     },
     extend: {
       fontFamily: {

From 4f22d4eeb451c60086c4426081ef50bd9889e5cd Mon Sep 17 00:00:00 2001
From: Janaka-Steph <kakobaba1212@protonmail.com>
Date: Tue, 31 Oct 2023 12:41:30 +0100
Subject: [PATCH 2/2] Beta tag

---
 src/modules/settings/components/SwarmMode.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/modules/settings/components/SwarmMode.tsx b/src/modules/settings/components/SwarmMode.tsx
index ddac8d8a..bb631795 100644
--- a/src/modules/settings/components/SwarmMode.tsx
+++ b/src/modules/settings/components/SwarmMode.tsx
@@ -103,7 +103,9 @@ const SwarmMode = () => {
   return isSwarmSupported ? (
     <>
       <div className="flex flex-wrap justify-between md:mr-[45px] gap-4">
-        <h2 className="text-grey-300 text-lg backend-url">Prem Network</h2>
+        <h2 className="text-grey-300 text-lg backend-url">
+          Prem Network <span className="ml-2 text-primary text-xs">BETA</span>
+        </h2>
 
         {swarmMode === Swarm.Active ? (
           <>