@griddo/ax 11.14.4 → 11.14.5-rc.0

package/src/modules/Settings/Globals/index.tsx

@@ -1,13 +1,24 @@
 import { useState } from "react";
 import { connect } from "react-redux";
 
-import { ErrorToast, FieldGroup, FieldsBehavior, MainWrapper, Modal, Nav, Notification } from "@ax/components";
+import {
+	Button,
+	ErrorToast,
+	FieldsBehavior,
+	Icon,
+	MainWrapper,
+	Modal,
+	Nav,
+	Notification,
+	Toast,
+	ToggleField,
+} from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
 import { RouteLeavingGuard } from "@ax/guards";
 import { getNavigationModules } from "@ax/helpers";
-import { useModal, useShouldBeSaved } from "@ax/hooks";
-import type { IGriddoTheme, IImage, INavItem, IRootState, ISettingsForm } from "@ax/types";
+import { useModal, useShouldBeSaved, useToast } from "@ax/hooks";
+import type { IGriddoTheme, IImage, INavItem, IRootState, ISite } from "@ax/types";
 
 import { config } from "components";
 
@@ -23,30 +34,27 @@ const Globals = (props: IProps): JSX.Element => {
 
 	const [isNavigationNotificationOpen, setIsNavigationNotificationOpen] = useState(false);
 	const [tempTheme, setTempTheme] = useState<string | undefined>();
-	const { isOpen, toggleModal } = useModal();
-
-	const title = "General settings";
-
 	const [isNavigationModulesChanged, setIsNavigationModulesChanged] = useState(!!currentSiteInfo.navigationModules);
-	const [form, setForm] = useState(currentSiteInfo);
-
-	const { name, timezone, theme, favicon, smallAvatar, bigAvatar, thumbnail } = form;
-
+	const [form, setForm] = useState<ISite>(currentSiteInfo);
+	const { isOpen, toggleModal } = useModal();
+	const { isOpen: isHiddenOpen, toggleModal: toggleHiddenModal } = useModal();
+	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
 	const { isDirty, setIsDirty } = useShouldBeSaved(form);
 
+	const { name, timezone, theme, favicon, smallAvatar, bigAvatar, thumbnail, home, hidden, showSitemapInRobots } = form;
+
 	const navigationModules: Record<string, any[]> = getNavigationModules();
 	const hasMultipleNavigationModules = Object.keys(navigationModules).some(
 		(key: string) => navigationModules[key].length > 1,
 	);
 
-	const setValue = (newValue: Record<string, string | null>) =>
-		setForm((state: ISettingsForm) => ({ ...state, ...newValue }));
+	const setValue = (newValue: Partial<ISite>) => setForm((state: ISite) => ({ ...state, ...newValue }));
 
 	const setNameValue = (value: string) => setValue({ name: value });
 	const setTimezoneValue = (value: string) => setValue({ timezone: value });
 	const setThemeValue = (value: string) => {
-		const theme = (themes as IGriddoTheme[]).find((th) => th.value === value);
-		if (theme?.elements) {
+		const selectedTheme = (themes as IGriddoTheme[]).find((t) => t.value === value);
+		if (selectedTheme?.elements) {
 			setTempTheme(value);
 			toggleModal();
 		} else {
@@ -57,6 +65,17 @@ const Globals = (props: IProps): JSX.Element => {
 	const setSmallAvatarValue = (value: IImage) => setValue({ smallAvatar: value.url ? value.url : null });
 	const setBigAvatarValue = (value: IImage) => setValue({ bigAvatar: value.url ? value.url : null });
 	const setThumbnailValue = (value: IImage) => setValue({ thumbnail: value.url ? value.url : null });
+	const setRobotsValue = (value: boolean) => {
+		setValue({ showSitemapInRobots: value });
+		if (value) {
+			toggleToast("Sitemap included in robots.txt");
+		}
+	};
+	const setHiddenValue = () => {
+		setValue({ hidden: false });
+		saveForm({ ...form, hidden: false });
+		toggleHiddenModal();
+	};
 	const setNavigationModulesValue = (value: any) => setValue({ navigationModules: value });
 
 	const handleChangeTheme = () => {
@@ -64,43 +83,51 @@ const Globals = (props: IProps): JSX.Element => {
 		toggleModal();
 	};
 
-	const saveForm = async () => {
-		const isSaved = await saveSettings(form);
+	const saveForm = async (newForm: ISite) => {
+		const isSaved = await saveSettings(newForm);
 		const isNavigationModulesChanging =
-			JSON.stringify(form?.navigationModules) !== JSON.stringify(currentSiteInfo?.navigationModules);
+			JSON.stringify(form.navigationModules) !== JSON.stringify(currentSiteInfo.navigationModules);
 		setIsNavigationNotificationOpen(isNavigationModulesChanging);
 		if (isSaved) setIsDirty(false);
 	};
 
+	const handleOpenUrl = () => {
+		const win = window.open(home, "_blank");
+		if (win) {
+			win.focus();
+		}
+	};
+
 	const rightButtonProps = {
 		label: isSaving ? "Saving" : isDirty ? "Save" : "Saved",
 		disabled: isSaving || !isDirty,
-		action: saveForm,
+		action: () => saveForm(form),
 	};
 
 	const setRoute = (path: string) => setHistoryPush(path);
+
 	const modalText = (
 		<>
-			Some settings <strong>are not saved</strong>.{" "}
+			Some settings <strong>are not saved</strong>.
 		</>
 	);
 
-	const handleMenuClick = (path: string) => {
-		setHistoryPush(path);
-	};
-
 	const closeNavigationNotification = () => setIsNavigationNotificationOpen(false);
 	const goToNavigationModules = () => setHistoryPush("/sites/navigations/modules");
+	const goToLanguages = () => setHistoryPush("/sites/settings/languages");
+
+	const mainThemeAction = { title: "Understood", onClick: handleChangeTheme };
+	const secondaryThemeAction = { title: "Cancel", onClick: toggleModal };
 
-	const mainDeleteAction = { title: "Understood", onClick: handleChangeTheme };
-	const secondaryDeleteAction = { title: "Cancel", onClick: toggleModal };
+	const mainHiddenAction = { title: "Enable Indexing", onClick: setHiddenValue };
+	const secondaryHiddenAction = { title: "Cancel", onClick: toggleHiddenModal };
 
 	return (
 		<>
 			<RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
-			<MainWrapper backLink={false} title={title} rightButton={rightButtonProps}>
+			<MainWrapper backLink={false} title="General settings" rightButton={rightButtonProps} showTagHidden={hidden}>
 				<S.Wrapper>
-					<Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
+					<Nav current={currentNavItem} items={navItems} onClick={setRoute} />
 					<S.ContentWrapper>
 						<ErrorToast />
 						{isNavigationNotificationOpen && (
@@ -113,6 +140,28 @@ const Globals = (props: IProps): JSX.Element => {
 							/>
 						)}
 						<S.FormWrapper>
+							{hidden ? (
+								<S.HiddenFieldWrapper>
+									<S.IconWrapper>
+										<Icon name="working" size="16" />
+									</S.IconWrapper>
+									<div>
+										Site <strong>hidden from search engines and AI models</strong>. Enable indexing to make it public.
+										Permanent action.
+									</div>
+									<S.StyledToggleField name="hidden" value={!hidden} onChange={toggleHiddenModal} size="s" />
+								</S.HiddenFieldWrapper>
+							) : (
+								<S.HiddenFieldWrapper>
+									<S.IconWrapper>
+										<Icon name="party" size="16" />
+									</S.IconWrapper>
+									<div>
+										This site is currently <strong>visible to search engines and AI models</strong>. This is permanent
+										and cannot be changed.
+									</div>
+								</S.HiddenFieldWrapper>
+							)}
 							<FieldsBehavior
 								title="Site Name"
 								name="name"
@@ -120,6 +169,21 @@ const Globals = (props: IProps): JSX.Element => {
 								value={name || ""}
 								onChange={setNameValue}
 							/>
+							<FieldsBehavior
+								title="Domain default language"
+								name="domain"
+								fieldType="TextField"
+								readonly={true}
+								value={home || ""}
+								helptext="To make the changes, go to Language's settings."
+								icon="openOutside"
+								onClickIcon={handleOpenUrl}
+							/>
+							<S.ButtonWrapper>
+								<Button type="button" buttonStyle="line" onClick={goToLanguages}>
+									Go to languages
+								</Button>
+							</S.ButtonWrapper>
 							<FieldsBehavior
 								title="Timezone"
 								name="timezone"
@@ -138,15 +202,6 @@ const Globals = (props: IProps): JSX.Element => {
 								onChange={setThemeValue}
 								mandatory={true}
 							/>
-							<FieldsBehavior
-								title="Site favicon"
-								name="favicon"
-								value={favicon || null}
-								fieldType="ImageField"
-								onChange={setFaviconValue}
-								helptext="Upload a 32x32px image"
-								noGallery={true}
-							/>
 							{hasMultipleNavigationModules && (
 								<NavigationModules
 									navigationModules={navigationModules}
@@ -154,56 +209,122 @@ const Globals = (props: IProps): JSX.Element => {
 									setNavigationModulesValue={setNavigationModulesValue}
 									isNavigationModulesChanged={isNavigationModulesChanged}
 									setIsNavigationModulesChanged={setIsNavigationModulesChanged}
-									theme={theme}
+									theme={theme ?? ""}
 								/>
 							)}
-							<FieldGroup title="Content for CMS">
-								<FieldsBehavior
-									title="Small avatar"
-									name="smallAvatar"
-									value={smallAvatar || null}
-									fieldType="ImageField"
-									onChange={setSmallAvatarValue}
-									helptext="Upload a 72x64px image to show in menu"
-									noGallery={true}
-								/>
-								<FieldsBehavior
-									title="Big avatar"
-									name="bigAvatar"
-									value={bigAvatar || null}
-									fieldType="ImageField"
-									onChange={setBigAvatarValue}
-									helptext="Upload a 256x64px image to show in open menu"
-									noGallery={true}
-								/>
-								<FieldsBehavior
-									title="Site screen thumbnail"
-									name="thumbnail"
-									value={thumbnail || null}
-									fieldType="ImageField"
-									onChange={setThumbnailValue}
-									helptext="Image for site screen"
-									noGallery={true}
-								/>
-							</FieldGroup>
+							<S.SectionWrapper>
+								<S.Heading>Include sitemap in Robots.txt</S.Heading>
+								<S.RobotsWrapper>
+									<S.Description>
+										By selecting this option, the <strong>sitemap of this site will be published in robots.txt</strong>,
+										making it easier for search engines to find your pages and therefore improving your SEO ranking.
+									</S.Description>
+									<ToggleField name="robots" value={showSitemapInRobots} onChange={setRobotsValue} size="s" />
+								</S.RobotsWrapper>
+							</S.SectionWrapper>
+							<S.SectionWrapper>
+								<S.Heading>Site Identity</S.Heading>
+								<S.Description>Manage how this site appears on the dashboard and browser tabs.</S.Description>
+								<S.ColumnsWrapper>
+									<FieldsBehavior
+										title="Favicon"
+										name="favicon"
+										value={favicon || null}
+										fieldType="ImageField"
+										onChange={setFaviconValue}
+										helptext="Small icon shown in browser tabs. Upload a png, svg, jpg image"
+										selectPosition={false}
+										fullWidth={true}
+										previewHeight={212}
+										previewWidth={348}
+										objectFit="contain"
+										noGallery
+									/>
+									<FieldsBehavior
+										title="Dashboard Thumbnail"
+										name="thumbnail"
+										value={thumbnail || null}
+										fieldType="ImageField"
+										onChange={setThumbnailValue}
+										helptext="Used on the sites dashboard. Upload a png, svg, jpg image"
+										selectPosition={false}
+										fullWidth={true}
+										previewHeight={212}
+										previewWidth={348}
+										noGallery
+									/>
+								</S.ColumnsWrapper>
+							</S.SectionWrapper>
+							<S.SectionWrapper>
+								<S.Heading>Navigation Branding</S.Heading>
+								<S.Description>Upload the logos displayed in the main navigation menu.</S.Description>
+								<S.ColumnsWrapper>
+									<FieldsBehavior
+										title="Collapsed Griddo menu logo"
+										name="smallAvatar"
+										value={smallAvatar || null}
+										fieldType="ImageField"
+										onChange={setSmallAvatarValue}
+										helptext="When collapsed, it appears in the Griddo menu. Recommended min size: 32x32px."
+										selectPosition={false}
+										fullWidth={true}
+										previewHeight={212}
+										previewWidth={348}
+										objectFit="contain"
+										noGallery
+									/>
+									<FieldsBehavior
+										title="Expanded Griddo menu logo"
+										name="bigAvatar"
+										value={bigAvatar || null}
+										fieldType="ImageField"
+										onChange={setBigAvatarValue}
+										helptext="When expanded, it appears in the Griddo menu. Recommended min size: 208x32px."
+										selectPosition={false}
+										fullWidth={true}
+										previewHeight={212}
+										previewWidth={348}
+										objectFit="contain"
+										noGallery
+									/>
+								</S.ColumnsWrapper>
+							</S.SectionWrapper>
 						</S.FormWrapper>
 					</S.ContentWrapper>
 				</S.Wrapper>
+				{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
 				<Modal
 					isOpen={isOpen}
 					hide={toggleModal}
 					title="Theme Change Warning"
-					secondaryAction={secondaryDeleteAction}
-					mainAction={mainDeleteAction}
+					secondaryAction={secondaryThemeAction}
+					mainAction={mainThemeAction}
 					size="S"
 				>
 					<S.ModalContent>
 						<p>
-							The selected theme has some restrictions. By switching to this theme,{" "}
+							The selected theme has some restrictions. By switching to this theme,
 							<strong>you may lose access to some modules or templates.</strong>
 						</p>
 					</S.ModalContent>
 				</Modal>
+				<Modal
+					isOpen={isHiddenOpen}
+					hide={toggleHiddenModal}
+					title="Enable public indexing?"
+					secondaryAction={secondaryHiddenAction}
+					mainAction={mainHiddenAction}
+					size="S"
+					height={240}
+				>
+					<S.ModalContent>
+						<p>
+							You are about to <strong>make this site visible to search engines</strong>. This will also{" "}
+							<strong>update the llms.txt</strong> file to allow AI models to access and read your content. This action
+							is permanent and cannot be undone.
+						</p>
+					</S.ModalContent>
+				</Modal>
 			</MainWrapper>
 		</>
 	);
@@ -211,10 +332,10 @@ const Globals = (props: IProps): JSX.Element => {
 
 interface IProps {
 	isSaving: boolean;
-	currentSiteInfo: any;
+	currentSiteInfo: ISite;
 	navItems: INavItem[];
 	currentNavItem: INavItem;
-	saveSettings(form: ISettingsForm): Promise<boolean>;
+	saveSettings(form: ISite): Promise<boolean>;
 	setHistoryPush(path: string, isEditor?: boolean): void;
 }
 
@@ -225,7 +346,7 @@ const mapDispatchToProps = {
 
 const mapStateToProps = (state: IRootState) => ({
 	isSaving: state.app.isSaving,
-	currentSiteInfo: state.sites.currentSiteInfo,
+	currentSiteInfo: state.sites.currentSiteInfo!,
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Globals);

package/src/modules/Settings/Globals/style.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { ToggleField } from "@ax/components";
 
 const Wrapper = styled.div`
   display: flex;
@@ -21,4 +22,69 @@ const ModalContent = styled.div`
   padding: ${(p) => p.theme.spacing.m};
 `;
 
-export { Wrapper, ContentWrapper, FormWrapper, ModalContent };
+const ButtonWrapper = styled.div`
+  margin-bottom: ${(p) => p.theme.spacing.m};
+  margin-top: ${(p) => `-${p.theme.spacing.xs}`};
+`;
+
+const SectionWrapper = styled.div`
+  border-top: 1px solid ${(p) => p.theme.color.uiLine};
+  padding-top: ${(p) => p.theme.spacing.m};
+`;
+
+const Heading = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Description = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const RobotsWrapper = styled.div`
+  display: flex;
+`;
+
+const ColumnsWrapper = styled.div`
+  display: flex;
+  gap: ${(p) => p.theme.spacing.m};
+`;
+
+const IconWrapper = styled.div`
+  width: ${(p) => p.theme.spacing.s};
+  height: ${(p) => p.theme.spacing.s};
+  margin-right: ${(p) => p.theme.spacing.xs};
+`;
+
+const HiddenFieldWrapper = styled.div`
+  display: flex;
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  padding: ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+  border-radius: ${({ theme }) => theme.radii.s};
+`;
+
+const StyledToggleField = styled(ToggleField)`
+  margin-left: auto;
+`;
+
+export {
+	Wrapper,
+	ContentWrapper,
+	FormWrapper,
+	ModalContent,
+	ButtonWrapper,
+	Heading,
+	SectionWrapper,
+	Description,
+	RobotsWrapper,
+	ColumnsWrapper,
+	IconWrapper,
+	HiddenFieldWrapper,
+	StyledToggleField,
+};

package/src/modules/Settings/Integrations/IntegrationItem/index.tsx

@@ -1,11 +1,10 @@
-import React from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
-import { UniqueIdentifier } from "@dnd-kit/core";
+import type { UniqueIdentifier } from "@dnd-kit/core";
 import { useSortable } from "@dnd-kit/sortable";
 
 import { useModal, usePermission, useToast } from "@ax/hooks";
-import { ICheck, IIntegration } from "@ax/types";
+import type { ICheck, IIntegration } from "@ax/types";
 import { CheckField, Icon, Modal, Toast, ToggleField, Tooltip } from "@ax/components";
 import { integrations } from "@ax/api";
 import { integrationsActions } from "@ax/containers/Integrations";

package/src/modules/Sites/SitesList/GridView/GridSiteItem/index.tsx

@@ -1,6 +1,6 @@
 import { connect } from "react-redux";
 
-import { FieldsBehavior, Icon, Modal, Tooltip } from "@ax/components";
+import { FieldsBehavior, Icon, Modal, Tag, Tooltip } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
 import { isDevelopment } from "@ax/helpers";
@@ -13,6 +13,7 @@ import * as S from "./style";
 
 const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
 	const { site, setSiteInfo, setHistoryPush, deleteSite, publishSite, unpublishSite, getParams } = props;
+	const { hidden } = site;
 
 	const {
 		publishedState,
@@ -37,20 +38,27 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
 	return (
 		<>
 			<S.SiteWrapper key={site.id} onClick={setSite} data-testid="grid-site-item">
-				<Tooltip content={siteTooltip}>
-					<ItemThumbnail src={site.thumbnail} width={290} height={199} />
-				</Tooltip>
+				<S.ImageContainer>
+					<Tooltip content={siteTooltip}>
+						<ItemThumbnail src={site.thumbnail} height={199} />
+					</Tooltip>
+				</S.ImageContainer>
 				<S.Wrapper>
 					<S.Title>
 						<ItemName name={site.name} length={40} />
 					</S.Title>
 					<S.IconsWrapper>
 						<Tooltip content={publishedTooltip[publishedState]}>
-							{publishedState && <Icon name={publishedState} size="24" />}
+							<Icon name={publishedState} size="24" />
 						</Tooltip>
 						<S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
 					</S.IconsWrapper>
 				</S.Wrapper>
+				{hidden && (
+					<S.TagWrapper>
+						<Tag text="Hidden" type="square" icon="hide" />
+					</S.TagWrapper>
+				)}
 			</S.SiteWrapper>
 			<Modal
 				isOpen={isOpenDelete}

package/src/modules/Sites/SitesList/GridView/GridSiteItem/style.tsx

@@ -2,18 +2,23 @@ import styled from "styled-components";
 import { ActionMenu } from "@ax/components";
 
 const SiteWrapper = styled.div`
+  position: relative;
   background: ${(p) => p.theme.color.uiBackground02};
   border-radius: 4px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: ${(p) => p.theme.spacing.s};
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.s} ${p.theme.spacing.xs} ${p.theme.spacing.s}`};
   cursor: pointer;
   div {
     max-width: 100%;
   }
 `;
 
+const ImageContainer = styled.div`
+  width: 100%;
+`;
+
 const Wrapper = styled.div`
   position: relative;
   margin-top: ${(p) => p.theme.spacing.xs};
@@ -22,24 +27,21 @@ const Wrapper = styled.div`
   max-height: 36px;
   width: 100%;
   height: 100%;
-  padding-right: 36px;
   justify-content: space-between;
 `;
 
-const Title = styled.span`
+const Title = styled.div`
   ${(p) => p.theme.textStyle.headingXS};
 `;
 
 const IconsWrapper = styled.div`
   display: flex;
   align-items: center;
-  justify-content: center;
+  margin-left: auto;
 `;
 
 const StyledActionMenu = styled(ActionMenu)`
-  position: absolute;
-  right: 0;
-  top: 0;
+  margin-left: ${(p) => p.theme.spacing.xxs};
 `;
 
 const ModalContent = styled.div`
@@ -54,4 +56,10 @@ const ModalContent = styled.div`
   }
 `;
 
-export { SiteWrapper, Wrapper, Title, IconsWrapper, StyledActionMenu, ModalContent };
+const TagWrapper = styled.div`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+`;
+
+export { SiteWrapper, Wrapper, Title, IconsWrapper, StyledActionMenu, ModalContent, TagWrapper, ImageContainer };

package/src/modules/Sites/SitesList/ListView/BulkHeader/TableHeader/index.tsx

@@ -51,6 +51,7 @@ const TableHeader = (props: IProps): JSX.Element => {
 			<S.LiveHeader>
 				<LiveFilter filterItems={filterItems} value={liveFilterValue} filterOptions={["offline", "active"]} />
 			</S.LiveHeader>
+			<S.TagHeader />
 			<S.LastAccessCell>
 				<LastAccessFilter sortItems={sortItems} sortedState={sortedListStatus} />
 			</S.LastAccessCell>

package/src/modules/Sites/SitesList/ListView/BulkHeader/TableHeader/style.tsx

@@ -40,6 +40,12 @@ const DomainHeader = styled(Header)`
 const LiveHeader = styled(Header)`
   position: relative;
   justify-content: center;
+  width: 100px;
+`;
+
+const TagHeader = styled(Header)`
+  position: relative;
+  width: 125px;
 `;
 
 const LastAccessCell = styled(Header)`
@@ -48,4 +54,4 @@ const LastAccessCell = styled(Header)`
   width: 200px;
 `;
 
-export { TableHeader, CheckHeader, DomainHeader, LiveHeader, NameWrapper, HeaderWrapper, LastAccessCell };
+export { TableHeader, CheckHeader, DomainHeader, LiveHeader, NameWrapper, HeaderWrapper, LastAccessCell, TagHeader };

package/src/modules/Sites/SitesList/ListView/ListSiteItem/index.tsx

@@ -1,6 +1,6 @@
 import { connect } from "react-redux";
 
-import { CheckField, FieldsBehavior, Icon, Modal, Tooltip } from "@ax/components";
+import { CheckField, FieldsBehavior, Icon, Modal, Tag, Tooltip } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
 import { getFormattedDateWithTimezone } from "@ax/helpers";
@@ -25,6 +25,8 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
 		hoverCheck,
 	} = props;
 
+	const { hidden } = site;
+
 	const {
 		publishedState,
 		publishedTooltip,
@@ -45,6 +47,8 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
 
 	const handleOnChange = (value: ICheck) => onCheck(value);
 
+	console.log(site, "site");
+
 	return (
 		<>
 			<S.SiteItemRow key={site.id} role="rowgroup" selected={isSelected} data-testid="list-site-item">
@@ -67,6 +71,9 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
 						{publishedState && <Icon name={publishedState} size="24" />}
 					</Tooltip>
 				</S.LiveCell>
+				<S.TagCell role="cell" onClick={setSite}>
+					{hidden && <Tag text="Hidden" type="square" icon="hide" />}
+				</S.TagCell>
 				<S.DateCell role="cell">
 					{site?.lastAccess ? getFormattedDateWithTimezone(new Date(site?.lastAccess), "MMM d, Y") : ""}
 				</S.DateCell>