[FEAT] Workspaces

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "OxideChat"
-version = "0.1.5"
+version = "0.1.6"
 edition = "2024"
 description = "A modern, performance and on customization focused AI chat application"
 license = "MIT"

frontend/components/AppSidebar.vue

@@ -53,11 +53,17 @@
 								class="text-popover-foreground focus:bg-accent"
 								@click="chatStore.setActiveWorkspace(workspace.id)"
 							>
+								<span class="mr-2 h-2.5 w-2.5 shrink-0 rounded-full border border-border" :style="{backgroundColor: workspace.color || 'var(--muted)'}" />
 								<span :class="workspace.id === chatStore.activeWorkspaceId ? 'font-medium' : ''">
 									{{ workspace.name }}
 								</span>
 								<span class="ml-auto text-xs text-muted-foreground">{{ workspace.chat_count }}</span>
 							</ShadDropdownMenuItem>
+							<ShadDropdownMenuSeparator class="bg-border" />
+							<ShadDropdownMenuItem class="text-popover-foreground focus:bg-accent" @click="showWorkspaceManager = true">
+								<Settings2 class="mr-2 h-4 w-4" />
+								<span>{{ store.getTranslation('sidebar.manage_workspaces') }}</span>
+							</ShadDropdownMenuItem>
 						</ShadDropdownMenuSubContent>
 					</ShadDropdownMenuSub>
 
@@ -74,17 +80,21 @@
 			</ShadDropdownMenu>
 		</ShadSidebarFooter>
 	</ShadSidebar>
+
+	<WorkspaceManagerDialog v-model:open="showWorkspaceManager" />
 </template>
 
 <script setup lang="ts">
-import {MessageSquare, ChevronUp, LogOut, Settings, Layers} from 'lucide-vue-next';
+import {ChevronUp, LogOut, Settings, Settings2, Layers} from 'lucide-vue-next';
 import {useMainStore} from '@/stores';
 import {useChatStore} from '@/stores/chatStore';
 
 const store = useMainStore();
 const chatStore = useChatStore();
 const router = useRouter();
 
