Show last edited item

src/lib/components/SingleItemCard.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { IBasicItemPopulated } from "$lib/server/db/models/basicItem.js";
+	import { createEventDispatcher } from "svelte";
+	import ItemCardOptions from "./ItemCardOptions.svelte";
+	import "$lib/styles/main.css";
+
+	let { item = $bindable() } = $props<{
+		item: IBasicItemPopulated;
+	}>();
+
+	const dispatch = createEventDispatcher();
+
+	function onCreated() {
+		dispatch("itemCreated");
+	}
+</script>
+
+<div class="single-item-card-flex glass" role="navigation">
+	<a href={`/view/${item._id}`} class="single-item-card glass">
+		<div class="single-item-card-subcard single-item-card-main-row">
+			<div class="single-item-card-text-block">
+				<div class="single-important-text">
+					{item.name}
+				</div>
+				<div class="single-sub-text">
+					{item.description || "No Description"}
+				</div>
+			</div>
+			<div class="single-sub-text single-item-card-location">
+				Location: {item.parentItem?.name || "None"}
+			</div>
+		</div>
+	</a>
+	<ItemCardOptions item={item} on:itemCreated={onCreated} />
+</div>

src/lib/components/SingleItemCardWindow.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { IBasicItemPopulated } from "$lib/server/db/models/basicItem.js";
+	import { createEventDispatcher } from "svelte";
+	import SingleItemCard from "./SingleItemCard.svelte";
+	import Window from "./Window.svelte";
+
+	let {
+		item,
+		initialX = 520,
+		initialY = 64,
+		windowTitle,
+		windowClass = "page-component",
+		showClose = true,
+		showOpenInNewTab = true,
+		showCollapse = true,
+	} = $props<{
+		item: IBasicItemPopulated;
+		initialX?: number;
+		initialY?: number;
+		windowTitle?: string;
+		windowClass?: string;
+		showClose?: boolean;
+		showOpenInNewTab?: boolean;
+		showCollapse?: boolean;
+	}>();
+
+	const dispatch = createEventDispatcher();
+
+	function handleItemCreated() {
+		dispatch("itemCreated");
+	}
+
+	let resolvedWindowClass = $derived(
+		`${windowClass} single-item-card-window`.trim(),
+	);
+</script>
+
+<Window
+	{initialX}
+	{initialY}
+	windowTitle={windowTitle ?? `Item: ${item.name}`}
+	windowClass={resolvedWindowClass}
+	{showClose}
+	{showOpenInNewTab}
+	{showCollapse}>
+	<SingleItemCard {item} on:itemCreated={handleItemCreated} />
+</Window>
+
+<style>
+	:global(.single-item-card-window.floating-container) {
+		width: min(760px, calc(100vw - 2rem));
+		max-width: min(860px, calc(100vw - 2rem));
+		min-width: min(640px, calc(100vw - 2rem));
+	}
+</style>

src/lib/styles/main.css

@@ -46,6 +46,18 @@
   border-radius: 10px;
 }
 
