feat: add setting for infinite nesting

Dockerfile

@@ -54,6 +54,7 @@ ENV VIKUNJA_LOG_FORMAT main
 ENV VIKUNJA_API_URL /api/v1
 ENV VIKUNJA_SENTRY_ENABLED false
 ENV VIKUNJA_SENTRY_DSN https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480
+ENV VIKUNJA_INFINITE_PROJECT_NESTING_ENABLED false
 
 COPY docker/injector.sh /docker-entrypoint.d/50-injector.sh
 COPY docker/ipv6-disable.sh /docker-entrypoint.d/60-ipv6-disable.sh

docker/injector.sh

@@ -11,5 +11,6 @@ VIKUNJA_SENTRY_DSN="$(echo "$VIKUNJA_SENTRY_DSN" | sed -r 's/([:;])/\\\1/g')"
 sed -ri "s:^(\s*window.API_URL\s*=)\s*.+:\1 '${VIKUNJA_API_URL}':g" /usr/share/nginx/html/index.html
 sed -ri "s:^(\s*window.SENTRY_ENABLED\s*=)\s*.+:\1 ${VIKUNJA_SENTRY_ENABLED}:g" /usr/share/nginx/html/index.html
 sed -ri "s:^(\s*window.SENTRY_DSN\s*=)\s*.+:\1 '${VIKUNJA_SENTRY_DSN}':g" /usr/share/nginx/html/index.html
+sed -ri "s:^(\s*window.INFINITE_PROJECT_NESTING_ENABLED\s*=)\s*.+:\1 '${VIKUNJA_INFINITE_PROJECT_NESTING_ENABLED}':g" /usr/share/nginx/html/index.html
 
 date -uIseconds | xargs echo 'info: started at'

index.html

@@ -27,6 +27,9 @@
 	// our sentry instance to notify us of potential problems.
 	window.SENTRY_ENABLED = false
 	window.SENTRY_DSN = 'https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480'
+	// If enabled, allows the user to nest projects infinitely, instead of the default 2 levels.
+	// This setting might change in the future or be removed completely.
+	window.INFINITE_PROJECT_NESTING_ENABLED = false
 </script>
 </body>
 </html>

src/components/home/ProjectsNavigation.vue

@@ -23,6 +23,7 @@
 				:project="project"
 				:is-loading="projectUpdating[project.id]"
 				:can-collapse="canCollapse"
+				:level="level"
 			/>
 		</template>
 	</draggable>
@@ -44,6 +45,7 @@ const props = defineProps<{
 	modelValue?: IProject[],
 	canEditOrder: boolean,
 	canCollapse?: boolean,
+	level?: number,
 }>()
 const emit = defineEmits(['update:modelValue'])
 

src/components/home/ProjectsNavigationItem.vue

@@ -46,10 +46,11 @@
 			<span class="list-setting-spacer" v-else></span>
 		</section>
 		<ProjectsNavigation
-			v-if="childProjectsOpen && canCollapse"
+			v-if="canNestDeeper && childProjectsOpen && canCollapse"
 			v-model="childProjects"
 			:can-edit-order="true"
 			:can-collapse="canCollapse"
+			:level="level + 1"
 		/>
 	</li>
 </template>
@@ -71,6 +72,7 @@ const props = defineProps<{
 	project: IProject,
 	isLoading?: boolean,
 	canCollapse?: boolean,
+	level?: number,
 }>()
 
 const projectStore = useProjectStore()
@@ -80,10 +82,21 @@ const currentProject = computed(() => baseStore.currentProject)
 const childProjectsOpen = ref(true)
 
 const childProjects = computed(() => {
+	if (!canNestDeeper.value) {
+		return []
+	}
+
 	return projectStore.getChildProjects(props.project.id)
 		.sort((a, b) => a.position - b.position)
 })
 
+const canNestDeeper = computed(() => {
+	if (props.level < 2) {
+		return true
+	}
+
+	return props.level >= 2 && window.INFINITE_PROJECT_NESTING_ENABLED
+})
 </script>
 
 <style lang="scss" scoped>

src/components/home/navigation.vue

@@ -55,7 +55,12 @@
 			</nav>
 
 			<nav class="menu">
-				<ProjectsNavigation :model-value="projects" :can-edit-order="true" :can-collapse="true"/>
+				<ProjectsNavigation
+					:model-value="projects"
+					:can-edit-order="true"
+					:can-collapse="true"
+					:level="1"
+				/>
 			</nav>
 		</template>
 
@@ -140,7 +145,7 @@ const favoriteProjects = computed(() => projectStore.favoriteProjects
 	}
 }
 
-.menu + .menu{
+.menu + .menu {
 	padding-top: math.div($navbar-padding, 2);
 }
 </style>

src/main.ts

@@ -23,6 +23,7 @@ declare global {
 		API_URL: string;
 		SENTRY_ENABLED: boolean;
 		SENTRY_DSN: string;
+		INFINITE_PROJECT_NESTING_ENABLED: boolean;
 	}
 }