Minor new mods

frontend/package.json

@@ -3,7 +3,7 @@
 	"private": true,
 	"version": "0.0.0",
 	"scripts": {
-		"dev": "vite",
+		"dev": "vite --host",
 		"build": "vite build --base=/assets/studio/frontend/ && yarn copy-html-entry && yarn copy-app-renderer",
 		"copy-html-entry": "cp ../studio/public/frontend/index.html ../studio/www/studio.html",
 		"copy-app-renderer": "cp ../studio/public/frontend/renderer.html ../studio/templates/generators/renderer.html",

frontend/src/components/AppLayout/Sidebar.vue

@@ -1,6 +1,11 @@
 <template>
-	<div class="sticky bottom-0 left-0 top-0 flex h-full w-60 shrink-0 flex-col bg-gray-50 px-2 pt-2">
-		<button class="mb-1 flex w-56 items-center gap-2 rounded p-2 hover:bg-gray-200">
+	<div
+		:class="[
+			'sticky bottom-0 left-0 top-0 flex h-full shrink-0 flex-col bg-gray-50 px-2 pt-2 transition-all',
+			isCollapsed ? '!w-13' : 'w-60'
+		]"
+	>
+		<button :class="['mb-1 flex w-full gap-2 rounded p-2 hover:bg-gray-200', isCollapsed ? 'flex-col' : 'items-center justify-between']">
 			<slot name="header">
 				<div class="rounded-sm">
 					<div v-if="logoSVG" class="flex items-center gap-2">
@@ -9,25 +14,24 @@
 					<AppLogo v-else class="h-6 w-6" />
 				</div>
 
-				<span class="truncate text-xl font-bold text-gray-800">
+				<span v-if="!isCollapsed" class="truncate text-xl font-bold text-gray-800">
 					{{ title }}
 				</span>
+				<IconButton
+					:icon="isCollapsed ? 'chevrons-right' : 'chevrons-left'"
+					:label="isCollapsed ? 'Expand' : 'Collapse'"
+					@click="toggleCollapse"
+				/>
 			</slot>
 		</button>
 
 		<nav class="mt-2 flex flex-1 flex-col space-y-1 overflow-y-auto">
 			<div class="w-full" v-for="item in menuItems" :key="item.label">
-				<component
-					:is="item.route_to ? 'router-link' : 'div'"
-					:to="item.route_to"
-					class="flex cursor-pointer items-center gap-2 truncate rounded px-2 py-1 transition duration-300 ease-in-out"
-					:class="[
-						$router.currentRoute.value.path === item.route_to ? 'bg-white shadow-sm' : 'hover:bg-gray-200',
-					]"
-					@click="item.route_to && $router.push(item.route_to)"
-				>
+				<component :is="item.route_to ? 'router-link' : 'div'" :to="item.route_to" class="flex cursor-pointer items-center gap-2 truncate rounded px-2 py-1 transition duration-300 ease-in-out" :class="[
+					$router.currentRoute.value.path === item.route_to ? 'bg-white shadow-sm' : 'hover:bg-gray-200',
+				]" @click="item.route_to && $router.push(item.route_to)">
 					<FeatherIcon :name="item.featherIcon || 'folder-normal'" class="h-5 w-5 text-gray-700" />
-					<div class="flex items-center gap-1 truncate text-base text-gray-700">
+					<div v-if="!isCollapsed" class="flex items-center gap-1 truncate text-base text-gray-700">
 						{{ item.label }}
 					</div>
 				</component>
@@ -37,10 +41,20 @@
 </template>
 
 <script setup lang="ts">
-import AppLogo from "../Icons/AppLogo.vue"
-import { SidebarProps } from "@/types/studio_components/Sidebar"
+import { ref } from "vue";
+import IconButton from "../IconButton.vue";
+import AppLogo from "../Icons/AppLogo.vue";
+import { SidebarProps } from "@/types/studio_components/Sidebar";
 
 withDefaults(defineProps<SidebarProps>(), {
 	menuItems: () => [],
-})
+});
+
+// Reactive variable for collapse state
+const isCollapsed = ref(false);
+
+// Function to toggle collapse state
+const toggleCollapse = () => {
+	isCollapsed.value = !isCollapsed.value;
+};
 </script>

frontend/src/utils/panAndZoom.ts

@@ -55,6 +55,12 @@ function setPanAndZoom(
 				props.translateX += diffX / scale;
 				props.translateY += diffY / scale;
 			});
+		} else if (e.shiftKey) {
+			props.panning = true;
+			pinchPointSet = false;
+			// Horizontal panning when shift key is pressed
+			props.translateX -= e.deltaY / props.scale;
+			props.translateY -= e.deltaX / props.scale;
 		} else {
 			props.panning = true;
 			pinchPointSet = false;