Changes to support app with same UI code

studiorack · Sep 21, 2024 · 093c481 · 093c481
1 parent d750c71
commit 093c481
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 28 deletions.
diff --git a/components/list.tsx b/components/list.tsx
@@ -1,13 +1,13 @@
 import styles from '../styles/components/list.module.css';
-import { PluginVersion, PluginVersionLocal } from '@studiorack/core';
+import { PluginVersion, PluginVersionLocal, ProjectVersion, ProjectVersionLocal } from '@studiorack/core';
 import Header from './header';
 import Card from './card';
 import Filters from './filters';
 import Crumb from './crumb';
 
 type ListProps = {
   filters?: boolean;
-  plugins: PluginVersion[] | PluginVersionLocal[];
+  plugins: PluginVersion[] | PluginVersionLocal[] | ProjectVersion[] | ProjectVersionLocal[];
   type: string;
   title: string;
 };
@@ -18,9 +18,11 @@ const List = ({ filters = true, plugins, type, title }: ListProps) => (
     <Header title={title} count={plugins.length} />
     {filters ? <Filters section={type} /> : ''}
     <div className={styles.listGrid}>
-      {plugins.map((plugin: PluginVersion | PluginVersionLocal, pluginIndex: number) => (
-        <Card section={type} plugin={plugin} pluginIndex={pluginIndex} key={`${plugin.id}-${pluginIndex}`}></Card>
-      ))}
+      {plugins.map(
+        (plugin: PluginVersion | PluginVersionLocal | ProjectVersion | ProjectVersionLocal, pluginIndex: number) => (
+          <Card section={type} plugin={plugin} pluginIndex={pluginIndex} key={`${plugin.id}-${pluginIndex}`}></Card>
+        ),
+      )}
     </div>
   </section>
 );

diff --git a/components/navigation.tsx b/components/navigation.tsx
@@ -1,5 +1,6 @@
 import styles from '../styles/components/navigation.module.css';
 import { getBasePath, isSelected } from '../lib/path';
+import { ELECTRON_APP } from '../lib/utils';
 
 const Navigation = () => (
   <div>
@@ -8,11 +9,20 @@ const Navigation = () => (
       <span className={styles.navMenuNavIcn}></span>
     </label>
     <ul className={styles.navMenu}>
-      <li>
-        <a href={`${getBasePath()}/`} className={`${styles.navItem} ${isSelected('/')}`}>
-          Tools
-        </a>
-      </li>
+      {ELECTRON_APP ? (
+        <li>
+          <a href={`${getBasePath()}/projects`} className={`${styles.navItem} ${isSelected('/projects')}`}>
+            Projects
+          </a>
+        </li>
+      ) : (
+        <li>
+          <a href={`${getBasePath()}/`} className={`${styles.navItem} ${isSelected('/')}`}>
+            Tools
+          </a>
+        </li>
+      )}
+
       <li>
         <a href={`${getBasePath()}/instruments`} className={`${styles.navItem} ${isSelected('/instruments')}`}>
           Instruments
@@ -23,22 +33,34 @@ const Navigation = () => (
           Effects
         </a>
       </li>
-      <li>
-        <a href={`${getBasePath()}/docs`} className={`${styles.navItem} ${isSelected('/docs')}`}>
-          Docs
-        </a>
-      </li>
-      <li>
-        <a href="https://discord.gg/9D94f98PxP" className={`${styles.navButton} button`} target="_blank">
-          Community
-          <img
-            className={styles.navButtonIcon}
-            src={`${getBasePath()}/images/icon-external-link.svg`}
-            alt="External link"
-            loading="lazy"
-          />
-        </a>
-      </li>
+      {ELECTRON_APP ? (
+        <li>
+          <a href={`${getBasePath()}/settings`} className={`${styles.navItem} ${isSelected('/settings')}`}>
+            Settings
+          </a>
+        </li>
+      ) : (
+        <li>
+          <a href={`${getBasePath()}/docs`} className={`${styles.navItem} ${isSelected('/docs')}`}>
+            Docs
+          </a>
+        </li>
+      )}
+      {!ELECTRON_APP ? (
+        <li>
+          <a href="https://discord.gg/9D94f98PxP" className={`${styles.navButton} button`} target="_blank">
+            Community
+            <img
+              className={styles.navButtonIcon}
+              src={`${getBasePath()}/images/icon-external-link.svg`}
+              alt="External link"
+              loading="lazy"
+            />
+          </a>
+        </li>
+      ) : (
+        ''
+      )}
     </ul>
   </div>
 );

diff --git a/lib/api.ts b/lib/api.ts
@@ -3,8 +3,9 @@ import { join } from 'path';
 import matter from 'gray-matter';
 import Doc from '../types/doc';
 import { PluginEntry, PluginPack, pluginsGet, PluginVersion } from '@studiorack/core';
+import { ELECTRON_APP } from './utils';
 
-const docsDirectory = join(process.cwd(), '_docs');
+const docsDirectory = ELECTRON_APP ? join(process.cwd(), 'renderer', '_docs') : join(process.cwd(), '_docs');
 
 export function getDocSlugs() {
   return fs.readdirSync(docsDirectory);

diff --git a/lib/gtag.ts b/lib/gtag.ts
@@ -1,3 +1,5 @@
+import { ELECTRON_APP } from './utils';
+
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 declare global {
   interface Window {
@@ -12,7 +14,7 @@ interface AnalyticsProps {
   value: string;
 }
 
-export const GA_TRACKING_ID = 'G-8XFFV4K2XH';
+export const GA_TRACKING_ID = ELECTRON_APP ? 'G-70BC3S1DBZ' : 'G-8XFFV4K2XH';
 
 // https://developers.google.com/analytics/devguides/collection/gtagjs/pages
 export const pageview = (url: string) => {

diff --git a/lib/utils.ts b/lib/utils.ts
@@ -2,6 +2,8 @@ import slugify from 'slugify';
 import { siteTitle } from '../components/layout';
 import { PluginVersion, PluginVersionLocal } from '@studiorack/core';
 
+export const ELECTRON_APP: boolean = false;
+
 export function pageTitle(items: string[]) {
   return (
     siteTitle +

diff --git a/public/images/plugin.png b/public/images/plugin.png
diff --git a/public/images/project.png b/public/images/project.png
diff --git a/styles/global.css b/styles/global.css
@@ -90,6 +90,21 @@ button:hover,
   background: rgba(255, 255, 255, 0.15);
 }
 
+button:disabled,
+.button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+button:disabled:hover,
+.button:disabled:hover {
+  background-color: #0d51ff;
+}
+
+.button-clear:disabled:hover {
+  background: transparent;
+}
+
 @media (min-width: 48rem) {
   h1 {
     font-size: 56px;