#10 - Added changes according to feedback

src/components/item/CreateShortcutModal.vue

@@ -1,6 +1,6 @@
 <template>
 	<BaseModal ref="modal" @close="close">
-		<h3 class="mb-4 text-xl font-medium">{{ t('fileBrowser.shortcut.create') }}</h3>
+		<h3 class="mb-4 text-xl font-medium">{{ t('fileBrowser.shortcut.action.create') }}</h3>
 		<hr />
 		<div class="mb-5">
 			<div
@@ -10,7 +10,7 @@
 				@mouseleave="hideChildArrow(0)"
 				id="folder0"
 			>
-				<h1 class="ml-2 mr-auto">Mine Filer</h1>
+				<h1 class="ml-2 mr-auto">{{ t('fileBrowser.shortcut.link.myfiles') }}</h1>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					id="svg0"
@@ -56,7 +56,7 @@
 			@click="createShortcut()"
 			:color="ButtonColor.Primary"
 			class="dark:brightness-75"
-			>{{ t('fileBrowser.shortcut.add') }}</BaseButton
+			>{{ t('fileBrowser.shortcut.action.create') }}</BaseButton
 		>
 	</BaseModal>
 </template>

src/components/item/docs/Docs.vue

@@ -2,27 +2,20 @@
 	<div class="relative">
 		<!-- Docs -->
 		<a
-			:href="url(`u/docs/${modelValue.id}`)"
+			:href="
+				modelValue instanceof ShortcutClass
+					? url(`u/docs/${modelValue.linkedItemId}`)
+					: url(`u/docs/${modelValue.id}`)
+			"
 			class="block max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
 			v-on:contextmenu.prevent="docsContextMenu?.openMenu"
-			v-if="!(modelValue instanceof ShortcutClass)"
-		>
-			<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-				{{ modelValue.name }}
-			</h5>
-		</a>
-		<a
-			:href="url(`u/docs/${modelValue.linkedItemId}`)"
-			class="block max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
-			v-on:contextmenu.prevent="docsContextMenu?.openMenu"
-			v-else
 		>
 			<h5
 				class="mb-2 flex items-center gap-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
 			>
 				{{ modelValue.name }}
-
 				<svg
+					v-if="modelValue instanceof ShortcutClass"
 					class="h-6 w-6 text-gray-800 dark:text-white"
 					aria-hidden="true"
 					xmlns="http://www.w3.org/2000/svg"
@@ -41,15 +34,11 @@
 			<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
 				<li>
 					<a
-						v-if="!(modelValue instanceof ShortcutClass)"
-						:href="url(`u/docs/${modelValue.id}`)"
-						target="_blank"
-						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-						>{{ t('fileBrowser.docs.action.openInNewTab') }}</a
-					>
-					<a
-						v-else
-						:href="url(`u/docs/${modelValue.linkedItemId}`)"
+						:href="
+							modelValue instanceof ShortcutClass
+								? url(`u/docs/${modelValue.linkedItemId}`)
+								: url(`u/docs/${modelValue.id}`)
+						"
 						target="_blank"
 						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
 						>{{ t('fileBrowser.docs.action.openInNewTab') }}</a
@@ -68,15 +57,15 @@
 						href="javascript:void(0)"
 						@click="editShortcutModal?.open()"
 						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-						>{{ t('fileBrowser.shortcut.rename') }}</a
+						>{{ t('fileBrowser.shortcut.action.edit') }}</a
 					>
 				</li>
 				<li v-if="!(modelValue instanceof ShortcutClass)">
 					<a
 						href="javascript:void(0)"
 						@click="createShortcutModal?.open()"
 						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-						>{{ t('fileBrowser.shortcut.create') }}</a
+						>{{ t('fileBrowser.shortcut.action.create') }}</a
 					>
 				</li>
 				<li>

src/components/item/docs/EditShortcutModal.vue

@@ -1,6 +1,6 @@
 <template>
 	<BaseModal ref="modal" @close="close">
-		<h3 class="mb-4 text-xl font-medium">{{ t('fileBrowser.shortcut.rename') }}</h3>
+		<h3 class="mb-4 text-xl font-medium">{{ t('fileBrowser.shortcut.action.edit') }}</h3>
 		<form class="space-y-6" @submit.prevent="updateFile" ref="form">
 			<BaseInput
 				id="docsName"

src/components/item/file/EditShortcutModal.vue

