Support auto dark theme, new font, delete project, show in folder

package.json

@@ -11,6 +11,9 @@
   },
   "dependencies": {
     "@blockly/block-shareable-procedures": "^4.1.2",
+    "@blockly/theme-dark": "^6.0.5",
+    "@fontsource-variable/inter": "^5.0.17",
+    "@iconify-json/tabler": "^1.1.109",
     "@mit-app-inventor/blockly-block-lexical-variables": "^2.0.2",
     "@tabler/icons-vue": "^3.1.0",
     "@tauri-apps/api": "2.0.0-beta.6",
@@ -23,7 +26,8 @@
     "dayjs": "^1.11.10",
     "element-plus": "^2.6.3",
     "pinia": "^2.1.7",
-    "primevue": "^3.50.0",
+    "primevue": "^4.0.0-beta.1",
+    "unplugin-icons": "^0.18.5",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },

src-tauri/capabilities/migrated.json

@@ -108,6 +108,8 @@
     "store:allow-set",
     "store:allow-load",
     "store:allow-entries",
-    "store:allow-values"
+    "store:allow-values",
+    "store:allow-delete",
+    "store:allow-save"
   ]
 }

src/App.vue

@@ -1,10 +1,19 @@
 <template>
   <Toast/>
   <DynamicDialog />
+  <ConfirmDialog />
   <router-view></router-view>
 </template>
 
 <script setup>
 import Toast from 'primevue/toast';
 import DynamicDialog from "primevue/dynamicdialog";
+import ConfirmDialog from "primevue/confirmdialog";
 </script>
+
+<style>
+html {
+  font-size: 12px;
+  font-family: 'Inter Variable', sans-serif;
+}
+</style>

src/Editor.vue

@@ -2,7 +2,11 @@
   <div style="height:calc(100vh - 40px);">
     <Toolbar>
       <template #start>
-        <Button @click="$router.back()">Back to Projects</Button>
+        <Button @click="$router.back()" title="Back to projects">
+          <template #icon>
+            <TablerArrowLeft/>
+          </template>
+        </Button>
       </template>
 
       <template #center>
@@ -11,9 +15,21 @@
 
       <template #end>
         <ButtonGroup>
-          <Button>Build</Button>
-          <Button @click="startPreview">Preview</Button>
-          <Button @click="saveCode">Save</Button>
+          <Button title="Build project">
+            <template #icon>
+              <TablerTools />
+            </template>
+          </Button>
+          <Button @click="startPreview" title="Preview app">
+            <template #icon>
+              <TablerEye />
+            </template>
+          </Button>
+          <Button @click="saveCode" title="Save project">
+            <template #icon>
+              <TablerDeviceFloppy />
+            </template>
+          </Button>
         </ButtonGroup>
       </template>
     </Toolbar>
@@ -38,16 +54,24 @@ import BlocklyComponent from "./components/BlocklyComponent.vue";
 import toolbox from "./blocks/toolbox.ts";
 import "./blocks/jigsaw.ts";
 import * as Blockly from "blockly";
+import DarkTheme from '@blockly/theme-dark';
 import {generateAppCode} from "./blocks/codegen.ts";
 import {onMounted, onUnmounted, ref} from "vue";
 import {runPreviewService} from "./services/preview.ts";
+import TablerArrowLeft from '~icons/tabler/arrow-left'
+import TablerTools from '~icons/tabler/tools'
+import TablerEye from '~icons/tabler/eye'
+import TablerDeviceFloppy from '~icons/tabler/device-floppy'
+import {useDark} from "@vueuse/core";
 
 const props = defineProps<{
   project: any
 }>();
 
 const project = props.project;
 
+const isDark = useDark()
+
 const options = {
   // media: "media/",
   grid: {
@@ -65,7 +89,7 @@ const options = {
     scaleSpeed: 1.2
   },
   renderer: 'thrasos',
-  theme: 'zelos',
+  theme: isDark ? DarkTheme : 'zelos',
   toolbox
 };
 
@@ -118,18 +142,14 @@ onMounted(() => {
   });
 });
 
