add Import From Server

resources/js/components/modals/ImportFromServer.vue

@@ -0,0 +1,60 @@
+<template>
+	<Dialog
+		v-model:visible="visible"
+		modal
+		:pt="{
+			root: '!border-none',
+			mask: {
+				style: 'backdrop-filter: blur(2px)',
+			},
+		}"
+		@hide="closeCallback"
+	>
+		<template #container="{ closeCallback }">
+			<div class="flex flex-col gap-4 bg-gradient-to-b from-bg-300 to-bg-400 relative max-w-full rounded-md text-muted-color">
+				<div class="p-9">
+					<p class="mb-5 text-base text-muted-color-emphasis">
+						This functionality is no longer available (since version 5)<br />for the following reasons:
+					</p>
+					<ul class="pl-5">
+						<li class="list-decimal list-outside">Long process required to keep the browser window open.</li>
+						<li class="list-decimal list-outside">Sessions time-out were breaking the import.</li>
+						<li class="list-decimal list-outside">
+							A more efficient command line alternative is available:<br />
+							<pre class="inline-block font-mono text-muted-color-emphasis text-sm">php artisan lychee:sync</pre>
+						</li>
+					</ul>
+				</div>
+				<div class="flex justify-center">
+					<Button @click="closeCallback" text autofocus class="p-3 w-full font-bold border-1 border-white-alpha-30 hover:bg-white-alpha-10">
+						{{ $t("lychee.CLOSE") }}
+					</Button>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import Button from "primevue/button";
+import Dialog from "primevue/dialog";
+
+const props = defineProps<{
+	visible: boolean;
+}>();
+const visible = ref(props.visible);
+
+const emit = defineEmits(["close"]);
+
+watch(
+	() => props.visible,
+	(value) => {
+		visible.value = value;
+	},
+);
+
+function closeCallback() {
+	visible.value = false;
+	emit("close");
+}
+</script>

resources/js/views/Landing.vue

@@ -49,15 +49,15 @@
 				</ul>
 			</div>
 			<div class="flex w-full h-1/2 absolute top-1/2 left-0 items-center justify-center animate-landingEnterPopIn opacity-0">
-			<RouterLink to="/gallery" class="
-				cursor-pointer block text-2xl uppercase text-surface-0
-				hover:scale-125
-				transition-all duration-300 filter-shadow p-10">
-				ACCESS THE {{ $t("lychee.GALLERY") }}
-				<i class="pi pi-angle-right animate-pulseTo0 text-2xl animate-infinite"></i>
-				<i class="pi pi-angle-right animate-pulseTo0 text-2xl animate-delay-500 animate-infinite -ml-1"></i>
-				<i class="pi pi-angle-right animate-pulseTo0 text-2xl animate-delay-1000 animate-infinite -ml-1"></i>
-			</RouterLink>
+				<RouterLink
+					to="/gallery"
+					class="cursor-pointer block text-2xl uppercase text-surface-0 hover:scale-125 transition-all duration-300 filter-shadow p-10"
+				>
+					ACCESS THE {{ $t("lychee.GALLERY") }}
+					<i class="pi pi-angle-right animate-pulseTo0 text-2xl animate-infinite"></i>
+					<i class="pi pi-angle-right animate-pulseTo0 text-2xl animate-delay-500 animate-infinite -ml-1"></i>
+					<i class="pi pi-angle-right animate-pulseTo0 text-2xl animate-delay-1000 animate-infinite -ml-1"></i>
+				</RouterLink>
 			</div>
 		</div>
 		<LandingFooter

resources/js/views/gallery-panels/Albums.vue

@@ -1,6 +1,7 @@
 <template>
 	<LoginModal v-if="user?.id === null" :visible="isLoginOpen" @logged-in="refresh" />
 	<UploadPanel v-if="canUpload" :visible="isUploadOpen" @close="isUploadOpen = false" :album-id="null" />
+	<ImportFromServer v-if="canUpload" :visible="isImportFromServerOpen" @close="isImportFromServerOpen = false" />
 	<Toolbar class="w-full border-0">
 		<template #start>
 			<Button
@@ -77,6 +78,7 @@ import { useLycheeStateStore } from "@/stores/LycheeState";
 import UploadPanel from "@/components/modals/UploadPanel.vue";
 import { onKeyStroke } from "@vueuse/core";
 import ContextMenu from "primevue/contextmenu";
+import ImportFromServer from "@/components/modals/ImportFromServer.vue";
 
 const addmenu = ref();
 
@@ -108,7 +110,7 @@ const addMenu = ref([
 	{
 		label: "lychee.IMPORT_SERVER",
 		icon: "pi pi-server",
-		callback: () => {},
+		callback: () => (isImportFromServerOpen.value = true),
 	},
 	{
 		label: "lychee.NEW_ALBUM",
@@ -124,6 +126,7 @@ const addMenu = ref([
 const title = ref("Albums");
 const isLoginOpen = ref(false);
 const isUploadOpen = ref(false);
+const isImportFromServerOpen = ref(false);
 const user = ref(undefined) as Ref<undefined | App.Http.Resources.Models.UserResource>;
 const canUpload = computed(() => user.value?.id !== null);