feat: added theme maker application

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowos",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "The most aesthetic webOS.",
   "main": "src/bootloader.ts",
   "scripts": {

src/system/UserAccessControl.ts

@@ -32,7 +32,7 @@ const UserAccessControl: Process = {
           }
         }
 
-        wm.createModal('User Account Control', message, process)
+        wm.createModal('allow', 'User Account Control', message, process)
           .then(async ({ value, win }: {
             value: boolean
             win: FlowWindow

src/system/VirtualFS.ts

@@ -1,4 +1,3 @@
-import path from 'path'
 import { Directory, Errors, File, Permission, Stats } from '../types'
 
 export const defaultFS: { root: Directory } = {
@@ -76,6 +75,12 @@ export const defaultFS: { root: Directory } = {
                 deleteable: true,
                 permission: Permission.USER,
                 content: Buffer.from('apps/Settings')
+              },
+              'ThemeMaker.app': {
+                type: 'file',
+                deleteable: true,
+                permission: Permission.USER,
+                content: Buffer.from('apps/ThemeMaker')
               }
             }
           },
@@ -96,47 +101,17 @@ export const defaultFS: { root: Directory } = {
                 permission: Permission.USER,
                 content: Buffer.from('/home/Applications/Info.app')
               },
-              'Manager.lnk': {
-                type: 'file',
-                deleteable: true,
-                permission: Permission.USER,
-                content: Buffer.from('/home/Applications/Manager.app')
-              },
-              'Store.lnk': {
-                type: 'file',
-                deleteable: true,
-                permission: Permission.USER,
-                content: Buffer.from('/home/Applications/Store.app')
-              },
-              'TaskManager.lnk': {
-                type: 'file',
-                deleteable: true,
-                permission: Permission.USER,
-                content: Buffer.from('/home/Applications/TaskManager.app')
-              },
               'Browser.lnk': {
                 type: 'file',
                 deleteable: true,
                 permission: Permission.USER,
                 content: Buffer.from('/home/Applications/Browser.app')
               },
-              'ImageViewer.lnk': {
-                type: 'file',
-                deleteable: true,
-                permission: Permission.USER,
-                content: Buffer.from('/home/Applications/ImageViewer.app')
-              },
               'Files.lnk': {
                 type: 'file',
                 deleteable: true,
                 permission: Permission.USER,
                 content: Buffer.from('/home/Applications/Files.app')
-              },
-              'Editor.lnk': {
-                type: 'file',
-                deleteable: true,
-                permission: Permission.USER,
-                content: Buffer.from('/home/Applications/Editor.app')
               }
             }
           },
