Merge pull request #106 from oatear/feature/clean-recent-urls

Automatically clean up recent urls on startup
oatear · Feb 6, 2025 · 0607b7f · 0607b7f
2 parents 8b9dafa + 7dc7fe3
commit 0607b7f
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 8 deletions.
diff --git a/cider-app/src/app/card-templates/card-templates.component.html b/cider-app/src/app/card-templates/card-templates.component.html
@@ -39,7 +39,7 @@
                 <div class="top-panel">
                     <p-panel [style]="{height: '100%', width: '100%'}" header="CSS">
                         <ng-template pTemplate="icons">
-                            <button pButton pRipple icon="pi pi-info-circle" class="p-panel-header-icon p-link" (click)="openCssInfo()"></button>
+                            <!-- <button pButton pRipple icon="pi pi-info-circle" class="p-panel-header-icon p-link" (click)="openCssInfo()"></button> -->
                         </ng-template>
                         <ngx-monaco-editor style="height: 100%;" *ngIf="selectedTemplate && !disablePanels"
                             [options]="cssEditorOptions" [(ngModel)]="selectedTemplate.css" (ngModelChange)="debounceSave()"></ngx-monaco-editor>
@@ -48,7 +48,7 @@
                 <div class="bottom-panel">
                     <p-panel [style]="{height: '100%', width: '100%'}" header="HTML/Handlebars">
                         <ng-template pTemplate="icons">
-                            <button pButton pRipple icon="pi pi-info-circle" class="p-panel-header-icon p-link" (click)="openHtmlInfo()"></button>
+                            <!-- <button pButton pRipple icon="pi pi-info-circle" class="p-panel-header-icon p-link" (click)="openHtmlInfo()"></button> -->
                         </ng-template>
                         <ngx-monaco-editor style="height: 100%;" *ngIf="selectedTemplate && !disablePanels"
                             [options]="htmlEditorOptions" [(ngModel)]="selectedTemplate.html" (ngModelChange)="debounceSave()"></ngx-monaco-editor>

diff --git a/cider-app/src/app/data-services/local-storage/local-storage.service.ts b/cider-app/src/app/data-services/local-storage/local-storage.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+import { ElectronService } from '../electron/electron.service';
 
 /**
  * Local storage is used for storing user preferences
@@ -13,9 +14,16 @@ export class LocalStorageService {
 
   public recentProjectUrls: BehaviorSubject<string[]>;
 
-  constructor() {
+  constructor(
+      private electronService: ElectronService) {
     this.recentProjectUrls = new BehaviorSubject<string[]>(
       this.getRecentProjectUrlsFromLocalStorage());
+
+    // clean up the recent project urls -- remove any that are empty or don't exist
+    this.cleanRecentProjectUrls().then(urls => {
+      localStorage.setItem(LocalStorageService.RECENT_PROJECT_URLS, JSON.stringify(urls));
+      this.recentProjectUrls.next(urls);
+    });
   }
 
   public addRecentProjectUrl(url : string) {
@@ -37,6 +45,19 @@ export class LocalStorageService {
     return JSON.parse(urlsString);
   }
 
+  /**
+   * Filter out any directories that are empty or don't exist from the recent project urls
+   * 
+   * @returns 
+   */
+  public cleanRecentProjectUrls() : Promise<string[]> {
+    const urls = this.getRecentProjectUrlsFromLocalStorage();
+    const promises = urls.map(url => this.electronService.listDirectory(url)
+      .then(files => files.length > 0 ? url : ""));
+    const validUrls = Promise.all(promises).then((urls) => urls.filter(url => url !== ""));
+    return validUrls;
+  }
+
   public getRecentProjectUrls() {
     return this.recentProjectUrls.asObservable();
   }

diff --git a/cider-app/src/app/welcome/welcome.component.html b/cider-app/src/app/welcome/welcome.component.html
@@ -16,9 +16,9 @@
         [style]="{
             'background': projectUrl.hover 
             ? 'linear-gradient(45deg, hsl(' + projectUrl.hue + ' 50% 50%), 
-                hsl(' + projectUrl.hue2 + ' 50% 50%)) 0% 0% / 250% 250%'
+                hsl(' + projectUrl.hue2 + ' 50% 35%)) 0% 0% / 250% 250%'
             : 'linear-gradient(45deg, hsl(' + projectUrl.hue + ' 50% 45%), 
-                hsl(' + projectUrl.hue2 + ' 50% 45%)) 0% 0% / 250% 250%'
+                hsl(' + projectUrl.hue2 + ' 50% 30%)) 0% 0% / 250% 250%'
         }"></p-button>
     </ng-container>
 </p-card>

diff --git a/cider-app/src/app/welcome/welcome.component.scss b/cider-app/src/app/welcome/welcome.component.scss
@@ -13,7 +13,33 @@
             background: #404d61;
         }
         &.project-button {
-            animation: gradient 10s ease infinite;
+            animation: gradient 5s ease infinite;
+            &::after,
+            &::before {
+              content: '';
+              width: 200%;
+              height: 200%;
+              position: absolute;
+              top: -35px;
+              left: 50%;
+              transform: translate(-50%, -75%);
+              background: #000;
+            }
+
+            &::before {
+              border-radius: 45%;
+              background: rgba(#343e4d, 0.5);
+              animation: liquid 5s linear infinite;
+            }
+
+            &::after {
+              border-radius: 40%;
+              background: rgba(20, 20, 20, 0.4);
+              animation: liquid 10s linear infinite;
+            }
+            &:hover::after, &:hover::before {
+              top: -50px;
+            }
         }
     }
 }
@@ -29,6 +55,15 @@
 		background-position: 0% 50%;
 	}
 }
+
+@keyframes liquid {
+    0% {
+        transform: translate(-50%, -75%) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -75%) rotate(360deg);
+    }
+}
 
 :host ::ng-deep .artwork-card {
     margin: 25px;
@@ -39,4 +74,4 @@
 
 :host ::ng-deep p-card > div.p-card {
     margin-right: 10px;
-}
+}
diff --git a/cider-app/src/app/welcome/welcome.component.ts b/cider-app/src/app/welcome/welcome.component.ts
@@ -46,7 +46,7 @@ export class WelcomeComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.localStorageService.getRecentProjectUrls().pipe(take(1)).subscribe(urls => {
+    this.localStorageService.getRecentProjectUrls().subscribe(urls => {
       this.recentProjectUrls = urls.map(url => {
         let name = StringUtils.lastDirectoryFromUrl(url);
         let hue = this.calculateHue(name);