feat: created start menu

re #183

Author: ThinLiquid

src/assets/style.less

@@ -49,9 +49,6 @@ html {
 
   color: var(--text);
 }
-.bx {
-  font-size: 25px;
-}
 
 toolbar {
   width: 100%;
@@ -64,6 +61,8 @@ toolbar {
   border: 1px solid var(--surface-0);
   box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.2);
   user-select: none;
+  position: relvative;
+  z-index: 1001;
 
   & > div {
     &.outlined {
@@ -168,128 +167,9 @@ window-area {
   }
 }
 
-launcher {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  top: 0;
-  background: color-mix(in srgb, var(--crust) 20%, transparent);
-  z-index: 99999999999999999999999;
-  width: calc(100vw + 20px);
-  height: calc(100vh + 20px);
-  gap: 20px;
-  transition: 0.2s opacity, 0.2s backdrop-filter;
-  margin: 0;
-  left: 0;
-
-  &[style*="opacity: 1;"] {
-    apps * {
-      pointer-events: all;
-    }
-  }
-
-  apps {
-    max-height: 70vh;
-    padding: 20px;
-    margin: 40px;
-    justify-content: center;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 40px;
-    overflow: scroll;
-    pointer-events: none;
-
-    app {
-      flex: 1 0 21%;
-      flex-grow: 0;
-      align-items: center;
-      justify-content: center;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      min-width: 125px;
-      max-width: 125px;
-      text-align: center;
-      overflow: visible;
-      transition: transform 0.1s ease-in-out;
-      cursor: pointer;
-
-
-      &:hover {
-        transform: scale(1.1);
-
-        div {
-          background: var(--surface-0);
-        }
-
-        img {
-          filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.75));
-        }
-      }
-
-      img {
-        width: 100%;
-        border-radius: var(--app-radius);
-        aspect-ratio: 1 / 1;
-      }
-
-      div {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: fit-content;
-        height: 100%;
-        white-space: nowrap;
-        padding: 5px 10px;
-        border-radius: 5px;
-        transition: background 0.1s ease-in-out;
-      }
-    }
-  }
-
-  input {
-    background: var(--mantle);
-    border: 2px solid var(--crust);
-    border-radius: 10px;
-    padding: 10px;
-    width: 300px;
-    max-width: 100vw;
-    text-align: center;
-    transition: border 0.2s;
-
-    &:focus {
-      outline: none;
-      border: 2px solid var(--text);
-    }
-  }
-}
-
-preloader {
-  position: absolute;
-  z-index: 9999999;
-  top: 0;
-  left: 0;
-  background: var(--crust);
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  transition: opacity 1s;
-
-  .status, .done {
-    text-align: center;
-  }
-
-  .done div {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  }
-}
-
-flex {
-  flex: 1;
+.gradient-blur {
+  mask: linear-gradient(to bottom, transparent, black 5%), linear-gradient(to top, transparent, black 35%);
+  mask-size: 100% 50%;
+  mask-repeat: no-repeat;
+  mask-position: top, bottom;
 }

src/system/Desktop.ts

@@ -16,15 +16,34 @@ const BootLoader: Process = {
     const { fs } = process
     const wm = await process.loadLibrary('lib/WindowManager')
     const launcher = await process.loadLibrary('lib/Launcher')
+    const { Input } = await process.loadLibrary('lib/Components')
 
-    const input = new HTML('input').attr({
+    const input = Input.new().attr({
       type: 'text',
       placeholder: 'Search'
+    }).style({
+      width: '100%',
+      'border-radius': '10px',
+      padding: '5px',
+      'margin-bottom': '10px',
+      position: 'sticky',
+      top: '0'
     }).on('keyup', () => {
       apps.elm.innerHTML = ''
       renderApps().catch(e => console.error(e))
     }).appendTo(launcher.element)
-    const apps = new HTML('apps').appendTo(launcher.element)
+
+    const apps = new HTML('div').style({
+      overflow: 'scroll',
+      height: 'max-content',
+      position: 'relative'
+    })
+
+    new HTML('div').style({
+      height: '100%',
+      overflow: 'scroll',
+      'padding-bottom': '30px'
+    }).append(apps).appendTo(launcher.element).class('gradient-blur')
 
     const renderApps = async (): Promise<void> => {
       apps.html('')
@@ -36,13 +55,21 @@ const BootLoader: Process = {
             const path = Buffer.from(data).toString()
             const executable = await process.kernel.getExecutable(path) as Process
 
-            const appElement = new HTML('app').on('click', () => {
+            const appElement = new HTML('div').style({
+              display: 'flex',
+              'align-items': 'center',
+              padding: '5px',
+              cursor: 'pointer',
+              gap: '10px',
+              'border-bottom': '1px solid var(--surface-0)'
+            }).on('click', () => {
               process.launch(path).catch((e: any) => console.error(e))
               launcher.toggle()
             }).appendTo(apps)
             new HTML('img').attr({
               src: executable.config.icon ?? nullIcon,
-              alt: `${executable.config.name} icon`
+              alt: `${executable.config.name} icon`,
+              height: '40px'
             }).appendTo(appElement)
             new HTML('div').text(executable.config.name).appendTo(appElement)
           }).catch((e: any) => console.error(e))

src/system/lib/Launcher.ts

@@ -9,25 +9,34 @@ const Launcher: Library = {
     targetVer: '1.0.0-indev.0'
   },
   init: (l, k) => {
-    Launcher.data.element = new l.HTML('launcher').style({
-      opacity: '0',
-      'backdrop-filter': 'blur(0px)',
-      'pointer-events': 'none'
+    Launcher.data.element = new l.HTML('div').style({
+      background: `${document.documentElement.style.getPropertyValue('--mantle')}E0`,
+      width: '350px',
+      height: '500px',
+      margin: '20px',
+      padding: '10px',
+      overflow: 'hidden',
+      'border-radius': '20px',
+      border: '1px solid var(--surface-0)',
+      position: 'fixed',
+      bottom: '-500px',
+      left: '0',
+      transition: 'bottom 0.5s cubic-bezier(1,0,0,1)',
+      'z-index': '1000',
+      'box-shadow': '0 0 10px 0 rgba(0,0,0,0.5)',
+      'user-select': 'none',
+      'backdrop-filter': 'blur(10px)'
     })
   },
   data: {
     toggle: () => {
       if (isLauncherOpen) {
         Launcher.data.element.style({
-          opacity: '0',
-          'backdrop-filter': 'blur(0px)',
-          'pointer-events': 'none'
+          bottom: '-500px'
         })
       } else {
         Launcher.data.element.style({
-          opacity: '1',
-          'backdrop-filter': 'blur(10px)',
-          'pointer-events': 'all'
+          bottom: '68px'
         })
       }
 

src/system/lib/StatusBar.ts

@@ -14,7 +14,7 @@ const StatusBar: Library = {
       <div class="outlined" data-toolbar-id="start"><span class="material-symbols-rounded">space_dashboard</span></div>
       
       <div data-toolbar-id="apps"></div>
-      <flex></flex>
+      <div style="flex:1;"></div>
       <div class="outlined" data-toolbar-id="plugins"><span class="material-symbols-rounded">expand_less</span></div>
       <div class="outlined" data-toolbar-id="controls">
         <span class="material-symbols-rounded battery">battery_2_bar</span>