From 740bfba78a07e96983f7d211dfbd12ac444f1511 Mon Sep 17 00:00:00 2001
From: DecafDev <40307803+decaf-dev@users.noreply.github.com>
Date: Fri, 26 Jul 2024 20:20:41 -0600
Subject: [PATCH] feat: emphasize feed card content

---
 src/svelte/app/components/feed-card.svelte    | 90 +++++++++----------
 src/svelte/app/components/feed-view.svelte    |  1 -
 ...g content.md => Long content with tags.md} | 11 +++
 3 files changed, 52 insertions(+), 50 deletions(-)
 rename test-vault/{Long content.md => Long content with tags.md} (93%)

diff --git a/src/svelte/app/components/feed-card.svelte b/src/svelte/app/components/feed-card.svelte
index 6535696..eb4b64b 100644
--- a/src/svelte/app/components/feed-card.svelte
+++ b/src/svelte/app/components/feed-card.svelte
@@ -24,17 +24,16 @@
 	import Icon from "src/svelte/shared/components/icon.svelte";
 	import { getIconIdForFile } from "../services/file-icon";
 	import { PluginEvent } from "src/event/types";
-	import Wrap from "src/svelte/shared/components/wrap.svelte";
 	import { openInCurrentTab } from "../services/open-file";
 	import { openContextMenu } from "../services/context-menu";
 	import { HOVER_LINK_SOURCE_ID } from "src/constants";
 	import { SCREEN_SIZE_LG, SCREEN_SIZE_MD } from "../constants";
+	import Spacer from "src/svelte/shared/components/spacer.svelte";
 
 	export let displayName: string;
 	export let baseName: string;
 	export let extension: string;
 	export let path: string;
-	export let tags: string[] | null;
 	export let createdMillis: number;
 	export let content: string | null;
 	export let isFavorite: boolean | null;
@@ -249,57 +248,50 @@
 	on:focus={() => {}}
 	on:mouseover={handleCardMouseOver}
 >
-	<Stack spacing="sm" direction="column">
-		<div
-			tabindex="0"
-			role="link"
-			class="vault-explorer-feed-card__title"
-			on:focus={() => {}}
-			on:click={(e) => {
+	<div
+		tabindex="0"
+		role="link"
+		class="vault-explorer-feed-card__title"
+		on:focus={() => {}}
+		on:click={(e) => {
+			e.preventDefault();
+			handleTitleClick();
+		}}
+		on:contextmenu={(e) => {
+			e.preventDefault();
+			handleTitleContextMenu(e);
+		}}
+		on:keydown={(e) => {
+			if (e.key === "Enter" || e.key === " ") {
 				e.preventDefault();
 				handleTitleClick();
-			}}
-			on:contextmenu={(e) => {
-				e.preventDefault();
-				handleTitleContextMenu(e);
-			}}
-			on:keydown={(e) => {
-				if (e.key === "Enter" || e.key === " ") {
-					e.preventDefault();
-					handleTitleClick();
-				}
-			}}
+			}
+		}}
+	>
+		<Stack spacing="xs">
+			{#if enableFileIcons}
+				<Icon iconId={getIconIdForFile(baseName, extension)} />
+			{/if}
+			<div class="vault-explorer-feed-card__title-text">
+				{displayName}
+			</div>
+		</Stack>
+	</div>
+	{#if displayContent != null && displayContent.length > 0}
+		<Spacer size="sm" />
+		<div
+			class="vault-explorer-feed-card__content"
+			style="-webkit-line-clamp: {currentLineClamp};"
 		>
-			<Stack spacing="xs">
-				{#if enableFileIcons}
-					<Icon iconId={getIconIdForFile(baseName, extension)} />
-				{/if}
-				<div class="vault-explorer-feed-card__title-text">
-					{displayName}
-				</div>
-			</Stack>
+			{@html displayContent}
 		</div>
-		{#if displayContent != null && displayContent.length > 0}
-			<div
-				class="vault-explorer-feed-card__content"
-				style="-webkit-line-clamp: {currentLineClamp};"
-			>
-				{@html displayContent}
-			</div>
-		{/if}
-		{#if tags != null}
-			<div class="vault-explorer-feed-card__tags">
-				<Wrap spacingX="xs" spacingY="xs">
-					{#each tags as tag}
-						<Tag name={tag} variant="unstyled" />
-					{/each}
-				</Wrap>
-			</div>
-		{/if}
-		<div class="vault-explorer-feed-card__creation-time">
-			{creationString}
-		</div>
-	</Stack>
+	{/if}
+	{#if displayContent != null}
+		<Spacer size="sm" />
+	{/if}
+	<div class="vault-explorer-feed-card__creation-time">
+		{creationString}
+	</div>
 </div>
 
 <style>
diff --git a/src/svelte/app/components/feed-view.svelte b/src/svelte/app/components/feed-view.svelte
index 62484f1..a6bb75b 100644
--- a/src/svelte/app/components/feed-view.svelte
+++ b/src/svelte/app/components/feed-view.svelte
@@ -44,7 +44,6 @@
 				extension={fileRenderData.extension}
 				baseName={fileRenderData.baseName}
 				path={fileRenderData.path}
-				tags={fileRenderData.tags}
 				content={fileRenderData.content}
 				createdMillis={fileRenderData.createdMillis}
 				isFavorite={fileRenderData.isFavorite}
diff --git a/test-vault/Long content.md b/test-vault/Long content with tags.md
similarity index 93%
rename from test-vault/Long content.md
rename to test-vault/Long content with tags.md
index 5fae5c0..66a6469 100644
--- a/test-vault/Long content.md	
+++ b/test-vault/Long content with tags.md	
@@ -1,3 +1,14 @@
+---
+tags:
+  - tag1
+  - tag2
+  - tag3
+  - tag4
+  - tag5
+  - tag6
+  - tag7
+  - tag8
+---
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui justo, tempus eu vulputate eu, fringilla et nunc. Duis id nunc vel nulla fermentum varius. Integer mattis metus eu tellus commodo maximus. In hac habitasse platea dictumst. Curabitur id luctus nisi, ac ornare ante. Pellentesque quis elit nec nibh tempor tempor et in sapien. Suspendisse in lacus nec sem luctus consequat suscipit a tellus.
 
 Sed ornare est sed erat pulvinar, a rhoncus urna volutpat. Nunc sed gravida dui, nec venenatis justo. Cras tempor porttitor odio posuere tincidunt. Donec vitae lectus commodo, consequat ipsum sit amet, pharetra eros. Aliquam ac lacus risus. Fusce pretium viverra tellus, non rutrum sem cursus vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus eget sem metus.