feat: added support for theming

re Flow-Works#155

src/assets/style.less

@@ -115,7 +115,8 @@ window-area {
     border-radius: 5px;
     box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.2);
     overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid;
+    border-color: color-mix(in srgb, var(--text) 20%, transparent);
     background: var(--crust);
     transition: 0.2s opacity, 0.2s transform;
 
@@ -154,7 +155,7 @@ launcher {
   justify-content: center;
   align-items: center;
   top: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: color-mix(in srgb, var(--crust) 20%, transparent);
   z-index: 99999999999999999999999;
   width: calc(100vw + 20px);
   height: calc(100vh + 20px);

src/kernel.ts

@@ -57,6 +57,15 @@ export default class Kernel {
     this.version = pkg.version
   }
 
+  private async setTheme (themeName: string): Promise<void> {
+    if (this.fs === false) throw new Error('Filesystem hasn\'t been initiated.')
+    const file = await this.fs.readFile(`/etc/themes/${themeName}.theme`)
+    const { colors } = JSON.parse(Buffer.from(file).toString())
+    for (const color in colors) {
+      document.documentElement.style.setProperty(`--${color}`, colors[color])
+    }
+  }
+
   async boot (boot: HTML, progress: HTML, args: URLSearchParams): Promise<void> {
     progress.style({ width: '0%' })
     const bootArgs = args.toString().replace(/=($|&)/g, '=true ')
@@ -79,6 +88,11 @@ export default class Kernel {
     })
     if (this.config === false) return
     else progress.style({ width: '40%' })
+    await this.setTheme(this.config.THEME)
+    document.addEventListener('theme_update', () => {
+      if (this.config === false) return
+      this.setTheme(this.config.THEME).catch(e => console.error(e))
+    })
     const tmp = await handle('mount', 'Temporary Directory (/tmp)', {
       init: async () => {
         if (this.fs === false) return false

src/system/VirtualFS.ts

@@ -1,3 +1,4 @@
+import path from 'path'
 import { Directory, Errors, File, Permission, Stats } from '../types'
 
 export const defaultFS: { root: Directory } = {
@@ -176,13 +177,38 @@ export const defaultFS: { root: Directory } = {
         deleteable: false,
         permission: Permission.SYSTEM,
         children: {
+          themes: {
+            type: 'directory',
+            deleteable: false,
+            permission: Permission.SYSTEM,
+            children: {
+              'Mocha.theme': {
+                type: 'file',
+                deleteable: true,
+                permission: Permission.USER,
+                content: Buffer.from(JSON.stringify({
+                  name: 'Catpuccin Mocha',
+                  colors: {
+                    text: '#cdd6f4',
+                    'surface-2': '#585b70',
+                    'surface-1': '#45475a',
+                    'surface-0': '#313244',
+                    base: '#1e1e2e',
+                    mantle: '#181825',
+                    crust: '#11111b'
+                  }
+                }))
+              }
+            }
+          },
           flow: {
             type: 'file',
             deleteable: false,
             permission: Permission.ELEVATED,
             content: Buffer.from([
               'SERVER=https://server.flow-works.me',
-              '24HOUR=FALSE'
+              '24HOUR=FALSE',
+              'THEME=Mocha'
             ].join('\n'))
           },
           hostname: {
@@ -211,42 +237,63 @@ export const defaultFS: { root: Directory } = {
 }
 
 class VirtualFS {
-  private fileSystem: { root: Directory } = defaultFS
+  private fileSystem: { root: Directory }
   private db: IDBDatabase | null = null
+
+  private readonly addMissingFiles = async (): Promise<void> => {
+    const addMissingFiles = async (current: Directory, currentPath: string): Promise<void> => {
+      for (const child in current.children) {
+        const childPath = path.join(currentPath, child)
+        if (current.children[child].type === 'directory') {
+          if (!await this.exists(childPath)) {
+            await this.mkdir(childPath)
+          }
+          await addMissingFiles(current.children[child] as Directory, childPath)
+        } else if (current.children[child].type === 'file' && !await this.exists(childPath)) {
+          await this.writeFile(childPath, (current.children[child] as File).content)
+        }
+      }
+    }
+    await addMissingFiles(defaultFS.root, '')
+  }
+
   async init (dbName = 'virtualfs'): Promise<VirtualFS> {
     return await new Promise((resolve, reject) => {
-      indexedDB.deleteDatabase(dbName)
       const request = indexedDB.open(dbName)
+      request.onupgradeneeded = (event) => {
+        const target = event.target as IDBRequest
+        const db = target.result
+        db.createObjectStore('fs')
+      }
       request.onerror = () => {
         reject(new Error('Failed to open database'))
       }
-      request.onsuccess = () => {
-        this.db = request.result
+      request.onsuccess = async (event) => {
+        const target = event.target as IDBRequest
+        this.db = target.result
+        await navigator.storage.persist()
+        this.fileSystem = await this.read()
+        if (this.fileSystem == null) await this.write(defaultFS)
+        else await this.addMissingFiles()
+        console.log(this.fileSystem)
         resolve(this)
       }
-      request.onupgradeneeded = () => {
-        const db = request.result
-        db.createObjectStore('fs')
-      }
     })
   }
 
-  private setFileSystem (fileSystemObject: { root: Directory }): void {
-    this.fileSystem = fileSystemObject
-  }
-
-  private readonly read = async (): Promise<any> => {
-    const transaction = this.db?.transaction(['fs'], 'readonly')
-    const store = transaction?.objectStore('fs')
-    const getRequest = store?.get('fs')
+  private readonly read = async (): Promise<{ root: Directory }> => {
+    if (this.db == null) throw new Error('Database is null')
+    const transaction = this.db.transaction(['fs'], 'readonly')
+    const store = transaction.objectStore('fs')
+    const getRequest = store.get('fs')
 
     return await new Promise((resolve, reject) => {
-      if (getRequest == null) return
-      getRequest.onsuccess = () => {
-        resolve(getRequest.result)
+      getRequest.onsuccess = (event) => {
+        const target = event.target as IDBRequest
+        resolve(target.result)
       }
 
-      getRequest.onerror = () => {
+      getRequest.onerror = (event) => {
         reject(getRequest.error)
       }
     })
@@ -258,12 +305,12 @@ class VirtualFS {
   }
 
   private readonly save = async (): Promise<void> => {
-    const transaction = this.db?.transaction(['fs'], 'readwrite')
-    const store = transaction?.objectStore('fs')
-    const putRequest = store?.put(this.fileSystem, 'fs')
+    if (this.db == null) throw new Error('Database is null')
+    const transaction = this.db.transaction(['fs'], 'readwrite')
+    const store = transaction.objectStore('fs')
+    const putRequest = store.put(this.fileSystem, 'fs')
 
     return await new Promise((resolve, reject) => {
-      if (putRequest == null) return
       putRequest.onsuccess = () => {
         document.dispatchEvent(new CustomEvent('fs_update', {}))
         resolve()
@@ -371,8 +418,8 @@ class VirtualFS {
   rmdir = async (path: string): Promise<void> => {
     const { current, filename } = await this.navigatePathParent(path)
 
-    if (!current.deleteable) throw new Error(Errors.EPERM)
-    await this.handlePermissions(path)
+    if (!current.deleteable && path !== '/tmp') throw new Error(Errors.EPERM)
+    if (path !== '/tmp') await this.handlePermissions(path)
 
     if (current.children[filename].type !== 'directory') throw new Error(Errors.ENOTDIR)
 

src/system/apps/Files.ts

@@ -74,6 +74,7 @@ const Files: Process = {
         element.innerHTML += `${icon} <span style="flex:1;">${file}</span><span class="material-symbols-rounded delete">delete_forever</span><span class="material-symbols-rounded rename">edit</span>`;
         (element.querySelector('.rename') as HTMLElement).onclick = async () => {
           const value = prompt('Rename')
+          console.log(value)
           if (value != null) {
             await fs.rename(dir + seperator + file, dir + seperator + value)
           }