+
@@ -28,19 +32,22 @@ type GridState = {
const {
items,
+ gridStyle,
bufferRows = 1,
scrollThrottle = 64,
resizeDebounce = 64,
defaultItemHeight = 200,
- defaultItemWidth = 200
+ defaultItemWidth = 200,
+ maxColumns = Infinity
} = defineProps<{
items: (T & { key: string })[]
- gridStyle: Partial
+ gridStyle: CSSProperties
bufferRows?: number
scrollThrottle?: number
resizeDebounce?: number
defaultItemHeight?: number
defaultItemWidth?: number
+ maxColumns?: number
}>()
const emit = defineEmits<{
@@ -59,7 +66,18 @@ const { y: scrollY } = useScroll(container, {
eventListenerOptions: { passive: true }
})
-const cols = computed(() => Math.floor(width.value / itemWidth.value) || 1)
+const cols = computed(() =>
+ Math.min(Math.floor(width.value / itemWidth.value) || 1, maxColumns)
+)
+
+const mergedGridStyle = computed(() => {
+ if (maxColumns === Infinity) return gridStyle
+ return {
+ ...gridStyle,
+ gridTemplateColumns: `repeat(${maxColumns}, minmax(0, 1fr))`
+ }
+})
+
const viewRows = computed(() => Math.ceil(height.value / itemHeight.value))
const offsetRows = computed(() => Math.floor(scrollY.value / itemHeight.value))
const isValidGrid = computed(() => height.value && width.value && items?.length)
@@ -83,6 +101,16 @@ const renderedItems = computed(() =>
isValidGrid.value ? items.slice(state.value.start, state.value.end) : []
)
+function rowsToHeight(rows: number): string {
+ return `${(rows / cols.value) * itemHeight.value}px`
+}
+const topSpacerStyle = computed(() => ({
+ height: rowsToHeight(state.value.start)
+}))
+const bottomSpacerStyle = computed(() => ({
+ height: rowsToHeight(items.length - state.value.end)
+}))
+
whenever(
() => state.value.isNearEnd,
() => {
@@ -109,15 +137,6 @@ const onResize = debounce(updateItemSize, resizeDebounce)
watch([width, height], onResize, { flush: 'post' })
whenever(() => items, updateItemSize, { flush: 'post' })
onBeforeUnmount(() => {
- onResize.cancel() // Clear pending debounced calls
+ onResize.cancel()
})
-
-
diff --git a/src/components/common/WorkspaceProfilePic.vue b/src/components/common/WorkspaceProfilePic.vue
new file mode 100644
index 000000000..642317267
--- /dev/null
+++ b/src/components/common/WorkspaceProfilePic.vue
@@ -0,0 +1,43 @@
+
+
+ {{ letter }}
+
+
+
+
diff --git a/src/components/common/statusBadge.variants.ts b/src/components/common/statusBadge.variants.ts
new file mode 100644
index 000000000..479a0dda8
--- /dev/null
+++ b/src/components/common/statusBadge.variants.ts
@@ -0,0 +1,26 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const statusBadgeVariants = cva({
+ base: 'inline-flex items-center justify-center rounded-full',
+ variants: {
+ severity: {
+ default: 'bg-primary-background text-base-foreground',
+ secondary: 'bg-secondary-background text-base-foreground',
+ warn: 'bg-warning-background text-base-background',
+ danger: 'bg-destructive-background text-white',
+ contrast: 'bg-base-foreground text-base-background'
+ },
+ variant: {
+ label: 'h-3.5 px-1 text-xxxs font-semibold uppercase',
+ dot: 'size-2',
+ circle: 'size-3.5 text-xxxs font-semibold'
+ }
+ },
+ defaultVariants: {
+ severity: 'default',
+ variant: 'label'
+ }
+})
+
+export type StatusBadgeVariants = VariantProps
diff --git a/src/components/dialog/GlobalDialog.vue b/src/components/dialog/GlobalDialog.vue
index afc056d61..2a1f0ef3d 100644
--- a/src/components/dialog/GlobalDialog.vue
+++ b/src/components/dialog/GlobalDialog.vue
@@ -4,7 +4,12 @@
v-for="item in dialogStore.dialogStack"
:key="item.key"
v-model:visible="item.visible"
- class="global-dialog"
+ :class="[
+ 'global-dialog',
+ item.key === 'global-settings' && teamWorkspacesEnabled
+ ? 'settings-dialog-workspace'
+ : ''
+ ]"
v-bind="item.dialogComponentProps"
:pt="item.dialogComponentProps.pt"
:aria-labelledby="item.key"
@@ -38,7 +43,15 @@
@@ -55,4 +68,27 @@ const dialogStore = useDialogStore()
@apply p-2 2xl:p-[var(--p-dialog-content-padding)];
@apply pt-0;
}
+
+/* Workspace mode: wider settings dialog */
+.settings-dialog-workspace {
+ width: 100%;
+ max-width: 1440px;
+}
+
+.settings-dialog-workspace .p-dialog-content {
+ width: 100%;
+}
+
+.manager-dialog {
+ height: 80vh;
+ max-width: 1724px;
+ max-height: 1026px;
+}
+
+@media (min-width: 3000px) {
+ .manager-dialog {
+ max-width: 2200px;
+ max-height: 1320px;
+ }
+}
diff --git a/src/components/dialog/content/setting/WorkspacePanel.vue b/src/components/dialog/content/setting/WorkspacePanel.vue
new file mode 100644
index 000000000..aff8f3733
--- /dev/null
+++ b/src/components/dialog/content/setting/WorkspacePanel.vue
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
diff --git a/src/components/dialog/content/setting/WorkspacePanelContent.vue b/src/components/dialog/content/setting/WorkspacePanelContent.vue
new file mode 100644
index 000000000..9366a573f
--- /dev/null
+++ b/src/components/dialog/content/setting/WorkspacePanelContent.vue
@@ -0,0 +1,163 @@
+
+
+
+
+
+ {{ workspaceName }}
+
+
+
+
+
+ {{ $t('workspacePanel.tabs.planCredits') }}
+
+
+
+
+
+
+
+
+
+
+ {{ workspaceName }}
+
+
+
+
diff --git a/src/components/dialog/content/workspace/CreateWorkspaceDialogContent.vue b/src/components/dialog/content/workspace/CreateWorkspaceDialogContent.vue
new file mode 100644
index 000000000..b9444ce58
--- /dev/null
+++ b/src/components/dialog/content/workspace/CreateWorkspaceDialogContent.vue
@@ -0,0 +1,113 @@
+
+
+
+
+
+ {{ $t('workspacePanel.createWorkspaceDialog.title') }}
+
+
+
+
+
+
+
+ {{ $t('workspacePanel.createWorkspaceDialog.message') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('workspacePanel.deleteDialog.title') }}
+
+
+
+
+
+
+
+ {{
+ workspaceName
+ ? $t('workspacePanel.deleteDialog.messageWithName', {
+ name: workspaceName
+ })
+ : $t('workspacePanel.deleteDialog.message')
+ }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('workspacePanel.editWorkspaceDialog.title') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('workspacePanel.leaveDialog.title') }}
+
+
+
+
+
+
+
+ {{ $t('workspacePanel.leaveDialog.message') }}
+
+
+
+
+
+
+
+
+