-onUnmounted(async() => {
+onUnmounted(async () => {
   abortControllerForPreviewService.value?.abort();
   await saveCode();
   blocklyEl.value?.workspace.dispose();
 })
 </script>
 
 <style>
-html {
-  font-size: 10px;
-}
-
 body {
   margin: 0;
   padding: 0;

src/Home.vue

@@ -1,17 +1,31 @@
 <script setup lang="ts">
 import Card from 'primevue/card';
-import {getProjects} from "./data/projects.ts";
+import {deleteProjectById, getProjectById, getProjects} from "./data/projects.ts";
 import {useAsyncState} from "@vueuse/core";
 import ButtonGroup from "primevue/buttongroup";
 import Button from "primevue/button";
 import Toolbar from "primevue/toolbar";
+import DataView from "primevue/dataview";
+import ProgressSpinner from 'primevue/progressspinner';
 import {useDialog} from "primevue/usedialog";
+import {useConfirm} from "primevue/useconfirm";
+import {useToast} from "primevue/usetoast";
 import NewProjectDialog from "./components/NewProjectDialog.vue";
 import dayjs from "dayjs";
+import RelativeTime from "dayjs/plugin/relativeTime"
+import TablerUpload from '~icons/tabler/upload'
+import TablerPlus from '~icons/tabler/plus'
+import {Project} from "./models/Project.ts";
+import {open} from '@tauri-apps/plugin-shell'
+import {homeDir, join} from "@tauri-apps/api/path";
+
+dayjs.extend(RelativeTime);
 
 const {state: projects, isLoading, execute: reloadProjects} = useAsyncState(getProjects, []);
 
 const dialog = useDialog();
+const confirm = useConfirm();
+const toast = useToast();
 
 function openNewProjectDialog() {
   dialog.open(NewProjectDialog, {
@@ -20,10 +34,42 @@ function openNewProjectDialog() {
       modal: true
     },
     onClose(options) {
-        reloadProjects();
+      reloadProjects();
     },
   })
 }
+
+async function showInFolderAction(projectId: string) {
+  const project = Project.fromJson(await getProjectById(projectId))
+  let path = await join(await homeDir(), project.path);
+  await open(path)
+}
+
+function deleteProjectAction(projectId: string) {
+  confirm.require({
+    message: 'Do you want to delete this project?',
+    header: 'Delete project',
+    icon: 'pi pi-info-circle',
+    rejectLabel: 'Cancel',
+    rejectProps: {
+      label: 'Cancel',
+      severity: 'secondary',
+      outlined: true
+    },
+    acceptProps: {
+      label: 'Delete',
+      severity: 'danger'
+    },
+    accept: async () => {
+      await deleteProjectById(projectId);
+      await reloadProjects();
+      toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Project deleted', life: 3000 });
+    },
+    reject: () => {
+      toast.add({ severity: 'error', summary: 'Rejected', detail: 'You chose not to delete the project', life: 3000 });
+    }
+  });
+}
 </script>
 
 <template>
@@ -33,30 +79,52 @@ function openNewProjectDialog() {
     </template>
     <template #end>
       <ButtonGroup>
-        <Button>Import</Button>
-        <Button @click="openNewProjectDialog">New</Button>
+        <Button title="Import project">
+          <template #icon>
+            <TablerUpload/>
+          </template>
+        </Button>
+        <Button @click="openNewProjectDialog" title="Create a new project">
+          <template #icon>
+            <TablerPlus/>
+          </template>
+        </Button>
       </ButtonGroup>
     </template>
   </Toolbar>
-  <p v-if="isLoading">Loading...</p>
+  <template v-if="isLoading">
+    <ProgressSpinner/>
+  </template>
+  <template v-else-if="projects.length">
+    <DataView :value="projects">
+      <template #list="{items}">
+        <template v-for="project in items" :key="project.id">
+          <Card style="width: 300px;">
+            <template #title>
+              {{ project.name }}
+            </template>
+            <template #subtitle>
+              Created {{ dayjs.unix(project.createdAt).fromNow() }}
+              &bullet;
+              Updated {{ dayjs.unix(project.updatedAt).fromNow() }}
+            </template>
+            <template #footer>
+              <RouterLink :to="`/project/${project.id}`">
+                <Button>Open</Button>
+              </RouterLink>
+              <Button severity="info" outlined @click="showInFolderAction(project.id)">
+                Show in folder
+              </Button>
+              <Button outlined severity="danger" @click="deleteProjectAction(project.id)">
+                Delete
+              </Button>
+            </template>
+          </Card>
+        </template>
+      </template>
+    </DataView>
+  </template>
   <div v-else>
-    <div v-if="projects.length" v-for="project in projects" :key="project.id">
-      <RouterLink :to="`/project/${project.id}`">
-        <Card>
-          <template #title>
-            {{ project.name }}
-          </template>
-          <template #content>
-            <div>
-              <p>Created at {{ dayjs.unix(project.createdAt) }}</p>
-              <p>Updated at {{ dayjs.unix(project.updatedAt) }}</p>
-            </div>
-          </template>
-        </Card>
-      </RouterLink>
-    </div>
-    <div v-else>
-      No projects
-    </div>
+    No projects
   </div>
 </template>

src/Project.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import {useRoute} from "vue-router";
 import {useAsyncState} from "@vueuse/core";
-import {getProject} from "./data/projects.ts";
+import {getProjectById} from "./data/projects.ts";
 import Editor from "./Editor.vue";
 
 const route = useRoute();
 
-const {state: project, isLoading} = useAsyncState(() => getProject(route.params.id as string), null);
+const {state: project, isLoading} = useAsyncState(() => getProjectById(route.params.id as string), null);
 
 </script>
 

src/blocks/toolbox.ts

@@ -4,7 +4,7 @@ export default {
         {
             "kind": "category",
             "name": "Control",
-            colour: "%{BKY_CONTROLS_HUE}",
+            colour: "%{BKY_CONTROL_HUE}",
             "contents": [
                 {
                     "kind": "block",
@@ -315,6 +315,9 @@ export default {
                 }
             ]
         },
+        {
+            kind: "sep"
+        },
         {
             kind: "category",
             name: "Variables",
@@ -329,7 +332,8 @@ export default {
         {
             "kind": "category",
             "name": "Functions",
-            "custom": "PROCEDURE"
+            "custom": "PROCEDURE",
+            colour: "%{BKY_PROCEDURES_HUE}"
         },
         {
             kind: "sep"

src/data/projects.ts

@@ -1,33 +1,42 @@
 import {Store} from "@tauri-apps/plugin-store";
 import {Project} from "../models/Project.ts";
 import dayjs from "dayjs";
+import {BaseDirectory, remove} from "@tauri-apps/plugin-fs";
 
 const projectsStore = new Store("projects");
 try {
-  await projectsStore.load();
+    await projectsStore.load();
 } catch (e) {
-  console.error("Failed to load store from disk", e);
+    console.error("Failed to load store from disk", e);
 }
 console.log('projects', await getProjects());
 
 
 export async function getProjects() {
-  const rawProjects = await projectsStore.values();
-  return rawProjects.map((projectData) => Project.fromJson(projectData))
+    const rawProjects = await projectsStore.values();
+    return rawProjects.map((projectData) => Project.fromJson(projectData))
 }
 
-export function getProject(id: string) {
-  return projectsStore.get(id);
+export function getProjectById(id: string) {
+    return projectsStore.get(id);
 }
 
-export async function saveProject(id: string, projectData: Project) {
-  projectData.updatedAt = dayjs().unix();
+export async function saveProjectById(id: string, projectData: Project) {
+    projectData.updatedAt = dayjs().unix();
 
-  await projectsStore.set(id, projectData);
+    await projectsStore.set(id, projectData);
+    await projectsStore.save()
 }
 
 export async function createProject(projectName: string) {
-  const newProject = new Project(projectName);
+    const newProject = new Project(projectName);
 
-  await saveProject(newProject.id, newProject)
+    await saveProjectById(newProject.id, newProject)
+}
+
+export async function deleteProjectById(id: string) {
+    const project = Project.fromJson(await getProjectById(id))
+    await remove(project.path, {baseDir: BaseDirectory.Home, recursive: true})
+    await projectsStore.delete(id);
+    await projectsStore.save();
 }