[WEB-62] Improve minor UI details in WebCatalog app (#1467)

Author: quanglam2807

src/components/dialogs/dialog-catalog-app-details.js

@@ -84,7 +84,7 @@ const DialogCatalogAppDetails = ({
   open,
   details,
 }) => {
-  const shareUrl = details && !details.err ? `https://webcatalog.app/catalog/${details.id}` : '';
+  const shareUrl = details && !details.err && details.url ? `https://webcatalog.io/webcatalog/apps/${details.id}/` : '';
   const hostname = details ? extractHostname(details.url) : null;
 
   return (
@@ -187,7 +187,7 @@ const DialogCatalogAppDetails = ({
                     )}
                   </div>
 
-                  {!details.id.startsWith('custom-') && (
+                  {!details.id.startsWith('custom-') && details.url && (
                     <LinkSharing url={shareUrl} className={classes.shareInput} />
                   )}
                 </div>

src/components/pages/home/toolbar.js

@@ -81,6 +81,7 @@ const Toolbar = ({
       setSearchTerm,
     }) => {
       const categoryFilter = filters.find((filter) => filter.field === 'category');
+      const typeFilter = filters.find((filter) => filter.field === 'type');
 
       return (
         <div className={classes.root}>
@@ -95,6 +96,11 @@ const Toolbar = ({
                 {categoryFilter.values[0]}
               </Typography>
             )}
+            {!isLoading && categoryFilter == null && typeFilter && typeFilter.values[0] === 'Multisite' && (
+              <Typography variant="body2" color="textSecondary" className={classes.statusText}>
+                Spaces let you organize multiple services & accounts in one place.
+              </Typography>
+            )}
           </div>
           <div className={classes.right}>
             <Tooltip title="Refresh">

src/components/pages/preferences/section-sync.js

@@ -63,6 +63,7 @@ const SectionSync = ({
           <ListItemAvatar>
             <Avatar alt={displayName} src={photoURL} />
           </ListItemAvatar>
+          <ListItemText primary={displayName} secondary="-" />
         </ListItem>
         <Divider />
         <ListItem button onClick={() => requestOpenInBrowser('https://forms.gle/AAByYb4hYppP91YRA')}>

src/components/root/container.js

@@ -75,10 +75,6 @@ const styles = (theme) => ({
 });
 
 const filters = [];
-// widevine is not supported on ARM64 Linux & Windows
-if (window.process.platform === 'win32' || (window.process.platform === 'linux' && window.process.platform !== 'x64')) {
-  filters.push({ field: 'widevine', values: [0], type: 'all' });
-}
 
 const Container = ({
   classes,

src/components/shared/app-card.js

@@ -20,6 +20,7 @@ import HelpTooltip from './help-tooltip';
 import connectComponent from '../../helpers/connect-component';
 import isUrl from '../../helpers/is-url';
 import getEngineName from '../../helpers/get-engine-name';
+import isWidevineSupported from '../../helpers/is-widevine-supported';
 
 import {
   INSTALLED,
@@ -321,7 +322,19 @@ const AppCard = (props) => {
         disabled={status !== null}
         onClick={(e) => {
           e.stopPropagation();
-          onInstallApp(id, name, url, icon, combinedOpts);
+
+          // inform users that
+          // widevine is not supported on Linux (ARM64) & Windows (x64 + arm64)
+          if (!widevine || isWidevineSupported()) {
+            onInstallApp(id, name, url, icon, combinedOpts);
+          } else {
+            window.remote.dialog.showMessageBox(window.remote.getCurrentWindow(), {
+              message: `Due to technical limitations, ${name} app is not supported on this device.`,
+              buttons: ['I Understand', 'Install Anyway'],
+              cancelId: 0,
+              defaultId: 0,
+            }).catch(console.log); // eslint-disable-line
+          }
         }}
       >
         {label}
@@ -371,7 +384,7 @@ const AppCard = (props) => {
               classes={{ root: classes.topLeft }}
               onClick={(e) => {
                 e.stopPropagation();
-                requestOpenInBrowser('https://help.webcatalog.app/article/18-what-is-the-difference-between-standard-apps-and-multisite-apps');
+                requestOpenInBrowser('https://webcatalog.io/webcatalog/spaces/');
               }}
             >
               <GroupWorkIcon fontSize="small" />

src/helpers/is-widevine-supported.js

@@ -0,0 +1,10 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+// widevine is not supported on Linux (ARM64) & Windows (x64 + arm64)
+
+const isWidevineSupported = () => !(
+  window.process.platform === 'win32'
+  || (window.process.platform === 'linux' && window.process.platform !== 'x64'));
+
+export default isWidevineSupported;