@@ -1,6 +1,6 @@
 <template>
 	<BaseModal ref="modal" @close="close">
-		<h3 class="mb-4 text-xl font-medium">{{ t('fileBrowser.shortcut.rename') }}</h3>
+		<h3 class="mb-4 text-xl font-medium">{{ t('fileBrowser.shortcut.action.edit') }}</h3>
 		<form class="space-y-6" @submit.prevent="updateFile" ref="form">
 			<BaseInput
 				id="fileName"

src/components/item/file/File.vue

@@ -33,7 +33,7 @@
 						href="javascript:void(0)"
 						@click="editShortcutModal?.open()"
 						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-						>{{ t('fileBrowser.shortcut.rename') }}</a
+						>{{ t('fileBrowser.shortcut.action.edit') }}</a
 					>
 				</li>
 				<li v-else>
@@ -49,7 +49,7 @@
 						href="javascript:void(0)"
 						@click="createShortcutModal?.open()"
 						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-						>{{ t('fileBrowser.shortcut.create') }}</a
+						>{{ t('fileBrowser.shortcut.action.create') }}</a
 					>
 				</li>
 				<li>

src/components/item/folder/EditShortcutModal.vue

@@ -1,6 +1,6 @@
 <template>
 	<BaseModal ref="modal" @close="close">
-		<h3 class="mb-4 text-xl font-medium">{{ t('fileBrowser.shortcut.rename') }}</h3>
+		<h3 class="mb-4 text-xl font-medium">{{ t('fileBrowser.shortcut.action.edit') }}</h3>
 		<form class="space-y-6" @submit.prevent="updateFolder" ref="form">
 			<BaseInput
 				id="folderName"

src/components/item/folder/Folder.vue

@@ -2,22 +2,12 @@
 	<div class="relative">
 		<!-- Folder -->
 		<a
-			:href="url(`u/folder/${modelValue.id}`)"
+			:href="
+				modelValue instanceof ShortcutClass
+					? url(`u/folder/${modelValue.linkedItemId}`)
+					: url(`u/folder/${modelValue.id}`)
+			"
 			v-on:contextmenu.prevent="folderContextMenu?.openMenu"
-			v-if="!(modelValue instanceof ShortcutClass)"
-		>
-			<button
-				type="button"
-				:class="classes"
-				class="h-[40px] rounded-lg bg-gradient-to-br px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-bl focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
-			>
-				{{ modelValue.name }}
-			</button>
-		</a>
-		<a
-			:href="url(`u/folder/${modelValue.linkedItemId}`)"
-			v-on:contextmenu.prevent="folderContextMenu?.openMenu"
-			v-else
 		>
 			<button
 				type="button"
@@ -31,6 +21,7 @@
 					xmlns="http://www.w3.org/2000/svg"
 					fill="currentColor"
 					viewBox="0 0 19 17"
+					v-if="modelValue instanceof ShortcutClass"
 				>
 					<path
 						d="M2.057 6.9a8.718 8.718 0 0 1 6.41-3.62v-1.2A2.064 2.064 0 0 1 9.626.2a1.979 1.979 0 0 1 2.1.23l5.481 4.308a2.107 2.107 0 0 1 0 3.3l-5.479 4.308a1.977 1.977 0 0 1-2.1.228 2.063 2.063 0 0 1-1.158-1.876v-.942c-5.32 1.284-6.2 5.25-6.238 5.44a1 1 0 0 1-.921.807h-.06a1 1 0 0 1-.953-.7A10.24 10.24 0 0 1 2.057 6.9Z"
@@ -44,15 +35,11 @@
 			<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
 				<li>
 					<a
-						v-if="modelValue instanceof ShortcutClass"
-						:href="url(`u/folder/${modelValue.linkedItemId}`)"
-						target="_blank"
-						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-						>{{ t('fileBrowser.shortcut.openInNewTab') }}</a
-					>
-					<a
-						v-else
-						:href="url(`u/folder/${modelValue.id}`)"
+						:href="
+							modelValue instanceof ShortcutClass
+								? url(`u/folder/${modelValue.linkedItemId}`)
+								: url(`u/folder/${modelValue.id}`)
+						"
 						target="_blank"
 						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
 						>{{ t('fileBrowser.folder.action.openInNewTab') }}</a
@@ -63,7 +50,7 @@
 						href="javascript:void(0)"
 						@click="editShortcutModal?.open()"
 						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-						>{{ t('fileBrowser.shortcut.rename') }}</a
