From da989a7708fdf4e139ef37951c36086db4b9c1d2 Mon Sep 17 00:00:00 2001 From: mohadeseh safari Date: Mon, 3 Mar 2025 11:27:43 -0500 Subject: [PATCH 1/8] Add Sidebar and StarPrompt components --- src/Components/Sidebar/index.jsx | 3 + src/Components/StarPrompt/index.jsx | 142 ++++++++++++++++++++++++++++ 2 files changed, 145 insertions(+) create mode 100644 src/Components/StarPrompt/index.jsx diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx index ee0071d4f..e1623e425 100644 --- a/src/Components/Sidebar/index.jsx +++ b/src/Components/Sidebar/index.jsx @@ -17,6 +17,7 @@ import { } from "@mui/material"; import ThemeSwitch from "../ThemeSwitch"; import Avatar from "../Avatar"; +import StarPrompt from "../StarPrompt"; import LockSvg from "../../assets/icons/lock.svg?react"; import UserSvg from "../../assets/icons/user.svg?react"; import TeamSvg from "../../assets/icons/user-two.svg?react"; @@ -590,6 +591,8 @@ function Sidebar() { + {!collapsed && } + { + const [isVisible, setIsVisible] = useState(false); + const [starCount, setStarCount] = useState('0'); + + useEffect(() => { + const fetchStarCount = async () => { + try { + const owner = 'bluewave-labs'; + const repo = 'checkmate'; + + const response = await fetch(`https://api.github.com/repos/${owner}/${repo}`); + const data = await response.json(); + + const count = data.stargazers_count; + const formattedCount = count >= 1000 + ? `${(count / 1000).toFixed(1)}k` + : count.toString(); + + setStarCount(formattedCount); + } catch (error) { + console.error('Error fetching star count:', error); + } + }; + + fetchStarCount(); + + const hasClosedPrompt = localStorage.getItem(storageKey); + if (!hasClosedPrompt) { + setIsVisible(true); + } + }, [storageKey]); + + const handleClose = () => { + localStorage.setItem(storageKey, 'true'); + setIsVisible(false); + }; + + const handleStarClick = () => { + window.open(repoUrl, '_blank'); + }; + + if (!isVisible) return null; + + return ( + + + + + {title} + + + + + + + + {description} + + + + + + Checkmate + + + {starCount} + + + + + ); +}; + +export default StarPrompt; From da2d41ca078282839e3c3ef44f405e3cd8df6038 Mon Sep 17 00:00:00 2001 From: mohadeseh safari Date: Mon, 3 Mar 2025 15:58:03 -0500 Subject: [PATCH 2/8] Modify --- src/Components/StarPrompt/index.css | 3 + src/Components/StarPrompt/index.jsx | 165 ++++++++++++---------------- 2 files changed, 74 insertions(+), 94 deletions(-) create mode 100644 src/Components/StarPrompt/index.css diff --git a/src/Components/StarPrompt/index.css b/src/Components/StarPrompt/index.css new file mode 100644 index 000000000..21f3b7237 --- /dev/null +++ b/src/Components/StarPrompt/index.css @@ -0,0 +1,3 @@ +.star-prompt .MuiTypography-root { + font-size: var(--env-var-font-size-medium); +} diff --git a/src/Components/StarPrompt/index.jsx b/src/Components/StarPrompt/index.jsx index 3f7b08f43..135a703d5 100644 --- a/src/Components/StarPrompt/index.jsx +++ b/src/Components/StarPrompt/index.jsx @@ -1,141 +1,118 @@ import React, { useState, useEffect } from 'react'; -import { Box, Typography, IconButton, Paper } from '@mui/material'; +import { Box, Typography, IconButton } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; -import GitHubIcon from '@mui/icons-material/GitHub'; +import { useTheme } from '@emotion/react'; +import './index.css'; -const StarPrompt = ({ - repoUrl = 'https://github.com/bluewave-labs/checkmate', - title = 'Star Checkmate', - description = 'See the latest releases and help grow the community on GitHub', - storageKey = 'starPromptClosed' -}) => { +const StarPrompt = () => { const [isVisible, setIsVisible] = useState(false); - const [starCount, setStarCount] = useState('0'); + const STORAGE_KEY = 'starPromptClosed'; + const theme = useTheme(); useEffect(() => { - const fetchStarCount = async () => { - try { - const owner = 'bluewave-labs'; - const repo = 'checkmate'; - - const response = await fetch(`https://api.github.com/repos/${owner}/${repo}`); - const data = await response.json(); - - const count = data.stargazers_count; - const formattedCount = count >= 1000 - ? `${(count / 1000).toFixed(1)}k` - : count.toString(); - - setStarCount(formattedCount); - } catch (error) { - console.error('Error fetching star count:', error); - } - }; - - fetchStarCount(); - - const hasClosedPrompt = localStorage.getItem(storageKey); + const hasClosedPrompt = localStorage.getItem(STORAGE_KEY); if (!hasClosedPrompt) { setIsVisible(true); } - }, [storageKey]); + }, []); const handleClose = () => { - localStorage.setItem(storageKey, 'true'); + localStorage.setItem(STORAGE_KEY, 'true'); setIsVisible(false); }; const handleStarClick = () => { - window.open(repoUrl, '_blank'); + window.open('https://github.com/bluewave-labs/checkmate', '_blank'); }; if (!isVisible) return null; return ( - - - - - {title} + + + + Star Checkmate - + - - - {description} + + + See the latest releases and help grow the community on GitHub - - - Checkmate - - - {starCount} - - + /> - + ); }; From 6825f72808faa7983eb426bd928778885f539367 Mon Sep 17 00:00:00 2001 From: mohadeseh safari Date: Wed, 5 Mar 2025 20:36:52 -0500 Subject: [PATCH 3/8] StarPrompt typography changes --- src/Components/StarPrompt/index.css | 8 ++++++++ src/Components/StarPrompt/index.jsx | 9 +-------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/Components/StarPrompt/index.css b/src/Components/StarPrompt/index.css index 21f3b7237..29c5e4706 100644 --- a/src/Components/StarPrompt/index.css +++ b/src/Components/StarPrompt/index.css @@ -1,3 +1,11 @@ .star-prompt .MuiTypography-root { font-size: var(--env-var-font-size-medium); } + +.star-prompt .description { + font-family: Inter; + font-weight: 400; + font-size: 12px; + line-height: 14.53px; + letter-spacing: 0%; +} diff --git a/src/Components/StarPrompt/index.jsx b/src/Components/StarPrompt/index.jsx index 135a703d5..59ee4a796 100644 --- a/src/Components/StarPrompt/index.jsx +++ b/src/Components/StarPrompt/index.jsx @@ -53,10 +53,6 @@ const StarPrompt = () => { }}> { Date: Fri, 7 Mar 2025 15:34:30 -0500 Subject: [PATCH 4/8] fix: improve StarPrompt component and remove unused CSS --- src/Components/StarPrompt/index.css | 11 -- src/Components/StarPrompt/index.jsx | 153 +++++++++++++--------------- src/Features/UI/uiSlice.js | 7 ++ src/locales/gb.json | 6 +- src/locales/tr.json | 6 +- 5 files changed, 88 insertions(+), 95 deletions(-) delete mode 100644 src/Components/StarPrompt/index.css diff --git a/src/Components/StarPrompt/index.css b/src/Components/StarPrompt/index.css deleted file mode 100644 index 29c5e4706..000000000 --- a/src/Components/StarPrompt/index.css +++ /dev/null @@ -1,11 +0,0 @@ -.star-prompt .MuiTypography-root { - font-size: var(--env-var-font-size-medium); -} - -.star-prompt .description { - font-family: Inter; - font-weight: 400; - font-size: 12px; - line-height: 14.53px; - letter-spacing: 0%; -} diff --git a/src/Components/StarPrompt/index.jsx b/src/Components/StarPrompt/index.jsx index 59ee4a796..74362c64c 100644 --- a/src/Components/StarPrompt/index.jsx +++ b/src/Components/StarPrompt/index.jsx @@ -1,111 +1,100 @@ -import React, { useState, useEffect } from 'react'; -import { Box, Typography, IconButton } from '@mui/material'; +import React from 'react'; +import { Typography, IconButton, Stack, Box } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; import { useTheme } from '@emotion/react'; -import './index.css'; +import { useSelector, useDispatch } from 'react-redux'; +import { useTranslation } from 'react-i18next'; +import { setStarPromptClosed } from '../../Features/UI/uiSlice'; -const StarPrompt = () => { - const [isVisible, setIsVisible] = useState(false); - const STORAGE_KEY = 'starPromptClosed'; +const StarPrompt = ({ + repoUrl = 'https://github.com/bluewave-labs/checkmate' +}) => { const theme = useTheme(); - - useEffect(() => { - const hasClosedPrompt = localStorage.getItem(STORAGE_KEY); - if (!hasClosedPrompt) { - setIsVisible(true); - } - }, []); + const dispatch = useDispatch(); + const { t } = useTranslation(); + const isClosed = useSelector((state) => state.ui?.starPrompt?.closed ?? false); + const mode = useSelector((state) => state.ui.mode); const handleClose = () => { - localStorage.setItem(STORAGE_KEY, 'true'); - setIsVisible(false); + dispatch(setStarPromptClosed(true)); }; const handleStarClick = () => { - window.open('https://github.com/bluewave-labs/checkmate', '_blank'); + window.open(repoUrl, '_blank'); }; - if (!isVisible) return null; + if (isClosed) return null; return ( - - - - - Star Checkmate - - - - - - + - See the latest releases and help grow the community on GitHub + {t('starPrompt.title')} - - - - + > + + + + + + {t('starPrompt.description')} + + + + ); }; diff --git a/src/Features/UI/uiSlice.js b/src/Features/UI/uiSlice.js index ebafdbbf6..8f0e38ff1 100644 --- a/src/Features/UI/uiSlice.js +++ b/src/Features/UI/uiSlice.js @@ -24,6 +24,9 @@ const initialState = { timezone: "America/Toronto", distributedUptimeEnabled: false, language: "gb", + starPrompt: { + closed: false + }, }; const uiSlice = createSlice({ @@ -55,6 +58,9 @@ const uiSlice = createSlice({ setLanguage(state, action) { state.language = action.payload; }, + setStarPromptClosed(state, action) { + state.starPrompt.closed = action.payload; + }, }, }); @@ -67,4 +73,5 @@ export const { setTimezone, setDistributedUptimeEnabled, setLanguage, + setStarPromptClosed, } = uiSlice.actions; diff --git a/src/locales/gb.json b/src/locales/gb.json index cf7711fa8..36cc1d9ad 100644 --- a/src/locales/gb.json +++ b/src/locales/gb.json @@ -107,5 +107,9 @@ "settingsDemoMonitorsAdded": "Successfully added demo monitors", "settingsFailedToAddDemoMonitors": "Failed to add demo monitors", "settingsMonitorsDeleted": "Successfully deleted all monitors", - "settingsFailedToDeleteMonitors": "Failed to delete all monitors" + "settingsFailedToDeleteMonitors": "Failed to delete all monitors", + "starPrompt": { + "title": "Star Checkmate", + "description": "See the latest releases and help grow the community on GitHub" + } } diff --git a/src/locales/tr.json b/src/locales/tr.json index abd358548..c88287151 100644 --- a/src/locales/tr.json +++ b/src/locales/tr.json @@ -101,5 +101,9 @@ "settingsDemoMonitorsAdded": "Demo monitörler başarıyla eklendi", "settingsFailedToAddDemoMonitors": "Demo monitörler eklenemedi", "settingsMonitorsDeleted": "Tüm monitörler başarıyla silindi", - "settingsFailedToDeleteMonitors": "Monitörler silinemedi" + "settingsFailedToDeleteMonitors": "Monitörler silinemedi", + "starPrompt": { + "title": "Checkmate yıldızla değerlendirin", + "description": "En son sürümleri görün ve GitHub'daki topluluğun büyümesine yardımcı olun" + } } From c185979479bfba96e38e263871eebf76deddb607 Mon Sep 17 00:00:00 2001 From: mohadeseh safari Date: Fri, 7 Mar 2025 15:46:13 -0500 Subject: [PATCH 5/8] fix: handle undefined starPrompt state in Redux --- src/Features/UI/uiSlice.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Features/UI/uiSlice.js b/src/Features/UI/uiSlice.js index 8f0e38ff1..7ce9298b4 100644 --- a/src/Features/UI/uiSlice.js +++ b/src/Features/UI/uiSlice.js @@ -59,6 +59,9 @@ const uiSlice = createSlice({ state.language = action.payload; }, setStarPromptClosed(state, action) { + if (!state.starPrompt) { + state.starPrompt = {}; + } state.starPrompt.closed = action.payload; }, }, From 0f2832b728233670f044d5b49678deb0923ea06e Mon Sep 17 00:00:00 2001 From: mohadeseh safari Date: Mon, 10 Mar 2025 14:23:09 -0400 Subject: [PATCH 6/8] simplify star prompt translations and state --- src/Components/StarPrompt/index.jsx | 12 ++++++------ src/Features/UI/uiSlice.js | 13 ++++--------- src/locales/gb.json | 2 ++ src/locales/tr.json | 2 ++ 4 files changed, 14 insertions(+), 15 deletions(-) diff --git a/src/Components/StarPrompt/index.jsx b/src/Components/StarPrompt/index.jsx index 74362c64c..8cbdd9da9 100644 --- a/src/Components/StarPrompt/index.jsx +++ b/src/Components/StarPrompt/index.jsx @@ -4,7 +4,7 @@ import CloseIcon from '@mui/icons-material/Close'; import { useTheme } from '@emotion/react'; import { useSelector, useDispatch } from 'react-redux'; import { useTranslation } from 'react-i18next'; -import { setStarPromptClosed } from '../../Features/UI/uiSlice'; +import { setStarPromptOpen } from '../../Features/UI/uiSlice'; const StarPrompt = ({ repoUrl = 'https://github.com/bluewave-labs/checkmate' @@ -12,18 +12,18 @@ const StarPrompt = ({ const theme = useTheme(); const dispatch = useDispatch(); const { t } = useTranslation(); - const isClosed = useSelector((state) => state.ui?.starPrompt?.closed ?? false); + const isOpen = useSelector((state) => state.ui?.starPromptOpen ?? true); const mode = useSelector((state) => state.ui.mode); const handleClose = () => { - dispatch(setStarPromptClosed(true)); + dispatch(setStarPromptOpen(false)); }; const handleStarClick = () => { window.open(repoUrl, '_blank'); }; - if (isClosed) return null; + if (!isOpen) return null; return ( - {t('starPrompt.title')} + {t('starPromptTitle')} - {t('starPrompt.description')} + {t('starPromptDescription')} { + state.starPromptOpen = action.payload; }, }, }); @@ -76,5 +71,5 @@ export const { setTimezone, setDistributedUptimeEnabled, setLanguage, - setStarPromptClosed, + setStarPromptOpen, } = uiSlice.actions; diff --git a/src/locales/gb.json b/src/locales/gb.json index 36cc1d9ad..fd12ee227 100644 --- a/src/locales/gb.json +++ b/src/locales/gb.json @@ -108,6 +108,8 @@ "settingsFailedToAddDemoMonitors": "Failed to add demo monitors", "settingsMonitorsDeleted": "Successfully deleted all monitors", "settingsFailedToDeleteMonitors": "Failed to delete all monitors", + "starPromptTitle": "Star Checkmate", + "starPromptDescription": "See the latest releases and help grow the community on GitHub", "starPrompt": { "title": "Star Checkmate", "description": "See the latest releases and help grow the community on GitHub" diff --git a/src/locales/tr.json b/src/locales/tr.json index c88287151..1c055216a 100644 --- a/src/locales/tr.json +++ b/src/locales/tr.json @@ -102,6 +102,8 @@ "settingsFailedToAddDemoMonitors": "Demo monitörler eklenemedi", "settingsMonitorsDeleted": "Tüm monitörler başarıyla silindi", "settingsFailedToDeleteMonitors": "Monitörler silinemedi", + "starPromptTitle": "Checkmate yıldızla değerlendirin", + "starPromptDescription": "En son sürümleri görün ve GitHub'daki topluluğun büyümesine yardımcı olun", "starPrompt": { "title": "Checkmate yıldızla değerlendirin", "description": "En son sürümleri görün ve GitHub'daki topluluğun büyümesine yardımcı olun" From ffa9ddaf242cdb814e6ab6052a0f9d4eb8db5658 Mon Sep 17 00:00:00 2001 From: mohadeseh safari Date: Mon, 10 Mar 2025 17:33:04 -0400 Subject: [PATCH 7/8] Modify json --- src/locales/gb.json | 7 ++----- src/locales/tr.json | 6 +----- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/locales/gb.json b/src/locales/gb.json index fd12ee227..0f4734ed9 100644 --- a/src/locales/gb.json +++ b/src/locales/gb.json @@ -109,9 +109,6 @@ "settingsMonitorsDeleted": "Successfully deleted all monitors", "settingsFailedToDeleteMonitors": "Failed to delete all monitors", "starPromptTitle": "Star Checkmate", - "starPromptDescription": "See the latest releases and help grow the community on GitHub", - "starPrompt": { - "title": "Star Checkmate", - "description": "See the latest releases and help grow the community on GitHub" - } + "starPromptDescription": "See the latest releases and help grow the community on GitHub" + } diff --git a/src/locales/tr.json b/src/locales/tr.json index 1c055216a..320c89c18 100644 --- a/src/locales/tr.json +++ b/src/locales/tr.json @@ -103,9 +103,5 @@ "settingsMonitorsDeleted": "Tüm monitörler başarıyla silindi", "settingsFailedToDeleteMonitors": "Monitörler silinemedi", "starPromptTitle": "Checkmate yıldızla değerlendirin", - "starPromptDescription": "En son sürümleri görün ve GitHub'daki topluluğun büyümesine yardımcı olun", - "starPrompt": { - "title": "Checkmate yıldızla değerlendirin", - "description": "En son sürümleri görün ve GitHub'daki topluluğun büyümesine yardımcı olun" - } + "starPromptDescription": "En son sürümleri görün ve GitHub'daki topluluğun büyümesine yardımcı olun" } From 1745faf70cec4ac8bc0157b98594c745a12e38eb Mon Sep 17 00:00:00 2001 From: mohadeseh safari Date: Mon, 10 Mar 2025 17:36:38 -0400 Subject: [PATCH 8/8] ti.json --- src/locales/tr.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/locales/tr.json b/src/locales/tr.json index 320c89c18..d93083871 100644 --- a/src/locales/tr.json +++ b/src/locales/tr.json @@ -102,6 +102,6 @@ "settingsFailedToAddDemoMonitors": "Demo monitörler eklenemedi", "settingsMonitorsDeleted": "Tüm monitörler başarıyla silindi", "settingsFailedToDeleteMonitors": "Monitörler silinemedi", - "starPromptTitle": "Checkmate yıldızla değerlendirin", - "starPromptDescription": "En son sürümleri görün ve GitHub'daki topluluğun büyümesine yardımcı olun" + "starPromptTitle": "Checkmate yıldızla değerlendirin", + "starPromptDescription": "En son sürümleri görün ve GitHub'daki topluluğun büyümesine yardımcı olun" }