start menu is comming together

src/app/system-apps/startmenu/startmenu.component.css

@@ -18,7 +18,7 @@
 .start-menu-main-overlay-icon-text-container{
     width: 48px;
     display: block;
-    background-color: rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(12px);
 }
 
 .start-menu-main-overlay-icon-text-content{ 
@@ -64,15 +64,114 @@
     display:flex;
     width: 315px;
     height: 500px;
-    background-color: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(5px);
+    background-color: rgba(33,33, 33, 0.6);
+    backdrop-filter: blur(12px);
 }
 
 .start-menu-main-content-empty{
     width: 15.24%;
 }
 
-.start-menu-main-content-list{
+.start-menu-main-content-list-container{
     width: 84.76%;
 }
 
+.start-menu-main-content-list-content{
+    width: 100%;
+    height: 500px;
+    overflow-y: auto;
+    padding:0px 12px;
+}
+
+
+.start-menu-list-ol{
+    /* column-gap: 1px; */
+    /* display: grid;
+    grid-auto-flow: column;
+    grid-template-columns:  repeat(auto-fill,90px);
+    grid-template-rows: repeat(auto-fill,70px);
+    height: calc(100% - 40px); */
+    width: 100%;
+    padding: 10px 0;
+    /* row-gap: 20px; */
+}
+
+
+.start-menu-list-li{
+    display: flex;
+    justify-content: center;
+    padding: 3px 0;
+    border: 2px solid transparent;
+     /* height: min-content;
+    z-index: 1; */
+}
+
+.start-menu-list-li:hover{
+    border: 2px solid white;
+}
+
+.start-menu-list-btn{
+    display: flex;
+    width: 100%;
+    height: 32px;
+}
+
+.start-menu-list-fig{
+    align-items: center;
+    display:inline-flex;
+    min-width: 32px;
+}
+
+.start-menu-list-img{
+    height: 32px;
+    width: 32px;
+    position: relative;
+}
+
+/*Star Menu List CSS*/
+.start-menu-list-head{
+    max-width: 15%;
+    /* padding-left: 5px; */
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+.start-menu-list-mid{
+    min-width: 70%;
+    padding-left: 10px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    color: white; /* Black text color */
+    text-align: left;
+    font-size: 11px;
+    font-weight: normal;
+}
+
+.start-menu-list-p{
+    position: relative;
+    top: 10px;
+    font-size: 12px;
+}
+
+.start-menu-list-tail{
+    max-width: 15%;
+    /* padding-left: 10px; */
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+/* .dm-tskbar-fig-cntxt-menu{
+    position: relative;
+    align-items: center;
+    display: inline-flex;
+    min-width: 18px;
+    top: 0;
+    left: 15%;
+}
+
+.dm-tskbar-img-alt{
+    height: 18px;
+    width: 18px;
+
+    position: relative;
+} */

src/app/system-apps/startmenu/startmenu.component.html

@@ -65,21 +65,18 @@
 
     <div class="start-menu-main-content-container">
         <div class="start-menu-main-content-empty"></div>
-        <div class="start-menu-main-content-list"></div>
-    </div>
-</div>
-
-
-<!-- <div class="start-menu-main-container">
-    <div class="start-menu-main-content-container">
-        <div class="start-menu-main-content-section-a">
-            <div class="start-menu-sct-a-icon">
-                <figure class="start-menu-sct-a-figure">
-                    <img class="start-menu-sct-a-img" [src]="'osdrive/Cheetah/System/Imageres/sm_power.png'"/>
-                </figure>
+        <div class="start-menu-main-content-list-container">
+            <div class="start-menu-main-content-list-content">
+                <ol class="start-menu-list-ol"> 
+                    <li  class="start-menu-list-li"  *ngFor="let file of startMenuFiles; let i = index"  >
+                        <button class="start-menu-list-btn">
+                            <div class="start-menu-list-head"> <figure class="start-menu-list-fig"><img class="start-menu-list-img" [src]="file.getIconPath"/></figure></div>
+                            <div class="start-menu-list-mid"><p class="start-menu-list-p">{{file.getFileName}}</p></div>
+                            <div class="start-menu-list-tail"> <figure class="start-menu-list-fig"></figure> </div>
+                        </button>
+                    </li>
+                </ol>
             </div>
         </div>
-        <div class="start-menu-main-content-section-b">
-        </div>
     </div>
-</div> -->
+</div>

src/app/system-apps/startmenu/startmenu.component.ts

@@ -4,6 +4,9 @@ import { RunningProcessService } from 'src/app/shared/system-service/running.pro
 import { ComponentType } from 'src/app/system-files/component.types';
 import { Process } from 'src/app/system-files/process';
 import { Constants } from 'src/app/system-files/constants';
+import { FileInfo } from 'src/app/system-files/file.info';
+import { FileService } from 'src/app/shared/system-service/file.service';
+import { FileEntry } from 'src/app/system-files/file.entry';
 
 @Component({
   selector: 'cos-startmenu',
@@ -13,23 +16,29 @@ import { Constants } from 'src/app/system-files/constants';
 export class StartMenuComponent implements OnInit, AfterViewInit {
   private _processIdService:ProcessIDService;
   private _runningProcessService:RunningProcessService;
+  private _fileService:FileService;
 
   private _elRef:ElementRef;
   private _consts:Constants = new Constants();
   txtOverlayMenuStyle:Record<string, unknown> = {};
   private SECONDS_DELAY = 250;
 
+  startMenuFiles:FileInfo[] = [];
+  private _startMenuDirectoryFilesEntries!:FileEntry[];
+  directory ='/AppData/StartMenu';
+
   hasWindow = false;
   icon = `${this._consts.IMAGE_BASE_PATH}generic_program.png`;
   name = 'startmenu';
   processId = 0;
   type = ComponentType.System
   displayName = '';
 
-  constructor( processIdService:ProcessIDService,runningProcessService:RunningProcessService, elRef: ElementRef) { 
+  constructor( processIdService:ProcessIDService,runningProcessService:RunningProcessService, elRef: ElementRef, fileService:FileService) { 
     this._processIdService = processIdService;
     this._runningProcessService = runningProcessService;
     this._elRef = elRef;
+    this._fileService = fileService;
 
     this.processId = this._processIdService.getNewProcessId()
     this._runningProcessService.addProcess(this.getComponentDetail());
@@ -39,7 +48,12 @@ export class StartMenuComponent implements OnInit, AfterViewInit {
     1 
   }
 
-  ngAfterViewInit(): void {
+  async ngAfterViewInit():Promise<void>{
+
+    setTimeout(async () => {
+      await this.loadFilesInfoAsync();
+    }, 1500);
+    // 
     this.removeVantaJSSideEffect();
   }
 
@@ -63,16 +77,19 @@ export class StartMenuComponent implements OnInit, AfterViewInit {
     if (smIconTxtOverlay) {
       // Set initial position and visibility
       smIconTxtOverlay.style.width = '48px';
+
       // Allow the browser to calculate the layout before applying the animation
+      smIconTxtOverlay.style.transition = 'width 0.4s ease'; // Set the transition for left
+      smIconTxtOverlay.style.width = '248px'; // Animate to 250px
+      smIconTxtOverlay.style.transitionDelay = '1s';
+      //smIconTxtOverlay.style.backgroundColor = 'rgba(33,33, 33, 0.6)';
+
       setTimeout(() => {
-        smIconTxtOverlay.style.transition = 'width 0.45s ease'; // Set the transition for left
-        smIconTxtOverlay.style.width = '248px'; // Animate to 250px
         smIconTxtOverlay.style.boxShadow = '0px 2px 4px rgba(0, 0, 0, 0.6)';
-
         this.txtOverlayMenuStyle = {
           'display': 'flex'
         }
-      }, 0); // Use a small timeout to ensure styles are applied in the correct order
+      }, 1400); // Use a small timeout to ensure styles are applied in the correct order
     } 
   }
 
@@ -84,6 +101,7 @@ export class StartMenuComponent implements OnInit, AfterViewInit {
       smIconTxtOverlay.style.transition = 'width 0.75s ease';
       smIconTxtOverlay.style.width = '48px';
       smIconTxtOverlay.style.boxShadow = 'none';
+      //smIconTxtOverlay.style.backgroundColor = 'transparent';
 
       // After the transition ends, hide the element
       setTimeout(() => {
@@ -94,6 +112,19 @@ export class StartMenuComponent implements OnInit, AfterViewInit {
     }
   }
 
+  private async loadFilesInfoAsync():Promise<void>{
+    this.startMenuFiles = [];
+    this._fileService.resetDirectoryFiles();
+    const directoryEntries  = await this._fileService.getEntriesFromDirectoryAsync(this.directory);
+    this._startMenuDirectoryFilesEntries = this._fileService.getFileEntriesFromDirectory(directoryEntries,this.directory);
+
+    for(let i = 0; i < directoryEntries.length; i++){
+      const fileEntry = this._startMenuDirectoryFilesEntries[i];
+      const fileInfo = await this._fileService.getFileInfoAsync(fileEntry.getPath);
+      this.startMenuFiles.push(fileInfo)
+    }
+  }
+
 
 
   private getComponentDetail():Process{

src/osdrive/AppData/StartMenu/audioplayer.url

@@ -0,0 +1,6 @@
+[InternetShortcut]
+FileName=AudioPlayer
+IconPath=/osdrive/Cheetah/System/Imageres/audioplayer.png
+FileType=.url
+ContentPath=
+OpensWith=audioplayer

src/osdrive/AppData/StartMenu/js-dos.url

@@ -0,0 +1,6 @@
+[InternetShortcut]
+FileName=JS-Dos
+IconPath=/osdrive/Cheetah/System/Imageres/js-dos_emulator.png
+FileType=.url
+ContentPath=
+OpensWith=jsdos

src/osdrive/AppData/StartMenu/markdown.url

@@ -0,0 +1,6 @@
+[InternetShortcut]
+FileName=Marked
+IconPath=/osdrive/Cheetah/System/Imageres/markdown.png
+FileType=.url
+ContentPath=
+OpensWith=markdownviewer

src/osdrive/AppData/StartMenu/photoviewer.url

@@ -0,0 +1,6 @@
+[InternetShortcut]
+FileName=PhotoViewer
+IconPath=/osdrive/Cheetah/System/Imageres/photoviewer.png
+FileType=.url
+ContentPath=
+OpensWith=photoviewer

src/osdrive/AppData/StartMenu/ruffle.url

@@ -0,0 +1,6 @@
+[InternetShortcut]
+FileName=Ruffle
+IconPath=/osdrive/Cheetah/System/Imageres/ruffle.png
+FileType=.url
+ContentPath=
+OpensWith=ruffle

src/osdrive/AppData/StartMenu/terminal.url

@@ -0,0 +1,6 @@
+[InternetShortcut]
+FileName=Terminal
+IconPath=/osdrive/Cheetah/System/Imageres/terminal.png
+FileType=.url
+ContentPath=
+OpensWith=terminal

src/osdrive/AppData/StartMenu/texteditor.url

@@ -0,0 +1,6 @@
+[InternetShortcut]
+FileName=Quill
+IconPath=/osdrive/Cheetah/System/Imageres/quill.png
+FileType=.url
+ContentPath=
+OpensWith=texteditor

src/osdrive/AppData/StartMenu/videoplayer.url

@@ -0,0 +1,6 @@
+[InternetShortcut]
+FileName=VideoPlayer
+IconPath=/osdrive/Cheetah/System/Imageres/videoplayer.png
+FileType=.url
+ContentPath=
+OpensWith=videoplayer

src/osdrive/AppData/StartMenu/vscode.url

@@ -0,0 +1,6 @@
+[InternetShortcut]
+FileName=VS Code
+IconPath=/osdrive/Cheetah/System/Imageres/vs_code.png
+FileType=.url
+ContentPath=
+OpensWith=codeeditor