Merge pull request #1861 from bluewave-labs/feature/1484-star-prompt

Add a modal to encourage starring the Checkmate repo #1484

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";
@@ -608,6 +609,8 @@ function Sidebar() {
 				</List>
 			</Box>
 
+			{!collapsed && <StarPrompt />}
+
 			<List
 				component="nav"
 				disablePadding

src/Components/StarPrompt/index.jsx

@@ -0,0 +1,101 @@
+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 { useSelector, useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { setStarPromptOpen } from '../../Features/UI/uiSlice';
+
+const StarPrompt = ({
+  repoUrl = 'https://github.com/bluewave-labs/checkmate'
+}) => {
+  const theme = useTheme();
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const isOpen = useSelector((state) => state.ui?.starPromptOpen ?? true);
+  const mode = useSelector((state) => state.ui.mode);
+
+  const handleClose = () => {
+    dispatch(setStarPromptOpen(false));
+  };
+
+  const handleStarClick = () => {
+    window.open(repoUrl, '_blank');
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Stack
+      direction="column"
+      sx={{
+        width: '100%',
+        padding: `${theme.spacing(6)} ${theme.spacing(6)}`,
+        borderTop: `1px solid ${theme.palette.primary.lowContrast}`,
+        borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
+        borderRadius: 0,
+        gap: theme.spacing(1.5),
+        backgroundColor: theme.palette.primary.main,
+      }}
+    >
+      <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%" pl={theme.spacing(4)}>
+        <Typography 
+          variant="subtitle2" 
+          sx={{ 
+            color: mode === 'dark' ? theme.palette.primary.contrastText : theme.palette.text.primary,
+            mt: theme.spacing(3)
+          }}
+        >
+          {t('starPromptTitle')}
+        </Typography>
+        <IconButton
+          onClick={handleClose}
+          size="small"
+          sx={{
+            color: theme.palette.text.primary,
+            padding: 0,
+            marginTop: theme.spacing(-5),
+            '&:hover': {
+              backgroundColor: 'transparent',
+              opacity: 0.8
+            },
+          }}
+        >
+          <CloseIcon sx={{ fontSize: '1.25rem' }} />
+        </IconButton>
+      </Stack>
+
+      <Typography 
+        variant="body1"
+        sx={{ 
+          color: theme.palette.text.secondary,
+          fontSize: '0.938rem',
+          lineHeight: 1.5,
+          mb: 1,
+          px: theme.spacing(4)
+        }}
+      >
+        {t('starPromptDescription')}
+      </Typography>
+
+      <Box 
+        component="img"
+        src={`https://img.shields.io/github/stars/bluewave-labs/checkmate?label=checkmate&style=social${mode === 'dark' ? '&color=white' : ''}`}
+        alt="GitHub stars"
+        onClick={handleStarClick}
+        sx={{
+          cursor: 'pointer',
+          transform: 'scale(0.65)',
+          transformOrigin: 'left center',
+          '&:hover': {
+            opacity: 0.8
+          },
+          pl: theme.spacing(4),
+          filter: mode === 'dark' ? 'invert(1)' : 'none'
+        }}
+      />
+    </Stack>
+  );
+};
+
+export default StarPrompt;

src/Features/UI/uiSlice.js

@@ -24,6 +24,7 @@ const initialState = {
 	timezone: "America/Toronto",
 	distributedUptimeEnabled: false,
 	language: "gb",
+	starPromptOpen: true,
 };
 
 const uiSlice = createSlice({
@@ -55,6 +56,9 @@ const uiSlice = createSlice({
 		setLanguage(state, action) {
 			state.language = action.payload;
 		},
+		setStarPromptOpen: (state, action) => {
+			state.starPromptOpen = action.payload;
+		},
 	},
 });
 
@@ -67,4 +71,5 @@ export const {
 	setTimezone,
 	setDistributedUptimeEnabled,
 	setLanguage,
+	setStarPromptOpen,
 } = uiSlice.actions;

src/locales/gb.json

@@ -142,7 +142,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"
 	"notifications": {
 		"enableNotifications": "Enable {{platform}} notifications",
 		"testNotification": "Test notification",

src/locales/tr.json

@@ -101,5 +101,7 @@
 	"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",
+    "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"
 }