From c764fbfc553786f4b350ebbae79cf7f6691d1c9b Mon Sep 17 00:00:00 2001
From: "sjin.on.ca@gmail.com" <sjin.on.ca@gmail.com>
Date: Thu, 11 Jun 2026 17:27:56 +0100
Subject: [PATCH] feat: responsive collapse toggle - left icon on wide screens
 only

- Show collapse chevron on both sides when width > 768px
- Show only right-side chevron on narrow screens (< 768px)
- Saves horizontal space on mobile devices
---
 Dockerfile.custom                             |  4 ++++
 docker-compose.yml                            | 21 +++++++++++++++++++
 frontend/.env                                 |  1 +
 .../tasks/partials/SingleTaskInProject.vue    | 20 ++++++++++++++++++
 4 files changed, 46 insertions(+)
 create mode 100644 Dockerfile.custom
 create mode 100644 docker-compose.yml
 create mode 100644 frontend/.env

diff --git a/Dockerfile.custom b/Dockerfile.custom
new file mode 100644
index 000000000..06bc4f19b
--- /dev/null
+++ b/Dockerfile.custom
@@ -0,0 +1,4 @@
+FROM vikunja/vikunja:latest
+
+# 替换前端文件
+COPY frontend/dist/ /app/vikunja/frontend/
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 000000000..c29930a7b
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,21 @@
+version: '3.8'
+
+services:
+  db:
+    image: postgres:16-alpine
+    environment:
+      POSTGRES_USER: vikunja
+      POSTGRES_PASSWORD: vikunja
+      POSTGRES_DB: vikunja
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    ports:
+      - "5432:5432"
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U vikunja"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
+volumes:
+  postgres_data:
diff --git a/frontend/.env b/frontend/.env
new file mode 100644
index 000000000..00daa67a1
--- /dev/null
+++ b/frontend/.env
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:3456/api/v1
diff --git a/frontend/src/components/tasks/partials/SingleTaskInProject.vue b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
index 764171c4d..013a9f363 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInProject.vue
+++ b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
@@ -12,6 +12,15 @@
 			@click="openTaskDetail"
 			@keyup.enter="openTaskDetail"
 		>
+			<button
+				v-if="task.relatedTasks?.subtask?.length"
+				class="collapse-toggle collapse-toggle-left"
+				:class="{ 'is-collapsed': isCollapsed }"
+				@click.stop="toggleCollapse"
+				:aria-label="isCollapsed ? 'Expand subtasks' : 'Collapse subtasks'"
+			>
+				<Icon icon="chevron-down" />
+			</button>
 			<span
 				v-tooltip="!canMarkAsDone ? $t('task.readOnlyCheckbox') : ''"
 				class="is-inline-flex is-align-items-center"
@@ -648,6 +657,17 @@ defineExpose({
 	}
 }
 
+.collapse-toggle-left {
+	margin-inline-start: 0;
+	margin-inline-end: 0.5rem;
+	order: -1;
+
+	// 窄屏隐藏左侧按钮，只保留右侧
+	@media (max-width: 768px) {
+		display: none;
+	}
+}
+
 :deep(.popup) {
 	border-radius: $radius;
 	background-color: var(--white);