Merge remote-tracking branch 'upstream/main' into accessibility

README.md

@@ -118,9 +118,12 @@ Here is the roadmap of the desktop app - https://github.com/responsively-org/res
 <p>&nbsp;</p>
 
 <p align="center">
-  <a href="https://www.bairesdev.com/?ref=Responsively" target="_blank">
+  <a href="https://www.bairesdev.com/?ref=Responsively" target="_blank" >
     <img src="https://responsively.app/_next/static/media/bairesdev.2b0bfd41.svg" width="250px" height="120px" alt="Baires Dev">
-  </a>
+  </a>&nbsp;&nbsp;&nbsp;&nbsp;
+  <a href="https://www.browserstack.com/?utm_medium=partnered&utm_source=responsively" target="_blank" style="margin-left: 10px;">
+    <img src="https://responsively.app/_next/static/media/browserStack.b67d4227.svg" width="250px" height="120px" alt="BrowserStack">
+  </a>&nbsp;&nbsp;&nbsp;&nbsp;
   <a href="https://opencollective.com/responsively" target="_blank">
     <img src="https://user-images.githubusercontent.com/1283424/142834528-4cd5b8eb-eeae-4437-b749-d09c96dde160.png" height="120px" alt="Sponsor to add your company logo here">
   </a>

desktop-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "Responsively-App",
   "productName": "ResponsivelyApp",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "A developer-friendly browser for developing responsive web apps",
   "keywords": [
     "developer-tools",

desktop-app/release/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ResponsivelyApp",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "A developer-friendly browser for developing responsive web apps",
   "license": "MIT",
   "author": {

desktop-app/src/renderer/AppContent.tsx

@@ -10,8 +10,7 @@ import { APP_VIEWS, selectAppView } from './store/features/ui';
 import type { AppView } from './store/features/ui';
 import DeviceManager from './components/DeviceManager';
 import KeyboardShortcutsManager from './components/KeyboardShortcutsManager';
-import ReleaseNotes from './components/ReleaseNotes';
-import { Sponsorship } from './components/Sponsorship';
+import { InfoPopups } from './components/InfoPopups';
 
 if ((navigator as any).userAgentData.platform === 'Windows') {
   import('./titlebar-styles.css');
@@ -49,8 +48,7 @@ const AppContent = () => {
       <ThemeProvider>
         <KeyboardShortcutsManager />
         <ViewComponent />
-        <ReleaseNotes />
-        <Sponsorship />
+        <InfoPopups />
       </ThemeProvider>
     </Provider>
   );

desktop-app/src/renderer/components/InfoPopups/index.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { ReleaseNotes, isReleaseNotesUnseen } from '../ReleaseNotes';
+import { Sponsorship } from '../Sponsorship';
+
+export const InfoPopups = () => {
+  const [showReleaseNotes, setShowReleaseNotes] = useState<boolean>(false);
+  const [showSponsorship, setShowSponsorship] = useState<boolean>(false);
+
+  useEffect(() => {
+    (async () => {
+      if (await isReleaseNotesUnseen()) {
+        setShowReleaseNotes(true);
+        return;
+      }
+      setShowSponsorship(true);
+    })();
+  }, []);
+
+  if (showReleaseNotes) {
+    return <ReleaseNotes />;
+  }
+
+  if (showSponsorship) {
+    return <Sponsorship />;
+  }
+
+  return null;
+};

desktop-app/src/renderer/components/ReleaseNotes/index.tsx

@@ -6,22 +6,38 @@ import ReactMarkdown from 'react-markdown';
 import Button from '../Button';
 import Modal from '../Modal';
 
-const ReleaseNotes = () => {
+export const isReleaseNotesUnseen = async () => {
+  const appMeta = await window.electron.ipcRenderer.invoke<
+    object,
+    AppMetaResponse
+  >(IPC_MAIN_CHANNELS.APP_META, {});
+  const seenVersions = window.electron.store.get('seenReleaseNotes');
+  if (seenVersions && seenVersions.includes(appMeta.appVersion)) {
+    return false;
+  }
+  if (!seenVersions || seenVersions.length === 0) {
+    // First time user, so we don't show release notes
+    window.electron.store.set('seenReleaseNotes', [appMeta.appVersion]);
+    return false;
+  }
+  return true;
+};
+
+export const ReleaseNotes = () => {
   const [version, setVersion] = useState<string>('');
   const [content, setContent] = useState<string | undefined>();
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   useEffect(() => {
     (async () => {
+      if (!isReleaseNotesUnseen()) {
+        return;
+      }
       await new Promise((resolve) => setTimeout(resolve, 1000));
       const appMeta = await window.electron.ipcRenderer.invoke<
         object,
         AppMetaResponse
       >(IPC_MAIN_CHANNELS.APP_META, {});
-      const seenVersions = window.electron.store.get('seenReleaseNotes');
-      if (seenVersions && seenVersions.includes(appMeta.appVersion)) {
-        return;
-      }
       setVersion(appMeta.appVersion);
       const release = await fetch(
         `https://api.github.com/repos/responsively-org/responsively-app/releases/tags/v${appMeta.appVersion}`
@@ -142,5 +158,3 @@ const ReleaseNotes = () => {
     </Modal>
   );
 };
-
-export default ReleaseNotes;