@industry-theme/alexandria-panels 0.1.6 → 0.1.7

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.
@@ -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 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}"));
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/* 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: 8px !important;\n }\n\n .local-project-card {\n padding: 8px !important;\n }\n}"));
7
7
  document.head.appendChild(elementStyle);
8
8
  }
9
9
  } catch (e) {
@@ -564,13 +564,12 @@ const LocalProjectCard = ({
564
564
  compact: _compact = false,
565
565
  isInWorkspaceDirectory
566
566
  }) => {
567
- var _a, _b, _c, _d;
567
+ var _a, _b, _c, _d, _e;
568
568
  const { theme } = useTheme();
569
569
  const [isHovered, setIsHovered] = useState(false);
570
570
  const [copiedPath, setCopiedPath] = useState(false);
571
571
  const [isMoving, setIsMoving] = useState(false);
572
572
  const [isRemoving, setIsRemoving] = useState(false);
573
- const highlightColor = theme.colors.primary;
574
573
  const avatarUrl = ((_a = entry.github) == null ? void 0 : _a.owner) ? `https://github.com/${entry.github.owner}.png` : null;
575
574
  const handleCardClick = () => {
576
575
  onSelect == null ? void 0 : onSelect(entry);
@@ -630,200 +629,22 @@ const LocalProjectCard = ({
630
629
  backgroundColor: "transparent",
631
630
  color: theme.colors.textSecondary,
632
631
  cursor: "pointer",
633
- opacity: isHovered ? 1 : 0,
634
- pointerEvents: isHovered ? "auto" : "none",
635
632
  transition: "all 0.15s ease"
636
633
  };
637
- const renderActionButtons = (isCompact = false) => {
638
- const buttonFlex = isCompact ? 1 : void 0;
639
- if (isCompact) {
640
- if (actionMode === "add-to-workspace") {
641
- return /* @__PURE__ */ jsxs(
642
- "button",
643
- {
644
- type: "button",
645
- onClick: handleAddToWorkspaceClick,
646
- disabled: isLoading,
647
- title: "Add to workspace",
648
- style: {
649
- flex: buttonFlex,
650
- display: "inline-flex",
651
- alignItems: "center",
652
- justifyContent: "center",
653
- padding: "6px 10px",
654
- gap: "4px",
655
- borderRadius: "4px",
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,
663
- transition: "all 0.15s ease"
664
- },
665
- children: [
666
- isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { size: 12, className: "animate-spin" }) : /* @__PURE__ */ jsx(Plus, { size: 12 }),
667
- isLoading ? "Adding..." : "Add"
668
- ]
669
- }
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: [
765
- /* @__PURE__ */ jsxs(
766
- "button",
767
- {
768
- type: "button",
769
- onClick: handleOpenClick,
770
- title: "Open locally",
771
- disabled: windowState === "opening",
772
- style: {
773
- flex: 1,
774
- display: "inline-flex",
775
- alignItems: "center",
776
- justifyContent: "center",
777
- padding: "6px 10px",
778
- gap: "4px",
779
- borderRadius: "4px",
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,
787
- transition: "all 0.15s ease"
788
- },
789
- children: [
790
- windowState === "opening" ? /* @__PURE__ */ jsx(LoaderCircle, { size: 12, className: "animate-spin" }) : /* @__PURE__ */ jsx(FolderOpen, { size: 12 }),
791
- windowState === "opening" ? "Opening..." : "Open"
792
- ]
793
- }
794
- ),
795
- actionMode === "default" && onRemove && /* @__PURE__ */ jsxs(
796
- "button",
797
- {
798
- type: "button",
799
- onClick: handleRemoveClick,
800
- disabled: isLoading,
801
- title: "Remove from local projects",
802
- style: {
803
- flex: 1,
804
- display: "inline-flex",
805
- alignItems: "center",
806
- justifyContent: "center",
807
- padding: "6px 10px",
808
- gap: "4px",
809
- borderRadius: "4px",
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,
817
- transition: "all 0.15s ease"
818
- },
819
- children: [
820
- isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { size: 12, className: "animate-spin" }) : /* @__PURE__ */ jsx(X, { size: 12 }),
821
- isLoading ? "Removing..." : "Remove"
822
- ]
823
- }
824
- )
825
- ] });
634
+ const handleButtonHover = (e, isDestructive = false) => {
635
+ if (isDestructive) {
636
+ e.currentTarget.style.backgroundColor = `${theme.colors.error || "#ef4444"}15`;
637
+ e.currentTarget.style.color = theme.colors.error || "#ef4444";
638
+ } else {
639
+ e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
640
+ e.currentTarget.style.color = theme.colors.text;
826
641
  }
642
+ };
643
+ const handleButtonLeave = (e, defaultColor) => {
644
+ e.currentTarget.style.backgroundColor = "transparent";
645
+ e.currentTarget.style.color = defaultColor || theme.colors.textSecondary;
646
+ };
647
+ const renderActionButtons = () => {
827
648
  if (actionMode === "add-to-workspace") {
828
649
  return /* @__PURE__ */ jsx(
829
650
  "button",
@@ -832,10 +653,9 @@ const LocalProjectCard = ({
832
653
  onClick: handleAddToWorkspaceClick,
833
654
  disabled: isLoading,
834
655
  title: "Add to workspace",
835
- style: {
836
- ...actionButtonStyle,
837
- color: theme.colors.primary || "#3b82f6"
838
- },
656
+ style: actionButtonStyle,
657
+ onMouseEnter: (e) => handleButtonHover(e),
658
+ onMouseLeave: (e) => handleButtonLeave(e),
839
659
  children: isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(Plus, { size: 16 })
840
660
  }
841
661
  );
@@ -849,10 +669,9 @@ const LocalProjectCard = ({
849
669
  onClick: handleMoveToWorkspaceClick,
850
670
  disabled: isMoving,
851
671
  title: "Move to workspace directory",
852
- style: {
853
- ...actionButtonStyle,
854
- color: theme.colors.primary || "#3b82f6"
855
- },
672
+ style: actionButtonStyle,
673
+ onMouseEnter: (e) => handleButtonHover(e),
674
+ onMouseLeave: (e) => handleButtonLeave(e),
856
675
  children: isMoving ? /* @__PURE__ */ jsx(LoaderCircle, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(MoveUp, { size: 16 })
857
676
  }
858
677
  ),
@@ -866,6 +685,8 @@ const LocalProjectCard = ({
866
685
  ...actionButtonStyle,
867
686
  color: copiedPath ? theme.colors.success || "#10b981" : theme.colors.textSecondary
868
687
  },
688
+ onMouseEnter: (e) => handleButtonHover(e),
689
+ onMouseLeave: (e) => handleButtonLeave(e, copiedPath ? theme.colors.success || "#10b981" : void 0),
869
690
  children: copiedPath ? /* @__PURE__ */ jsx(Check, { size: 16 }) : /* @__PURE__ */ jsx(Copy, { size: 16 })
870
691
  }
871
692
  ),
@@ -875,10 +696,9 @@ const LocalProjectCard = ({
875
696
  type: "button",
876
697
  onClick: handleOpenClick,
877
698
  title: "Open repository",
878
- style: {
879
- ...actionButtonStyle,
880
- color: theme.colors.success || "#10b981"
881
- },
699
+ style: actionButtonStyle,
700
+ onMouseEnter: (e) => handleButtonHover(e),
701
+ onMouseLeave: (e) => handleButtonLeave(e),
882
702
  children: /* @__PURE__ */ jsx(FolderOpen, { size: 16 })
883
703
  }
884
704
  ),
@@ -890,6 +710,8 @@ const LocalProjectCard = ({
890
710
  disabled: isRemoving,
891
711
  title: "Remove from workspace",
892
712
  style: actionButtonStyle,
713
+ onMouseEnter: (e) => handleButtonHover(e, true),
714
+ onMouseLeave: (e) => handleButtonLeave(e),
893
715
  children: isRemoving ? /* @__PURE__ */ jsx(LoaderCircle, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(X, { size: 16 })
894
716
  }
895
717
  )
@@ -906,6 +728,8 @@ const LocalProjectCard = ({
906
728
  ...actionButtonStyle,
907
729
  color: copiedPath ? theme.colors.success || "#10b981" : theme.colors.textSecondary
908
730
  },
731
+ onMouseEnter: (e) => handleButtonHover(e),
732
+ onMouseLeave: (e) => handleButtonLeave(e, copiedPath ? theme.colors.success || "#10b981" : void 0),
909
733
  children: copiedPath ? /* @__PURE__ */ jsx(Check, { size: 16 }) : /* @__PURE__ */ jsx(Copy, { size: 16 })
910
734
  }
911
735
  ),
@@ -916,10 +740,9 @@ const LocalProjectCard = ({
916
740
  onClick: handleOpenClick,
917
741
  title: windowState === "ready" ? "Focus window" : windowState === "opening" ? "Window is opening..." : "Open locally",
918
742
  disabled: windowState === "opening",
919
- style: {
920
- ...actionButtonStyle,
921
- color: theme.colors.success || "#10b981"
922
- },
743
+ style: actionButtonStyle,
744
+ onMouseEnter: (e) => handleButtonHover(e),
745
+ onMouseLeave: (e) => handleButtonLeave(e),
923
746
  children: windowState === "ready" ? /* @__PURE__ */ jsx(Focus, { size: 16 }) : windowState === "opening" ? /* @__PURE__ */ jsx(LoaderCircle, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(FolderOpen, { size: 16 })
924
747
  }
925
748
  ),
@@ -931,93 +754,141 @@ const LocalProjectCard = ({
931
754
  disabled: isLoading,
932
755
  title: "Remove from local projects",
933
756
  style: actionButtonStyle,
757
+ onMouseEnter: (e) => handleButtonHover(e, true),
758
+ onMouseLeave: (e) => handleButtonLeave(e),
934
759
  children: isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(X, { size: 16 })
935
760
  }
936
761
  )
937
762
  ] });
938
763
  };
