ibps for desktop 0.11.0

.prettierignore

@@ -5,3 +5,5 @@ target/
 *.md
 *.rs
 RustPython/
+ibps-desktop/target-desktop
+ibps-desktop/build

ibps-desktop/.gitignore

@@ -1,3 +1,5 @@
 # Generated by Cargo
 # will have compiled files and executables
 /target/
+/target-desktop/
+build/

ibps-desktop/build.py

@@ -0,0 +1,21 @@
+# When using macOS, you can build for Windows too
+# See: https://tauri.app/v1/guides/building/cross-platform
+
+from os import system
+
+TARGET='CARGO_TARGET_DIR'
+DARWIN='universal-apple-darwin'
+WINDOWS='x86_64-pc-windows-msvc'
+
+# build for macOS (universal binary)
+# rustup target add universal-apple-darwin
+system(f'{TARGET} cargo tauri build --target {DARWIN}')
+
+# build for Windows
+# rustup target add x86_64-pc-windows-msvc
+# cargo install --locked cargo-xwin
+system(f'{TARGET} cargo tauri build --runner cargo-xwin --target {WINDOWS}')
+
+system('mkdir build')
+system(f'cp target-desktop/{DARWIN}/release/bundle/dmg/*.dmg build')
+system(f'cp target-desktop/{WINDOWS}/release/bundle/nsis/*.exe build')

ibps-desktop/build.sh

