Fix lint, make design more consistent, add license texts,

toju-app/src/app/app.html

@@ -31,22 +31,38 @@
           <div class="flex h-full items-center justify-center px-6 text-sm text-muted-foreground">Loading Theme Studio…</div>
           }
         </div>
-        } @else { @if (desktopUpdateState().restartRequired) {
+        } @else { @if (showDesktopUpdateNotice()) {
         <div class="pointer-events-none absolute inset-x-0 top-0 z-20 px-4 pt-4">
-          <div class="pointer-events-auto mx-auto max-w-4xl rounded-md border border-border bg-card p-4 shadow-sm">
-            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-              <div>
-                <p class="text-sm font-semibold text-foreground">Update ready to install</p>
-                <p class="mt-1 text-sm text-muted-foreground">
-                  MetoYou {{ desktopUpdateState().targetVersion || 'update' }} has been downloaded. Restart the app to finish applying it.
+          <div class="pointer-events-auto mx-auto w-full max-w-xl">
+            <div class="relative rounded-xl border border-border/80 bg-card/95 px-4 py-3 shadow-lg backdrop-blur">
+              <button
+                type="button"
+                (click)="dismissDesktopUpdateNotice()"
+                class="absolute right-2 top-2 grid h-8 w-8 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                aria-label="Dismiss update notice"
+              >
+                <ng-icon
+                  name="lucideX"
+                  class="h-4 w-4"
+                />
+              </button>
+
+              <div class="pr-10">
+                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">Update Ready</p>
+                <p class="mt-1 text-sm font-semibold text-foreground">
+                  Restart to install {{ desktopUpdateState().targetVersion || 'the latest update' }}
                 </p>
               </div>
 
-              <div class="flex flex-wrap gap-2">
+              <p class="mt-1 pr-10 text-xs leading-5 text-muted-foreground">
+                The update has already been downloaded. Restart the app when you're ready to finish applying it.
+              </p>
+
+              <div class="mt-3 flex flex-wrap gap-2">
                 <button
                   type="button"
                   (click)="openUpdatesSettings()"
-                  class="inline-flex items-center rounded-md border border-border bg-secondary px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80"
+                  class="inline-flex items-center rounded-lg border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
                 >
                   Update settings
                 </button>
@@ -54,7 +70,7 @@
                 <button
                   type="button"
                   (click)="restartToApplyUpdate()"
-                  class="inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+                  class="inline-flex items-center rounded-lg bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
                 >
                   Restart now
                 </button>
@@ -78,9 +94,9 @@
     class="pointer-events-none absolute z-[80]"
     [ngStyle]="themeStudioControlsPositionStyles()"
   >
-    <div class="pointer-events-auto flex items-center gap-2 rounded-full border border-border/80 bg-card/95 px-2 py-2 shadow-2xl backdrop-blur">
+    <div class="pointer-events-auto flex items-center gap-2 rounded-lg border border-border bg-card px-2 py-2 shadow-lg backdrop-blur">
       <div
-        class="rounded-full border border-border bg-background px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground select-none cursor-grab"
+        class="rounded-md border border-border bg-secondary px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground select-none cursor-grab"
         [class.cursor-grabbing]="isDraggingThemeStudioControls()"
         (pointerdown)="startThemeStudioControlsDrag($event, themeStudioControlsRef)"
       >
@@ -90,7 +106,7 @@
       <button
         type="button"
         (click)="minimizeThemeStudio()"
-        class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
+        class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
       >
         Minimize
       </button>
@@ -98,7 +114,7 @@
       <button
         type="button"
         (click)="closeThemeStudio()"
-        class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
+        class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
       >
         Close
       </button>
@@ -106,7 +122,7 @@
   </div>
   } @if (isThemeStudioMinimized()) {
   <div class="pointer-events-none absolute bottom-4 right-4 z-[80]">
-    <div class="pointer-events-auto flex items-center gap-3 rounded-2xl border border-border/80 bg-card/95 px-3 py-3 shadow-2xl backdrop-blur">
+    <div class="pointer-events-auto flex items-center gap-3 rounded-lg border border-border bg-card px-3 py-3 shadow-lg backdrop-blur">
       <div class="min-w-0">
         <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">Theme Studio</p>
         <p class="mt-1 text-sm font-medium text-foreground">Minimized</p>
@@ -115,7 +131,7 @@
       <button
         type="button"
         (click)="reopenThemeStudio()"
-        class="rounded-full bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
+        class="rounded-md bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
       >
         Re-open
       </button>
@@ -123,7 +139,7 @@
       <button
         type="button"
         (click)="dismissMinimizedThemeStudio()"
-        class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
+        class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
       >
         Dismiss
       </button>