@pheem49/mint 1.15.0 → 1.16.0

package/src/renderer/src/css/desktop-tools.css

@@ -63,12 +63,13 @@
 }
 
 .workspace-context-popover {
+  max-height: calc(100dvh - 72px);
   position: absolute;
   z-index: 550;
   top: calc(100% + 5px);
   right: 6px;
   width: min(360px, calc(100vw - 24px));
-  overflow: hidden;
+  overflow: hidden auto;
   border: 1px solid var(--border-default, rgba(255, 255, 255, 0.14));
   border-radius: 12px;
   color: var(--text-main, #f1f2f4);
@@ -156,6 +157,203 @@ button.workspace-context-row:disabled { opacity: 0.52; cursor: default; }
 .workspace-context-sources p { overflow: hidden; margin: 4px 0 0; color: var(--text-secondary, #cbd5e1); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
 .workspace-context-sources .workspace-context-more { color: var(--interactive-fg, var(--accent)); }
 
+/* Workspace context popover */
+.workspace-context-trigger {
+  width: 32px;
+  height: 30px;
+  margin-right: 5px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
+}
+
+.workspace-context-trigger:hover,
+.workspace-context-trigger.is-open {
+  border-color: var(--border, rgba(255, 255, 255, 0.1));
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.07));
+}
+
+.workspace-context-trigger:focus-visible,
+.workspace-context-heading button:focus-visible,
+.workspace-context-row:focus-visible {
+  outline: 2px solid var(--accent, #10b981);
+  outline-offset: 2px;
+}
+
+.workspace-context-popover {
+  width: min(380px, calc(100vw - 24px));
+  padding: 8px;
+  border-color: var(--border-default, rgba(255, 255, 255, 0.12));
+  border-radius: 16px;
+  background: var(--bg-overlay, #111113);
+  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.24);
+}
+
+.workspace-context-heading {
+  min-height: 42px;
+  padding: 0 4px 7px 8px;
+  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  color: var(--text-main, #f1f2f4);
+  font-size: 0.78rem;
+}
+
+.workspace-context-heading-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.workspace-context-heading-title svg {
+  color: var(--accent, #10b981);
+}
+
+.workspace-context-heading button {
+  width: 30px;
+  height: 30px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
+}
+
+.workspace-context-heading button:hover:not(:disabled) {
+  border-color: var(--border, rgba(255, 255, 255, 0.1));
+}
+
+.workspace-context-heading button .is-refreshing {
+  animation: workspaceContextSpin 0.9s linear infinite;
+}
+
+@keyframes workspaceContextSpin {
+  to { transform: rotate(360deg); }
+}
+
+.workspace-context-row {
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+  gap: 10px;
+  min-height: 58px;
+  margin-top: 4px;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  border-radius: 11px;
+  transition: background 0.16s ease, border-color 0.16s ease;
+}
+
+.workspace-context-row.is-static {
+  color: var(--text-main, #f1f2f4);
+}
+
+button.workspace-context-row:hover:not(:disabled) {
+  border-color: var(--border, rgba(255, 255, 255, 0.08));
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.045));
+}
+
+button.workspace-context-row:disabled {
+  opacity: 0.7;
+}
+
+.workspace-context-icon {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  border-radius: 9px;
+  background: var(--bg-surface-soft, rgba(255, 255, 255, 0.035));
+  color: var(--interactive-fg, var(--accent));
+}
+
+.workspace-context-copy strong { font-size: 0.78rem; }
+.workspace-context-copy small { margin-top: 3px; font-size: 0.69rem; }
+
+.workspace-context-action,
+.workspace-context-status {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 2px 8px;
+  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  border-radius: 999px;
+  background: var(--bg-surface-soft, rgba(255, 255, 255, 0.035));
+  color: var(--text-secondary, #cbd5e1);
+  font-size: 0.65rem;
+  white-space: nowrap;
+}
+
+.workspace-context-action {
+  color: var(--interactive-fg, var(--accent));
+}
+
+.workspace-context-status.is-dirty {
+  border-color: color-mix(in srgb, var(--status-warning, #fbbf24) 25%, transparent);
+  background: color-mix(in srgb, var(--status-warning, #fbbf24) 9%, transparent);
+  color: var(--status-warning, #fbbf24);
+}
+
+.workspace-context-diff {
+  display: inline-flex;
+  gap: 6px;
+  padding: 3px 7px;
+  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  border-radius: 999px;
+  background: var(--bg-surface-soft, rgba(255, 255, 255, 0.035));
+  font: 0.66rem var(--font-mono, monospace);
+}
+
+.workspace-context-sources {
+  margin-top: 6px;
+  padding: 10px;
+  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  border-radius: 11px;
+  background: var(--bg-surface-soft, rgba(255, 255, 255, 0.025));
+}
+
+.workspace-context-sources-heading {
+  margin-bottom: 8px;
+  color: var(--text-muted, #94a3b8);
+  font-size: 0.68rem;
+}
+
+.workspace-context-sources-heading > span:first-child {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.workspace-context-sources-heading > span:last-child {
+  display: inline-grid;
+  min-width: 20px;
+  height: 20px;
+  place-items: center;
+  border-radius: 999px;
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.06));
+}
+
+.workspace-context-sources p {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin: 5px 0 0;
+  color: var(--text-secondary, #cbd5e1);
+  font-size: 0.7rem;
+}
+
+.workspace-context-sources p svg {
+  flex: 0 0 auto;
+  color: var(--text-muted, #94a3b8);
+}
+
+.workspace-context-sources p:first-of-type:last-child {
+  color: var(--text-muted, #94a3b8);
+  line-height: 1.4;
+}
+
+@media (max-width: 420px) {
+  .workspace-context-popover {
+    right: -6px;
+    width: min(380px, calc(100vw - 16px));
+  }
+}
+
 .mint-titlebar-left {
   gap: 3px;
   min-width: 0;

package/src/renderer/src/css/misc.css

@@ -41,54 +41,6 @@
   color: var(--danger);
 }
 
-.toggle-model-btn.active {
-  background: color-mix(in srgb, var(--accent) 26%, transparent);
-  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
-  color: var(--text-on-accent);
-}
-
-.accessory-cycle-btn:hover,
-.accessory-cycle-btn.active {
-  background: color-mix(in srgb, var(--accent) 14%, transparent);
-  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
-  color: var(--mint-200);
-}
-
-.toggle-interaction-btn:hover,
-.toggle-interaction-btn.active {
-  background: color-mix(in srgb, var(--status-speaking) 14%, transparent);
-  border-color: color-mix(in srgb, var(--status-speaking) 24%, transparent);
-  color: var(--status-speaking);
-}
-
-.toggle-interaction-btn:not(.active) {
-  color: var(--status-error);
-}
-
-.toggle-interaction-btn:not(.active):hover {
-  background: color-mix(in srgb, var(--danger) 14%, transparent);
-  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
-  color: var(--danger);
-}
-
-.toggle-interaction-btn:not(.active) .interaction-off-mark {
-  opacity: 1;
-}
-
-.interaction-guide-btn.active {
-  background: color-mix(in srgb, var(--flavor-cyan) 22%, transparent);
-  border-color: color-mix(in srgb, var(--flavor-cyan) 34%, transparent);
-}
-
-.toggle-model-btn:hover,
-.toggle-model-btn.active,
-.change-expression-btn:hover,
-.accessory-cycle-btn:hover,
-.accessory-cycle-btn.active,
-.toggle-interaction-btn:hover,
-.toggle-interaction-btn.active,
-.interaction-guide-btn:hover,
-.interaction-guide-btn.active,
 .clear-btn:hover,
 .settings-btn:hover,
 .minimize-btn:hover,
@@ -98,10 +50,6 @@
   color: var(--text-main);
 }
 
-.toggle-interaction-btn:not(.active) {
-  color: var(--danger);
-}
-
 .close-btn:hover {
   background: var(--close-btn-hover-bg);
   color: var(--close-btn-hover-color);

package/src/renderer/src/css/pictures.css

@@ -1,415 +1,2 @@
-/* desktop: pictures.css — split from styles.css, rules kept in original order */
-
-.picture-refresh-btn {
-  height: 36px;
-  width: 36px;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-md);
-  background: var(--bg-surface-soft);
-  color: var(--text-soft);
-  border: 1px solid var(--border);
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
-}
-
-.picture-refresh-btn:hover {
-  background: var(--bg-surface-hover);
-  border-color: var(--border-strong);
-  color: var(--text-main);
-}
-
-.pictures-library {
-  position: absolute;
-  inset: 0;
-  z-index: 5;
-  min-height: 0;
-  padding: 56px clamp(28px, 6vw, 92px) 34px;
-  overflow: auto;
-  background: var(--bg-gradient);
-  color: var(--text-main);
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(10px);
-  transition: opacity 0.24s ease, transform 0.24s ease;
-}
-
-.app-body.pictures-open .pictures-library,
-.pictures-library.is-visible {
-  opacity: 1;
-  pointer-events: auto;
-  transform: translateY(0);
-}
-
-.pictures-library[hidden] {
-  display: block;
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(10px);
-}
-
-.pictures-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-  max-width: 1120px;
-  margin: 0 auto 24px;
-  padding-bottom: 18px;
-  border-bottom: 1px solid var(--border);
-}
-
-.pictures-kicker {
-  color: var(--interactive-fg-hover);
-  font-size: 0.72rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: none;
-}
-
-.pictures-header h2 {
-  margin-top: 4px;
-  font-size: 1.55rem;
-  font-weight: 600;
-}
-
-.pictures-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.pictures-header-actions .picture-folder-btn {
-  display: none !important;
-}
-
-.pictures-close-btn {
-  height: 36px;
-  padding: 0 16px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--bg-surface-soft);
-  color: var(--text-main);
-  font-size: 0.82rem;
-  font-weight: 500;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.15s ease, border-color 0.15s ease;
-}
-
-.pictures-close-btn:hover {
-  background: var(--bg-surface-hover);
-  border-color: var(--border-strong);
-}
-
-.pictures-grid {
-  max-width: 1120px;
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(174px, 1fr));
-  gap: 14px;
-  animation: picturesGridIn 0.28s ease both;
-}
-
-.picture-card {
-  position: relative;
-  min-width: 0;
-  overflow: hidden;
-  color: inherit;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  background: var(--surface-bg);
-  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
-  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
-}
-
-.picture-card:hover {
-  transform: translateY(-2px);
-  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
-  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
-}
-
-.picture-card img {
-  display: block;
-  width: 100%;
-  aspect-ratio: 4 / 3;
-  object-fit: cover;
-  background: var(--panel-soft);
-}
-
-.picture-card-meta {
-  min-height: 42px;
-  padding: 9px 10px;
-  color: var(--text-soft);
-  font-size: 0.76rem;
-  line-height: 1.35;
-}
-
-.picture-card-meta span {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.picture-folder-btn {
-  height: 36px;
-  padding: 0 16px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--bg-surface-soft);
-  color: var(--text-main);
-  font-size: 0.82rem;
-  font-weight: 500;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.15s ease, border-color 0.15s ease;
-}
-
-.picture-folder-btn:hover {
-  background: var(--bg-surface-hover);
-  border-color: var(--border-strong);
-}
-
-.picture-folder-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-/* ── Pictures Type Filter & Video Card Styles ── */
-
-.pictures-type-filter {
-  display: flex;
-  gap: 8px;
-  max-width: 1120px;
-  margin: 0 auto 20px;
-  padding: 0 10px;
-}
-
-.filter-tab-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
-  border-radius: var(--radius-3xl);
-  background: var(--bg-surface-soft);
-  border: 1px solid var(--border);
-  color: var(--text-soft);
-  font-size: 0.8rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  outline: none;
-}
-
-.filter-tab-btn:hover {
-  background: var(--bg-surface-hover);
-  color: var(--text-main);
-  border-color: var(--accent);
-}
-
-.filter-tab-btn.active {
-  background: color-mix(in srgb, var(--accent) 15%, transparent);
-  border-color: var(--accent);
-  color: var(--interactive-fg-hover);
-  font-weight: 600;
-}
-
-.picture-card video {
-  display: block;
-  width: 100%;
-  aspect-ratio: 4 / 3;
-  object-fit: cover;
-  background: var(--panel-soft);
-}
-
-.pictures-empty {
-  max-width: 360px;
-  margin: 18vh auto 0;
-  display: grid;
-  justify-items: center;
-  gap: 8px;
-  color: var(--text-muted);
-  text-align: center;
-}
-
-.pictures-empty.is-hidden {
-  display: none;
-}
-
-.pictures-empty-icon {
-  display: grid;
-  place-items: center;
-  width: 48px;
-  height: 48px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-xl);
-  background: var(--surface-bg);
-  color: var(--interactive-fg-hover);
-  font-size: 1.2rem;
-}
-
-.pictures-empty p {
-  color: var(--text-main);
-  font-weight: 600;
-}
-
-.pictures-empty span {
-  font-size: 0.82rem;
-  line-height: 1.45;
-}
-
-.picture-card:hover {
-  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
-}
-
-.picture-card-delete-btn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 5;
-  width: 26px;
-  height: 26px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border-default);
-  background: var(--bg-surface);
-  color: var(--danger);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  opacity: 0;
-  transform: scale(0.9);
-  transition: all 0.2s ease;
-  backdrop-filter: blur(4px);
-}
-
-.picture-card:hover .picture-card-delete-btn {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.picture-card-delete-btn:hover {
-  background: var(--danger);
-  color: var(--pure-white);
-  border-color: var(--danger);
-}
-
-.picture-delete-modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  background: rgba(0, 0, 0, 0.65);
-  backdrop-filter: blur(6px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  animation: fadeIn 0.15s ease-out;
-}
-
-.picture-delete-modal {
-  width: 100%;
-  max-width: 400px;
-  background: var(--bg-overlay);
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-2xl);
-  padding: 20px;
-  box-shadow: var(--shadow-lg);
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.picture-delete-modal-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: var(--text-main);
-}
-
-.picture-delete-modal-body {
-  font-size: 0.9rem;
-  color: var(--text-soft);
-  line-height: 1.5;
-  margin: 0;
-}
-
-.picture-delete-modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  margin-top: 8px;
-}
-
-.picture-modal-btn {
-  padding: 8px 16px;
-  border-radius: var(--radius-md);
-  font-size: 0.85rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.picture-modal-btn.cancel {
-  background: transparent;
-  border: 1px solid var(--border-default);
-  color: var(--text-main);
-}
-
-.picture-modal-btn.cancel:hover {
-  background: var(--bg-surface-soft);
-}
-
-.picture-modal-btn.delete {
-  background: var(--danger);
-  border: 1px solid var(--danger);
-  color: var(--pure-white);
-}
-
-.picture-modal-btn.delete:hover {
-  background: color-mix(in srgb, var(--danger) 85%, black);
-}
-
-/* Saved Pictures Gallery Load More styles */
-
-.pictures-load-more-container {
-  display: flex;
-  justify-content: center;
-  margin-top: 36px;
-  margin-bottom: 24px;
-}
-
-.pictures-load-more-btn {
-  height: 40px;
-  padding: 0 24px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  background: var(--bg-surface-soft);
-  color: var(--text-main);
-  font-size: 0.88rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.pictures-load-more-btn:hover {
-  background: var(--border);
-  border-color: var(--accent);
-  color: var(--interactive-fg);
-  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent);
-}
-
-.pictures-load-more-btn:active {
-  transform: scale(0.98);
-}
+/* Compatibility stylesheet; Library is shared across Web and Desktop. */
+@import "../../shared/css/library.css";