@@ -0,0 +1,19 @@
+# When using macOS, you can build for Windows too
+# See: https://tauri.app/v1/guides/building/cross-platform
+
+DARWIN='universal-apple-darwin'
+WINDOWS='x86_64-pc-windows-msvc'
+
+# build for macOS (universal binary)
+# rustup target add universal-apple-darwin
+CARGO_TARGET_DIR=target-desktop cargo tauri build --target $DARWIN
+
+# build for Windows
+# brew install nsis
+# rustup target add x86_64-pc-windows-msvc
+# cargo install --locked cargo-xwin
+CARGO_TARGET_DIR=target-desktop cargo tauri build --runner cargo-xwin --target $WINDOWS
+
+mkdir -p build
+cp target-desktop/$DARWIN/release/bundle/dmg/*.dmg build
+cp target-desktop/$WINDOWS/release/bundle/nsis/*.exe build

ibps-desktop/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "IBPS IDE",
-    "version": "0.1.0"
+    "version": "0.11.0"
   },
   "tauri": {
     "macOSPrivateApi": true,

ibps-ide/components/Ide/IDEPanels/FilesPanel/DownloadDesktopAppModal.tsx

@@ -0,0 +1,37 @@
+import { useDesktopDownloadURLs } from "../../../../hooks/useDesktopDownloadURLs";
+
+const DownloadDesktopAppModal: React.FC = () => {
+  const secondaryButton =
+    "cursor-pointer highlight w-full flex-1 rounded-md bg-idelight-300 py-2 px-3 text-idelight-800 dark:bg-idedark-700 dark:text-white";
+  const primaryButton =
+    "cursor-pointer highlight w-full flex-1 text-nowrap rounded-md bg-idelight-accent py-2 px-3 text-white dark:bg-idedark-accent";
+  const downloadURLs = useDesktopDownloadURLs();
+
+  const os = undefined; // TODO: Implement this later
+
+  return (
+    <div className="flex h-full w-full flex-col items-center gap-2">
+      <img
+        alt="IBPS IDE Icon"
+        src="/favicon.png"
+        className="mb-2 h-20 w-20 mix-blend-luminosity"
+      ></img>
+      <div className="text-lg font-medium">IBPS IDE for Desktop</div>
+      <div className="pb-4">Download and install the new desktop app</div>
+      <a
+        href={downloadURLs?.macos}
+        className={os === "macOS" ? primaryButton : secondaryButton}
+      >
+        Download for macOS
+      </a>
+      <a
+        href={downloadURLs?.windows}
+        className={os === "Windows" ? primaryButton : secondaryButton}
+      >
+        Download for Windows
+      </a>
+    </div>
+  );
+};
+
+export default DownloadDesktopAppModal;

ibps-ide/components/Ide/IDEPanels/FilesPanel/FilesPanel.tsx

@@ -5,7 +5,9 @@ import { useState } from "preact/hooks";
 import {
   IoAddCircleOutline,
   IoArchiveOutline,
+  IoDesktopOutline,
   IoDownloadOutline,
+  IoLaptopOutline,
   IoShareOutline,
 } from "react-icons/io5";
 import { examplePickerShownAtom, ibpsCodeAtom } from "../../../../atoms/atoms";
@@ -15,12 +17,16 @@ import { fileExtension } from "../../../../lib/fileExtension";
 import ExamplePicker from "../../global/ExamplePicker";
 import Modal from "../../interact/Modal";
 import FilesPanelFileButton from "./FilesPanelFileButton";
+import DownloadDesktopAppModal from "./DownloadDesktopAppModal";
+import { useDesktopDownloadURLs } from "../../../../hooks/useDesktopDownloadURLs";
+import Ahref from "../../global/Ahref";
 
 const FilesPanel = () => {
   const { allFilenames, newFile, activeFile, filesRaw, importIBPSorIBWS } = useFiles();
   const [ibpsCode] = useAtom(ibpsCodeAtom);
   const [examplePickerShown, setExamplePickerShown] = useAtom(examplePickerShownAtom);
   const platform = useTauriOS();
+  const desktopDownload = useDesktopDownloadURLs();
 
   const onImport = () => {
     const input = document.createElement("input");
@@ -85,11 +91,12 @@ const FilesPanel = () => {
   const [downloadWorkspaceModalVisible, setDownloadWorkspaceModalVisible] =
     useState(false);
   const [newFileModalVisible, setNewFileModalVisible] = useState(false);
+  const [downloadDesktopModalVisible, setDownloadDesktopModalVisible] = useState(false);
 
   return (
     <div
       className={`flex h-full flex-col bg-idelight-100 text-sm text-idelight-800 dark:bg-idedark-950 dark:text-idedark-200
-                ${platform.isMacOS ? "bg-opacity-75 dark:bg-opacity-75" : "bg-opacity-100"}`}
+                ${platform.isMacOS ? "bg-opacity-75 dark:bg-opacity-85" : "bg-opacity-100"}`}
     >
       {examplePickerShown ? (
         <ExamplePicker />
@@ -119,7 +126,37 @@ const FilesPanel = () => {
           >
             Creating new IBPS script
           </Modal>
+          <Modal
+            key={new Date().valueOf()}
+            visible={downloadDesktopModalVisible}
+            setVisible={setDownloadDesktopModalVisible}
+            onSubmit={(name) => {
+              newFile(name);
+            }}
+            hideDefaultButtons
+          >
+            <DownloadDesktopAppModal />
+          </Modal>
           <div className="flex flex-col pb-4 pt-3">
+            {desktopDownload?.updateAvailable && (
+              <div class="w-full px-3 pb-3">
+                <Ahref
+                  className="w-full"
+                  href={
+                    platform.isMacOS
+                      ? desktopDownload?.macos
+                      : platform.isWindows
+                        ? desktopDownload?.windows
+                        : desktopDownload.genericDownloadPage
+                  }
+                >
+                  <div className="highlight flex w-full cursor-pointer items-center gap-2 rounded-md bg-idelight-200 px-3 py-2 text-idelight-800 dark:bg-idedark-700 dark:text-white">
+                    <IoDesktopOutline />
+                    <span>Update Available</span>
+                  </div>
+                </Ahref>
+              </div>
+            )}
             <span className="pl-3 font-medium opacity-60">Files</span>
             <div className="flex flex-col">
               <FilesPanelFileButton
@@ -161,6 +198,16 @@ const FilesPanel = () => {
             text="Examples"
             onClick={() => setExamplePickerShown(true)}
           />
+          {platform.isWeb && (
+            <FilesPanelFileButton
+              text="IBPS for Desktop"
+              cannotRenameOrDelete
+              forceIcon={IoLaptopOutline}
+              onClick={() => {
+                setDownloadDesktopModalVisible(true);
+              }}
+            ></FilesPanelFileButton>
+          )}
           <span className="pl-3 pt-4 font-medium opacity-60">Your Workspace</span>
           <div className="flex h-full flex-col gap-1 overflow-y-auto">
             <div className="h-full flex-grow">

ibps-ide/components/Ide/IDEPanels/IDEPanelTopbar.tsx

@@ -15,7 +15,7 @@ const IDEPanelTopbar: FunctionalComponent<IDEPanelTopbarProps> = (props) => {
         ${props.pl ? "pl-3" : ""}
         ${props.pr ? "pr-3" : ""}
         ${props.desktopUI ? "mr-[-1px] border-r border-idelight-300 dark:border-idedark-border" : ""}
-        ${props.desktopUI ? "bg-opacity-75 dark:bg-opacity-75" : ""}
+        ${props.desktopUI ? "bg-opacity-75 dark:bg-opacity-85" : ""}
         flex h-10 w-full flex-shrink-0 items-center justify-between border-b border-idelight-300 bg-idelight-50 py-[6px] text-sm text-idelight-700 dark:border-idedark-border dark:bg-idedark-900 dark:text-white`}
     >
       {props.children}

ibps-ide/hooks/useDesktopDownloadURLs.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "preact/hooks";
+import { getVersion } from "@tauri-apps/api/app";
+
+export type UseDesktopDownloadURLs = {
+  version: string;
+  macos: string;
+  windows: string;
+  genericDownloadPage: string;
+  updateAvailable?: boolean;
+};
+
+export const useDesktopDownloadURLs = (): UseDesktopDownloadURLs | undefined => {
+  const [out, setOut] = useState<UseDesktopDownloadURLs | undefined>(undefined);
+
+  useEffect(() => {
+    (async () => {
+      const USER = "baris-inandi";
+      const REPO = "ibps";
+      const apiEndpoint = `https://api.github.com/repos/${USER}/${REPO}/releases/latest`;
+      const response = await (await fetch(apiEndpoint)).json();
+      const assets = response.assets;
+      const macos: string = assets.find((asset: any) =>
+        asset.name.includes(".dmg"),
+      )?.browser_download_url;
+      const windows: string = assets.find(
+        (asset: any) => asset.name.includes("x64") && asset.name.includes(".exe"),
+      )?.browser_download_url;
+      setOut({
+        version: response.tag_name,
+        macos,
+        windows,
+        genericDownloadPage: `https://github.com/${USER}/${REPO}/releases/latest`,
+        updateAvailable: window.__TAURI__ && (await getVersion()) !== response.tag_name,
+      });
+    })();
+  }, [setOut]);
+
+  return out;
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ibps-ide",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "license": "AGPL-3.0-only",
   "author": {
     "name": "baris-inandi",
@@ -35,6 +35,7 @@
     "@tauri-apps/api": "^1.5.3",
     "@vercel/analytics": "^1.1.1",
     "@vercel/speed-insights": "^1.0.1",
+    "caniuse-lite": "",
     "html-webpack-plugin": "^5.6.0",
     "ibps-comp": "file:ibps-comp/pkg",
     "jotai": "^2.4.3",