@industry-theme/alexandria-panels 0.1.5 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/panels/DependenciesPanel/index.d.ts +1 -1
- package/dist/panels/DependenciesPanel/index.d.ts.map +1 -1
- package/dist/panels/LocalProjectsPanel/LocalProjectCard.d.ts.map +1 -1
- package/dist/panels/LocalProjectsPanel/index.d.ts.map +1 -1
- package/dist/panels/WorkspaceRepositoriesPanel/index.d.ts.map +1 -1
- package/dist/panels/WorkspacesListPanel/index.d.ts.map +1 -1
- package/dist/panels.bundle.js +552 -646
- package/dist/panels.bundle.js.map +1 -1
- package/package.json +1 -1
package/dist/panels.bundle.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
try {
|
|
4
4
|
if (typeof document != "undefined") {
|
|
5
5
|
var elementStyle = document.createElement("style");
|
|
6
|
-
elementStyle.appendChild(document.createTextNode("/* Container query for responsive LocalProjectCard */\n.local-projects-panel {\n container-type: inline-size;\n container-name: local-projects;\n height: 100%;\n}\n\n.local-project-card {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 12px;\n}\n\n.local-project-card__content {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.local-project-card__info {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.local-project-card__meta {\n display: flex;\n}\n\n.local-project-card__actions {\n display: flex;\n gap: 4px;\n
|
|
6
|
+
elementStyle.appendChild(document.createTextNode("/* Container query for responsive LocalProjectCard */\n.local-projects-panel {\n container-type: inline-size;\n container-name: local-projects;\n height: 100%;\n}\n\n.local-project-card {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 12px;\n position: relative;\n}\n\n.local-project-card__content {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.local-project-card__info {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.local-project-card__meta {\n display: flex;\n}\n\n.local-project-card__actions {\n display: flex;\n gap: 4px;\n align-items: center;\n flex-shrink: 0;\n}\n\n.local-project-card__actions--stacked {\n display: none;\n}\n\n/* Compact mode when container is 400px or less */\n@container local-projects (max-width: 400px) {\n .local-projects-panel {\n padding: 8px !important;\n gap: 8px !important;\n }\n\n .local-projects-list {\n gap: 12px !important;\n }\n\n .local-project-card {\n flex-direction: column;\n align-items: stretch;\n gap: 6px;\n padding: 0 !important;\n }\n\n .local-project-card__content {\n gap: 8px;\n }\n\n .local-project-card__meta {\n display: none;\n }\n\n .local-project-card__actions {\n display: none;\n }\n\n .local-project-card__actions--stacked {\n display: flex;\n gap: 4px;\n }\n\n .local-project-card__actions--stacked button {\n flex: 1;\n }\n}"));
|
|
7
7
|
document.head.appendChild(elementStyle);
|
|
8
8
|
}
|
|
9
9
|
} catch (e) {
|
|
@@ -11,159 +11,7 @@
|
|
|
11
11
|
}
|
|
12
12
|
})();
|
|
13
13
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
14
|
-
import React2, { createContext,
|
|
15
|
-
var terminalTheme = {
|
|
16
|
-
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
|
|
17
|
-
fonts: {
|
|
18
|
-
body: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
|
|
19
|
-
heading: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
|
|
20
|
-
monospace: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace'
|
|
21
|
-
},
|
|
22
|
-
fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
|
|
23
|
-
fontScale: 1,
|
|
24
|
-
fontWeights: {
|
|
25
|
-
body: 400,
|
|
26
|
-
heading: 500,
|
|
27
|
-
bold: 600,
|
|
28
|
-
light: 300,
|
|
29
|
-
medium: 500,
|
|
30
|
-
semibold: 600
|
|
31
|
-
},
|
|
32
|
-
lineHeights: {
|
|
33
|
-
body: 1.6,
|
|
34
|
-
heading: 1.3,
|
|
35
|
-
tight: 1.4,
|
|
36
|
-
relaxed: 1.8
|
|
37
|
-
},
|
|
38
|
-
breakpoints: ["640px", "768px", "1024px", "1280px"],
|
|
39
|
-
sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
|
|
40
|
-
radii: [0, 2, 4, 6, 8, 12, 16, 24],
|
|
41
|
-
shadows: [
|
|
42
|
-
"none",
|
|
43
|
-
"0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
|
44
|
-
"0 2px 4px 0 rgba(0, 0, 0, 0.06)",
|
|
45
|
-
"0 4px 6px 0 rgba(0, 0, 0, 0.07)",
|
|
46
|
-
"0 8px 12px 0 rgba(0, 0, 0, 0.08)",
|
|
47
|
-
"0 16px 24px 0 rgba(0, 0, 0, 0.10)"
|
|
48
|
-
],
|
|
49
|
-
zIndices: [0, 1, 10, 20, 30, 40, 50],
|
|
50
|
-
colors: {
|
|
51
|
-
text: "#e4e4e4",
|
|
52
|
-
background: "rgba(10, 10, 10, 0.85)",
|
|
53
|
-
primary: "#66b3ff",
|
|
54
|
-
secondary: "#80c4ff",
|
|
55
|
-
accent: "#66ff99",
|
|
56
|
-
highlight: "rgba(102, 179, 255, 0.15)",
|
|
57
|
-
muted: "rgba(26, 26, 26, 0.8)",
|
|
58
|
-
success: "#66ff99",
|
|
59
|
-
warning: "#ffcc66",
|
|
60
|
-
error: "#ff6666",
|
|
61
|
-
info: "#66b3ff",
|
|
62
|
-
border: "rgba(255, 255, 255, 0.1)",
|
|
63
|
-
backgroundSecondary: "rgba(15, 15, 15, 0.9)",
|
|
64
|
-
backgroundTertiary: "rgba(20, 20, 20, 0.9)",
|
|
65
|
-
backgroundLight: "rgba(255, 255, 255, 0.05)",
|
|
66
|
-
backgroundHover: "rgba(102, 179, 255, 0.08)",
|
|
67
|
-
surface: "rgba(15, 15, 15, 0.95)",
|
|
68
|
-
textSecondary: "rgba(255, 255, 255, 0.7)",
|
|
69
|
-
textTertiary: "rgba(255, 255, 255, 0.5)",
|
|
70
|
-
textMuted: "rgba(255, 255, 255, 0.4)",
|
|
71
|
-
highlightBg: "rgba(255, 235, 59, 0.25)",
|
|
72
|
-
highlightBorder: "rgba(255, 235, 59, 0.5)"
|
|
73
|
-
},
|
|
74
|
-
modes: {
|
|
75
|
-
light: {
|
|
76
|
-
text: "#1a1a1a",
|
|
77
|
-
background: "rgba(255, 255, 255, 0.9)",
|
|
78
|
-
primary: "#0066cc",
|
|
79
|
-
secondary: "#0052a3",
|
|
80
|
-
accent: "#00cc88",
|
|
81
|
-
highlight: "rgba(0, 102, 204, 0.08)",
|
|
82
|
-
muted: "rgba(245, 245, 245, 0.8)",
|
|
83
|
-
success: "#00cc88",
|
|
84
|
-
warning: "#ffaa00",
|
|
85
|
-
error: "#ff3333",
|
|
86
|
-
info: "#0066cc",
|
|
87
|
-
border: "rgba(0, 0, 0, 0.1)",
|
|
88
|
-
backgroundSecondary: "rgba(250, 250, 250, 0.9)",
|
|
89
|
-
backgroundTertiary: "rgba(245, 245, 245, 0.9)",
|
|
90
|
-
backgroundLight: "rgba(0, 0, 0, 0.02)",
|
|
91
|
-
backgroundHover: "rgba(0, 102, 204, 0.04)",
|
|
92
|
-
surface: "rgba(255, 255, 255, 0.95)",
|
|
93
|
-
textSecondary: "rgba(0, 0, 0, 0.6)",
|
|
94
|
-
textTertiary: "rgba(0, 0, 0, 0.4)",
|
|
95
|
-
textMuted: "rgba(0, 0, 0, 0.3)",
|
|
96
|
-
highlightBg: "rgba(255, 235, 59, 0.3)",
|
|
97
|
-
highlightBorder: "rgba(255, 235, 59, 0.6)"
|
|
98
|
-
}
|
|
99
|
-
},
|
|
100
|
-
buttons: {
|
|
101
|
-
primary: {
|
|
102
|
-
color: "white",
|
|
103
|
-
bg: "primary",
|
|
104
|
-
borderWidth: 0,
|
|
105
|
-
"&:hover": {
|
|
106
|
-
bg: "secondary"
|
|
107
|
-
}
|
|
108
|
-
},
|
|
109
|
-
secondary: {
|
|
110
|
-
color: "primary",
|
|
111
|
-
bg: "transparent",
|
|
112
|
-
borderWidth: 1,
|
|
113
|
-
borderStyle: "solid",
|
|
114
|
-
borderColor: "primary",
|
|
115
|
-
"&:hover": {
|
|
116
|
-
bg: "highlight"
|
|
117
|
-
}
|
|
118
|
-
},
|
|
119
|
-
ghost: {
|
|
120
|
-
color: "text",
|
|
121
|
-
bg: "transparent",
|
|
122
|
-
"&:hover": {
|
|
123
|
-
bg: "backgroundHover"
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
},
|
|
127
|
-
text: {
|
|
128
|
-
heading: {
|
|
129
|
-
fontFamily: "heading",
|
|
130
|
-
fontWeight: "heading",
|
|
131
|
-
lineHeight: "heading"
|
|
132
|
-
},
|
|
133
|
-
body: {
|
|
134
|
-
fontFamily: "body",
|
|
135
|
-
fontWeight: "body",
|
|
136
|
-
lineHeight: "body"
|
|
137
|
-
},
|
|
138
|
-
caption: {
|
|
139
|
-
fontSize: 1,
|
|
140
|
-
color: "textSecondary"
|
|
141
|
-
}
|
|
142
|
-
},
|
|
143
|
-
cards: {
|
|
144
|
-
primary: {
|
|
145
|
-
bg: "surface",
|
|
146
|
-
border: "1px solid",
|
|
147
|
-
borderColor: "border",
|
|
148
|
-
borderRadius: 1
|
|
149
|
-
},
|
|
150
|
-
secondary: {
|
|
151
|
-
bg: "backgroundSecondary",
|
|
152
|
-
border: "1px solid",
|
|
153
|
-
borderColor: "border",
|
|
154
|
-
borderRadius: 1
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
};
|
|
158
|
-
function getMode(theme2, mode) {
|
|
159
|
-
if (!mode || !theme2.modes || !theme2.modes[mode]) {
|
|
160
|
-
return theme2.colors;
|
|
161
|
-
}
|
|
162
|
-
return {
|
|
163
|
-
...theme2.colors,
|
|
164
|
-
...theme2.modes[mode]
|
|
165
|
-
};
|
|
166
|
-
}
|
|
14
|
+
import React2, { createContext, useContext, forwardRef, createElement, useState, useMemo, useCallback, useEffect } from "react";
|
|
167
15
|
var ThemeContext;
|
|
168
16
|
var getThemeContext = () => {
|
|
169
17
|
if (typeof window !== "undefined") {
|
|
@@ -187,46 +35,6 @@ var useTheme = () => {
|
|
|
187
35
|
}
|
|
188
36
|
return context;
|
|
189
37
|
};
|
|
190
|
-
var ThemeProvider = ({
|
|
191
|
-
children,
|
|
192
|
-
theme: customTheme = theme,
|
|
193
|
-
initialMode
|
|
194
|
-
}) => {
|
|
195
|
-
const [mode, setMode] = useState(initialMode);
|
|
196
|
-
const activeTheme = React2.useMemo(() => {
|
|
197
|
-
if (!mode || !customTheme.modes || !customTheme.modes[mode]) {
|
|
198
|
-
return customTheme;
|
|
199
|
-
}
|
|
200
|
-
return {
|
|
201
|
-
...customTheme,
|
|
202
|
-
colors: getMode(customTheme, mode)
|
|
203
|
-
};
|
|
204
|
-
}, [customTheme, mode]);
|
|
205
|
-
useEffect(() => {
|
|
206
|
-
if (!initialMode) {
|
|
207
|
-
const savedMode = localStorage.getItem("principlemd-theme-mode");
|
|
208
|
-
if (savedMode) {
|
|
209
|
-
setMode(savedMode);
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
}, [initialMode]);
|
|
213
|
-
useEffect(() => {
|
|
214
|
-
if (mode) {
|
|
215
|
-
localStorage.setItem("principlemd-theme-mode", mode);
|
|
216
|
-
} else {
|
|
217
|
-
localStorage.removeItem("principlemd-theme-mode");
|
|
218
|
-
}
|
|
219
|
-
}, [mode]);
|
|
220
|
-
const value = {
|
|
221
|
-
theme: activeTheme,
|
|
222
|
-
mode,
|
|
223
|
-
setMode
|
|
224
|
-
};
|
|
225
|
-
return /* @__PURE__ */ React2.createElement(ThemeContextSingleton.Provider, {
|
|
226
|
-
value
|
|
227
|
-
}, children);
|
|
228
|
-
};
|
|
229
|
-
var theme = terminalTheme;
|
|
230
38
|
/**
|
|
231
39
|
* @license lucide-react v0.552.0 - ISC
|
|
232
40
|
*
|
|
@@ -673,7 +481,7 @@ const RepositoryAvatar = ({
|
|
|
673
481
|
size = 32,
|
|
674
482
|
fallbackIcon
|
|
675
483
|
}) => {
|
|
676
|
-
const { theme
|
|
484
|
+
const { theme } = useTheme();
|
|
677
485
|
const borderRadius = `${Math.min(8, size / 4)}px`;
|
|
678
486
|
const avatarUrl = customAvatarUrl || (owner ? `https://github.com/${owner}.png` : null);
|
|
679
487
|
const getContent = () => {
|
|
@@ -706,7 +514,7 @@ const RepositoryAvatar = ({
|
|
|
706
514
|
width: `${size}px`,
|
|
707
515
|
height: `${size}px`,
|
|
708
516
|
borderRadius,
|
|
709
|
-
backgroundColor:
|
|
517
|
+
backgroundColor: theme.colors.backgroundTertiary,
|
|
710
518
|
display: "flex",
|
|
711
519
|
alignItems: "center",
|
|
712
520
|
justifyContent: "center",
|
|
@@ -757,11 +565,12 @@ const LocalProjectCard = ({
|
|
|
757
565
|
isInWorkspaceDirectory
|
|
758
566
|
}) => {
|
|
759
567
|
var _a, _b, _c, _d;
|
|
760
|
-
const { theme
|
|
568
|
+
const { theme } = useTheme();
|
|
569
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
761
570
|
const [copiedPath, setCopiedPath] = useState(false);
|
|
762
571
|
const [isMoving, setIsMoving] = useState(false);
|
|
763
572
|
const [isRemoving, setIsRemoving] = useState(false);
|
|
764
|
-
const highlightColor =
|
|
573
|
+
const highlightColor = theme.colors.primary;
|
|
765
574
|
const avatarUrl = ((_a = entry.github) == null ? void 0 : _a.owner) ? `https://github.com/${entry.github.owner}.png` : null;
|
|
766
575
|
const handleCardClick = () => {
|
|
767
576
|
onSelect == null ? void 0 : onSelect(entry);
|
|
@@ -809,77 +618,33 @@ const LocalProjectCard = ({
|
|
|
809
618
|
console.error("Failed to copy path:", err);
|
|
810
619
|
}
|
|
811
620
|
};
|
|
621
|
+
const actionButtonStyle = {
|
|
622
|
+
display: "flex",
|
|
623
|
+
alignItems: "center",
|
|
624
|
+
justifyContent: "center",
|
|
625
|
+
width: "24px",
|
|
626
|
+
height: "24px",
|
|
627
|
+
padding: 0,
|
|
628
|
+
border: "none",
|
|
629
|
+
borderRadius: "4px",
|
|
630
|
+
backgroundColor: "transparent",
|
|
631
|
+
color: theme.colors.textSecondary,
|
|
632
|
+
cursor: "pointer",
|
|
633
|
+
opacity: isHovered ? 1 : 0,
|
|
634
|
+
pointerEvents: isHovered ? "auto" : "none",
|
|
635
|
+
transition: "all 0.15s ease"
|
|
636
|
+
};
|
|
812
637
|
const renderActionButtons = (isCompact = false) => {
|
|
813
638
|
const buttonFlex = isCompact ? 1 : void 0;
|
|
814
|
-
if (
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
{
|
|
818
|
-
type: "button",
|
|
819
|
-
onClick: handleAddToWorkspaceClick,
|
|
820
|
-
disabled: isLoading,
|
|
821
|
-
title: "Add to workspace",
|
|
822
|
-
style: {
|
|
823
|
-
flex: buttonFlex,
|
|
824
|
-
display: "inline-flex",
|
|
825
|
-
alignItems: "center",
|
|
826
|
-
justifyContent: "center",
|
|
827
|
-
padding: "6px 10px",
|
|
828
|
-
gap: "4px",
|
|
829
|
-
borderRadius: "4px",
|
|
830
|
-
border: `1px solid ${theme2.colors.primary || "#3b82f6"}`,
|
|
831
|
-
backgroundColor: `${theme2.colors.primary || "#3b82f6"}15`,
|
|
832
|
-
color: theme2.colors.primary || "#3b82f6",
|
|
833
|
-
fontSize: `${theme2.fontSizes[0]}px`,
|
|
834
|
-
fontWeight: theme2.fontWeights.medium,
|
|
835
|
-
cursor: isLoading ? "wait" : "pointer",
|
|
836
|
-
opacity: isLoading ? 0.6 : 1,
|
|
837
|
-
transition: "all 0.15s ease"
|
|
838
|
-
},
|
|
839
|
-
children: [
|
|
840
|
-
isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { size: 12, className: "animate-spin" }) : /* @__PURE__ */ jsx(Plus, { size: 12 }),
|
|
841
|
-
isLoading ? "Adding..." : "Add"
|
|
842
|
-
]
|
|
843
|
-
}
|
|
844
|
-
);
|
|
845
|
-
}
|
|
846
|
-
const copyPathButton = /* @__PURE__ */ jsxs(
|
|
847
|
-
"button",
|
|
848
|
-
{
|
|
849
|
-
type: "button",
|
|
850
|
-
onClick: handleCopyPath,
|
|
851
|
-
title: copiedPath ? "Copied!" : `Copy path: ${entry.path}`,
|
|
852
|
-
style: {
|
|
853
|
-
flex: buttonFlex,
|
|
854
|
-
display: "inline-flex",
|
|
855
|
-
alignItems: "center",
|
|
856
|
-
justifyContent: "center",
|
|
857
|
-
padding: "6px 10px",
|
|
858
|
-
gap: "4px",
|
|
859
|
-
borderRadius: "4px",
|
|
860
|
-
border: `1px solid ${copiedPath ? theme2.colors.success || "#10b981" : theme2.colors.border}`,
|
|
861
|
-
backgroundColor: copiedPath ? `${theme2.colors.success || "#10b981"}15` : theme2.colors.backgroundTertiary,
|
|
862
|
-
color: copiedPath ? theme2.colors.success || "#10b981" : theme2.colors.textSecondary,
|
|
863
|
-
fontSize: `${theme2.fontSizes[0]}px`,
|
|
864
|
-
fontWeight: theme2.fontWeights.medium,
|
|
865
|
-
cursor: "pointer",
|
|
866
|
-
transition: "all 0.15s ease"
|
|
867
|
-
},
|
|
868
|
-
children: [
|
|
869
|
-
copiedPath ? /* @__PURE__ */ jsx(Check, { size: 12 }) : /* @__PURE__ */ jsx(Copy, { size: 12 }),
|
|
870
|
-
copiedPath ? "Copied" : "Path"
|
|
871
|
-
]
|
|
872
|
-
}
|
|
873
|
-
);
|
|
874
|
-
if (actionMode === "workspace") {
|
|
875
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
876
|
-
isInWorkspaceDirectory === false && onMoveToWorkspace && /* @__PURE__ */ jsxs(
|
|
639
|
+
if (isCompact) {
|
|
640
|
+
if (actionMode === "add-to-workspace") {
|
|
641
|
+
return /* @__PURE__ */ jsxs(
|
|
877
642
|
"button",
|
|
878
643
|
{
|
|
879
644
|
type: "button",
|
|
880
|
-
onClick:
|
|
881
|
-
disabled:
|
|
882
|
-
title: "
|
|
645
|
+
onClick: handleAddToWorkspaceClick,
|
|
646
|
+
disabled: isLoading,
|
|
647
|
+
title: "Add to workspace",
|
|
883
648
|
style: {
|
|
884
649
|
flex: buttonFlex,
|
|
885
650
|
display: "inline-flex",
|
|
@@ -888,87 +653,263 @@ const LocalProjectCard = ({
|
|
|
888
653
|
padding: "6px 10px",
|
|
889
654
|
gap: "4px",
|
|
890
655
|
borderRadius: "4px",
|
|
891
|
-
border: `1px solid ${
|
|
892
|
-
backgroundColor: `${
|
|
893
|
-
color:
|
|
894
|
-
fontSize: `${
|
|
895
|
-
fontWeight:
|
|
896
|
-
cursor:
|
|
897
|
-
opacity:
|
|
656
|
+
border: `1px solid ${theme.colors.primary || "#3b82f6"}`,
|
|
657
|
+
backgroundColor: `${theme.colors.primary || "#3b82f6"}15`,
|
|
658
|
+
color: theme.colors.primary || "#3b82f6",
|
|
659
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
660
|
+
fontWeight: theme.fontWeights.medium,
|
|
661
|
+
cursor: isLoading ? "wait" : "pointer",
|
|
662
|
+
opacity: isLoading ? 0.6 : 1,
|
|
898
663
|
transition: "all 0.15s ease"
|
|
899
664
|
},
|
|
900
665
|
children: [
|
|
901
|
-
|
|
902
|
-
|
|
666
|
+
isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { size: 12, className: "animate-spin" }) : /* @__PURE__ */ jsx(Plus, { size: 12 }),
|
|
667
|
+
isLoading ? "Adding..." : "Add"
|
|
903
668
|
]
|
|
904
669
|
}
|
|
905
|
-
)
|
|
906
|
-
|
|
670
|
+
);
|
|
671
|
+
}
|
|
672
|
+
if (actionMode === "workspace") {
|
|
673
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
674
|
+
isInWorkspaceDirectory === false && onMoveToWorkspace && /* @__PURE__ */ jsxs(
|
|
675
|
+
"button",
|
|
676
|
+
{
|
|
677
|
+
type: "button",
|
|
678
|
+
onClick: handleMoveToWorkspaceClick,
|
|
679
|
+
disabled: isMoving,
|
|
680
|
+
title: "Move to workspace directory",
|
|
681
|
+
style: {
|
|
682
|
+
flex: 1,
|
|
683
|
+
display: "inline-flex",
|
|
684
|
+
alignItems: "center",
|
|
685
|
+
justifyContent: "center",
|
|
686
|
+
padding: "6px 10px",
|
|
687
|
+
gap: "4px",
|
|
688
|
+
borderRadius: "4px",
|
|
689
|
+
border: `1px solid ${theme.colors.primary || "#3b82f6"}`,
|
|
690
|
+
backgroundColor: `${theme.colors.primary || "#3b82f6"}15`,
|
|
691
|
+
color: theme.colors.primary || "#3b82f6",
|
|
692
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
693
|
+
fontWeight: theme.fontWeights.medium,
|
|
694
|
+
cursor: isMoving ? "wait" : "pointer",
|
|
695
|
+
opacity: isMoving ? 0.6 : 1,
|
|
696
|
+
transition: "all 0.15s ease"
|
|
697
|
+
},
|
|
698
|
+
children: [
|
|
699
|
+
isMoving ? /* @__PURE__ */ jsx(LoaderCircle, { size: 12, className: "animate-spin" }) : /* @__PURE__ */ jsx(MoveUp, { size: 12 }),
|
|
700
|
+
isMoving ? "Moving..." : "Move"
|
|
701
|
+
]
|
|
702
|
+
}
|
|
703
|
+
),
|
|
704
|
+
/* @__PURE__ */ jsxs(
|
|
705
|
+
"button",
|
|
706
|
+
{
|
|
707
|
+
type: "button",
|
|
708
|
+
onClick: handleOpenClick,
|
|
709
|
+
title: "Open repository",
|
|
710
|
+
style: {
|
|
711
|
+
flex: 1,
|
|
712
|
+
display: "inline-flex",
|
|
713
|
+
alignItems: "center",
|
|
714
|
+
justifyContent: "center",
|
|
715
|
+
padding: "6px 10px",
|
|
716
|
+
gap: "4px",
|
|
717
|
+
borderRadius: "4px",
|
|
718
|
+
border: `1px solid ${theme.colors.success || "#10b981"}`,
|
|
719
|
+
backgroundColor: `${theme.colors.success || "#10b981"}15`,
|
|
720
|
+
color: theme.colors.success || "#10b981",
|
|
721
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
722
|
+
fontWeight: theme.fontWeights.medium,
|
|
723
|
+
cursor: "pointer",
|
|
724
|
+
transition: "all 0.15s ease"
|
|
725
|
+
},
|
|
726
|
+
children: [
|
|
727
|
+
/* @__PURE__ */ jsx(FolderOpen, { size: 12 }),
|
|
728
|
+
"Open"
|
|
729
|
+
]
|
|
730
|
+
}
|
|
731
|
+
),
|
|
732
|
+
onRemoveFromWorkspace && /* @__PURE__ */ jsxs(
|
|
733
|
+
"button",
|
|
734
|
+
{
|
|
735
|
+
type: "button",
|
|
736
|
+
onClick: handleRemoveFromWorkspaceClick,
|
|
737
|
+
disabled: isRemoving,
|
|
738
|
+
title: "Remove from workspace",
|
|
739
|
+
style: {
|
|
740
|
+
flex: 1,
|
|
741
|
+
display: "inline-flex",
|
|
742
|
+
alignItems: "center",
|
|
743
|
+
justifyContent: "center",
|
|
744
|
+
padding: "6px 10px",
|
|
745
|
+
gap: "4px",
|
|
746
|
+
borderRadius: "4px",
|
|
747
|
+
border: `1px solid ${theme.colors.error || "#ef4444"}`,
|
|
748
|
+
backgroundColor: `${theme.colors.error || "#ef4444"}15`,
|
|
749
|
+
color: theme.colors.error || "#ef4444",
|
|
750
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
751
|
+
fontWeight: theme.fontWeights.medium,
|
|
752
|
+
cursor: isRemoving ? "wait" : "pointer",
|
|
753
|
+
opacity: isRemoving ? 0.6 : 1,
|
|
754
|
+
transition: "all 0.15s ease"
|
|
755
|
+
},
|
|
756
|
+
children: [
|
|
757
|
+
isRemoving ? /* @__PURE__ */ jsx(LoaderCircle, { size: 12, className: "animate-spin" }) : /* @__PURE__ */ jsx(X, { size: 12 }),
|
|
758
|
+
isRemoving ? "Removing..." : "Remove"
|
|
759
|
+
]
|
|
760
|
+
}
|
|
761
|
+
)
|
|
762
|
+
] });
|
|
763
|
+
}
|
|
764
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
907
765
|
/* @__PURE__ */ jsxs(
|
|
908
766
|
"button",
|
|
909
767
|
{
|
|
910
768
|
type: "button",
|
|
911
769
|
onClick: handleOpenClick,
|
|
912
|
-
title: "Open
|
|
770
|
+
title: "Open locally",
|
|
771
|
+
disabled: windowState === "opening",
|
|
913
772
|
style: {
|
|
914
|
-
flex:
|
|
773
|
+
flex: 1,
|
|
915
774
|
display: "inline-flex",
|
|
916
775
|
alignItems: "center",
|
|
917
776
|
justifyContent: "center",
|
|
918
777
|
padding: "6px 10px",
|
|
919
778
|
gap: "4px",
|
|
920
779
|
borderRadius: "4px",
|
|
921
|
-
border: `1px solid ${
|
|
922
|
-
backgroundColor: `${
|
|
923
|
-
color:
|
|
924
|
-
fontSize: `${
|
|
925
|
-
fontWeight:
|
|
926
|
-
cursor: "pointer",
|
|
780
|
+
border: `1px solid ${theme.colors.success || "#10b981"}`,
|
|
781
|
+
backgroundColor: `${theme.colors.success || "#10b981"}15`,
|
|
782
|
+
color: theme.colors.success || "#10b981",
|
|
783
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
784
|
+
fontWeight: theme.fontWeights.medium,
|
|
785
|
+
cursor: windowState === "opening" ? "wait" : "pointer",
|
|
786
|
+
opacity: windowState === "opening" ? 0.6 : 1,
|
|
927
787
|
transition: "all 0.15s ease"
|
|
928
788
|
},
|
|
929
789
|
children: [
|
|
930
|
-
/* @__PURE__ */ jsx(FolderOpen, { size: 12 }),
|
|
931
|
-
"Open"
|
|
790
|
+
windowState === "opening" ? /* @__PURE__ */ jsx(LoaderCircle, { size: 12, className: "animate-spin" }) : /* @__PURE__ */ jsx(FolderOpen, { size: 12 }),
|
|
791
|
+
windowState === "opening" ? "Opening..." : "Open"
|
|
932
792
|
]
|
|
933
793
|
}
|
|
934
794
|
),
|
|
935
|
-
|
|
795
|
+
actionMode === "default" && onRemove && /* @__PURE__ */ jsxs(
|
|
936
796
|
"button",
|
|
937
797
|
{
|
|
938
798
|
type: "button",
|
|
939
|
-
onClick:
|
|
940
|
-
disabled:
|
|
941
|
-
title: "Remove from
|
|
799
|
+
onClick: handleRemoveClick,
|
|
800
|
+
disabled: isLoading,
|
|
801
|
+
title: "Remove from local projects",
|
|
942
802
|
style: {
|
|
943
|
-
flex:
|
|
803
|
+
flex: 1,
|
|
944
804
|
display: "inline-flex",
|
|
945
805
|
alignItems: "center",
|
|
946
806
|
justifyContent: "center",
|
|
947
|
-
|
|
948
|
-
height: "28px",
|
|
949
|
-
padding: isCompact ? "6px 10px" : 0,
|
|
807
|
+
padding: "6px 10px",
|
|
950
808
|
gap: "4px",
|
|
951
809
|
borderRadius: "4px",
|
|
952
|
-
border:
|
|
953
|
-
backgroundColor:
|
|
954
|
-
color:
|
|
955
|
-
fontSize: `${
|
|
956
|
-
fontWeight:
|
|
957
|
-
cursor:
|
|
958
|
-
opacity:
|
|
810
|
+
border: `1px solid ${theme.colors.error || "#ef4444"}`,
|
|
811
|
+
backgroundColor: `${theme.colors.error || "#ef4444"}15`,
|
|
812
|
+
color: theme.colors.error || "#ef4444",
|
|
813
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
814
|
+
fontWeight: theme.fontWeights.medium,
|
|
815
|
+
cursor: isLoading ? "wait" : "pointer",
|
|
816
|
+
opacity: isLoading ? 0.6 : 1,
|
|
959
817
|
transition: "all 0.15s ease"
|
|
960
818
|
},
|
|
961
819
|
children: [
|
|
962
|
-
|
|
963
|
-
|
|
820
|
+
isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { size: 12, className: "animate-spin" }) : /* @__PURE__ */ jsx(X, { size: 12 }),
|
|
821
|
+
isLoading ? "Removing..." : "Remove"
|
|
964
822
|
]
|
|
965
823
|
}
|
|
966
824
|
)
|
|
967
825
|
] });
|
|
968
826
|
}
|
|
827
|
+
if (actionMode === "add-to-workspace") {
|
|
828
|
+
return /* @__PURE__ */ jsx(
|
|
829
|
+
"button",
|
|
830
|
+
{
|
|
831
|
+
type: "button",
|
|
832
|
+
onClick: handleAddToWorkspaceClick,
|
|
833
|
+
disabled: isLoading,
|
|
834
|
+
title: "Add to workspace",
|
|
835
|
+
style: {
|
|
836
|
+
...actionButtonStyle,
|
|
837
|
+
color: theme.colors.primary || "#3b82f6"
|
|
838
|
+
},
|
|
839
|
+
children: isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(Plus, { size: 16 })
|
|
840
|
+
}
|
|
841
|
+
);
|
|
842
|
+
}
|
|
843
|
+
if (actionMode === "workspace") {
|
|
844
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
845
|
+
isInWorkspaceDirectory === false && onMoveToWorkspace && /* @__PURE__ */ jsx(
|
|
846
|
+
"button",
|
|
847
|
+
{
|
|
848
|
+
type: "button",
|
|
849
|
+
onClick: handleMoveToWorkspaceClick,
|
|
850
|
+
disabled: isMoving,
|
|
851
|
+
title: "Move to workspace directory",
|
|
852
|
+
style: {
|
|
853
|
+
...actionButtonStyle,
|
|
854
|
+
color: theme.colors.primary || "#3b82f6"
|
|
855
|
+
},
|
|
856
|
+
children: isMoving ? /* @__PURE__ */ jsx(LoaderCircle, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(MoveUp, { size: 16 })
|
|
857
|
+
}
|
|
858
|
+
),
|
|
859
|
+
/* @__PURE__ */ jsx(
|
|
860
|
+
"button",
|
|
861
|
+
{
|
|
862
|
+
type: "button",
|
|
863
|
+
onClick: handleCopyPath,
|
|
864
|
+
title: copiedPath ? "Copied!" : `Copy path: ${entry.path}`,
|
|
865
|
+
style: {
|
|
866
|
+
...actionButtonStyle,
|
|
867
|
+
color: copiedPath ? theme.colors.success || "#10b981" : theme.colors.textSecondary
|
|
868
|
+
},
|
|
869
|
+
children: copiedPath ? /* @__PURE__ */ jsx(Check, { size: 16 }) : /* @__PURE__ */ jsx(Copy, { size: 16 })
|
|
870
|
+
}
|
|
871
|
+
),
|
|
872
|
+
/* @__PURE__ */ jsx(
|
|
873
|
+
"button",
|
|
874
|
+
{
|
|
875
|
+
type: "button",
|
|
876
|
+
onClick: handleOpenClick,
|
|
877
|
+
title: "Open repository",
|
|
878
|
+
style: {
|
|
879
|
+
...actionButtonStyle,
|
|
880
|
+
color: theme.colors.success || "#10b981"
|
|
881
|
+
},
|
|
882
|
+
children: /* @__PURE__ */ jsx(FolderOpen, { size: 16 })
|
|
883
|
+
}
|
|
884
|
+
),
|
|
885
|
+
onRemoveFromWorkspace && /* @__PURE__ */ jsx(
|
|
886
|
+
"button",
|
|
887
|
+
{
|
|
888
|
+
type: "button",
|
|
889
|
+
onClick: handleRemoveFromWorkspaceClick,
|
|
890
|
+
disabled: isRemoving,
|
|
891
|
+
title: "Remove from workspace",
|
|
892
|
+
style: actionButtonStyle,
|
|
893
|
+
children: isRemoving ? /* @__PURE__ */ jsx(LoaderCircle, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(X, { size: 16 })
|
|
894
|
+
}
|
|
895
|
+
)
|
|
896
|
+
] });
|
|
897
|
+
}
|
|
969
898
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
970
|
-
|
|
971
|
-
|
|
899
|
+
/* @__PURE__ */ jsx(
|
|
900
|
+
"button",
|
|
901
|
+
{
|
|
902
|
+
type: "button",
|
|
903
|
+
onClick: handleCopyPath,
|
|
904
|
+
title: copiedPath ? "Copied!" : `Copy path: ${entry.path}`,
|
|
905
|
+
style: {
|
|
906
|
+
...actionButtonStyle,
|
|
907
|
+
color: copiedPath ? theme.colors.success || "#10b981" : theme.colors.textSecondary
|
|
908
|
+
},
|
|
909
|
+
children: copiedPath ? /* @__PURE__ */ jsx(Check, { size: 16 }) : /* @__PURE__ */ jsx(Copy, { size: 16 })
|
|
910
|
+
}
|
|
911
|
+
),
|
|
912
|
+
/* @__PURE__ */ jsx(
|
|
972
913
|
"button",
|
|
973
914
|
{
|
|
974
915
|
type: "button",
|
|
@@ -976,58 +917,21 @@ const LocalProjectCard = ({
|
|
|
976
917
|
title: windowState === "ready" ? "Focus window" : windowState === "opening" ? "Window is opening..." : "Open locally",
|
|
977
918
|
disabled: windowState === "opening",
|
|
978
919
|
style: {
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
alignItems: "center",
|
|
982
|
-
justifyContent: "center",
|
|
983
|
-
padding: "6px 10px",
|
|
984
|
-
gap: "4px",
|
|
985
|
-
borderRadius: "4px",
|
|
986
|
-
border: `1px solid ${theme2.colors.success || "#10b981"}`,
|
|
987
|
-
backgroundColor: `${theme2.colors.success || "#10b981"}15`,
|
|
988
|
-
color: theme2.colors.success || "#10b981",
|
|
989
|
-
fontSize: `${theme2.fontSizes[0]}px`,
|
|
990
|
-
fontWeight: theme2.fontWeights.medium,
|
|
991
|
-
cursor: windowState === "opening" ? "wait" : "pointer",
|
|
992
|
-
opacity: windowState === "opening" ? 0.6 : 1,
|
|
993
|
-
transition: "all 0.15s ease"
|
|
920
|
+
...actionButtonStyle,
|
|
921
|
+
color: theme.colors.success || "#10b981"
|
|
994
922
|
},
|
|
995
|
-
children:
|
|
996
|
-
windowState === "ready" ? /* @__PURE__ */ jsx(Focus, { size: 12 }) : windowState === "opening" ? /* @__PURE__ */ jsx(LoaderCircle, { size: 12, className: "animate-spin" }) : /* @__PURE__ */ jsx(FolderOpen, { size: 12 }),
|
|
997
|
-
windowState === "ready" ? "Focus" : windowState === "opening" ? "Opening..." : "Open"
|
|
998
|
-
]
|
|
923
|
+
children: windowState === "ready" ? /* @__PURE__ */ jsx(Focus, { size: 16 }) : windowState === "opening" ? /* @__PURE__ */ jsx(LoaderCircle, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(FolderOpen, { size: 16 })
|
|
999
924
|
}
|
|
1000
925
|
),
|
|
1001
|
-
actionMode === "default" && onRemove && /* @__PURE__ */
|
|
926
|
+
actionMode === "default" && onRemove && /* @__PURE__ */ jsx(
|
|
1002
927
|
"button",
|
|
1003
928
|
{
|
|
1004
929
|
type: "button",
|
|
1005
930
|
onClick: handleRemoveClick,
|
|
1006
931
|
disabled: isLoading,
|
|
1007
932
|
title: "Remove from local projects",
|
|
1008
|
-
style:
|
|
1009
|
-
|
|
1010
|
-
display: "inline-flex",
|
|
1011
|
-
alignItems: "center",
|
|
1012
|
-
justifyContent: "center",
|
|
1013
|
-
minWidth: isCompact ? void 0 : "28px",
|
|
1014
|
-
height: "28px",
|
|
1015
|
-
padding: isCompact ? "6px 10px" : 0,
|
|
1016
|
-
gap: "4px",
|
|
1017
|
-
borderRadius: "4px",
|
|
1018
|
-
border: isCompact ? `1px solid ${theme2.colors.error || "#ef4444"}` : "none",
|
|
1019
|
-
backgroundColor: isCompact ? `${theme2.colors.error || "#ef4444"}15` : "transparent",
|
|
1020
|
-
color: isCompact ? theme2.colors.error || "#ef4444" : theme2.colors.textSecondary,
|
|
1021
|
-
fontSize: `${theme2.fontSizes[0]}px`,
|
|
1022
|
-
fontWeight: theme2.fontWeights.medium,
|
|
1023
|
-
cursor: isLoading ? "wait" : "pointer",
|
|
1024
|
-
opacity: isLoading ? 0.6 : 1,
|
|
1025
|
-
transition: "all 0.15s ease"
|
|
1026
|
-
},
|
|
1027
|
-
children: [
|
|
1028
|
-
isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { size: 14, className: "animate-spin" }) : /* @__PURE__ */ jsx(X, { size: 14 }),
|
|
1029
|
-
isCompact && (isLoading ? "Removing..." : "Remove")
|
|
1030
|
-
]
|
|
933
|
+
style: actionButtonStyle,
|
|
934
|
+
children: isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(X, { size: 16 })
|
|
1031
935
|
}
|
|
1032
936
|
)
|
|
1033
937
|
] });
|
|
@@ -1043,10 +947,12 @@ const LocalProjectCard = ({
|
|
|
1043
947
|
border: isSelected ? `1px solid ${highlightColor}40` : "1px solid transparent",
|
|
1044
948
|
cursor: "pointer",
|
|
1045
949
|
transition: "background-color 0.15s",
|
|
1046
|
-
fontFamily:
|
|
950
|
+
fontFamily: theme.fonts.body
|
|
1047
951
|
},
|
|
1048
952
|
onClick: handleCardClick,
|
|
1049
953
|
onDoubleClick: handleDoubleClick,
|
|
954
|
+
onMouseEnter: () => setIsHovered(true),
|
|
955
|
+
onMouseLeave: () => setIsHovered(false),
|
|
1050
956
|
children: [
|
|
1051
957
|
/* @__PURE__ */ jsxs("div", { className: "local-project-card__content", children: [
|
|
1052
958
|
/* @__PURE__ */ jsx(
|
|
@@ -1058,9 +964,9 @@ const LocalProjectCard = ({
|
|
|
1058
964
|
"div",
|
|
1059
965
|
{
|
|
1060
966
|
style: {
|
|
1061
|
-
color:
|
|
1062
|
-
fontSize: `${
|
|
1063
|
-
fontWeight:
|
|
967
|
+
color: theme.colors.textSecondary,
|
|
968
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
969
|
+
fontWeight: theme.fontWeights.semibold
|
|
1064
970
|
},
|
|
1065
971
|
children: ((_b = entry.name[0]) == null ? void 0 : _b.toUpperCase()) || "?"
|
|
1066
972
|
}
|
|
@@ -1072,14 +978,14 @@ const LocalProjectCard = ({
|
|
|
1072
978
|
"span",
|
|
1073
979
|
{
|
|
1074
980
|
style: {
|
|
1075
|
-
fontSize: `${
|
|
1076
|
-
fontWeight:
|
|
1077
|
-
color:
|
|
981
|
+
fontSize: `${theme.fontSizes[2]}px`,
|
|
982
|
+
fontWeight: theme.fontWeights.medium,
|
|
983
|
+
color: theme.colors.text,
|
|
1078
984
|
overflow: "hidden",
|
|
1079
985
|
textOverflow: "ellipsis",
|
|
1080
986
|
whiteSpace: "nowrap",
|
|
1081
987
|
textDecoration: "underline",
|
|
1082
|
-
textDecorationColor: ((_c = entry.github) == null ? void 0 : _c.primaryLanguage) ? getLanguageColor(entry.github.primaryLanguage) :
|
|
988
|
+
textDecorationColor: ((_c = entry.github) == null ? void 0 : _c.primaryLanguage) ? getLanguageColor(entry.github.primaryLanguage) : theme.colors.textSecondary,
|
|
1083
989
|
textUnderlineOffset: "3px"
|
|
1084
990
|
},
|
|
1085
991
|
children: entry.name
|
|
@@ -1092,8 +998,8 @@ const LocalProjectCard = ({
|
|
|
1092
998
|
style: {
|
|
1093
999
|
alignItems: "center",
|
|
1094
1000
|
gap: "12px",
|
|
1095
|
-
fontSize: `${
|
|
1096
|
-
color:
|
|
1001
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
1002
|
+
color: theme.colors.textSecondary
|
|
1097
1003
|
},
|
|
1098
1004
|
children: /* @__PURE__ */ jsx(
|
|
1099
1005
|
"span",
|
|
@@ -1129,7 +1035,7 @@ const LocalProjectsPanelContent = ({
|
|
|
1129
1035
|
events
|
|
1130
1036
|
}) => {
|
|
1131
1037
|
var _a;
|
|
1132
|
-
const { theme
|
|
1038
|
+
const { theme } = useTheme();
|
|
1133
1039
|
const [filter, setFilter] = useState("");
|
|
1134
1040
|
const [isAdding, setIsAdding] = useState(false);
|
|
1135
1041
|
const [selectedEntry, setSelectedEntry] = useState(null);
|
|
@@ -1265,7 +1171,7 @@ const LocalProjectsPanelContent = ({
|
|
|
1265
1171
|
display: "flex",
|
|
1266
1172
|
flexDirection: "column",
|
|
1267
1173
|
height: "100%",
|
|
1268
|
-
backgroundColor:
|
|
1174
|
+
backgroundColor: theme.colors.backgroundSecondary
|
|
1269
1175
|
};
|
|
1270
1176
|
const contentContainerStyle = {
|
|
1271
1177
|
...baseContainerStyle,
|
|
@@ -1299,10 +1205,10 @@ const LocalProjectsPanelContent = ({
|
|
|
1299
1205
|
{
|
|
1300
1206
|
style: {
|
|
1301
1207
|
margin: 0,
|
|
1302
|
-
color:
|
|
1303
|
-
fontSize: `${
|
|
1304
|
-
fontWeight:
|
|
1305
|
-
fontFamily:
|
|
1208
|
+
color: theme.colors.text,
|
|
1209
|
+
fontSize: `${theme.fontSizes[3]}px`,
|
|
1210
|
+
fontWeight: theme.fontWeights.semibold,
|
|
1211
|
+
fontFamily: theme.fonts.body
|
|
1306
1212
|
},
|
|
1307
1213
|
children: "Loading local projects..."
|
|
1308
1214
|
}
|
|
@@ -1324,7 +1230,7 @@ const LocalProjectsPanelContent = ({
|
|
|
1324
1230
|
top: "50%",
|
|
1325
1231
|
left: "12px",
|
|
1326
1232
|
transform: "translateY(-50%)",
|
|
1327
|
-
color:
|
|
1233
|
+
color: theme.colors.textSecondary,
|
|
1328
1234
|
pointerEvents: "none",
|
|
1329
1235
|
zIndex: 1
|
|
1330
1236
|
}
|
|
@@ -1342,11 +1248,11 @@ const LocalProjectsPanelContent = ({
|
|
|
1342
1248
|
boxSizing: "border-box",
|
|
1343
1249
|
padding: "8px 12px 8px 36px",
|
|
1344
1250
|
borderRadius: "6px",
|
|
1345
|
-
border: `1px solid ${
|
|
1346
|
-
backgroundColor:
|
|
1347
|
-
color:
|
|
1348
|
-
fontSize: `${
|
|
1349
|
-
fontFamily:
|
|
1251
|
+
border: `1px solid ${theme.colors.border}`,
|
|
1252
|
+
backgroundColor: theme.colors.background,
|
|
1253
|
+
color: theme.colors.text,
|
|
1254
|
+
fontSize: `${theme.fontSizes[1]}px`,
|
|
1255
|
+
fontFamily: theme.fonts.body,
|
|
1350
1256
|
outline: "none"
|
|
1351
1257
|
}
|
|
1352
1258
|
}
|
|
@@ -1360,9 +1266,9 @@ const LocalProjectsPanelContent = ({
|
|
|
1360
1266
|
style: {
|
|
1361
1267
|
padding: "8px",
|
|
1362
1268
|
borderRadius: "6px",
|
|
1363
|
-
border: `1px solid ${
|
|
1364
|
-
backgroundColor: sortByOrg ? `${
|
|
1365
|
-
color: sortByOrg ?
|
|
1269
|
+
border: `1px solid ${theme.colors.border}`,
|
|
1270
|
+
backgroundColor: sortByOrg ? `${theme.colors.primary}20` : theme.colors.background,
|
|
1271
|
+
color: sortByOrg ? theme.colors.primary : theme.colors.textSecondary,
|
|
1366
1272
|
cursor: "pointer",
|
|
1367
1273
|
display: "flex",
|
|
1368
1274
|
alignItems: "center",
|
|
@@ -1382,9 +1288,9 @@ const LocalProjectsPanelContent = ({
|
|
|
1382
1288
|
style: {
|
|
1383
1289
|
padding: "8px",
|
|
1384
1290
|
borderRadius: "6px",
|
|
1385
|
-
border: `1px solid ${
|
|
1386
|
-
backgroundColor:
|
|
1387
|
-
color:
|
|
1291
|
+
border: `1px solid ${theme.colors.border}`,
|
|
1292
|
+
backgroundColor: theme.colors.primary,
|
|
1293
|
+
color: theme.colors.background,
|
|
1388
1294
|
cursor: isAdding ? "default" : "pointer",
|
|
1389
1295
|
display: "flex",
|
|
1390
1296
|
alignItems: "center",
|
|
@@ -1427,7 +1333,7 @@ const LocalProjectsPanelContent = ({
|
|
|
1427
1333
|
style: {
|
|
1428
1334
|
padding: "32px",
|
|
1429
1335
|
textAlign: "center",
|
|
1430
|
-
color:
|
|
1336
|
+
color: theme.colors.textSecondary
|
|
1431
1337
|
},
|
|
1432
1338
|
children: /* @__PURE__ */ jsx("p", { style: { margin: 0 }, children: normalizedFilter ? "No local projects match your filter." : "No local projects found." })
|
|
1433
1339
|
}
|
|
@@ -1438,18 +1344,18 @@ const LocalProjectsPanelContent = ({
|
|
|
1438
1344
|
] });
|
|
1439
1345
|
};
|
|
1440
1346
|
const LocalProjectsPanel = (props) => {
|
|
1441
|
-
return /* @__PURE__ */ jsx(
|
|
1347
|
+
return /* @__PURE__ */ jsx(LocalProjectsPanelContent, { ...props });
|
|
1442
1348
|
};
|
|
1443
1349
|
const LocalProjectsPanelPreview = () => {
|
|
1444
|
-
const { theme
|
|
1350
|
+
const { theme } = useTheme();
|
|
1445
1351
|
return /* @__PURE__ */ jsxs(
|
|
1446
1352
|
"div",
|
|
1447
1353
|
{
|
|
1448
1354
|
style: {
|
|
1449
1355
|
padding: "12px",
|
|
1450
|
-
fontSize: `${
|
|
1451
|
-
fontFamily:
|
|
1452
|
-
color:
|
|
1356
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
1357
|
+
fontFamily: theme.fonts.body,
|
|
1358
|
+
color: theme.colors.text,
|
|
1453
1359
|
display: "flex",
|
|
1454
1360
|
flexDirection: "column",
|
|
1455
1361
|
gap: "8px"
|
|
@@ -1462,7 +1368,7 @@ const LocalProjectsPanelPreview = () => {
|
|
|
1462
1368
|
display: "flex",
|
|
1463
1369
|
alignItems: "center",
|
|
1464
1370
|
gap: "6px",
|
|
1465
|
-
fontWeight:
|
|
1371
|
+
fontWeight: theme.fontWeights.semibold
|
|
1466
1372
|
},
|
|
1467
1373
|
children: [
|
|
1468
1374
|
/* @__PURE__ */ jsx(
|
|
@@ -1472,7 +1378,7 @@ const LocalProjectsPanelPreview = () => {
|
|
|
1472
1378
|
width: "16px",
|
|
1473
1379
|
height: "16px",
|
|
1474
1380
|
borderRadius: "2px",
|
|
1475
|
-
backgroundColor: `${
|
|
1381
|
+
backgroundColor: `${theme.colors.success || "#10b981"}40`
|
|
1476
1382
|
}
|
|
1477
1383
|
}
|
|
1478
1384
|
),
|
|
@@ -1484,9 +1390,9 @@ const LocalProjectsPanelPreview = () => {
|
|
|
1484
1390
|
"div",
|
|
1485
1391
|
{
|
|
1486
1392
|
style: {
|
|
1487
|
-
fontSize: `${
|
|
1488
|
-
fontFamily:
|
|
1489
|
-
color:
|
|
1393
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
1394
|
+
fontFamily: theme.fonts.body,
|
|
1395
|
+
color: theme.colors.textSecondary,
|
|
1490
1396
|
marginTop: "4px"
|
|
1491
1397
|
},
|
|
1492
1398
|
children: "Browse your cloned repositories sorted by recent activity"
|
|
@@ -1508,7 +1414,7 @@ const WorkspaceRepositoriesPanelContent = ({
|
|
|
1508
1414
|
actions,
|
|
1509
1415
|
events
|
|
1510
1416
|
}) => {
|
|
1511
|
-
const { theme
|
|
1417
|
+
const { theme } = useTheme();
|
|
1512
1418
|
const [repositoryLocations, setRepositoryLocations] = React2.useState(
|
|
1513
1419
|
/* @__PURE__ */ new Map()
|
|
1514
1420
|
);
|
|
@@ -1643,7 +1549,7 @@ const WorkspaceRepositoriesPanelContent = ({
|
|
|
1643
1549
|
display: "flex",
|
|
1644
1550
|
flexDirection: "column",
|
|
1645
1551
|
height: "100%",
|
|
1646
|
-
backgroundColor:
|
|
1552
|
+
backgroundColor: theme.colors.backgroundSecondary
|
|
1647
1553
|
};
|
|
1648
1554
|
const contentContainerStyle = {
|
|
1649
1555
|
...baseContainerStyle,
|
|
@@ -1678,7 +1584,7 @@ const WorkspaceRepositoriesPanelContent = ({
|
|
|
1678
1584
|
{
|
|
1679
1585
|
size: 48,
|
|
1680
1586
|
style: {
|
|
1681
|
-
color:
|
|
1587
|
+
color: theme.colors.textSecondary,
|
|
1682
1588
|
opacity: 0.5
|
|
1683
1589
|
}
|
|
1684
1590
|
}
|
|
@@ -1689,10 +1595,10 @@ const WorkspaceRepositoriesPanelContent = ({
|
|
|
1689
1595
|
{
|
|
1690
1596
|
style: {
|
|
1691
1597
|
margin: "0 0 8px 0",
|
|
1692
|
-
color:
|
|
1693
|
-
fontSize: `${
|
|
1694
|
-
fontWeight:
|
|
1695
|
-
fontFamily:
|
|
1598
|
+
color: theme.colors.text,
|
|
1599
|
+
fontSize: `${theme.fontSizes[3]}px`,
|
|
1600
|
+
fontWeight: theme.fontWeights.semibold,
|
|
1601
|
+
fontFamily: theme.fonts.body
|
|
1696
1602
|
},
|
|
1697
1603
|
children: "No Workspace Selected"
|
|
1698
1604
|
}
|
|
@@ -1702,9 +1608,9 @@ const WorkspaceRepositoriesPanelContent = ({
|
|
|
1702
1608
|
{
|
|
1703
1609
|
style: {
|
|
1704
1610
|
margin: 0,
|
|
1705
|
-
color:
|
|
1706
|
-
fontSize: `${
|
|
1707
|
-
fontFamily:
|
|
1611
|
+
color: theme.colors.textSecondary,
|
|
1612
|
+
fontSize: `${theme.fontSizes[1]}px`,
|
|
1613
|
+
fontFamily: theme.fonts.body
|
|
1708
1614
|
},
|
|
1709
1615
|
children: "Select a workspace to see its repositories."
|
|
1710
1616
|
}
|
|
@@ -1743,10 +1649,10 @@ const WorkspaceRepositoriesPanelContent = ({
|
|
|
1743
1649
|
{
|
|
1744
1650
|
style: {
|
|
1745
1651
|
margin: 0,
|
|
1746
|
-
color:
|
|
1747
|
-
fontSize: `${
|
|
1748
|
-
fontWeight:
|
|
1749
|
-
fontFamily:
|
|
1652
|
+
color: theme.colors.text,
|
|
1653
|
+
fontSize: `${theme.fontSizes[3]}px`,
|
|
1654
|
+
fontWeight: theme.fontWeights.semibold,
|
|
1655
|
+
fontFamily: theme.fonts.body
|
|
1750
1656
|
},
|
|
1751
1657
|
children: "Loading repositories..."
|
|
1752
1658
|
}
|
|
@@ -1774,10 +1680,10 @@ const WorkspaceRepositoriesPanelContent = ({
|
|
|
1774
1680
|
{
|
|
1775
1681
|
style: {
|
|
1776
1682
|
margin: 0,
|
|
1777
|
-
fontSize: `${
|
|
1778
|
-
fontWeight:
|
|
1779
|
-
color:
|
|
1780
|
-
fontFamily:
|
|
1683
|
+
fontSize: `${theme.fontSizes[2]}px`,
|
|
1684
|
+
fontWeight: theme.fontWeights.semibold,
|
|
1685
|
+
color: theme.colors.text,
|
|
1686
|
+
fontFamily: theme.fonts.body
|
|
1781
1687
|
},
|
|
1782
1688
|
children: workspace.name
|
|
1783
1689
|
}
|
|
@@ -1804,9 +1710,9 @@ const WorkspaceRepositoriesPanelContent = ({
|
|
|
1804
1710
|
gap: "6px",
|
|
1805
1711
|
padding: "4px 8px",
|
|
1806
1712
|
borderRadius: "4px",
|
|
1807
|
-
border: `1px solid ${copiedPath ?
|
|
1808
|
-
backgroundColor: copiedPath ? `${
|
|
1809
|
-
color: copiedPath ?
|
|
1713
|
+
border: `1px solid ${copiedPath ? theme.colors.success || "#10b981" : theme.colors.border}`,
|
|
1714
|
+
backgroundColor: copiedPath ? `${theme.colors.success || "#10b981"}15` : theme.colors.backgroundTertiary,
|
|
1715
|
+
color: copiedPath ? theme.colors.success || "#10b981" : theme.colors.textSecondary,
|
|
1810
1716
|
cursor: "pointer",
|
|
1811
1717
|
transition: "all 0.15s ease",
|
|
1812
1718
|
minWidth: 0,
|
|
@@ -1819,8 +1725,8 @@ const WorkspaceRepositoriesPanelContent = ({
|
|
|
1819
1725
|
"span",
|
|
1820
1726
|
{
|
|
1821
1727
|
style: {
|
|
1822
|
-
fontSize: `${
|
|
1823
|
-
fontFamily:
|
|
1728
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
1729
|
+
fontFamily: theme.fonts.monospace,
|
|
1824
1730
|
whiteSpace: "nowrap",
|
|
1825
1731
|
overflow: "hidden",
|
|
1826
1732
|
textOverflow: "ellipsis",
|
|
@@ -1842,9 +1748,9 @@ const WorkspaceRepositoriesPanelContent = ({
|
|
|
1842
1748
|
{
|
|
1843
1749
|
style: {
|
|
1844
1750
|
margin: 0,
|
|
1845
|
-
fontSize: `${
|
|
1846
|
-
color:
|
|
1847
|
-
fontFamily:
|
|
1751
|
+
fontSize: `${theme.fontSizes[1]}px`,
|
|
1752
|
+
color: theme.colors.textSecondary,
|
|
1753
|
+
fontFamily: theme.fonts.body
|
|
1848
1754
|
},
|
|
1849
1755
|
children: workspace.description
|
|
1850
1756
|
}
|
|
@@ -1867,7 +1773,7 @@ const WorkspaceRepositoriesPanelContent = ({
|
|
|
1867
1773
|
style: {
|
|
1868
1774
|
padding: "32px",
|
|
1869
1775
|
textAlign: "center",
|
|
1870
|
-
color:
|
|
1776
|
+
color: theme.colors.textSecondary
|
|
1871
1777
|
},
|
|
1872
1778
|
children: /* @__PURE__ */ jsx("p", { style: { margin: 0 }, children: "No repositories in this workspace." })
|
|
1873
1779
|
}
|
|
@@ -1879,10 +1785,10 @@ const WorkspaceRepositoriesPanelContent = ({
|
|
|
1879
1785
|
style: {
|
|
1880
1786
|
margin: 0,
|
|
1881
1787
|
paddingBottom: "4px",
|
|
1882
|
-
fontSize: `${
|
|
1883
|
-
fontWeight:
|
|
1884
|
-
color:
|
|
1885
|
-
fontFamily:
|
|
1788
|
+
fontSize: `${theme.fontSizes[1]}px`,
|
|
1789
|
+
fontWeight: theme.fontWeights.semibold,
|
|
1790
|
+
color: theme.colors.textSecondary,
|
|
1791
|
+
fontFamily: theme.fonts.body,
|
|
1886
1792
|
textTransform: "uppercase",
|
|
1887
1793
|
letterSpacing: "0.5px"
|
|
1888
1794
|
},
|
|
@@ -1911,10 +1817,10 @@ const WorkspaceRepositoriesPanelContent = ({
|
|
|
1911
1817
|
style: {
|
|
1912
1818
|
margin: 0,
|
|
1913
1819
|
paddingBottom: "4px",
|
|
1914
|
-
fontSize: `${
|
|
1915
|
-
fontWeight:
|
|
1916
|
-
color:
|
|
1917
|
-
fontFamily:
|
|
1820
|
+
fontSize: `${theme.fontSizes[1]}px`,
|
|
1821
|
+
fontWeight: theme.fontWeights.semibold,
|
|
1822
|
+
color: theme.colors.textSecondary,
|
|
1823
|
+
fontFamily: theme.fonts.body,
|
|
1918
1824
|
textTransform: "uppercase",
|
|
1919
1825
|
letterSpacing: "0.5px"
|
|
1920
1826
|
},
|
|
@@ -1942,7 +1848,7 @@ const WorkspaceRepositoriesPanelContent = ({
|
|
|
1942
1848
|
] });
|
|
1943
1849
|
};
|
|
1944
1850
|
const WorkspaceRepositoriesPanel = (props) => {
|
|
1945
|
-
return /* @__PURE__ */ jsx(
|
|
1851
|
+
return /* @__PURE__ */ jsx(WorkspaceRepositoriesPanelContent, { ...props });
|
|
1946
1852
|
};
|
|
1947
1853
|
const WorkspaceCard = ({
|
|
1948
1854
|
workspace,
|
|
@@ -1954,12 +1860,12 @@ const WorkspaceCard = ({
|
|
|
1954
1860
|
onUpdateName,
|
|
1955
1861
|
themeColor
|
|
1956
1862
|
}) => {
|
|
1957
|
-
const { theme
|
|
1863
|
+
const { theme } = useTheme();
|
|
1958
1864
|
const [isHovered, setIsHovered] = useState(false);
|
|
1959
1865
|
const [isEditing, setIsEditing] = useState(false);
|
|
1960
1866
|
const [editedName, setEditedName] = useState(workspace.name);
|
|
1961
1867
|
const [isSaving, setIsSaving] = useState(false);
|
|
1962
|
-
const iconColor = themeColor ||
|
|
1868
|
+
const iconColor = themeColor || theme.colors.primary;
|
|
1963
1869
|
const handleStartEdit = (e) => {
|
|
1964
1870
|
e.stopPropagation();
|
|
1965
1871
|
setIsEditing(true);
|
|
@@ -2026,8 +1932,8 @@ const WorkspaceCard = ({
|
|
|
2026
1932
|
gap: "8px",
|
|
2027
1933
|
padding: "12px",
|
|
2028
1934
|
borderRadius: "6px",
|
|
2029
|
-
backgroundColor: isSelected ?
|
|
2030
|
-
border: `1px solid ${isSelected ?
|
|
1935
|
+
backgroundColor: isSelected ? theme.colors.backgroundTertiary : isHovered ? theme.colors.backgroundTertiary : "transparent",
|
|
1936
|
+
border: `1px solid ${isSelected ? theme.colors.primary || theme.colors.border : isHovered ? theme.colors.border : "transparent"}`,
|
|
2031
1937
|
cursor: isEditing ? "default" : "pointer",
|
|
2032
1938
|
transition: "all 0.15s ease"
|
|
2033
1939
|
};
|
|
@@ -2035,10 +1941,10 @@ const WorkspaceCard = ({
|
|
|
2035
1941
|
display: "flex",
|
|
2036
1942
|
alignItems: "center",
|
|
2037
1943
|
gap: "8px",
|
|
2038
|
-
color:
|
|
2039
|
-
fontSize: `${
|
|
2040
|
-
fontWeight:
|
|
2041
|
-
fontFamily:
|
|
1944
|
+
color: theme.colors.text,
|
|
1945
|
+
fontSize: `${theme.fontSizes[2]}px`,
|
|
1946
|
+
fontWeight: theme.fontWeights.semibold,
|
|
1947
|
+
fontFamily: theme.fonts.body
|
|
2042
1948
|
};
|
|
2043
1949
|
const actionButtonStyle = {
|
|
2044
1950
|
display: "flex",
|
|
@@ -2050,7 +1956,7 @@ const WorkspaceCard = ({
|
|
|
2050
1956
|
border: "none",
|
|
2051
1957
|
borderRadius: "4px",
|
|
2052
1958
|
backgroundColor: "transparent",
|
|
2053
|
-
color:
|
|
1959
|
+
color: theme.colors.textSecondary,
|
|
2054
1960
|
cursor: "pointer",
|
|
2055
1961
|
opacity: isHovered ? 1 : 0,
|
|
2056
1962
|
pointerEvents: isHovered ? "auto" : "none",
|
|
@@ -2080,7 +1986,7 @@ const WorkspaceCard = ({
|
|
|
2080
1986
|
flexShrink: 0,
|
|
2081
1987
|
marginTop: "2px"
|
|
2082
1988
|
},
|
|
2083
|
-
children: workspace.icon ? /* @__PURE__ */ jsx("span", { style: { fontSize: `${
|
|
1989
|
+
children: workspace.icon ? /* @__PURE__ */ jsx("span", { style: { fontSize: `${theme.fontSizes[3]}px` }, children: workspace.icon }) : /* @__PURE__ */ jsx(DoorClosed, { size: 24 })
|
|
2084
1990
|
}
|
|
2085
1991
|
),
|
|
2086
1992
|
/* @__PURE__ */ jsxs(
|
|
@@ -2109,12 +2015,12 @@ const WorkspaceCard = ({
|
|
|
2109
2015
|
flex: 1,
|
|
2110
2016
|
padding: "4px 8px",
|
|
2111
2017
|
borderRadius: "4px",
|
|
2112
|
-
border: `1px solid ${
|
|
2113
|
-
backgroundColor:
|
|
2114
|
-
color:
|
|
2115
|
-
fontSize: `${
|
|
2116
|
-
fontWeight:
|
|
2117
|
-
fontFamily:
|
|
2018
|
+
border: `1px solid ${theme.colors.border}`,
|
|
2019
|
+
backgroundColor: theme.colors.background,
|
|
2020
|
+
color: theme.colors.text,
|
|
2021
|
+
fontSize: `${theme.fontSizes[2]}px`,
|
|
2022
|
+
fontWeight: theme.fontWeights.semibold,
|
|
2023
|
+
fontFamily: theme.fonts.body,
|
|
2118
2024
|
outline: "none"
|
|
2119
2025
|
}
|
|
2120
2026
|
}
|
|
@@ -2134,8 +2040,8 @@ const WorkspaceCard = ({
|
|
|
2134
2040
|
padding: 0,
|
|
2135
2041
|
border: "none",
|
|
2136
2042
|
borderRadius: "4px",
|
|
2137
|
-
backgroundColor:
|
|
2138
|
-
color:
|
|
2043
|
+
backgroundColor: theme.colors.success,
|
|
2044
|
+
color: theme.colors.background,
|
|
2139
2045
|
cursor: isSaving ? "not-allowed" : "pointer",
|
|
2140
2046
|
opacity: isSaving ? 0.6 : 1,
|
|
2141
2047
|
transition: "opacity 0.15s ease"
|
|
@@ -2158,8 +2064,8 @@ const WorkspaceCard = ({
|
|
|
2158
2064
|
padding: 0,
|
|
2159
2065
|
border: "none",
|
|
2160
2066
|
borderRadius: "4px",
|
|
2161
|
-
backgroundColor:
|
|
2162
|
-
color:
|
|
2067
|
+
backgroundColor: theme.colors.backgroundTertiary,
|
|
2068
|
+
color: theme.colors.text,
|
|
2163
2069
|
cursor: isSaving ? "not-allowed" : "pointer",
|
|
2164
2070
|
opacity: isSaving ? 0.6 : 1,
|
|
2165
2071
|
transition: "opacity 0.15s ease"
|
|
@@ -2187,12 +2093,12 @@ const WorkspaceCard = ({
|
|
|
2187
2093
|
title: "Open workspace",
|
|
2188
2094
|
style: actionButtonStyle,
|
|
2189
2095
|
onMouseEnter: (e) => {
|
|
2190
|
-
e.currentTarget.style.backgroundColor =
|
|
2191
|
-
e.currentTarget.style.color =
|
|
2096
|
+
e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
|
|
2097
|
+
e.currentTarget.style.color = theme.colors.text;
|
|
2192
2098
|
},
|
|
2193
2099
|
onMouseLeave: (e) => {
|
|
2194
2100
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
2195
|
-
e.currentTarget.style.color =
|
|
2101
|
+
e.currentTarget.style.color = theme.colors.textSecondary;
|
|
2196
2102
|
},
|
|
2197
2103
|
children: /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
|
|
2198
2104
|
}
|
|
@@ -2204,12 +2110,12 @@ const WorkspaceCard = ({
|
|
|
2204
2110
|
title: "Edit workspace name",
|
|
2205
2111
|
style: actionButtonStyle,
|
|
2206
2112
|
onMouseEnter: (e) => {
|
|
2207
|
-
e.currentTarget.style.backgroundColor =
|
|
2208
|
-
e.currentTarget.style.color =
|
|
2113
|
+
e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
|
|
2114
|
+
e.currentTarget.style.color = theme.colors.text;
|
|
2209
2115
|
},
|
|
2210
2116
|
onMouseLeave: (e) => {
|
|
2211
2117
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
2212
|
-
e.currentTarget.style.color =
|
|
2118
|
+
e.currentTarget.style.color = theme.colors.textSecondary;
|
|
2213
2119
|
},
|
|
2214
2120
|
children: /* @__PURE__ */ jsx(Pen, { size: 16 })
|
|
2215
2121
|
}
|
|
@@ -2221,12 +2127,12 @@ const WorkspaceCard = ({
|
|
|
2221
2127
|
title: "Delete workspace",
|
|
2222
2128
|
style: actionButtonStyle,
|
|
2223
2129
|
onMouseEnter: (e) => {
|
|
2224
|
-
e.currentTarget.style.backgroundColor = `${
|
|
2225
|
-
e.currentTarget.style.color =
|
|
2130
|
+
e.currentTarget.style.backgroundColor = `${theme.colors.error}15`;
|
|
2131
|
+
e.currentTarget.style.color = theme.colors.error;
|
|
2226
2132
|
},
|
|
2227
2133
|
onMouseLeave: (e) => {
|
|
2228
2134
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
2229
|
-
e.currentTarget.style.color =
|
|
2135
|
+
e.currentTarget.style.color = theme.colors.textSecondary;
|
|
2230
2136
|
},
|
|
2231
2137
|
children: /* @__PURE__ */ jsx(Trash2, { size: 16 })
|
|
2232
2138
|
}
|
|
@@ -2235,8 +2141,8 @@ const WorkspaceCard = ({
|
|
|
2235
2141
|
"span",
|
|
2236
2142
|
{
|
|
2237
2143
|
style: {
|
|
2238
|
-
fontSize: `${
|
|
2239
|
-
color:
|
|
2144
|
+
fontSize: `${theme.fontSizes[1]}px`,
|
|
2145
|
+
color: theme.colors.textSecondary,
|
|
2240
2146
|
fontWeight: 400,
|
|
2241
2147
|
flexShrink: 0
|
|
2242
2148
|
},
|
|
@@ -2248,9 +2154,9 @@ const WorkspaceCard = ({
|
|
|
2248
2154
|
"div",
|
|
2249
2155
|
{
|
|
2250
2156
|
style: {
|
|
2251
|
-
fontSize: `${
|
|
2252
|
-
color:
|
|
2253
|
-
fontFamily:
|
|
2157
|
+
fontSize: `${theme.fontSizes[1]}px`,
|
|
2158
|
+
color: theme.colors.textSecondary,
|
|
2159
|
+
fontFamily: theme.fonts.body,
|
|
2254
2160
|
lineHeight: 1.4,
|
|
2255
2161
|
whiteSpace: "nowrap",
|
|
2256
2162
|
overflow: "hidden",
|
|
@@ -2280,7 +2186,7 @@ const WorkspacesListPanelContent = ({
|
|
|
2280
2186
|
events
|
|
2281
2187
|
}) => {
|
|
2282
2188
|
var _a, _b;
|
|
2283
|
-
const { theme
|
|
2189
|
+
const { theme } = useTheme();
|
|
2284
2190
|
const [searchQuery, setSearchQuery] = useState("");
|
|
2285
2191
|
const [showSearchBox, setShowSearchBox] = useState(false);
|
|
2286
2192
|
const [selectedWorkspaceId, setSelectedWorkspaceId] = useState(null);
|
|
@@ -2484,7 +2390,7 @@ const WorkspacesListPanelContent = ({
|
|
|
2484
2390
|
display: "flex",
|
|
2485
2391
|
flexDirection: "column",
|
|
2486
2392
|
height: "100%",
|
|
2487
|
-
backgroundColor:
|
|
2393
|
+
backgroundColor: theme.colors.backgroundSecondary
|
|
2488
2394
|
};
|
|
2489
2395
|
const contentContainerStyle = {
|
|
2490
2396
|
...baseContainerStyle,
|
|
@@ -2518,10 +2424,10 @@ const WorkspacesListPanelContent = ({
|
|
|
2518
2424
|
{
|
|
2519
2425
|
style: {
|
|
2520
2426
|
margin: 0,
|
|
2521
|
-
color:
|
|
2522
|
-
fontSize: `${
|
|
2523
|
-
fontWeight:
|
|
2524
|
-
fontFamily:
|
|
2427
|
+
color: theme.colors.text,
|
|
2428
|
+
fontSize: `${theme.fontSizes[3]}px`,
|
|
2429
|
+
fontWeight: theme.fontWeights.semibold,
|
|
2430
|
+
fontFamily: theme.fonts.body
|
|
2525
2431
|
},
|
|
2526
2432
|
children: "Loading workspaces..."
|
|
2527
2433
|
}
|
|
@@ -2547,10 +2453,10 @@ const WorkspacesListPanelContent = ({
|
|
|
2547
2453
|
{
|
|
2548
2454
|
style: {
|
|
2549
2455
|
margin: 0,
|
|
2550
|
-
fontSize: `${
|
|
2551
|
-
fontWeight:
|
|
2552
|
-
color:
|
|
2553
|
-
fontFamily:
|
|
2456
|
+
fontSize: `${theme.fontSizes[2]}px`,
|
|
2457
|
+
fontWeight: theme.fontWeights.semibold,
|
|
2458
|
+
color: theme.colors.text,
|
|
2459
|
+
fontFamily: theme.fonts.body
|
|
2554
2460
|
},
|
|
2555
2461
|
children: "Workspaces"
|
|
2556
2462
|
}
|
|
@@ -2572,9 +2478,9 @@ const WorkspacesListPanelContent = ({
|
|
|
2572
2478
|
width: "28px",
|
|
2573
2479
|
height: "28px",
|
|
2574
2480
|
borderRadius: "6px",
|
|
2575
|
-
border: `1px solid ${
|
|
2576
|
-
backgroundColor: showSearchBox ?
|
|
2577
|
-
color: showSearchBox ?
|
|
2481
|
+
border: `1px solid ${theme.colors.border}`,
|
|
2482
|
+
backgroundColor: showSearchBox ? theme.colors.primary : theme.colors.backgroundTertiary,
|
|
2483
|
+
color: showSearchBox ? theme.colors.background : theme.colors.text,
|
|
2578
2484
|
cursor: "pointer",
|
|
2579
2485
|
transition: "all 0.15s ease"
|
|
2580
2486
|
},
|
|
@@ -2594,9 +2500,9 @@ const WorkspacesListPanelContent = ({
|
|
|
2594
2500
|
width: "28px",
|
|
2595
2501
|
height: "28px",
|
|
2596
2502
|
borderRadius: "6px",
|
|
2597
|
-
border: `1px solid ${
|
|
2598
|
-
backgroundColor:
|
|
2599
|
-
color:
|
|
2503
|
+
border: `1px solid ${theme.colors.border}`,
|
|
2504
|
+
backgroundColor: theme.colors.primary,
|
|
2505
|
+
color: theme.colors.background,
|
|
2600
2506
|
cursor: isCreating ? "not-allowed" : "pointer",
|
|
2601
2507
|
opacity: isCreating ? 0.6 : 1,
|
|
2602
2508
|
transition: "all 0.15s ease"
|
|
@@ -2630,11 +2536,11 @@ const WorkspacesListPanelContent = ({
|
|
|
2630
2536
|
flex: 1,
|
|
2631
2537
|
padding: "8px 12px",
|
|
2632
2538
|
borderRadius: "6px",
|
|
2633
|
-
border: `1px solid ${
|
|
2634
|
-
backgroundColor:
|
|
2635
|
-
color:
|
|
2636
|
-
fontSize: `${
|
|
2637
|
-
fontFamily:
|
|
2539
|
+
border: `1px solid ${theme.colors.border}`,
|
|
2540
|
+
backgroundColor: theme.colors.background,
|
|
2541
|
+
color: theme.colors.text,
|
|
2542
|
+
fontSize: `${theme.fontSizes[1]}px`,
|
|
2543
|
+
fontFamily: theme.fonts.body,
|
|
2638
2544
|
outline: "none"
|
|
2639
2545
|
}
|
|
2640
2546
|
}
|
|
@@ -2650,9 +2556,9 @@ const WorkspacesListPanelContent = ({
|
|
|
2650
2556
|
width: "28px",
|
|
2651
2557
|
height: "28px",
|
|
2652
2558
|
borderRadius: "6px",
|
|
2653
|
-
border: `1px solid ${
|
|
2654
|
-
backgroundColor:
|
|
2655
|
-
color:
|
|
2559
|
+
border: `1px solid ${theme.colors.border}`,
|
|
2560
|
+
backgroundColor: theme.colors.backgroundTertiary,
|
|
2561
|
+
color: theme.colors.text,
|
|
2656
2562
|
cursor: "pointer",
|
|
2657
2563
|
transition: "all 0.15s ease"
|
|
2658
2564
|
},
|
|
@@ -2693,7 +2599,7 @@ const WorkspacesListPanelContent = ({
|
|
|
2693
2599
|
style: {
|
|
2694
2600
|
padding: "32px",
|
|
2695
2601
|
textAlign: "center",
|
|
2696
|
-
color:
|
|
2602
|
+
color: theme.colors.textSecondary
|
|
2697
2603
|
},
|
|
2698
2604
|
children: /* @__PURE__ */ jsx("p", { style: { margin: 0 }, children: searchQuery.trim() ? `No workspaces found matching "${searchQuery}"` : "No workspaces found." })
|
|
2699
2605
|
}
|
|
@@ -2704,18 +2610,18 @@ const WorkspacesListPanelContent = ({
|
|
|
2704
2610
|
] });
|
|
2705
2611
|
};
|
|
2706
2612
|
const WorkspacesListPanel = (props) => {
|
|
2707
|
-
return /* @__PURE__ */ jsx(
|
|
2613
|
+
return /* @__PURE__ */ jsx(WorkspacesListPanelContent, { ...props });
|
|
2708
2614
|
};
|
|
2709
2615
|
const WorkspacesListPanelPreview = () => {
|
|
2710
|
-
const { theme
|
|
2616
|
+
const { theme } = useTheme();
|
|
2711
2617
|
return /* @__PURE__ */ jsxs(
|
|
2712
2618
|
"div",
|
|
2713
2619
|
{
|
|
2714
2620
|
style: {
|
|
2715
2621
|
padding: "12px",
|
|
2716
|
-
fontSize: `${
|
|
2717
|
-
fontFamily:
|
|
2718
|
-
color:
|
|
2622
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
2623
|
+
fontFamily: theme.fonts.body,
|
|
2624
|
+
color: theme.colors.text,
|
|
2719
2625
|
display: "flex",
|
|
2720
2626
|
flexDirection: "column",
|
|
2721
2627
|
gap: "8px"
|
|
@@ -2728,10 +2634,10 @@ const WorkspacesListPanelPreview = () => {
|
|
|
2728
2634
|
display: "flex",
|
|
2729
2635
|
alignItems: "center",
|
|
2730
2636
|
gap: "6px",
|
|
2731
|
-
fontWeight:
|
|
2637
|
+
fontWeight: theme.fontWeights.semibold
|
|
2732
2638
|
},
|
|
2733
2639
|
children: [
|
|
2734
|
-
/* @__PURE__ */ jsx(Layers, { size: 16, style: { color:
|
|
2640
|
+
/* @__PURE__ */ jsx(Layers, { size: 16, style: { color: theme.colors.primary } }),
|
|
2735
2641
|
/* @__PURE__ */ jsx("span", { children: "Workspaces" })
|
|
2736
2642
|
]
|
|
2737
2643
|
}
|
|
@@ -2740,9 +2646,9 @@ const WorkspacesListPanelPreview = () => {
|
|
|
2740
2646
|
"div",
|
|
2741
2647
|
{
|
|
2742
2648
|
style: {
|
|
2743
|
-
fontSize: `${
|
|
2744
|
-
fontFamily:
|
|
2745
|
-
color:
|
|
2649
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
2650
|
+
fontFamily: theme.fonts.body,
|
|
2651
|
+
color: theme.colors.textSecondary,
|
|
2746
2652
|
marginTop: "4px"
|
|
2747
2653
|
},
|
|
2748
2654
|
children: "Browse and manage your workspaces"
|
|
@@ -2756,7 +2662,7 @@ const DependencyInfoModal = ({
|
|
|
2756
2662
|
isOpen,
|
|
2757
2663
|
onClose
|
|
2758
2664
|
}) => {
|
|
2759
|
-
const { theme
|
|
2665
|
+
const { theme } = useTheme();
|
|
2760
2666
|
if (!isOpen) return null;
|
|
2761
2667
|
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
|
|
2762
2668
|
"div",
|
|
@@ -2767,8 +2673,8 @@ const DependencyInfoModal = ({
|
|
|
2767
2673
|
left: 0,
|
|
2768
2674
|
right: 0,
|
|
2769
2675
|
bottom: 0,
|
|
2770
|
-
backgroundColor:
|
|
2771
|
-
zIndex:
|
|
2676
|
+
backgroundColor: theme.colors.muted,
|
|
2677
|
+
zIndex: theme.zIndices[4],
|
|
2772
2678
|
display: "flex",
|
|
2773
2679
|
alignItems: "center",
|
|
2774
2680
|
justifyContent: "center"
|
|
@@ -2778,15 +2684,15 @@ const DependencyInfoModal = ({
|
|
|
2778
2684
|
"div",
|
|
2779
2685
|
{
|
|
2780
2686
|
style: {
|
|
2781
|
-
backgroundColor:
|
|
2782
|
-
borderRadius: `${
|
|
2687
|
+
backgroundColor: theme.colors.background,
|
|
2688
|
+
borderRadius: `${theme.radii[3]}px`,
|
|
2783
2689
|
maxWidth: "600px",
|
|
2784
2690
|
maxHeight: "80vh",
|
|
2785
2691
|
width: "90%",
|
|
2786
2692
|
overflow: "hidden",
|
|
2787
2693
|
display: "flex",
|
|
2788
2694
|
flexDirection: "column",
|
|
2789
|
-
boxShadow:
|
|
2695
|
+
boxShadow: theme.shadows[3]
|
|
2790
2696
|
},
|
|
2791
2697
|
onClick: (e) => e.stopPropagation(),
|
|
2792
2698
|
children: [
|
|
@@ -2794,8 +2700,8 @@ const DependencyInfoModal = ({
|
|
|
2794
2700
|
"div",
|
|
2795
2701
|
{
|
|
2796
2702
|
style: {
|
|
2797
|
-
padding: `${
|
|
2798
|
-
borderBottom: `1px solid ${
|
|
2703
|
+
padding: `${theme.space[4]}px`,
|
|
2704
|
+
borderBottom: `1px solid ${theme.colors.border}`,
|
|
2799
2705
|
display: "flex",
|
|
2800
2706
|
alignItems: "center",
|
|
2801
2707
|
justifyContent: "space-between"
|
|
@@ -2805,12 +2711,12 @@ const DependencyInfoModal = ({
|
|
|
2805
2711
|
"h2",
|
|
2806
2712
|
{
|
|
2807
2713
|
style: {
|
|
2808
|
-
fontSize: `${
|
|
2809
|
-
fontWeight:
|
|
2810
|
-
color:
|
|
2714
|
+
fontSize: `${theme.fontSizes[4]}px`,
|
|
2715
|
+
fontWeight: theme.fontWeights.semibold,
|
|
2716
|
+
color: theme.colors.text,
|
|
2811
2717
|
display: "flex",
|
|
2812
2718
|
alignItems: "center",
|
|
2813
|
-
gap: `${
|
|
2719
|
+
gap: `${theme.space[2]}px`,
|
|
2814
2720
|
margin: 0
|
|
2815
2721
|
},
|
|
2816
2722
|
children: [
|
|
@@ -2826,9 +2732,9 @@ const DependencyInfoModal = ({
|
|
|
2826
2732
|
style: {
|
|
2827
2733
|
background: "none",
|
|
2828
2734
|
border: "none",
|
|
2829
|
-
color:
|
|
2735
|
+
color: theme.colors.textSecondary,
|
|
2830
2736
|
cursor: "pointer",
|
|
2831
|
-
padding: `${
|
|
2737
|
+
padding: `${theme.space[1]}px`
|
|
2832
2738
|
},
|
|
2833
2739
|
children: /* @__PURE__ */ jsx(X, { size: 20 })
|
|
2834
2740
|
}
|
|
@@ -2840,7 +2746,7 @@ const DependencyInfoModal = ({
|
|
|
2840
2746
|
"div",
|
|
2841
2747
|
{
|
|
2842
2748
|
style: {
|
|
2843
|
-
padding: `${
|
|
2749
|
+
padding: `${theme.space[4]}px`,
|
|
2844
2750
|
overflow: "auto",
|
|
2845
2751
|
flex: 1
|
|
2846
2752
|
},
|
|
@@ -2850,33 +2756,33 @@ const DependencyInfoModal = ({
|
|
|
2850
2756
|
{
|
|
2851
2757
|
icon: /* @__PURE__ */ jsx(Package, { size: 18 }),
|
|
2852
2758
|
title: "Dependency Types",
|
|
2853
|
-
theme
|
|
2759
|
+
theme,
|
|
2854
2760
|
children: [
|
|
2855
2761
|
/* @__PURE__ */ jsx(
|
|
2856
2762
|
InfoItem,
|
|
2857
2763
|
{
|
|
2858
|
-
badge: { text: "prod", color:
|
|
2764
|
+
badge: { text: "prod", color: theme.colors.primary },
|
|
2859
2765
|
title: "Production Dependencies",
|
|
2860
2766
|
description: "Required for your application to run in production. These are bundled with your app and affect its size and security.",
|
|
2861
|
-
theme
|
|
2767
|
+
theme
|
|
2862
2768
|
}
|
|
2863
2769
|
),
|
|
2864
2770
|
/* @__PURE__ */ jsx(
|
|
2865
2771
|
InfoItem,
|
|
2866
2772
|
{
|
|
2867
|
-
badge: { text: "dev", color:
|
|
2773
|
+
badge: { text: "dev", color: theme.colors.secondary },
|
|
2868
2774
|
title: "Development Dependencies",
|
|
2869
2775
|
description: "Only needed during development (build tools, testing, linters). Not included in production builds.",
|
|
2870
|
-
theme
|
|
2776
|
+
theme
|
|
2871
2777
|
}
|
|
2872
2778
|
),
|
|
2873
2779
|
/* @__PURE__ */ jsx(
|
|
2874
2780
|
InfoItem,
|
|
2875
2781
|
{
|
|
2876
|
-
badge: { text: "peer", color:
|
|
2782
|
+
badge: { text: "peer", color: theme.colors.accent },
|
|
2877
2783
|
title: "Peer Dependencies",
|
|
2878
2784
|
description: "Expected to be provided by the consumer of your package. Important for library authors to specify compatibility.",
|
|
2879
|
-
theme
|
|
2785
|
+
theme
|
|
2880
2786
|
}
|
|
2881
2787
|
)
|
|
2882
2788
|
]
|
|
@@ -2887,24 +2793,24 @@ const DependencyInfoModal = ({
|
|
|
2887
2793
|
{
|
|
2888
2794
|
icon: /* @__PURE__ */ jsx(Scale, { size: 18 }),
|
|
2889
2795
|
title: "Common Licenses",
|
|
2890
|
-
theme
|
|
2796
|
+
theme,
|
|
2891
2797
|
children: [
|
|
2892
2798
|
/* @__PURE__ */ jsx(
|
|
2893
2799
|
InfoItem,
|
|
2894
2800
|
{
|
|
2895
|
-
badge: { text: "MIT", color:
|
|
2801
|
+
badge: { text: "MIT", color: theme.colors.success },
|
|
2896
2802
|
title: "Permissive Licenses (MIT, Apache, BSD)",
|
|
2897
2803
|
description: "Few restrictions. Can use in commercial projects. Must include copyright notice.",
|
|
2898
|
-
theme
|
|
2804
|
+
theme
|
|
2899
2805
|
}
|
|
2900
2806
|
),
|
|
2901
2807
|
/* @__PURE__ */ jsx(
|
|
2902
2808
|
InfoItem,
|
|
2903
2809
|
{
|
|
2904
|
-
badge: { text: "GPL", color:
|
|
2810
|
+
badge: { text: "GPL", color: theme.colors.warning },
|
|
2905
2811
|
title: "Copyleft Licenses (GPL, LGPL, AGPL)",
|
|
2906
2812
|
description: "Requires sharing source code of derivative works. Can impact your project's licensing.",
|
|
2907
|
-
theme
|
|
2813
|
+
theme
|
|
2908
2814
|
}
|
|
2909
2815
|
)
|
|
2910
2816
|
]
|
|
@@ -2919,18 +2825,18 @@ const DependencyInfoModal = ({
|
|
|
2919
2825
|
}
|
|
2920
2826
|
) });
|
|
2921
2827
|
};
|
|
2922
|
-
const Section = ({ icon, title, theme
|
|
2828
|
+
const Section = ({ icon, title, theme, children }) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: `${theme.space[5]}px` }, children: [
|
|
2923
2829
|
/* @__PURE__ */ jsxs(
|
|
2924
2830
|
"h3",
|
|
2925
2831
|
{
|
|
2926
2832
|
style: {
|
|
2927
|
-
fontSize: `${
|
|
2928
|
-
fontWeight:
|
|
2929
|
-
color:
|
|
2930
|
-
marginBottom: `${
|
|
2833
|
+
fontSize: `${theme.fontSizes[2]}px`,
|
|
2834
|
+
fontWeight: theme.fontWeights.semibold,
|
|
2835
|
+
color: theme.colors.text,
|
|
2836
|
+
marginBottom: `${theme.space[3]}px`,
|
|
2931
2837
|
display: "flex",
|
|
2932
2838
|
alignItems: "center",
|
|
2933
|
-
gap: `${
|
|
2839
|
+
gap: `${theme.space[2]}px`
|
|
2934
2840
|
},
|
|
2935
2841
|
children: [
|
|
2936
2842
|
icon,
|
|
@@ -2944,20 +2850,20 @@ const Section = ({ icon, title, theme: theme2, children }) => /* @__PURE__ */ js
|
|
|
2944
2850
|
style: {
|
|
2945
2851
|
display: "flex",
|
|
2946
2852
|
flexDirection: "column",
|
|
2947
|
-
gap: `${
|
|
2853
|
+
gap: `${theme.space[2]}px`
|
|
2948
2854
|
},
|
|
2949
2855
|
children
|
|
2950
2856
|
}
|
|
2951
2857
|
)
|
|
2952
2858
|
] });
|
|
2953
|
-
const InfoItem = ({ badge, title, description, theme
|
|
2859
|
+
const InfoItem = ({ badge, title, description, theme }) => /* @__PURE__ */ jsxs(
|
|
2954
2860
|
"div",
|
|
2955
2861
|
{
|
|
2956
2862
|
style: {
|
|
2957
|
-
padding: `${
|
|
2958
|
-
backgroundColor:
|
|
2959
|
-
borderRadius: `${
|
|
2960
|
-
border: `1px solid ${
|
|
2863
|
+
padding: `${theme.space[3]}px`,
|
|
2864
|
+
backgroundColor: theme.colors.backgroundSecondary,
|
|
2865
|
+
borderRadius: `${theme.radii[2]}px`,
|
|
2866
|
+
border: `1px solid ${theme.colors.border}`
|
|
2961
2867
|
},
|
|
2962
2868
|
children: [
|
|
2963
2869
|
/* @__PURE__ */ jsxs(
|
|
@@ -2966,18 +2872,18 @@ const InfoItem = ({ badge, title, description, theme: theme2 }) => /* @__PURE__
|
|
|
2966
2872
|
style: {
|
|
2967
2873
|
display: "flex",
|
|
2968
2874
|
alignItems: "center",
|
|
2969
|
-
gap: `${
|
|
2970
|
-
marginBottom: `${
|
|
2875
|
+
gap: `${theme.space[2]}px`,
|
|
2876
|
+
marginBottom: `${theme.space[1]}px`
|
|
2971
2877
|
},
|
|
2972
2878
|
children: [
|
|
2973
2879
|
/* @__PURE__ */ jsx(
|
|
2974
2880
|
"span",
|
|
2975
2881
|
{
|
|
2976
2882
|
style: {
|
|
2977
|
-
padding: `${
|
|
2978
|
-
borderRadius: `${
|
|
2979
|
-
fontSize: `${
|
|
2980
|
-
fontWeight:
|
|
2883
|
+
padding: `${theme.space[1]}px ${theme.space[2]}px`,
|
|
2884
|
+
borderRadius: `${theme.radii[1]}px`,
|
|
2885
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
2886
|
+
fontWeight: theme.fontWeights.medium,
|
|
2981
2887
|
backgroundColor: `${badge.color}20`,
|
|
2982
2888
|
color: badge.color
|
|
2983
2889
|
},
|
|
@@ -2988,9 +2894,9 @@ const InfoItem = ({ badge, title, description, theme: theme2 }) => /* @__PURE__
|
|
|
2988
2894
|
"span",
|
|
2989
2895
|
{
|
|
2990
2896
|
style: {
|
|
2991
|
-
fontSize: `${
|
|
2992
|
-
fontWeight:
|
|
2993
|
-
color:
|
|
2897
|
+
fontSize: `${theme.fontSizes[1]}px`,
|
|
2898
|
+
fontWeight: theme.fontWeights.medium,
|
|
2899
|
+
color: theme.colors.text
|
|
2994
2900
|
},
|
|
2995
2901
|
children: title
|
|
2996
2902
|
}
|
|
@@ -3002,9 +2908,9 @@ const InfoItem = ({ badge, title, description, theme: theme2 }) => /* @__PURE__
|
|
|
3002
2908
|
"div",
|
|
3003
2909
|
{
|
|
3004
2910
|
style: {
|
|
3005
|
-
fontSize: `${
|
|
3006
|
-
color:
|
|
3007
|
-
lineHeight:
|
|
2911
|
+
fontSize: `${theme.fontSizes[1]}px`,
|
|
2912
|
+
color: theme.colors.textSecondary,
|
|
2913
|
+
lineHeight: theme.lineHeights.relaxed
|
|
3008
2914
|
},
|
|
3009
2915
|
children: description
|
|
3010
2916
|
}
|
|
@@ -3013,15 +2919,15 @@ const InfoItem = ({ badge, title, description, theme: theme2 }) => /* @__PURE__
|
|
|
3013
2919
|
}
|
|
3014
2920
|
);
|
|
3015
2921
|
const DependencyRow = ({ dependency }) => {
|
|
3016
|
-
const { theme
|
|
2922
|
+
const { theme } = useTheme();
|
|
3017
2923
|
const [isHovered, setIsHovered] = useState(false);
|
|
3018
2924
|
const [copied, setCopied] = useState(false);
|
|
3019
2925
|
const getDependencyTypeBadgeStyle = (type) => {
|
|
3020
2926
|
const baseStyle = {
|
|
3021
|
-
padding: `${
|
|
3022
|
-
borderRadius: `${
|
|
3023
|
-
fontSize: `${
|
|
3024
|
-
fontWeight:
|
|
2927
|
+
padding: `${theme.space[1]}px ${theme.space[2]}px`,
|
|
2928
|
+
borderRadius: `${theme.radii[1]}px`,
|
|
2929
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
2930
|
+
fontWeight: theme.fontWeights.medium,
|
|
3025
2931
|
minWidth: "36px",
|
|
3026
2932
|
textAlign: "center"
|
|
3027
2933
|
};
|
|
@@ -3029,26 +2935,26 @@ const DependencyRow = ({ dependency }) => {
|
|
|
3029
2935
|
case "production":
|
|
3030
2936
|
return {
|
|
3031
2937
|
...baseStyle,
|
|
3032
|
-
backgroundColor: `${
|
|
3033
|
-
color:
|
|
2938
|
+
backgroundColor: `${theme.colors.primary}20`,
|
|
2939
|
+
color: theme.colors.primary
|
|
3034
2940
|
};
|
|
3035
2941
|
case "development":
|
|
3036
2942
|
return {
|
|
3037
2943
|
...baseStyle,
|
|
3038
|
-
backgroundColor: `${
|
|
3039
|
-
color:
|
|
2944
|
+
backgroundColor: `${theme.colors.secondary}20`,
|
|
2945
|
+
color: theme.colors.secondary
|
|
3040
2946
|
};
|
|
3041
2947
|
case "peer":
|
|
3042
2948
|
return {
|
|
3043
2949
|
...baseStyle,
|
|
3044
|
-
backgroundColor: `${
|
|
3045
|
-
color:
|
|
2950
|
+
backgroundColor: `${theme.colors.accent}20`,
|
|
2951
|
+
color: theme.colors.accent
|
|
3046
2952
|
};
|
|
3047
2953
|
default:
|
|
3048
2954
|
return {
|
|
3049
2955
|
...baseStyle,
|
|
3050
|
-
backgroundColor:
|
|
3051
|
-
color:
|
|
2956
|
+
backgroundColor: theme.colors.backgroundLight,
|
|
2957
|
+
color: theme.colors.textSecondary
|
|
3052
2958
|
};
|
|
3053
2959
|
}
|
|
3054
2960
|
};
|
|
@@ -3065,8 +2971,8 @@ const DependencyRow = ({ dependency }) => {
|
|
|
3065
2971
|
}
|
|
3066
2972
|
};
|
|
3067
2973
|
const actionButtonStyle = {
|
|
3068
|
-
padding: `${
|
|
3069
|
-
borderRadius: `${
|
|
2974
|
+
padding: `${theme.space[1]}px`,
|
|
2975
|
+
borderRadius: `${theme.radii[1]}px`,
|
|
3070
2976
|
display: "flex",
|
|
3071
2977
|
alignItems: "center",
|
|
3072
2978
|
justifyContent: "center",
|
|
@@ -3084,11 +2990,11 @@ const DependencyRow = ({ dependency }) => {
|
|
|
3084
2990
|
display: "flex",
|
|
3085
2991
|
alignItems: "center",
|
|
3086
2992
|
justifyContent: "space-between",
|
|
3087
|
-
padding: `${
|
|
3088
|
-
backgroundColor:
|
|
3089
|
-
borderRadius: `${
|
|
3090
|
-
fontSize: `${
|
|
3091
|
-
border: `1px solid ${
|
|
2993
|
+
padding: `${theme.space[2]}px ${theme.space[3]}px`,
|
|
2994
|
+
backgroundColor: theme.colors.background,
|
|
2995
|
+
borderRadius: `${theme.radii[1]}px`,
|
|
2996
|
+
fontSize: `${theme.fontSizes[1]}px`,
|
|
2997
|
+
border: `1px solid ${theme.colors.border}`,
|
|
3092
2998
|
transition: "all 0.2s"
|
|
3093
2999
|
},
|
|
3094
3000
|
onMouseEnter: () => setIsHovered(true),
|
|
@@ -3100,7 +3006,7 @@ const DependencyRow = ({ dependency }) => {
|
|
|
3100
3006
|
style: {
|
|
3101
3007
|
display: "flex",
|
|
3102
3008
|
alignItems: "center",
|
|
3103
|
-
gap: `${
|
|
3009
|
+
gap: `${theme.space[2]}px`,
|
|
3104
3010
|
flex: 1,
|
|
3105
3011
|
minWidth: 0
|
|
3106
3012
|
},
|
|
@@ -3110,8 +3016,8 @@ const DependencyRow = ({ dependency }) => {
|
|
|
3110
3016
|
"span",
|
|
3111
3017
|
{
|
|
3112
3018
|
style: {
|
|
3113
|
-
fontWeight:
|
|
3114
|
-
color:
|
|
3019
|
+
fontWeight: theme.fontWeights.medium,
|
|
3020
|
+
color: theme.colors.text,
|
|
3115
3021
|
overflow: "hidden",
|
|
3116
3022
|
textOverflow: "ellipsis",
|
|
3117
3023
|
whiteSpace: "nowrap"
|
|
@@ -3127,7 +3033,7 @@ const DependencyRow = ({ dependency }) => {
|
|
|
3127
3033
|
rel: "noopener noreferrer",
|
|
3128
3034
|
style: {
|
|
3129
3035
|
...actionButtonStyle,
|
|
3130
|
-
color:
|
|
3036
|
+
color: theme.colors.textSecondary,
|
|
3131
3037
|
textDecoration: "none",
|
|
3132
3038
|
flexShrink: 0
|
|
3133
3039
|
},
|
|
@@ -3154,13 +3060,13 @@ const DependencyRow = ({ dependency }) => {
|
|
|
3154
3060
|
onClick: handleCopy,
|
|
3155
3061
|
style: {
|
|
3156
3062
|
...actionButtonStyle,
|
|
3157
|
-
color: copied ?
|
|
3063
|
+
color: copied ? theme.colors.success || "#10b981" : theme.colors.textSecondary
|
|
3158
3064
|
},
|
|
3159
3065
|
title: copied ? "Copied!" : `Copy ${dependency.name}@${dependency.version}`,
|
|
3160
3066
|
children: copied ? /* @__PURE__ */ jsx(Check, { size: 12 }) : /* @__PURE__ */ jsx(Copy, { size: 12 })
|
|
3161
3067
|
}
|
|
3162
3068
|
),
|
|
3163
|
-
/* @__PURE__ */ jsx("span", { style: { color:
|
|
3069
|
+
/* @__PURE__ */ jsx("span", { style: { color: theme.colors.textSecondary }, children: dependency.version })
|
|
3164
3070
|
]
|
|
3165
3071
|
}
|
|
3166
3072
|
)
|
|
@@ -3175,7 +3081,7 @@ const FilterBar = ({
|
|
|
3175
3081
|
onSearchChange,
|
|
3176
3082
|
counts
|
|
3177
3083
|
}) => {
|
|
3178
|
-
const { theme
|
|
3084
|
+
const { theme } = useTheme();
|
|
3179
3085
|
const availableFilters = [
|
|
3180
3086
|
...counts.peer > 0 ? ["peer"] : [],
|
|
3181
3087
|
...counts.production > 0 ? ["production"] : [],
|
|
@@ -3188,7 +3094,7 @@ const FilterBar = ({
|
|
|
3188
3094
|
style: {
|
|
3189
3095
|
display: "flex",
|
|
3190
3096
|
flexDirection: "column",
|
|
3191
|
-
gap: `${
|
|
3097
|
+
gap: `${theme.space[2]}px`
|
|
3192
3098
|
},
|
|
3193
3099
|
children: [
|
|
3194
3100
|
/* @__PURE__ */ jsxs(
|
|
@@ -3206,8 +3112,8 @@ const FilterBar = ({
|
|
|
3206
3112
|
size: 14,
|
|
3207
3113
|
style: {
|
|
3208
3114
|
position: "absolute",
|
|
3209
|
-
left: `${
|
|
3210
|
-
color:
|
|
3115
|
+
left: `${theme.space[3]}px`,
|
|
3116
|
+
color: theme.colors.textSecondary,
|
|
3211
3117
|
pointerEvents: "none"
|
|
3212
3118
|
}
|
|
3213
3119
|
}
|
|
@@ -3221,13 +3127,13 @@ const FilterBar = ({
|
|
|
3221
3127
|
onChange: (e) => onSearchChange(e.target.value),
|
|
3222
3128
|
style: {
|
|
3223
3129
|
width: "100%",
|
|
3224
|
-
padding: `${
|
|
3225
|
-
borderRadius: `${
|
|
3226
|
-
border: `1px solid ${
|
|
3227
|
-
backgroundColor:
|
|
3228
|
-
color:
|
|
3229
|
-
fontSize: `${
|
|
3230
|
-
fontFamily:
|
|
3130
|
+
padding: `${theme.space[2]}px ${theme.space[5]}px`,
|
|
3131
|
+
borderRadius: `${theme.radii[2]}px`,
|
|
3132
|
+
border: `1px solid ${theme.colors.border}`,
|
|
3133
|
+
backgroundColor: theme.colors.backgroundSecondary,
|
|
3134
|
+
color: theme.colors.text,
|
|
3135
|
+
fontSize: `${theme.fontSizes[1]}px`,
|
|
3136
|
+
fontFamily: theme.fonts.body,
|
|
3231
3137
|
outline: "none",
|
|
3232
3138
|
transition: "all 0.2s"
|
|
3233
3139
|
}
|
|
@@ -3239,24 +3145,24 @@ const FilterBar = ({
|
|
|
3239
3145
|
onClick: () => onSearchChange(""),
|
|
3240
3146
|
style: {
|
|
3241
3147
|
position: "absolute",
|
|
3242
|
-
right: `${
|
|
3243
|
-
padding: `${
|
|
3148
|
+
right: `${theme.space[2]}px`,
|
|
3149
|
+
padding: `${theme.space[1]}px`,
|
|
3244
3150
|
display: "flex",
|
|
3245
3151
|
alignItems: "center",
|
|
3246
3152
|
justifyContent: "center",
|
|
3247
3153
|
backgroundColor: "transparent",
|
|
3248
3154
|
border: "none",
|
|
3249
3155
|
cursor: "pointer",
|
|
3250
|
-
borderRadius: `${
|
|
3156
|
+
borderRadius: `${theme.radii[1]}px`
|
|
3251
3157
|
},
|
|
3252
3158
|
title: "Clear search",
|
|
3253
|
-
children: /* @__PURE__ */ jsx(X, { size: 14, color:
|
|
3159
|
+
children: /* @__PURE__ */ jsx(X, { size: 14, color: theme.colors.textSecondary })
|
|
3254
3160
|
}
|
|
3255
3161
|
)
|
|
3256
3162
|
]
|
|
3257
3163
|
}
|
|
3258
3164
|
),
|
|
3259
|
-
showFilters && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: `${
|
|
3165
|
+
showFilters && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: `${theme.space[1]}px`, width: "100%" }, children: availableFilters.map((type) => {
|
|
3260
3166
|
const isActive = activeFilters.has(type);
|
|
3261
3167
|
return /* @__PURE__ */ jsxs(
|
|
3262
3168
|
"button",
|
|
@@ -3264,14 +3170,14 @@ const FilterBar = ({
|
|
|
3264
3170
|
onClick: () => onToggleFilter(type),
|
|
3265
3171
|
style: {
|
|
3266
3172
|
flex: 1,
|
|
3267
|
-
padding: `${
|
|
3268
|
-
fontSize: `${
|
|
3269
|
-
fontWeight:
|
|
3270
|
-
fontFamily:
|
|
3271
|
-
borderRadius: `${
|
|
3272
|
-
border: `1px solid ${isActive ?
|
|
3273
|
-
backgroundColor: isActive ? `${
|
|
3274
|
-
color: isActive ?
|
|
3173
|
+
padding: `${theme.space[1]}px ${theme.space[2]}px`,
|
|
3174
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
3175
|
+
fontWeight: theme.fontWeights.medium,
|
|
3176
|
+
fontFamily: theme.fonts.body,
|
|
3177
|
+
borderRadius: `${theme.radii[1]}px`,
|
|
3178
|
+
border: `1px solid ${isActive ? theme.colors.primary : theme.colors.border}`,
|
|
3179
|
+
backgroundColor: isActive ? `${theme.colors.primary}20` : theme.colors.backgroundSecondary,
|
|
3180
|
+
color: isActive ? theme.colors.primary : theme.colors.text,
|
|
3275
3181
|
cursor: "pointer",
|
|
3276
3182
|
transition: "all 0.2s"
|
|
3277
3183
|
},
|
|
@@ -3280,7 +3186,7 @@ const FilterBar = ({
|
|
|
3280
3186
|
/* @__PURE__ */ jsxs(
|
|
3281
3187
|
"span",
|
|
3282
3188
|
{
|
|
3283
|
-
style: { marginLeft: `${
|
|
3189
|
+
style: { marginLeft: `${theme.space[1]}px`, opacity: 0.7 },
|
|
3284
3190
|
children: [
|
|
3285
3191
|
"(",
|
|
3286
3192
|
counts[type],
|
|
@@ -3330,7 +3236,7 @@ const DependenciesPanelContent = ({
|
|
|
3330
3236
|
context
|
|
3331
3237
|
}) => {
|
|
3332
3238
|
var _a;
|
|
3333
|
-
const { theme
|
|
3239
|
+
const { theme } = useTheme();
|
|
3334
3240
|
const [selectedPackagePath, setSelectedPackagePath] = useState(
|
|
3335
3241
|
null
|
|
3336
3242
|
);
|
|
@@ -3401,14 +3307,14 @@ const DependenciesPanelContent = ({
|
|
|
3401
3307
|
"div",
|
|
3402
3308
|
{
|
|
3403
3309
|
style: {
|
|
3404
|
-
padding: `${
|
|
3310
|
+
padding: `${theme.space[3]}px`,
|
|
3405
3311
|
height: "100%",
|
|
3406
3312
|
display: "flex",
|
|
3407
3313
|
alignItems: "center",
|
|
3408
3314
|
justifyContent: "center",
|
|
3409
|
-
color:
|
|
3410
|
-
backgroundColor:
|
|
3411
|
-
fontFamily:
|
|
3315
|
+
color: theme.colors.textSecondary,
|
|
3316
|
+
backgroundColor: theme.colors.background,
|
|
3317
|
+
fontFamily: theme.fonts.body
|
|
3412
3318
|
},
|
|
3413
3319
|
children: "Loading packages..."
|
|
3414
3320
|
}
|
|
@@ -3419,16 +3325,16 @@ const DependenciesPanelContent = ({
|
|
|
3419
3325
|
"div",
|
|
3420
3326
|
{
|
|
3421
3327
|
style: {
|
|
3422
|
-
padding: `${
|
|
3328
|
+
padding: `${theme.space[3]}px`,
|
|
3423
3329
|
height: "100%",
|
|
3424
3330
|
display: "flex",
|
|
3425
3331
|
flexDirection: "column",
|
|
3426
3332
|
alignItems: "center",
|
|
3427
3333
|
justifyContent: "center",
|
|
3428
|
-
gap: `${
|
|
3429
|
-
color:
|
|
3430
|
-
backgroundColor:
|
|
3431
|
-
fontFamily:
|
|
3334
|
+
gap: `${theme.space[2]}px`,
|
|
3335
|
+
color: theme.colors.textSecondary,
|
|
3336
|
+
backgroundColor: theme.colors.background,
|
|
3337
|
+
fontFamily: theme.fonts.body
|
|
3432
3338
|
},
|
|
3433
3339
|
children: [
|
|
3434
3340
|
/* @__PURE__ */ jsx(Package, { size: 32 }),
|
|
@@ -3444,9 +3350,9 @@ const DependenciesPanelContent = ({
|
|
|
3444
3350
|
height: "100%",
|
|
3445
3351
|
display: "flex",
|
|
3446
3352
|
flexDirection: "column",
|
|
3447
|
-
backgroundColor:
|
|
3448
|
-
color:
|
|
3449
|
-
fontFamily:
|
|
3353
|
+
backgroundColor: theme.colors.background,
|
|
3354
|
+
color: theme.colors.text,
|
|
3355
|
+
fontFamily: theme.fonts.body,
|
|
3450
3356
|
overflow: "hidden"
|
|
3451
3357
|
},
|
|
3452
3358
|
children: [
|
|
@@ -3455,12 +3361,12 @@ const DependenciesPanelContent = ({
|
|
|
3455
3361
|
{
|
|
3456
3362
|
style: {
|
|
3457
3363
|
flexShrink: 0,
|
|
3458
|
-
padding: `${
|
|
3459
|
-
paddingBottom: `${
|
|
3364
|
+
padding: `${theme.space[3]}px`,
|
|
3365
|
+
paddingBottom: `${theme.space[2]}px`,
|
|
3460
3366
|
display: "flex",
|
|
3461
3367
|
flexDirection: "column",
|
|
3462
|
-
gap: `${
|
|
3463
|
-
borderBottom: `1px solid ${
|
|
3368
|
+
gap: `${theme.space[2]}px`,
|
|
3369
|
+
borderBottom: `1px solid ${theme.colors.border}`
|
|
3464
3370
|
},
|
|
3465
3371
|
children: [
|
|
3466
3372
|
/* @__PURE__ */ jsxs(
|
|
@@ -3476,12 +3382,12 @@ const DependenciesPanelContent = ({
|
|
|
3476
3382
|
"h3",
|
|
3477
3383
|
{
|
|
3478
3384
|
style: {
|
|
3479
|
-
fontSize: `${
|
|
3480
|
-
fontWeight:
|
|
3481
|
-
color:
|
|
3385
|
+
fontSize: `${theme.fontSizes[2]}px`,
|
|
3386
|
+
fontWeight: theme.fontWeights.semibold,
|
|
3387
|
+
color: theme.colors.text,
|
|
3482
3388
|
display: "flex",
|
|
3483
3389
|
alignItems: "center",
|
|
3484
|
-
gap: `${
|
|
3390
|
+
gap: `${theme.space[2]}px`,
|
|
3485
3391
|
margin: 0
|
|
3486
3392
|
},
|
|
3487
3393
|
children: packages.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -3491,9 +3397,9 @@ const DependenciesPanelContent = ({
|
|
|
3491
3397
|
"span",
|
|
3492
3398
|
{
|
|
3493
3399
|
style: {
|
|
3494
|
-
fontSize: `${
|
|
3495
|
-
fontWeight:
|
|
3496
|
-
color:
|
|
3400
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
3401
|
+
fontWeight: theme.fontWeights.body,
|
|
3402
|
+
color: theme.colors.textSecondary
|
|
3497
3403
|
},
|
|
3498
3404
|
children: [
|
|
3499
3405
|
"(",
|
|
@@ -3513,18 +3419,18 @@ const DependenciesPanelContent = ({
|
|
|
3513
3419
|
{
|
|
3514
3420
|
onClick: () => setShowInfoModal(true),
|
|
3515
3421
|
style: {
|
|
3516
|
-
padding: `${
|
|
3517
|
-
fontSize: `${
|
|
3518
|
-
fontWeight:
|
|
3519
|
-
fontFamily:
|
|
3520
|
-
borderRadius: `${
|
|
3521
|
-
border: `1px solid ${
|
|
3522
|
-
backgroundColor:
|
|
3523
|
-
color:
|
|
3422
|
+
padding: `${theme.space[1]}px ${theme.space[2]}px`,
|
|
3423
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
3424
|
+
fontWeight: theme.fontWeights.medium,
|
|
3425
|
+
fontFamily: theme.fonts.body,
|
|
3426
|
+
borderRadius: `${theme.radii[1]}px`,
|
|
3427
|
+
border: `1px solid ${theme.colors.border}`,
|
|
3428
|
+
backgroundColor: theme.colors.backgroundSecondary,
|
|
3429
|
+
color: theme.colors.primary,
|
|
3524
3430
|
cursor: "pointer",
|
|
3525
3431
|
display: "flex",
|
|
3526
3432
|
alignItems: "center",
|
|
3527
|
-
gap: `${
|
|
3433
|
+
gap: `${theme.space[1]}px`,
|
|
3528
3434
|
transition: "all 0.2s"
|
|
3529
3435
|
},
|
|
3530
3436
|
children: [
|
|
@@ -3543,13 +3449,13 @@ const DependenciesPanelContent = ({
|
|
|
3543
3449
|
onChange: (e) => setSelectedPackagePath(e.target.value === "__none__" ? null : e.target.value),
|
|
3544
3450
|
style: {
|
|
3545
3451
|
width: "100%",
|
|
3546
|
-
padding: `${
|
|
3547
|
-
borderRadius: `${
|
|
3548
|
-
border: `1px solid ${
|
|
3549
|
-
backgroundColor:
|
|
3550
|
-
color:
|
|
3551
|
-
fontSize: `${
|
|
3552
|
-
fontFamily:
|
|
3452
|
+
padding: `${theme.space[2]}px`,
|
|
3453
|
+
borderRadius: `${theme.radii[1]}px`,
|
|
3454
|
+
border: `1px solid ${theme.colors.border}`,
|
|
3455
|
+
backgroundColor: theme.colors.backgroundSecondary,
|
|
3456
|
+
color: theme.colors.text,
|
|
3457
|
+
fontSize: `${theme.fontSizes[1]}px`,
|
|
3458
|
+
fontFamily: theme.fonts.body,
|
|
3553
3459
|
cursor: "pointer"
|
|
3554
3460
|
},
|
|
3555
3461
|
children: packages.map((pkg) => /* @__PURE__ */ jsxs("option", { value: pkg.packageData.path, children: [
|
|
@@ -3564,8 +3470,8 @@ const DependenciesPanelContent = ({
|
|
|
3564
3470
|
"div",
|
|
3565
3471
|
{
|
|
3566
3472
|
style: {
|
|
3567
|
-
fontSize: `${
|
|
3568
|
-
color:
|
|
3473
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
3474
|
+
color: theme.colors.textSecondary
|
|
3569
3475
|
},
|
|
3570
3476
|
children: [
|
|
3571
3477
|
selectedPackage.packageData.name,
|
|
@@ -3594,16 +3500,16 @@ const DependenciesPanelContent = ({
|
|
|
3594
3500
|
style: {
|
|
3595
3501
|
flex: 1,
|
|
3596
3502
|
overflow: "auto",
|
|
3597
|
-
padding: `${
|
|
3503
|
+
padding: `${theme.space[2]}px ${theme.space[3]}px ${theme.space[3]}px`
|
|
3598
3504
|
},
|
|
3599
3505
|
children: [
|
|
3600
3506
|
/* @__PURE__ */ jsxs(
|
|
3601
3507
|
"div",
|
|
3602
3508
|
{
|
|
3603
3509
|
style: {
|
|
3604
|
-
fontSize: `${
|
|
3605
|
-
color:
|
|
3606
|
-
marginBottom: `${
|
|
3510
|
+
fontSize: `${theme.fontSizes[0]}px`,
|
|
3511
|
+
color: theme.colors.textSecondary,
|
|
3512
|
+
marginBottom: `${theme.space[2]}px`
|
|
3607
3513
|
},
|
|
3608
3514
|
children: [
|
|
3609
3515
|
"Showing ",
|
|
@@ -3620,16 +3526,16 @@ const DependenciesPanelContent = ({
|
|
|
3620
3526
|
style: {
|
|
3621
3527
|
display: "flex",
|
|
3622
3528
|
flexDirection: "column",
|
|
3623
|
-
gap: `${
|
|
3529
|
+
gap: `${theme.space[1]}px`
|
|
3624
3530
|
},
|
|
3625
3531
|
children: filteredDependencies.length === 0 ? /* @__PURE__ */ jsx(
|
|
3626
3532
|
"div",
|
|
3627
3533
|
{
|
|
3628
3534
|
style: {
|
|
3629
|
-
padding: `${
|
|
3535
|
+
padding: `${theme.space[3]}px`,
|
|
3630
3536
|
textAlign: "center",
|
|
3631
|
-
color:
|
|
3632
|
-
fontSize: `${
|
|
3537
|
+
color: theme.colors.textSecondary,
|
|
3538
|
+
fontSize: `${theme.fontSizes[1]}px`
|
|
3633
3539
|
},
|
|
3634
3540
|
children: "No dependencies match your filters"
|
|
3635
3541
|
}
|
|
@@ -3653,8 +3559,8 @@ const DependenciesPanelContent = ({
|
|
|
3653
3559
|
display: "flex",
|
|
3654
3560
|
alignItems: "center",
|
|
3655
3561
|
justifyContent: "center",
|
|
3656
|
-
color:
|
|
3657
|
-
fontSize: `${
|
|
3562
|
+
color: theme.colors.textSecondary,
|
|
3563
|
+
fontSize: `${theme.fontSizes[1]}px`
|
|
3658
3564
|
},
|
|
3659
3565
|
children: "Select a package to view its dependencies"
|
|
3660
3566
|
}
|
|
@@ -3671,7 +3577,7 @@ const DependenciesPanelContent = ({
|
|
|
3671
3577
|
);
|
|
3672
3578
|
};
|
|
3673
3579
|
const DependenciesPanel = (props) => {
|
|
3674
|
-
return /* @__PURE__ */ jsx(
|
|
3580
|
+
return /* @__PURE__ */ jsx(DependenciesPanelContent, { ...props });
|
|
3675
3581
|
};
|
|
3676
3582
|
const PANEL_ID$3 = "industry-theme.local-projects";
|
|
3677
3583
|
const filterProjectsTool = {
|