+						>{{ t('fileBrowser.shortcut.action.edit') }}</a
 					>
 				</li>
 				<li v-else>
@@ -79,7 +66,7 @@
 						href="javascript:void(0)"
 						@click="createShortcutModal?.open()"
 						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-						>{{ t('fileBrowser.shortcut.create') }}</a
+						>{{ t('fileBrowser.shortcut.action.create') }}</a
 					>
 				</li>
 				<li>

src/lang/da.ts

@@ -121,10 +121,16 @@ export default {
 			},
 		},
 		shortcut: {
-			create: 'Opret genvej',
-			rename: 'Omdøb genvej',
-			add: 'Opret',
-			openInNewTab: 'Åben i nyt faneblad',
+			link: {
+				myfiles: 'Mine Filer',
+			},
+			action: {
+				create: 'Opret genvej',
+				edit: 'Omdøb genvej',
+				share: 'Del',
+				delete: 'Slet',
+				openInNewTab: 'Åben i nyt faneblad',
+			},
 		},
 	},
 	layout: {

src/lang/en.ts

@@ -99,12 +99,6 @@ export default {
 				pink: 'Pink',
 				rose: 'Rose',
 			},
-			shortcut: {
-				create: 'Create shortcut',
-				rename: 'Rename shortcut',
-				add: 'Create',
-				openInNewTab: 'Open in new tab',
-			},
 		},
 		docs: {
 			create: {
@@ -126,6 +120,18 @@ export default {
 				confirmDelete: 'Are you sure you want to delete this docs?',
 			},
 		},
+		shortcut: {
+			link: {
+				myfiles: 'My Files',
+			},
+			action: {
+				create: 'Create shortcut',
+				edit: 'Rename shortcut',
+				share: 'Share',
+				delete: 'Delete',
+				openInNewTab: 'Open in new tab',
+			},
+		},
 	},
 	layout: {
 		sr: {

src/lib/items/factory.ts

@@ -11,9 +11,7 @@ export class ItemFactory {
 		if (DocsClass.isDocs(object)) return new DocsClass(object);
 		if (ShortcutClass.isShortcut(object)) {
 			const shortcutClass = new ShortcutClass(object);
-
 			await shortcutClass.setLinkedItem(object.linkedItemId);
-
 			return shortcutClass;
 		}
 

src/lib/items/shortcuts.ts

@@ -2,14 +2,11 @@ import { api, fetchFromApi } from '@lib/helpers';
 import { ItemClass, type ItemType } from './items';
 import { FolderClass } from './folders';
 import { FileClass } from './files';
-import { DocsClass } from './docs';
+import { DocsClass, type DocsType } from './docs';
 
 export class ShortcutClass extends ItemClass {
 	public _linkedItemId: number;
 	public _linkedItem: FolderClass | FileClass | DocsClass | undefined;
-	public color: string | undefined;
-	public text: string | undefined;
-	public blobUrl: string | undefined;
 
 	constructor(shortcutObject: ShortcutType) {
 		super(shortcutObject);
@@ -28,17 +25,17 @@ export class ShortcutClass extends ItemClass {
 
 		const json = await response.json();
 
-		if (json.mimeType === 'application/vnd.cloudstore.folder') {
+		if (FolderClass.isFolder(json)) {
 			this._linkedItem = new FolderClass(json);
 			return;
 		}
 
-		if (json.mimeType === 'application/vnd.cloudstore.docs') {
+		if (DocsClass.isDocs(json)) {
 			this._linkedItem = new DocsClass(json);
 			return;
 		}
 
-		if ('blobUrl' in json && typeof json.blobUrl === 'string') {
+		if (FileClass.isFile(json)) {
 			this._linkedItem = new FileClass(json);
 		}
 	}
@@ -122,6 +119,8 @@ export class ShortcutClass extends ItemClass {
 		// MimeType
 		if (object.mimeType !== 'application/vnd.cloudstore.shortcut') return false;
 
+		if (!('linkedItemId' in object && typeof object.linkedItemId === 'number')) return false;
+
 		return true;
 	}
 
@@ -136,5 +135,5 @@ export class ShortcutClass extends ItemClass {
 
 export type ShortcutType = {
 	linkedItemId: number;
-	linkedItem: FileClass | ShortcutClass | undefined;
+	linkedItem: FolderClass | FileClass | DocsClass | undefined;
 } & ItemType;