+const showWorkspaceManager = ref(false);
+
 const userInitials = computed(() => {
 	const username = store.auth.user?.username || 'U';
 	return username.slice(0, 2).toUpperCase();

frontend/components/chat/ChatContextMenu.vue

@@ -6,6 +6,46 @@
 			class="fixed z-50 min-w-48 rounded-lg border border-border bg-popover p-1 shadow-lg"
 			:style="{left: `${position.x}px`, top: `${position.y}px`}"
 		>
+			<template v-if="showMoveMenu">
+				<ShadButton
+					variant="ghost"
+					class="flex w-full justify-start items-center gap-2 rounded-md px-3 py-2 text-sm text-popover-foreground hover:bg-accent"
+					@click="showMoveMenu = false"
+				>
+					<ChevronLeft class="h-4 w-4" />
+					<span>{{ store.getTranslation('chat.context_menu.move_to') }}</span>
+				</ShadButton>
+
+				<div class="my-1 h-px bg-border" />
+
+				<div class="max-h-64 overflow-y-auto">
+					<ShadButton
+						v-for="workspace in chatStore.workspaces"
+						:key="workspace.id"
+						variant="ghost"
+						class="flex w-full justify-start items-center gap-2 rounded-md px-3 py-2 text-sm text-popover-foreground hover:bg-accent"
+						:disabled="workspace.id === chat.workspace_id"
+						@click="moveToWorkspace(workspace.id)"
+					>
+						<span class="h-2.5 w-2.5 shrink-0 rounded-full border border-border" :style="{backgroundColor: workspace.color || 'var(--muted)'}" />
+						<span class="truncate">{{ workspace.name }}</span>
+						<Check v-if="workspace.id === chat.workspace_id" class="ml-auto h-4 w-4 text-primary" />
+					</ShadButton>
+
+					<ShadButton
+						variant="ghost"
+						class="flex w-full justify-start items-center gap-2 rounded-md px-3 py-2 text-sm text-popover-foreground hover:bg-accent"
+						:disabled="!chat.workspace_id"
+						@click="moveToWorkspace(null)"
+					>
+						<Ban class="h-4 w-4 text-muted-foreground" />
+						<span>{{ store.getTranslation('chat.context_menu.no_workspace') }}</span>
+						<Check v-if="!chat.workspace_id" class="ml-auto h-4 w-4 text-primary" />
+					</ShadButton>
+				</div>
+			</template>
+
+			<template v-else>
 			<ShadButton
 				variant="ghost"
 				class="flex w-full justify-start items-center gap-2 rounded-md px-3 py-2 text-sm text-popover-foreground hover:bg-accent"
@@ -63,6 +103,7 @@
 				<Trash2 class="h-4 w-4" />
 				<span>{{ store.getTranslation('chat.context_menu.delete') }}</span>
 			</ShadButton>
+			</template>
 		</div>
 
 		<ShadDialog v-model:open="showRenameDialog">
@@ -105,7 +146,7 @@
 </template>
 
 <script setup lang="ts">
-import {Pin, Pencil, FolderInput, Archive, Download, Trash2} from 'lucide-vue-next';
+import {Pin, Pencil, FolderInput, Archive, Download, Trash2, ChevronLeft, Check, Ban} from 'lucide-vue-next';
 import type {Chat} from '~/types/chat';
 import {useChatStore} from '~/stores/chatStore';
 import {useMainStore} from '~/stores';
@@ -150,6 +191,17 @@ async function toggleArchive() {
 	emit('close');
 }
 
+async function moveToWorkspace(workspaceId: string | null) {
+	if (workspaceId === (props.chat.workspace_id ?? null)) {
+		emit('close');
+		return;
+	}
+	await chatStore.updateChat(props.chat.id, {workspace_id: workspaceId});
+	await chatStore.fetchChats({workspace_id: chatStore.activeWorkspaceId || undefined});
+	chatStore.fetchWorkspaces();
+	emit('close');
+}
+
 function exportChat() {
 	// Export as JSON
 	const data = {

frontend/components/workspace/DeleteWorkspaceDialog.vue

@@ -0,0 +1,97 @@
+<template>
+	<ShadDialog :open="open" @update:open="$emit('update:open', $event)">
+		<ShadDialogContent class="sm:max-w-[460px]">
+			<ShadDialogHeader>
+				<ShadDialogTitle>{{ store.getTranslation('workspace.delete_title') }}</ShadDialogTitle>
+				<ShadDialogDescription>
+					{{ store.getTranslation('workspace.delete_description', {name: workspace?.name || ''}) }}
+				</ShadDialogDescription>
+			</ShadDialogHeader>
+
+			<div class="space-y-2 py-2">
+				<button
+					v-for="opt in options"
+					:key="opt.value"
+					type="button"
+					class="flex w-full items-start gap-3 rounded-md border p-3 text-left transition-colors"
+					:class="action === opt.value ? 'border-primary bg-accent' : 'border-border hover:bg-accent/50'"
+					@click="action = opt.value"
+				>
+					<component :is="opt.icon" class="mt-0.5 h-4 w-4 shrink-0" :class="opt.value === 'delete' ? 'text-destructive' : 'text-muted-foreground'" />
+					<span class="text-sm" :class="opt.value === 'delete' ? 'text-destructive' : 'text-foreground'">{{ opt.label }}</span>
+				</button>
+
+				<div v-if="action === 'move'" class="pt-1">
+					<ShadLabel class="mb-1 text-xs text-muted-foreground">{{ store.getTranslation('workspace.delete_move_target') }}</ShadLabel>
+					<ShadSelect v-model="targetId">
+						<ShadSelectTrigger class="h-9">
+							<ShadSelectValue />
+						</ShadSelectTrigger>
+						<ShadSelectContent>
+							<ShadSelectItem v-for="ws in moveTargets" :key="ws.id" :value="ws.id">
+								{{ ws.name }}
+							</ShadSelectItem>
+						</ShadSelectContent>
+					</ShadSelect>
+				</div>
+			</div>
+
+			<ShadDialogFooter>
+				<ShadButton variant="ghost" @click="$emit('update:open', false)">
+					{{ store.getTranslation('workspace.cancel') }}
+				</ShadButton>
+				<ShadButton :variant="action === 'delete' ? 'destructive' : 'default'" :disabled="submitting || (action === 'move' && !targetId)" @click="confirm">
+					{{ store.getTranslation('workspace.confirm') }}
+				</ShadButton>
+			</ShadDialogFooter>
+		</ShadDialogContent>
+	</ShadDialog>
+</template>
+
+<script setup lang="ts">
+import {ref, computed, watch} from 'vue';
+import {ArrowRightLeft, Archive, Trash2} from 'lucide-vue-next';
+import {useMainStore} from '@/stores';
+import {useChatStore} from '@/stores/chatStore';
+import type {Workspace, WorkspaceDeleteAction} from '~/types/chat';
+
+const props = defineProps<{open: boolean; workspace: Workspace | null}>();
+const emit = defineEmits<{(e: 'update:open', value: boolean): void}>();
+
+const store = useMainStore();
+const chatStore = useChatStore();
+
+const action = ref<WorkspaceDeleteAction>('archive');
+const targetId = ref<string | undefined>(undefined);
+const submitting = ref(false);
+
+const moveTargets = computed(() => chatStore.workspaces.filter(w => w.id !== props.workspace?.id));
+
+const options = computed(() => [
+	{value: 'move' as const, label: store.getTranslation('workspace.delete_action_move'), icon: ArrowRightLeft},
+	{value: 'archive' as const, label: store.getTranslation('workspace.delete_action_archive'), icon: Archive},
+	{value: 'delete' as const, label: store.getTranslation('workspace.delete_action_delete'), icon: Trash2},
+]);
+
+watch(
+	() => props.open,
+	isOpen => {
+		if (isOpen) {
+			action.value = 'archive';
+			const preferred = chatStore.defaultWorkspace && chatStore.defaultWorkspace.id !== props.workspace?.id ? chatStore.defaultWorkspace : moveTargets.value[0];
+			targetId.value = preferred?.id;
+		}
+	},
+);
+
+async function confirm() {
+	if (!props.workspace) return;
+	submitting.value = true;
+	const ok = await chatStore.deleteWorkspace(props.workspace.id, {
+		action: action.value,
+		target_workspace_id: action.value === 'move' ? targetId.value : undefined,
+	});
+	submitting.value = false;
+	if (ok) emit('update:open', false);
+}
+</script>