764
+ const cardStyle = {
765
+ display: "flex",
766
+ flexDirection: "row",
767
+ gap: "12px",
768
+ padding: "12px",
769
+ borderRadius: "6px",
770
+ backgroundColor: isSelected ? theme.colors.backgroundTertiary : isHovered ? theme.colors.backgroundTertiary : "transparent",
771
+ border: `1px solid ${isSelected ? theme.colors.primary || theme.colors.border : isHovered ? theme.colors.border : "transparent"}`,
772
+ cursor: "pointer",
773
+ transition: "all 0.15s ease",
774
+ fontFamily: theme.fonts.body
775
+ };
939
776
  return /* @__PURE__ */ jsxs(
940
777
  "div",
941
778
  {
942
779
  className: "local-project-card",
943
- style: {
944
- padding: "8px 12px",
945
- borderRadius: "4px",
946
- backgroundColor: isSelected ? `${highlightColor}15` : "transparent",
947
- border: isSelected ? `1px solid ${highlightColor}40` : "1px solid transparent",
948
- cursor: "pointer",
949
- transition: "background-color 0.15s",
950
- fontFamily: theme.fonts.body
951
- },
780
+ style: cardStyle,
952
781
  onClick: handleCardClick,
953
782
  onDoubleClick: handleDoubleClick,
954
783
  onMouseEnter: () => setIsHovered(true),
955
784
  onMouseLeave: () => setIsHovered(false),
956
785
  children: [
957
- /* @__PURE__ */ jsxs("div", { className: "local-project-card__content", children: [
958
- /* @__PURE__ */ jsx(
959
- RepositoryAvatar,
960
- {
961
- customAvatarUrl: avatarUrl,
962
- size: 32,
963
- fallbackIcon: /* @__PURE__ */ jsx(
964
- "div",
965
- {
966
- style: {
967
- color: theme.colors.textSecondary,
968
- fontSize: `${theme.fontSizes[0]}px`,
969
- fontWeight: theme.fontWeights.semibold
970
- },
971
- children: ((_b = entry.name[0]) == null ? void 0 : _b.toUpperCase()) || "?"
972
- }
973
- )
974
- }
975
- ),
976
- /* @__PURE__ */ jsxs("div", { className: "local-project-card__info", children: [
977
- /* @__PURE__ */ jsx(
978
- "span",
979
- {
980
- style: {
981
- fontSize: `${theme.fontSizes[2]}px`,
982
- fontWeight: theme.fontWeights.medium,
983
- color: theme.colors.text,
984
- overflow: "hidden",
985
- textOverflow: "ellipsis",
986
- whiteSpace: "nowrap",
987
- textDecoration: "underline",
988
- textDecorationColor: ((_c = entry.github) == null ? void 0 : _c.primaryLanguage) ? getLanguageColor(entry.github.primaryLanguage) : theme.colors.textSecondary,
989
- textUnderlineOffset: "3px"
990
- },
991
- children: entry.name
992
- }
993
- ),
994
- ((_d = entry.github) == null ? void 0 : _d.description) && /* @__PURE__ */ jsx(
786
+ /* @__PURE__ */ jsx(
787
+ RepositoryAvatar,
788
+ {
789
+ customAvatarUrl: avatarUrl,
790
+ size: 40,
791
+ fallbackIcon: /* @__PURE__ */ jsx(
995
792
  "div",
996
793
  {
997
- className: "local-project-card__meta",
998
794
  style: {
999
- alignItems: "center",
1000
- gap: "12px",
1001
- fontSize: `${theme.fontSizes[0]}px`,
1002
- color: theme.colors.textSecondary
795
+ color: theme.colors.textSecondary,
796
+ fontSize: `${theme.fontSizes[1]}px`,
797
+ fontWeight: theme.fontWeights.semibold
1003
798
  },
1004
- children: /* @__PURE__ */ jsx(
1005
- "span",
1006
- {
1007
- style: {
1008
- overflow: "hidden",
1009
- textOverflow: "ellipsis",
1010
- whiteSpace: "nowrap"
1011
- },
1012
- children: entry.github.description
1013
- }
1014
- )
799
+ children: ((_b = entry.name[0]) == null ? void 0 : _b.toUpperCase()) || "?"
1015
800
  }
1016
801
  )
1017
- ] }),
1018
- /* @__PURE__ */ jsx("div", { className: "local-project-card__actions", children: renderActionButtons(false) })
1019
- ] }),
1020
- /* @__PURE__ */ jsx("div", { className: "local-project-card__actions--stacked", children: renderActionButtons(true) })
802
+ }
803
+ ),
804
+ /* @__PURE__ */ jsxs(
805
+ "div",
806
+ {
807
+ style: {
808
+ flex: 1,
809
+ display: "flex",
810
+ flexDirection: "column",
811
+ gap: "4px",
812
+ minWidth: 0
813
+ },
814
+ children: [
815
+ /* @__PURE__ */ jsx(
816
+ "div",
817
+ {
818
+ style: {
819
+ display: "flex",
820
+ alignItems: "center",
821
+ gap: "8px"
822
+ },
823
+ children: /* @__PURE__ */ jsx(
824
+ "span",
825
+ {
826
+ style: {
827
+ flex: 1,
828
+ fontSize: `${theme.fontSizes[2]}px`,
829
+ fontWeight: theme.fontWeights.semibold,
830
+ color: theme.colors.text,
831
+ overflow: "hidden",
832
+ textOverflow: "ellipsis",
833
+ whiteSpace: "nowrap",
834
+ textDecoration: "underline",
835
+ textDecorationColor: ((_c = entry.github) == null ? void 0 : _c.primaryLanguage) ? getLanguageColor(entry.github.primaryLanguage) : theme.colors.textSecondary,
836
+ textUnderlineOffset: "3px"
837
+ },
838
+ children: entry.name
839
+ }
840
+ )
841
+ }
842
+ ),
843
+ /* @__PURE__ */ jsxs(
844
+ "div",
845
+ {
846
+ style: {
847
+ display: "flex",
848
+ alignItems: "center",
849
+ minHeight: "20px"
850
+ },
851
+ children: [
852
+ /* @__PURE__ */ jsx(
853
+ "div",
854
+ {
855
+ style: {
856
+ flex: 1,
857
+ fontSize: `${theme.fontSizes[1]}px`,
858
+ color: theme.colors.textSecondary,
859
+ lineHeight: 1.4,
860
+ whiteSpace: "nowrap",
861
+ overflow: "hidden",
862
+ textOverflow: "ellipsis",
863
+ minWidth: 0
864
+ },
865
+ title: ((_d = entry.github) == null ? void 0 : _d.description) || entry.path,
866
+ children: ((_e = entry.github) == null ? void 0 : _e.description) || entry.path
867
+ }
868
+ ),
869
+ /* @__PURE__ */ jsx(
870
+ "div",
871
+ {
872
+ style: {
873
+ display: "flex",
874
+ alignItems: "center",
875
+ gap: "4px",
876
+ maxWidth: isHovered ? "200px" : 0,
877
+ marginLeft: isHovered ? "8px" : 0,
878
+ overflow: "hidden",
879
+ opacity: isHovered ? 1 : 0,
880
+ flexShrink: 0,
881
+ transition: "max-width 0.2s ease, opacity 0.15s ease, margin-left 0.2s ease"
882
+ },
883
+ children: renderActionButtons()
884
+ }
885
+ )
886
+ ]
887
+ }
888
+ )
889
+ ]
890
+ }
891
+ )
1021
892
  ]
1022
893
  }
1023
894
  );
@@ -1958,8 +1829,6 @@ const WorkspaceCard = ({
1958
1829
  backgroundColor: "transparent",
1959
1830
  color: theme.colors.textSecondary,
1960
1831
  cursor: "pointer",
1961
- opacity: isHovered ? 1 : 0,
1962
- pointerEvents: isHovered ? "auto" : "none",
1963
1832
  transition: "all 0.15s ease"
1964
1833
  };
1965
1834
  return /* @__PURE__ */ jsxs(
@@ -2086,57 +1955,6 @@ const WorkspaceCard = ({
2086
1955
  children: workspace.name
2087
1956
  }
2088
1957
  ),
2089
- onOpen && /* @__PURE__ */ jsx(
2090
- "button",
2091
- {
2092
- onClick: handleOpenClick,
2093
- title: "Open workspace",
2094
- style: actionButtonStyle,
2095
- onMouseEnter: (e) => {
2096
- e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
2097
- e.currentTarget.style.color = theme.colors.text;
2098
- },
2099
- onMouseLeave: (e) => {
2100
- e.currentTarget.style.backgroundColor = "transparent";
2101
- e.currentTarget.style.color = theme.colors.textSecondary;
2102
- },
2103
- children: /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
2104
- }
2105
- ),
2106
- onUpdateName && /* @__PURE__ */ jsx(
2107
- "button",
2108
- {
2109
- onClick: handleStartEdit,
2110
- title: "Edit workspace name",
2111
- style: actionButtonStyle,
2112
- onMouseEnter: (e) => {
2113
- e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
2114
- e.currentTarget.style.color = theme.colors.text;
2115
- },
2116
- onMouseLeave: (e) => {
2117
- e.currentTarget.style.backgroundColor = "transparent";
2118
- e.currentTarget.style.color = theme.colors.textSecondary;
2119
- },
2120
- children: /* @__PURE__ */ jsx(Pen, { size: 16 })
2121
- }
2122
- ),
2123
- onDelete && /* @__PURE__ */ jsx(
2124
- "button",
2125
- {
2126
- onClick: handleDeleteClick,
2127
- title: "Delete workspace",
2128
- style: actionButtonStyle,
2129
- onMouseEnter: (e) => {
2130
- e.currentTarget.style.backgroundColor = `${theme.colors.error}15`;
2131
- e.currentTarget.style.color = theme.colors.error;
2132
- },
2133
- onMouseLeave: (e) => {
2134
- e.currentTarget.style.backgroundColor = "transparent";
2135
- e.currentTarget.style.color = theme.colors.textSecondary;
2136
- },
2137
- children: /* @__PURE__ */ jsx(Trash2, { size: 16 })
2138
- }
2139
- ),
2140
1958
  isDefault && /* @__PURE__ */ jsx(
2141
1959
  "span",
2142
1960
  {
@@ -2150,20 +1968,103 @@ const WorkspaceCard = ({
2150
1968
  }
2151
1969
  )
2152
1970
  ] }) }),