+.last-edited-item-panel {
+  width: 50%;
+  max-width: 50%;
+}
+
+@media (max-width: 768px) {
+  .last-edited-item-panel {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
 /* For components inset within other components*/
 .internal-component {
   margin: 1rem 0;
@@ -1134,4 +1146,65 @@ input[type="file"][accept*="image"] {
 ::backdrop {
   background: color-mix(in oklch, var(--color-surface-900) 70%, transparent);
   z-index: 9998;
-}
+}
+
+
+/* for SingleItemCard */
+
+.single-item-card-flex {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.single-item-card {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding: 1rem;
+		border-radius: 0.5rem;
+		background: var(--glass-color, rgba(255, 255, 255, 0.1));
+		text-decoration: none;
+		color: inherit;
+		transition: background-color 0.2s ease;
+		flex: 1;
+	}
+
+	.single-item-card:hover {
+		background: var(--glass-hover-color, rgba(255, 255, 255, 0.15));
+	}
+
+	.single-item-card-subcard {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.single-item-card-main-row {
+		justify-content: space-between;
+		gap: 1.5rem;
+	}
+
+	.single-item-card-text-block {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		text-align: left;
+		min-width: 0;
+	}
+
+	.single-item-card-location {
+		margin-left: auto;
+		text-align: right;
+		white-space: nowrap;
+	}
+
+	.single-important-text {
+		font-weight: 600;
+		font-size: 1.1rem;
+	}
+
+	.single-sub-text {
+		font-size: 0.9rem;
+		opacity: 0.7;
+	}

src/routes/+page.svelte

@@ -4,6 +4,7 @@
 	import Dialog from "$lib/components/Dialog.svelte";
 	import EditItem from "$lib/components/EditItem.svelte";
 	import ItemContainer from "$lib/components/ItemContainer.svelte";
+	import SingleItemCard from "$lib/components/SingleItemCard.svelte";
 	import ItemDetails from "$lib/components/ItemDetails.svelte";
 	import ItemTree from "$lib/components/ItemTree.svelte";
 	import Menu from "$lib/components/Menu.svelte";
@@ -22,6 +23,7 @@
 	import "$lib/styles/main.css";
 	import { Switch } from "@skeletonlabs/skeleton-svelte";
 	import { onDestroy, onMount } from "svelte";
+	import SingleItemCardWindow from "$lib/components/SingleItemCardWindow.svelte";
 
 	let {
 		searchQuery = "",
@@ -34,6 +36,7 @@
 	}>();
 
 	let searchResults = $state<IBasicItemPopulated[]>([]);
+	let lastUpdatedItem = $state<IBasicItemPopulated | null>(null);
 	let sortOption = $state<string>("alphabetical");
 	let exactSearch = $state<boolean>(false);
 	let viewMode = $state<string>("list");
@@ -104,6 +107,7 @@
 			const data = await response.json();
 			searchResults = data as IBasicItemPopulated[];
 			itemCount = searchResults.length;
+			getLastUpdatedItem();
 			if (showItemTree && itemTreeRef) {
 				await itemTreeRef.reload();
 			}
@@ -112,6 +116,29 @@
 		}
 	}
 
+	async function getLastUpdatedItem(){
+		try {
+			const response = await fetch(
+				`/api/items/search?` +
+					`name=${encodeURIComponent('')}&` +
+					`sort=${encodeURIComponent('recentlyChanged')}&` +
+					`exact=${'false'}`,
+				{
+					method: "GET",
+					headers: { "Content-Type": "application/json" },
+				},
+			);
+
+			if (!response.ok) throw new Error("Failed to fetch items");
+
+			const data = await response.json();
+			const fullSearchResults = data as IBasicItemPopulated[];
+			lastUpdatedItem = fullSearchResults[0] ?? null;
+		} catch (err) {
+			console.error("Home: Error loading last updated item:", err);
+		}
+	}
+
 	function toggleView() {
 		if (viewMode === "list") {
 			viewMode = "tree";
@@ -207,6 +234,7 @@
 	onMount(() => {
 		document.title = "Home - AssetAtlas";
 		restoreToggleStates();
+		void getLastUpdatedItem();
 		unsubscribe = topBarHeight.subscribe((value) => {
 			currentTopBarHeight = value;
 		});
@@ -278,9 +306,20 @@
 			</Switch>
 		</div>
 	</div>
+
+
 
 	{#if viewMode === "list"}
 		{#if itemCount > 0}
+			{#if lastUpdatedItem}
+				<div class="page-component glass last-edited-item-panel">
+					<span class="important-text" style="margin-left:40px"> Last Edited Item: </span>
+
+					<SingleItemCard item={lastUpdatedItem!} on:itemCreated={getLastUpdatedItem} />
+
+
+				</div>
+			{/if}
 			<ItemContainer
 				items={searchResults}
 				on:itemCreated={() => handleSearch(searchQuery)}
@@ -319,6 +358,16 @@
 			</div>
 		{/if}
 	{:else if showItemTree}
+		{#if lastUpdatedItem}
+
+			<SingleItemCardWindow
+				item={lastUpdatedItem!}
+				initialX={520}
+				initialY={64}
+				on:itemCreated={getLastUpdatedItem} />
+
+
+		{/if}
 		<Window
 			initialX={32}
 			initialY={64}