@@ -240,21 +215,21 @@ class VirtualFS {
   private fileSystem: { root: Directory }
   private db: IDBDatabase | null = null
 
-  private readonly addMissingFiles = async (): Promise<void> => {
+  private async addMissingFiles (): Promise<void> {
-    const addMissingFiles = async (current: Directory, currentPath: string): Promise<void> => {
+    const addDirectoryRecursive = async (directory: Directory, directoryPath: string): Promise<void> => {
-      for (const child in current.children) {
+      for (const [key, value] of Object.entries(directory.children)) {
-        const childPath = path.join(currentPath, child)
+        const path = (await import('path')).join(directoryPath, key)
-        if (current.children[child].type === 'directory') {
+        if (value.type === 'directory') {
-          if (!await this.exists(childPath)) {
+          if (!await this.exists(path)) {
-            await this.mkdir(childPath)
+            await this.mkdir(path)
           }
-          await addMissingFiles(current.children[child] as Directory, childPath)
+          await addDirectoryRecursive(value, path)
-        } else if (current.children[child].type === 'file' && !await this.exists(childPath)) {
+        } else if (value.type === 'file' && !await this.exists(path)) {
-          await this.writeFile(childPath, (current.children[child] as File).content)
+          await this.writeFile(path, Buffer.from(value.content).toString())
         }
       }
     }
-    await addMissingFiles(defaultFS.root, '')
+    await addDirectoryRecursive(defaultFS.root, '/')
   }
 
   async init (dbName = 'virtualfs'): Promise<VirtualFS> {
@@ -275,7 +250,6 @@ class VirtualFS {
         this.fileSystem = await this.read()
         if (this.fileSystem == null) await this.write(defaultFS)
         else await this.addMissingFiles()
-        console.log(this.fileSystem)
         resolve(this)
       }
     })

src/system/apps/ThemeMaker.ts

@@ -0,0 +1,77 @@
+import { Process } from '../../types'
+import icon from '../../assets/icons/theme-config.svg'
+
+const ThemeConfig: Process = {
+  config: {
+    name: 'Theme Maker',
+    type: 'process',
+    icon,
+    targetVer: '2.0.0'
+  },
+  run: async (process) => {
+    const wm = await process.loadLibrary('lib/WindowManager')
+    const HTML = await process.loadLibrary('lib/HTML')
+    const { Input, Button } = await process.loadLibrary('lib/Components')
+
+    const win = wm.createWindow({
+      title: 'Task Manager',
+      icon,
+      width: 600,
+      height: 200
+    }, process)
+
+    const content = new HTML(win.content)
+
+    const items = [
+      'crust',
+      'mantle',
+      'base',
+      'surface-0',
+      'surface-1',
+      'surface-2',
+      'text'
+    ]
+
+    const name = Input.new().attr({
+      value: 'My Theme'
+    })
+
+    content.appendMany(
+      new HTML('div')
+        .appendMany(
+          new HTML('label').text('Name: '),
+          name
+        ),
+      ...items.map((item) => {
+        return new HTML('div')
+          .appendMany(
+            new HTML('label').text(`${item[0].toUpperCase() + item.slice(1)}: `),
+            Input.new().attr({
+              type: 'color',
+              id: item,
+              value: '#000000'
+            })
+          )
+      }),
+      Button.new().text('Create').on('click', () => {
+        const theme: {
+          [key: string]: any
+        } = {
+          name: name.getValue(),
+          colors: {}
+        }
+        items.forEach((item) => {
+          theme.colors[item] = content.qs(`#${item}`)?.getValue()
+        })
+        process.fs.writeFile(`/etc/themes/${theme.name.replace(/\s/g, '') as string}.theme`, JSON.stringify(theme))
+          .then(() => {
+            wm.createModal('ok', 'Theme Manager', 'Theme created successfully.', process)
+              .catch(e => console.error(e))
+          })
+          .catch(e => console.error(e))
+      })
+    )
+  }
+}
+
+export default ThemeConfig

src/system/lib/WindowManager.ts

@@ -46,7 +46,7 @@ const WindowManager: Library = {
       WindowManager.data.windowArea.elm.appendChild(win.element)
       return win
     },
-    createModal: async (title: string, text: string, process: ProcessLib) => {
+    createModal: async (type: 'allow' | 'ok', title: string, text: string, process: ProcessLib) => {
       const win = new FlowWindow(process, WindowManager.data, {
         title,
         icon: '',
@@ -69,6 +69,8 @@ const WindowManager: Library = {
         value: await new Promise((resolve) => {
           new HTML('h3').text(title).appendTo(win.content)
           new HTML('p').text(text).appendTo(win.content)
+
+          if (type === 'allow') {
             Button.new().text('Allow').appendTo(win.content).on('click', () => {
               resolve(true)
               win.close()
@@ -77,6 +79,12 @@ const WindowManager: Library = {
               resolve(false)
               win.close()
             })
+          } else if (type === 'ok') {
+            Button.new().text('OK').appendTo(win.content).on('click', () => {
+              resolve(true)
+              win.close()
+            })
+          }
 
           WindowManager.data.windows.push(win)
           WindowManager.data.windowArea.elm.appendChild(win.element)

src/types.ts

@@ -153,7 +153,7 @@ export interface WindowManager {
   windows: FlowWindow[]
   getHighestZIndex: () => number
   createWindow: (config: FlowWindowConfig, process: ProcessLib) => FlowWindow
-  createModal: (title: string, text: string, process: ProcessLib) => Promise<ModalData>
+  createModal: (type: 'allow' | 'ok', title: string, text: string, process: ProcessLib) => Promise<ModalData>
 }
 
 export interface Launcher {