Display red dot for new feature

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 ? (
           <>

src/shared/components/DashboardSidebar.tsx

@@ -1,12 +1,16 @@
 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";
 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>

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>

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,

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;

tailwind.config.js

@@ -31,6 +31,7 @@ module.exports = {
       },
       ok: "#2ED291",
       warning: "#F9B96D",
+      danger: "#C91432",
     },
     extend: {
       fontFamily: {