2153
- workspace.description && !isEditing && /* @__PURE__ */ jsx(
1971
+ !isEditing && /* @__PURE__ */ jsxs(
2154
1972
  "div",
2155
1973
  {
2156
1974
  style: {
2157
- fontSize: `${theme.fontSizes[1]}px`,
2158
- color: theme.colors.textSecondary,
2159
- fontFamily: theme.fonts.body,
2160
- lineHeight: 1.4,
2161
- whiteSpace: "nowrap",
2162
- overflow: "hidden",
2163
- textOverflow: "ellipsis"
1975
+ display: "flex",
1976
+ alignItems: "center",
1977
+ minHeight: "20px"
2164
1978
  },
2165
- title: workspace.description,
2166
- children: workspace.description
1979
+ children: [
1980
+ /* @__PURE__ */ jsx(
1981
+ "div",
1982
+ {
1983
+ style: {
1984
+ flex: 1,
1985
+ fontSize: `${theme.fontSizes[1]}px`,
1986
+ color: theme.colors.textSecondary,
1987
+ fontFamily: theme.fonts.body,
1988
+ lineHeight: 1.4,
1989
+ whiteSpace: "nowrap",
1990
+ overflow: "hidden",
1991
+ textOverflow: "ellipsis",
1992
+ minWidth: 0
1993
+ },
1994
+ title: workspace.description,
1995
+ children: workspace.description || " "
1996
+ }
1997
+ ),
1998
+ /* @__PURE__ */ jsxs(
1999
+ "div",
2000
+ {
2001
+ style: {
2002
+ display: "flex",
2003
+ alignItems: "center",
2004
+ gap: "4px",
2005
+ maxWidth: isHovered ? "200px" : 0,
2006
+ marginLeft: isHovered ? "8px" : 0,
2007
+ overflow: "hidden",
2008
+ opacity: isHovered ? 1 : 0,
2009
+ flexShrink: 0,
2010
+ transition: "max-width 0.2s ease, opacity 0.15s ease, margin-left 0.2s ease"
2011
+ },
2012
+ children: [
2013
+ onOpen && /* @__PURE__ */ jsx(
2014
+ "button",
2015
+ {
2016
+ onClick: handleOpenClick,
2017
+ title: "Open workspace",
2018
+ style: actionButtonStyle,
2019
+ onMouseEnter: (e) => {
2020
+ e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
2021
+ e.currentTarget.style.color = theme.colors.text;
2022
+ },
2023
+ onMouseLeave: (e) => {
2024
+ e.currentTarget.style.backgroundColor = "transparent";
2025
+ e.currentTarget.style.color = theme.colors.textSecondary;
2026
+ },
2027
+ children: /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
2028
+ }
2029
+ ),
2030
+ onUpdateName && /* @__PURE__ */ jsx(
2031
+ "button",
2032
+ {
2033
+ onClick: handleStartEdit,
2034
+ title: "Edit workspace name",
2035
+ style: actionButtonStyle,
2036
+ onMouseEnter: (e) => {
2037
+ e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
2038
+ e.currentTarget.style.color = theme.colors.text;
2039
+ },
2040
+ onMouseLeave: (e) => {
2041
+ e.currentTarget.style.backgroundColor = "transparent";
2042
+ e.currentTarget.style.color = theme.colors.textSecondary;
2043
+ },
2044
+ children: /* @__PURE__ */ jsx(Pen, { size: 16 })
2045
+ }
2046
+ ),
2047
+ onDelete && /* @__PURE__ */ jsx(
2048
+ "button",
2049
+ {
2050
+ onClick: handleDeleteClick,
2051
+ title: "Delete workspace",
2052
+ style: actionButtonStyle,
2053
+ onMouseEnter: (e) => {
2054
+ e.currentTarget.style.backgroundColor = `${theme.colors.error}15`;
2055
+ e.currentTarget.style.color = theme.colors.error;
2056
+ },
2057
+ onMouseLeave: (e) => {
2058
+ e.currentTarget.style.backgroundColor = "transparent";
2059
+ e.currentTarget.style.color = theme.colors.textSecondary;
2060
+ },
2061
+ children: /* @__PURE__ */ jsx(Trash2, { size: 16 })
2062
+ }
2063
+ )
2064
+ ]
2065
+ }
2066
+ )
2067
+ ]
2167
2068
  }
2168
2069
  )
2169
2070
  ]