basic marketplace and workspace

.github/workflows/main.yml

@@ -77,7 +77,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           tag_name: ${{ github.ref }}
-          release_name: Release ${{ github.ref }}
+          release_name: Topaz ${{ github.ref }}
           draft: false
           prerelease: false
 

README.md

@@ -13,7 +13,11 @@ If all goes well, **Topaz** will be a complete desktop app for all the major ope
 Topaz is currently in development. I just restarted, so there isn't much that's done so far.
 Feel free to contribute!
 
-### Building from Source
+### Using Topaz
+You can download the latest development build on the [releases](https://github.com/jewels86/Topaz/releases) page. From there, you can unzip the app into the folder of your choice and run the app!
+
+Please note that Topaz needs internet connection to create new workspaces or profiles, so you'll need to be connected on first startup.
+## Building from Source
 1. Clone the repository with:
 ```
 git clone https://github.com/jewels86/Topaz.git

main.js

@@ -7,8 +7,26 @@ var global = {
     selectorWin: null, dir: dir,
     workspace: null, profile: null 
 }
+ipcMain.handle('getDirectory', () => dir)
+ipcMain.handle('exists', (event, path) => fs.existsSync(path))
+ipcMain.handle('write', (event, path, data) => { console.log(path); return fs.writeFileSync(path, data) })
+ipcMain.handle('read', (event, path) => fs.readFileSync(path, 'utf8'))
+ipcMain.handle('tryCreateDir', (event, path) => fs.mkdirSync(path, { recursive: true }))
+ipcMain.handle('isAbsolute', (event, _path) => path.isAbsolute(_path))
+ipcMain.handle('pathJoin', (event, ...paths) => path.join(...paths))
+ipcMain.handle('workspace', () => global.workspace)
+ipcMain.handle('profile', () => global.profile)
+ipcMain.handle('setWorkspace', (event, workspace) => global.workspace = workspace)
+ipcMain.handle('setProfile', (event, profile) => global.profile = profile)
+ipcMain.handle('openIndex', (ev, workspace) => createIndexWindow(workspace))
+ipcMain.handle('openMarketplace', () => createMarketplaceSelectorWindow())
+ipcMain.handle('openSelector', () => createSelectorWindow())
+ipcMain.handle('openPrompt', (event, title, questions) => createPromptWindow(title, questions))
 
 function createSelectorWindow() {
+    if (global.marketplaceSelectorWin) global.marketplaceSelectorWin.close()
+    if (global.indexWin) global.indexWin.close()
+
     const selectorWin = new BrowserWindow({
         width: 800,
         height: 600,
@@ -23,19 +41,8 @@ function createSelectorWindow() {
     selectorWin.maximizable = false
     selectorWin.resizable = false
 
-    ipcMain.on('setTitleBarColor', (event, color) => { selectorWin.setTitleBarOverlay({ color }) })
-    ipcMain.handle('getDirectory', () => dir)
-    ipcMain.handle('exists', (event, path) => fs.existsSync(path))
-    ipcMain.handle('write', (event, path, data) => { console.log(path); return fs.writeFileSync(path, data) })
-    ipcMain.handle('read', (event, path) => fs.readFileSync(path, 'utf8'))
-    ipcMain.handle('tryCreateDir', (event, path) => fs.mkdirSync(path, { recursive: true }))
-    ipcMain.handle('isAbsolute', (event, _path) => path.isAbsolute(_path))
-    ipcMain.handle('pathJoin', (event, ...paths) => path.join(...paths))
-    ipcMain.handle('workspace', () => global.workspace)
-    ipcMain.handle('profile', () => global.profile)
-    ipcMain.handle('setWorkspace', (event, workspace) => global.workspace = workspace)
-    ipcMain.handle('setProfile', (event, profile) => global.profile = profile)
-    ipcMain.handle('openIndex', (ev, workspace) => createIndexWindow(workspace))
+    try { ipcMain.once('setTitleBarColor', (event, color) => { selectorWin.setTitleBarOverlay({ color }) }) }
+    catch {}
 
     selectorWin.loadFile('src/pages/selector.html')
 
@@ -62,4 +69,42 @@ function createIndexWindow(workspace) {
     global.indexWin = indexWin
 }
 
+function createMarketplaceSelectorWindow() {
+    global.selectorWin.close()
+
+    const marketplaceSelectorWin = new BrowserWindow({
+        width: 600,
+        height: 400,
+        webPreferences: {
+            preload: path.join(__dirname, 'src', 'preload.js'),
+        },
+        show: false,
+    })
+    marketplaceSelectorWin.maximizable = false
+    marketplaceSelectorWin.resizable = false
+    marketplaceSelectorWin.setMenuBarVisibility(false)
+
+    marketplaceSelectorWin.loadFile('src/pages/marketplace-selector.html')
+    marketplaceSelectorWin.once('ready-to-show', () => marketplaceSelectorWin.show())
+    global.marketplaceSelectorWin = marketplaceSelectorWin
+}
+
+function createPromptWindow(title, questions) {
+    const queryParams = new URLSearchParams({ title, questions: JSON.stringify(questions) }).toString();
+    const promptWin = new BrowserWindow({
+        width: 900,
+        height: 800,
+        webPreferences: {
+            preload: path.join(__dirname, 'src', 'preload.js'),
+        },
+        show: false,
+    })
+    promptWin.maximizable = false
+
+    promptWin.loadURL(`file://${path.join(__dirname, 'src', 'pages', 'prompt.html')}?${queryParams}`);
+    promptWin.once('ready-to-show', () => promptWin.show())
+
+    global.promptWin = promptWin
+}
+
 app.whenReady().then(createSelectorWindow)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "topaz",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Seamlessly integrate your work and life with one powerful platform.",
   "main": "main.js",
   "devDependencies": {

src/pages/index.html

@@ -7,6 +7,7 @@
         <link rel="stylesheet" href="../resources/styles.css">
         <link rel="stylesheet" href="../resources/css/index.css">
         <script defer src="../resources/js/index.js"></script>
+        <script defer src="../resources/js/workspace.js"></script>
         <script src="../resources/functions.js"></script>
         <script src="../resources/bootstrapping.js"></script>
         <script src="../resources/scripting.js"></script>

src/pages/marketplace-selector.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Topaz Marketplace Selector</title>
+        <link rel="stylesheet" href="../resources/styles.css">
+        <link rel="stylesheet" href="../resources/css/marketplace-selector.css">
+        <script defer src="../resources/js/marketplace-selector.js"></script>
+        <script src="../resources/functions.js"></script>
+        <script src="../resources/bootstrapping.js"></script>
+        <script src="https://kit.fontawesome.com/71ea2e3f82.js" crossorigin="anonymous"></script>
+    </head>
+    <body class="vertical-flex" style="height: 100%; margin: 0;">
+        <header class="text-center">
+            <h1>Marketplace Selector</h1>
+        </header>
+        <main class="vertical-flex" style="flex-grow: 1; overflow: hidden;">
+            <section class="horizontal-flex" id="topbar">
+                <button class="no-button-style" onclick="openSelector()"><i class="fa-solid fa-arrow-left"></i>Back</button>
+                <button class="no-button-style" onclick="newMarketplace()"><i class="fa-solid fa-plus"></i>New</button>
+            </section>
+            <section class="vertical-flex" id="marketplaces" style="flex-grow: 1; overflow-y: auto;"></section>
+        </main>
+    </body>
+</html>

src/pages/prompt.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Topaz Prompt</title>
+        <link rel="stylesheet" href="../resources/styles.css">
+        <link rel="stylesheet" href="../resources/css/prompt.css">
+        <script defer src="../resources/js/prompt.js"></script>
+        <script src="../resources/functions.js"></script>
+        <script src="../resources/bootstrapping.js"></script>
+        <script src="../resources/scripting.js"></script>
+        <script src="https://kit.fontawesome.com/71ea2e3f82.js" crossorigin="anonymous"></script>
+    </head>
+    <body>
+        <header>
+            <h1>Prompt</h1>
+        </header>
+        <main class="vertical-flex">
+
+        </main>
+        <button id="submit" onclick="submit()">Submit</button>
+    </body>
+</html>

src/pages/selector.html

@@ -11,17 +11,19 @@
         <script src="../resources/bootstrapping.js"></script>
         <script src="https://kit.fontawesome.com/71ea2e3f82.js" crossorigin="anonymous"></script>
     </head>
-    <body class="vertical-flex">
+    <body class="vertical-flex" style="height: 100%; margin: 0;">
         <header class="text-center">
             <h1>Topaz <span id="version"></span></h1>
         </header>
-        <main class="vertical-flex">
+        <main class="vertical-flex" style="flex-grow: 1; overflow: hidden;">
             <section class="horizontal-flex" id="topbar">
                 <button class="no-button-style" onclick="newWorkspace()"><i class="fa-solid fa-plus"></i>New</button>
                 <button class="no-button-style" onclick="openWorkspace()"><i class="fa-solid fa-folder"></i>Open</button>
-                <button class="no-button-style" onclick="openCatalog()"><i class="fa-solid fa-shop"></i>Catalog</button>
+                <button class="no-button-style" onclick="openMarketplace()"><i class="fa-solid fa-shop"></i>Marketplace</button>
+                <button class="no-button-style" onclick="refreshWorkspaces()"><i class="fa-solid fa-arrows-rotate"></i>Refresh</button>
+                <button class="no-button-style" onclick="openSettings()"><i class="fa-solid fa-gear"></i>Settings</button>
             </section>
-            <section class="vertical-flex" id="workspaces"></section>
+            <section class="vertical-flex" id="workspaces" style="flex-grow: 1; overflow-y: auto;"></section>
         </main>
     </body>
 </html>

src/preload.js

@@ -14,5 +14,9 @@ contextBridge.exposeInMainWorld('_api', {
     workspace:          () => ipcRenderer.invoke('workspace'),
 
     // selector.js
-    openIndex:          (workspace) => ipcRenderer.invoke('openIndex', workspace)
+    openIndex:          (workspace) => ipcRenderer.invoke('openIndex', workspace),
+    openMarketplace:    (marketplace) => ipcRenderer.invoke('openMarketplace', marketplace),
+
+    // market-selector.js
+    openSelector:        () => ipcRenderer.invoke('openSelector')
 })

src/resources/css/marketplace-selector.css

@@ -0,0 +1,72 @@
+html, body {
+    height: 100%;
+    width: 100%;
+    max-height: 100%;
+    max-width: 100%;
+    margin: 0;
+}
+
+header {
+    app-region: drag;
+}
+
+h1 {
+    font-size: 40px;
+    color: var(--heading);
+}
+
+#topbar > button {
+    margin: 2vh 1vw;
+    color: var(--buttons);
+}
+#topbar > button:hover {
+    color: var(--buttons-hover);
+}
+#topbar > button > i {
+    margin: 0 0.5vw;
+}
+
+.marketplace {
+    margin: 2vh 1%;
+    padding: 1vh 1%;
+    background-color: var(--marketplace-background);
+    width: 96%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.marketplace > h2 {
+    font-size: 20px;
+    color: var(--marketplace-name);
+    margin: 1vh;
+    font-weight: bold;
+}
+.marketplace > h3 {
+    font-size: 16px;
+    color: var(--marketplace-url);
+    margin: 1vh;
+    font-weight: normal;
+}
+
+.marketplace:hover {
+    background-color: var(--marketplace-hover);
+    cursor: pointer;
+}
+
+.marketplace::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+
+#marketplaces {
+    flex-grow: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+body, main {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}

src/resources/css/selector.css

@@ -1,3 +1,11 @@
+html, body {
+    height: 100%;
+    width: 100%;
+    max-height: 100%;
+    max-width: 100%;
+    margin: 0;
+}
+
 header {
     app-region: drag;
 }
@@ -19,12 +27,13 @@ h1 {
 }
 
 .workspace {
-    margin: 2vh 1vw;
+    margin: 1.5vh 1vw;
     padding: 1vh 1vw;
     background-color: var(--workspace-background);
     width: 96vw;
     display: flex;
     flex-direction: row;
+
 }
 .workspace > div, #workspaces > div > p {
     width: 46%;
@@ -51,4 +60,16 @@ h1 {
 .workspace:hover {
     background-color: var(--workspace-hover);
     cursor: pointer;
+}
+
+#workspaces {
+    flex-grow: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+body, main {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }

src/resources/js/index.js

@@ -12,10 +12,14 @@ async function main() {
     await bootstrap();
     console.log("Bootstrapped.");
     console.log("Setting mainfile 'last_accessed' to current date...");
+
     const mainfile = JSON.parse(await _api.read(await resolveFilePath("main.json")));
+    window.mainfile = mainfile;
+
     const workspacePath = await _api.workspace();
     const knownWorkspaceIndex = mainfile.known_workspaces.findIndex(ws => ws.path === workspacePath);
     mainfile.known_workspaces[knownWorkspaceIndex].last_accessed = new Date().toLocaleDateString("en-US");
+
     await _api.write(await resolveFilePath("main.json"), JSON.stringify(mainfile, null, 4));
     console.log("Loading workspace...");