Move app to apps/web-react in pnpm workspace layout

2026-10-02 08:07:40 -05:00 · 2026-08-16 09:20:33 +03:00
parent 7e365ccfcf
commit bbc8ea57af
2913 changed files with 227 additions and 250 deletions
--- a/apps/web-react/app/components/elements/Tabs.module.css
+++ b/apps/web-react/app/components/elements/Tabs.module.css
@@ -0,0 +1,162 @@
+.tabListContainer {
+	overflow-x: auto;
+	overflow-y: hidden;
+}
+
+.tabList {
+	display: flex;
+	flex-direction: row;
+	border-bottom: 2px solid var(--color-border);
+	min-width: fit-content;
+
+	& svg {
+		--icon-size: 16px;
+		min-width: var(--icon-size);
+		min-height: var(--icon-size);
+		max-width: var(--icon-size);
+		max-height: var(--icon-size);
+		margin-inline-end: var(--s-1-5);
+	}
+}
+
+.tabContainer {
+	min-width: fit-content;
+	margin-bottom: -2px;
+
+	& .tabButton {
+		background-color: transparent;
+		border: none;
+		font-size: var(--font-xs);
+		border-radius: 0;
+		border-bottom: 2px solid transparent;
+		color: var(--color-text-high);
+		white-space: nowrap;
+		flex: 1;
+		transform: none !important;
+
+		& img {
+			min-width: 16px;
+			min-height: 16px;
+			margin-inline-end: var(--s-1-5);
+		}
+	}
+
+	&:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: -2px;
+	}
+
+	&[data-selected] .tabButton {
+		border-color: var(--color-text-accent);
+		color: var(--color-text);
+	}
+
+	&[data-focus-visible] .tabButton {
+		color: var(--color-text-accent) !important;
+		outline: none;
+	}
+}
+
+.fullWidth {
+	width: 100%;
+	min-width: 100%;
+
+	& .tabContainer {
+		flex: 1;
+		min-width: 0;
+	}
+}
+
+.root {
+	--tabs-gap: var(--s-6);
+}
+
+.root:not(.vertical) {
+	display: flex;
+	flex-direction: column;
+}
+
+.padded:not(.vertical) {
+	gap: var(--tabs-gap);
+}
+
+.disappearing {
+	&:has(.tabList > div:only-child) {
+		gap: 0;
+	}
+
+	& .tabList:has(> div:only-child) {
+		display: none;
+	}
+}
+
+.tabNumber {
+	color: var(--color-text-accent);
+	margin-inline-start: var(--s-2);
+}
+
+.tabAlert {
+	margin-inline-start: var(--s-1);
+	margin-inline-end: 0 !important;
+	color: var(--color-warning);
+}
+
+.sticky {
+	position: sticky;
+	top: 47px;
+	z-index: 1;
+	background-color: var(--color-bg);
+}
+
+.vertical {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: var(--tabs-gap);
+	align-items: start;
+
+	& .tabListContainer {
+		overflow: visible;
+		position: sticky;
+		top: var(--layout-sticky-top);
+		align-self: start;
+		background-color: var(--color-bg);
+		z-index: 1;
+	}
+
+	& .tabList {
+		flex-direction: column;
+		border-bottom: none;
+		border-inline-end: 2px solid var(--color-border);
+		min-width: 0;
+	}
+
+	& .tabContainer {
+		margin-bottom: 0;
+		margin-inline-end: -2px;
+
+		&[data-selected] .tabButton {
+			border-bottom-color: transparent;
+			border-inline-end-color: var(--color-text-accent);
+		}
+	}
+
+	& .tabButton {
+		justify-content: flex-start;
+		border-bottom: none;
+		border-inline-end: 2px solid transparent;
+		text-align: start;
+		flex: none;
+		width: 100%;
+		padding: var(--s-2) var(--s-3);
+		padding-inline-end: var(--s-6);
+	}
+
+	& .tabNumber {
+		margin-inline-start: auto;
+		padding-inline-start: var(--s-3);
+	}
+
+	& .tabPanel {
+		min-width: 0;
+	}
+}