Split workspace into electron and ui packages

2025-11-17 12:06:58 +00:00
parent aa77ca2931
commit 89bd32814f
137 changed files with 407 additions and 1371 deletions
--- a/packages/ui/src/styles/panels/tabs.css
+++ b/packages/ui/src/styles/panels/tabs.css
@@ -0,0 +1,110 @@
+/* Primary tab strip */
+.tab-bar {
+  @apply border-b;
+  border-color: var(--border-base);
+}
+
+.tab-bar-instance {
+  background-color: var(--surface-secondary);
+}
+
+.tab-bar-session {
+  background-color: var(--surface-base);
+}
+
+.tab-container {
+  @apply flex items-center justify-between gap-1 px-2 py-1 overflow-x-auto;
+}
+
+.tab-base {
+  @apply inline-flex items-center gap-2 px-3 py-2 rounded-t-md max-w-[200px] transition-colors text-sm font-medium;
+  font-family: var(--font-family-sans);
+  outline: none;
+}
+
+.tab-base:focus-visible {
+  @apply ring-2 ring-offset-1;
+  ring-color: var(--accent-primary);
+  ring-offset-color: var(--surface-base);
+}
+
+.tab-active {
+  background-color: var(--tab-active-bg);
+  color: var(--tab-active-text);
+}
+
+.tab-inactive {
+  background-color: var(--tab-inactive-bg);
+  color: var(--tab-inactive-text);
+}
+
+.tab-inactive:hover {
+  background-color: var(--tab-inactive-hover-bg);
+}
+
+.tab-active:hover {
+  background-color: var(--tab-active-hover-bg);
+}
+
+.tab-label {
+  @apply truncate;
+}
+
+.tab-close {
+  @apply opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white rounded p-0.5 transition-all cursor-pointer;
+}
+
+.tab-close:focus-visible {
+  @apply ring-2 ring-offset-1;
+  ring-color: var(--accent-primary);
+  ring-offset-color: inherit;
+}
+
+.new-tab-button {
+  @apply inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors;
+  background-color: var(--new-tab-bg);
+  color: var(--new-tab-text);
+}
+
+.new-tab-button:hover {
+  background-color: var(--new-tab-hover-bg);
+}
+
+.new-tab-button:focus-visible {
+  @apply ring-2 ring-offset-1;
+  ring-color: var(--accent-primary);
+  ring-offset-color: var(--surface-base);
+}
+
+/* Session tabs */
+.session-tab-base {
+  @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-t-md max-w-[150px] transition-colors text-sm;
+  font-family: var(--font-family-sans);
+  outline: none;
+  border-bottom: 2px solid transparent;
+}
+
+.session-tab-base:focus-visible {
+  @apply ring-2 ring-offset-1;
+  ring-color: var(--accent-primary);
+  ring-offset-color: var(--surface-base);
+}
+
+.session-tab-active {
+  background-color: var(--session-tab-active-bg);
+  border-bottom-color: var(--accent-primary);
+  color: var(--session-tab-active-text);
+  font-weight: var(--font-weight-medium);
+}
+
+.session-tab-inactive {
+  color: var(--session-tab-inactive-text);
+}
+
+.session-tab-inactive:hover {
+  background-color: var(--session-tab-hover-bg);
+}
+
+.session-tab-special {
+  color: var(--session-tab-inactive-text);
+}