pinokiod 7.3.10 → 7.3.11

package/server/views/autolaunch.ejs

@@ -14,10 +14,10 @@
 <% } %>
 <style>
 body.autolaunch-page .task-container {
-  padding: 20px 28px 32px;
+  padding: 0;
 }
 body.autolaunch-page .task-shell {
-  width: min(1140px, 100%);
+  width: 100%;
   margin: 0;
   background: transparent;
   border: 0;
@@ -27,7 +27,7 @@ body.autolaunch-page .task-shell {
   backdrop-filter: none;
 }
 body.autolaunch-page .task-shell-header {
-  padding-bottom: 18px;
+  padding: 12px 18px 14px;
 }
 body.autolaunch-page .task-shell-body {
   padding: 0 28px 28px;
@@ -479,9 +479,8 @@ body.autolaunch-page .autolaunch-loading i {
     <section class="task-shell autolaunch-shell">
       <header class="task-shell-header">
         <div class="task-shell-header-main">
-          <p class="task-eyebrow">Autolaunch</p>
           <h1 class="task-title">Startup scripts</h1>
-          <p class="task-description">Choose which installed app script runs when Pinokio starts. Script choices load when you select an app.</p>
+          <p class="task-description">Choose which installed app script runs when Pinokio starts.</p>
         </div>
         <div class="task-header-actions autolaunch-summary">
           <span class="autolaunch-summary-item"><strong data-enabled-count><%= enabledCount %></strong> enabled</span>

package/server/views/checkpoints.ejs

@@ -155,13 +155,8 @@ body.dark .backup-modal-description {
   padding: 2px 6px 6px 2px;
   overscroll-behavior: contain;
 }
-.line.backup-row {
+body.checkpoints-page .backup-row {
   cursor: pointer;
-  transition: background 0.15s ease, box-shadow 0.15s ease;
-}
-.line.backup-row:hover {
-  background: royalblue;
-  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
 }
 .snapshot-option {
   display: flex;
@@ -385,10 +380,10 @@ body.dark .backup-loading .backup-loading-text {
   color: rgba(226, 232, 240, 0.95);
 }
 body.checkpoints-page .task-container {
-  padding: 20px 28px 32px;
+  padding: 0;
 }
 body.checkpoints-page .task-shell {
-  width: min(1080px, 100%);
+  width: 100%;
   margin: 0;
   background: transparent;
   border: 0;
@@ -398,7 +393,7 @@ body.checkpoints-page .task-shell {
   backdrop-filter: none;
 }
 body.checkpoints-page .task-shell-header {
-  padding-bottom: 18px;
+  padding: 12px 18px 14px;
 }
 body.checkpoints-page .task-shell-body {
   padding: 28px 28px 28px;
@@ -417,31 +412,40 @@ body.checkpoints-page .checkpoints-toolbar {
   margin: 0 0 18px;
 }
 body.checkpoints-page .checkpoints-list {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 0;
+  overflow: hidden;
+  border: 1px solid var(--task-border);
+  border-radius: 8px;
+  background: transparent;
 }
 body.checkpoints-page .backup-row {
-  padding: 16px 0;
-  border-top: 1px solid var(--task-border);
+  display: block;
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--task-border);
+  background: transparent;
+  color: var(--task-text);
+  text-decoration: none;
+  transform: none;
 }
-body.checkpoints-page .checkpoints-list > .backup-row:first-child {
-  padding-top: 0;
-  border-top: 0;
+body.checkpoints-page .backup-row:last-child {
+  border-bottom: 0;
 }
 body.checkpoints-page .backup-row h3 {
   margin: 0;
   display: grid;
-  grid-template-columns: 52px minmax(0, 1fr);
-  gap: 14px;
-  align-items: start;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
 }
 body.checkpoints-page .backup-row .item-icon {
-  width: 52px;
-  height: 52px;
-  border-radius: 14px;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
   overflow: hidden;
-  background: color-mix(in srgb, var(--task-panel) 94%, var(--task-soft));
   border: 1px solid var(--task-border);
+  background: color-mix(in srgb, var(--task-text) 5%, transparent);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -459,44 +463,71 @@ body.checkpoints-page .backup-row .title {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 18px;
-  font-weight: 700;
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 450;
+  letter-spacing: 0;
+  line-height: 1.2;
   color: var(--task-text);
-}
-body.checkpoints-page .backup-row .title i {
-  font-size: 10px;
-  color: var(--task-accent);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 body.checkpoints-page .backup-row .uri {
-  margin-top: 3px;
-  font-size: 13px;
-  line-height: 1.45;
+  overflow: hidden;
+  margin-top: 1px;
+  font-size: 11px;
+  line-height: 1.2;
   color: var(--task-muted);
-  word-break: break-word;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 body.checkpoints-page .backup-row .description {
-  margin-top: 6px;
-  font-size: 13px;
-  line-height: 1.5;
+  overflow: hidden;
+  margin-top: 2px;
+  font-size: 11px;
+  line-height: 1.2;
   color: var(--task-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 body.checkpoints-page .backup-row .backup-meta {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 7px;
   flex-wrap: wrap;
+  min-width: 0;
 }
 body.checkpoints-page .backup-row .badge {
   display: inline-flex;
   align-items: center;
-  min-height: 24px;
-  padding: 0 9px;
-  border-radius: 999px;
-  border: 1px solid var(--task-border);
-  background: color-mix(in srgb, var(--task-panel) 94%, var(--task-soft));
-  color: var(--task-text);
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--task-muted);
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 500;
+}
+body.checkpoints-page .checkpoint-row-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--task-muted);
+  font-size: 11px;
+  line-height: 1;
+  opacity: 0.7;
+  transition: color 140ms ease, opacity 140ms ease, transform 140ms ease;
+}
+body.checkpoints-page .backup-row:hover .checkpoint-row-action,
+body.checkpoints-page .backup-row:focus-visible .checkpoint-row-action,
+body.checkpoints-page .backup-row:focus-within .checkpoint-row-action {
+  color: var(--task-text);
+  opacity: 1;
+  transform: translateX(1px);
+}
+body.checkpoints-page .checkpoint-row-action i {
+  font-size: 12px;
 }
 body.checkpoints-page .backups-empty {
   margin: 0;
@@ -516,15 +547,155 @@ body.checkpoints-page .backups-empty {
     padding: 16px 14px 24px;
   }
   body.checkpoints-page .backup-row h3 {
-    grid-template-columns: 44px minmax(0, 1fr);
+    grid-template-columns: auto minmax(0, 1fr) auto;
     gap: 12px;
   }
   body.checkpoints-page .backup-row .item-icon {
-    width: 44px;
-    height: 44px;
-    border-radius: 12px;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+  }
+  body.checkpoints-page .checkpoint-row-action span {
+    display: none;
   }
 }
+/* Minimal modal normalization for backup install/rename dialogs. */
+.swal2-popup.backup-modal-shell {
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.backup-modal-content {
+  border: 1px solid rgba(24, 24, 27, 0.12) !important;
+  border-radius: 8px !important;
+  background: #ffffff !important;
+  color: #18181b !important;
+  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16) !important;
+  padding: 18px !important;
+}
+
+body.dark .backup-modal-content {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  background: #1b1c1d !important;
+  color: rgba(250, 250, 250, 0.94) !important;
+  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42) !important;
+}
+
+.backup-modal-header h3 {
+  font-size: 16px !important;
+  line-height: 1.25 !important;
+  font-weight: 600 !important;
+  color: inherit !important;
+}
+
+.backup-modal-description,
+body.dark .backup-modal-description,
+.backup-meta {
+  color: #71717a !important;
+  font-size: 12px !important;
+  line-height: 1.45 !important;
+}
+
+body.dark .backup-modal-description,
+body.dark .backup-meta {
+  color: rgba(229, 231, 235, 0.62) !important;
+}
+
+.backup-modal input[type="text"],
+body.dark .backup-modal input[type="text"] {
+  height: 36px !important;
+  border-radius: 6px !important;
+  border: 1px solid rgba(24, 24, 27, 0.16) !important;
+  background: #ffffff !important;
+  color: #18181b !important;
+  box-shadow: none !important;
+  font-size: 13px !important;
+}
+
+body.dark .backup-modal input[type="text"] {
+  border-color: rgba(255, 255, 255, 0.14) !important;
+  background: rgba(255, 255, 255, 0.04) !important;
+  color: rgba(250, 250, 250, 0.94) !important;
+}
+
+.backup-modal input[type="text"]:focus {
+  border-color: rgba(24, 24, 27, 0.42) !important;
+  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.12) !important;
+  outline: none !important;
+}
+
+body.dark .backup-modal input[type="text"]:focus {
+  border-color: rgba(255, 255, 255, 0.38) !important;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14) !important;
+}
+
+.backup-modal-content .url-modal-close {
+  width: 28px !important;
+  height: 28px !important;
+  border-radius: 6px !important;
+  color: #71717a !important;
+}
+
+body.dark .backup-modal-content .url-modal-close {
+  color: rgba(229, 231, 235, 0.58) !important;
+}
+
+.backup-modal-content .url-modal-close:hover,
+.backup-modal-content .url-modal-close:focus-visible {
+  background: rgba(24, 24, 27, 0.06) !important;
+  color: #18181b !important;
+  outline: none !important;
+}
+
+body.dark .backup-modal-content .url-modal-close:hover,
+body.dark .backup-modal-content .url-modal-close:focus-visible {
+  background: rgba(255, 255, 255, 0.07) !important;
+  color: rgba(250, 250, 250, 0.94) !important;
+}
+
+.backup-modal-content .url-modal-button {
+  min-height: 32px !important;
+  padding: 0 12px !important;
+  border-radius: 6px !important;
+  box-shadow: none !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+}
+
+.backup-modal-content .url-modal-button.confirm {
+  border: 1px solid #18181b !important;
+  background: #18181b !important;
+  color: #ffffff !important;
+}
+
+body.dark .backup-modal-content .url-modal-button.confirm {
+  border-color: rgba(250, 250, 250, 0.94) !important;
+  background: rgba(250, 250, 250, 0.94) !important;
+  color: #1b1c1d !important;
+}
+
+.backup-modal-content .url-modal-button.cancel {
+  border: 1px solid rgba(24, 24, 27, 0.12) !important;
+  background: transparent !important;
+  color: #52525b !important;
+}
+
+body.dark .backup-modal-content .url-modal-button.cancel {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  color: rgba(229, 231, 235, 0.7) !important;
+}
+
+.backup-modal-content .url-modal-button.danger {
+  border: 1px solid rgba(220, 38, 38, 0.22) !important;
+  background: rgba(220, 38, 38, 0.08) !important;
+  color: #b91c1c !important;
+}
+
+body.dark .backup-modal-content .url-modal-button.danger {
+  border-color: rgba(248, 113, 113, 0.28) !important;
+  background: rgba(239, 68, 68, 0.13) !important;
+  color: #fecaca !important;
+}
 </style>
 <script src="/window_storage.js"></script>
 <script src="/hotkeys.min.js"></script>
@@ -1049,7 +1220,6 @@ document.addEventListener("DOMContentLoaded", () => {
     <section class='task-shell checkpoints-shell'>
       <header class='task-shell-header'>
         <div class='task-shell-header-main'>
-          <p class='task-eyebrow'>Checkpoints</p>
           <h1 class='task-title'>Checkpoints</h1>
           <p class='task-description'>Local version history for workspaces on this machine.</p>
         </div>
@@ -1068,7 +1238,7 @@ document.addEventListener("DOMContentLoaded", () => {
           <% if (items && items.length > 0) { %>
             <div class="checkpoints-list">
               <% items.forEach((item) => { %>
-                <div class='line align-top backup-row' data-remote-key="<%=item.remoteKey%>">
+                <div class='backup-row' data-remote-key="<%=item.remoteKey%>">
                   <h3>
                     <div class='item-icon'>
                       <% if (item.icon) { %>
@@ -1079,7 +1249,6 @@ document.addEventListener("DOMContentLoaded", () => {
                     </div>
                     <div class='col'>
                       <div class='title'>
-                        <i class="fa-solid fa-circle"></i>
                         <span><%= item.title || item.displayName %></span>
                       </div>
                       <div class='uri'><%= item.remoteUrl %></div>
@@ -1104,6 +1273,10 @@ document.addEventListener("DOMContentLoaded", () => {
                         </div>
                       <% } %>
                     </div>
+                    <div class="checkpoint-row-action" aria-hidden="true">
+                      <i class="fa-solid fa-clock-rotate-left"></i>
+                      <span>Manage</span>
+                    </div>
                   </h3>
                 </div>
               <% }) %>