From f698d7800cb86e79c07e1801fd432fe5bdf24ed3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Thu, 29 Dec 2022 12:48:26 +0100
Subject: [PATCH] fix(app): Fix inconsistencies in list items and sidebar menus
 (#1051)

* fix(app): Fix minor issues in home page list

* fix(app): Remove inconsistencies in sidebar menus
---
 frontend/src/lib/components/Dropdown.svelte   |  3 +-
 frontend/src/lib/components/Star.svelte       | 25 +++++++----
 .../lib/components/common/table/AppRow.svelte |  1 +
 .../components/common/table/FlowRow.svelte    |  1 +
 .../lib/components/common/table/Row.svelte    | 17 ++++----
 .../components/common/table/ScriptRow.svelte  | 19 ++++-----
 .../src/lib/components/home/ItemsList.svelte  |  2 +-
 .../components/sidebar/FavoriteMenu.svelte    | 42 ++++++++++---------
 .../components/sidebar/WorkspaceMenu.svelte   | 32 +++++++-------
 .../src/routes/(root)/(logged)/+layout.svelte |  2 +-
 10 files changed, 79 insertions(+), 65 deletions(-)

diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte
index c8e8c53a32..3fb03e9074 100644
--- a/frontend/src/lib/components/Dropdown.svelte
+++ b/frontend/src/lib/components/Dropdown.svelte
@@ -12,12 +12,13 @@
 	export let dropdownItems: DropdownItem[]
 	export let name: string | undefined = undefined
 	export let placement: Placement = 'bottom-start'
+	export let btnClasses = '!text-blue-500 bg-transparent'
 
 	const dispatch = createEventDispatcher()
 </script>
 
 <Menu {placement} let:close>
-	<Button color="light" size="xs" btnClasses="!text-blue-500 bg-transparent" slot="trigger">
+	<Button color="light" size="xs" {btnClasses} slot="trigger">
 		{#if !$$slots.default}
 			<Icon data={faEllipsisH} scale={1.2} />
 		{:else}
diff --git a/frontend/src/lib/components/Star.svelte b/frontend/src/lib/components/Star.svelte
index 922301596b..c889313fc3 100644
--- a/frontend/src/lib/components/Star.svelte
+++ b/frontend/src/lib/components/Star.svelte
@@ -2,16 +2,16 @@
 	import { FavoriteService } from '$lib/gen'
 	import { starStore } from '$lib/stores'
 	import { sendUserToast } from '$lib/utils'
-	import { faStar } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
-	import Icon from 'svelte-awesome'
-	import { Star } from 'lucide-svelte'
+	import { Star, StarOff } from 'lucide-svelte'
 
 	export let path: string
 	export let kind: 'flow' | 'app' | 'script'
 	export let starred = false
 	export let workspace_id: string
 
+	let buttonHover = false
+
 	async function onClick() {
 		if (starred) {
 			await FavoriteService.unstar({
@@ -33,12 +33,19 @@
 	const dispatch = createEventDispatcher()
 </script>
 
-<button on:click|preventDefault={onClick} class="mx-1">
+<button
+	on:click|preventDefault={onClick}
+	on:mouseenter={() => (buttonHover = true)}
+	on:mouseleave={() => (buttonHover = false)}
+	class="p-2"
+>
 	{#if starred}
-		<div>
-			<Icon data={faStar} class="hover:text-gray-300" scale={1.1} />
-		</div>
+		{#if buttonHover}
+			<StarOff size={18} fill="currentcolor" />
+		{:else}
+			<Star size={18} fill="currentcolor" />
+		{/if}
 	{:else}
-		<Star size={18} class="hover:bg-gray-200" />
+		<Star size={18} fill={buttonHover ? 'currentcolor' : 'none'} />
 	{/if}
-</button>
+</button>
\ No newline at end of file
diff --git a/frontend/src/lib/components/common/table/AppRow.svelte b/frontend/src/lib/components/common/table/AppRow.svelte
index ce51e41896..d105cece89 100644
--- a/frontend/src/lib/components/common/table/AppRow.svelte
+++ b/frontend/src/lib/components/common/table/AppRow.svelte
@@ -59,6 +59,7 @@
 		</span>
 		<Dropdown
 			placement="bottom-end"
+			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20"
 			dropdownItems={[
 				{
 					displayName: 'View app',
diff --git a/frontend/src/lib/components/common/table/FlowRow.svelte b/frontend/src/lib/components/common/table/FlowRow.svelte
index e05b580aa0..c2950494e3 100644
--- a/frontend/src/lib/components/common/table/FlowRow.svelte
+++ b/frontend/src/lib/components/common/table/FlowRow.svelte
@@ -114,6 +114,7 @@
 
 		<Dropdown
 			placement="bottom-end"
+			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20"
 			dropdownItems={[
 				{
 					displayName: 'View flow',
diff --git a/frontend/src/lib/components/common/table/Row.svelte b/frontend/src/lib/components/common/table/Row.svelte
index c2ad77cf8b..caffaf4f68 100644
--- a/frontend/src/lib/components/common/table/Row.svelte
+++ b/frontend/src/lib/components/common/table/Row.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
-	import { goto } from '$app/navigation'
 	import Star from '$lib/components/Star.svelte'
-
 	import { createEventDispatcher } from 'svelte'
-
 	import RowIcon from './RowIcon.svelte'
 
 	export let marked: string | undefined
@@ -24,10 +21,10 @@
 	}[kind]
 </script>
 
-<div class="hover:bg-gray-50 w-full inline-flex items-center p-4 gap-4 {color} rounded-md">
+<div class="hover:bg-gray-50 w-full inline-flex items-center p-4 gap-4 first-of-type:!border-t-0 {color}">
 	<RowIcon {href} {kind} />
 
-	<a {href} class="w-full min-w-0 grow hover:underline decoration-gray-400">
+	<a {href} class="min-w-0 grow hover:underline decoration-gray-400">
 		<div class="text-gray-900 flex-wrap text-left text-md font-semibold mb-1 truncate ">
 			{#if marked}
 				{@html marked}
@@ -39,15 +36,17 @@
 			{path}
 		</div>
 	</a>
-	<div class="w-96 hidden lg:flex flex-row max-w-xs gap-1 items-start flex-wrap">
-		<slot name="badges" />
-	</div>
+	{#if $$slots.badges}
+		<div class="w-32 hidden lg:flex flex-row gap-1 items-start flex-wrap">
+			<slot name="badges" />
+		</div>
+	{/if}
 
 	<div class="flex gap-1 items-center justify-end">
 		<slot name="actions" />
 	</div>
 	{#if canFavorite}
-		<div class="text-left text-sm font-semibold text-gray-900">
+		<div class="center-center h-full text-sm font-semibold text-gray-900">
 			<Star
 				{kind}
 				{path}
diff --git a/frontend/src/lib/components/common/table/ScriptRow.svelte b/frontend/src/lib/components/common/table/ScriptRow.svelte
index a202650a1f..eb14e9eac3 100644
--- a/frontend/src/lib/components/common/table/ScriptRow.svelte
+++ b/frontend/src/lib/components/common/table/ScriptRow.svelte
@@ -67,17 +67,15 @@
 	on:change
 >
 	<svelte:fragment slot="badges">
-		<span class="hidden md:block">
-			<SharedBadge {canWrite} extraPerms={extra_perms} />
-			{#if lock_error_logs}
-				<Badge color="red" baseClass="border border-red-200">Deployment failed</Badge>
-			{/if}
-			{#if kind !== 'script'}
-				<Badge color="gray" baseClass="border">{capitalize(kind)}</Badge>
-			{/if}
+		<SharedBadge {canWrite} extraPerms={extra_perms} />
+		{#if lock_error_logs}
+			<Badge color="red" baseClass="border border-red-200">Deployment failed</Badge>
+		{/if}
+		{#if kind !== 'script'}
+			<Badge color="gray" baseClass="border">{capitalize(kind)}</Badge>
+		{/if}
 
-			<LanguageBadge {language} />
-		</span>
+		<LanguageBadge {language} />
 	</svelte:fragment>
 
 	<svelte:fragment slot="actions">
@@ -132,6 +130,7 @@
 		</span>
 		<Dropdown
 			placement="bottom-end"
+			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20"
 			dropdownItems={[
 				{
 					displayName: 'View script',
diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte
index 7d4f0dd160..5ff36245ba 100644
--- a/frontend/src/lib/components/home/ItemsList.svelte
+++ b/frontend/src/lib/components/home/ItemsList.svelte
@@ -294,7 +294,7 @@
 		{:else if filteredItems.length === 0}
 			<NoItemFound />
 		{:else}
-			<div class="border rounded-md divide-y divide-gray-200 mb-80">
+			<div class="border rounded-md overflow-hidden divide-y divide-gray-200 mb-80">
 				<!-- <VirtualList {items} let:item bind:start bind:end> -->
 				{#each items ?? [] as item, i (item.type + '/' + item.path)}
 					{#if item.type == 'script'}
diff --git a/frontend/src/lib/components/sidebar/FavoriteMenu.svelte b/frontend/src/lib/components/sidebar/FavoriteMenu.svelte
index 5e52e33f3e..b2e38a56a8 100644
--- a/frontend/src/lib/components/sidebar/FavoriteMenu.svelte
+++ b/frontend/src/lib/components/sidebar/FavoriteMenu.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { classNames } from '$lib/utils'
-	import { faCode, faStar, faTelevision, faBarsStaggered } from '@fortawesome/free-solid-svg-icons'
+	import { Code2, LayoutDashboard } from 'lucide-svelte'
+	import { faStar, faBarsStaggered } from '@fortawesome/free-solid-svg-icons'
 	import Icon from 'svelte-awesome'
 
 	import Menu from '../common/menu/Menu.svelte'
@@ -13,7 +14,7 @@
 	}[]
 </script>
 
-<Menu placement="bottom-start" let:close noMinW>
+<Menu placement="bottom-start" let:close>
 	<button
 		slot="trigger"
 		type="button"
@@ -31,29 +32,32 @@
 		{/if}
 	</button>
 
-	<div class="divide-y divide-gray-100  overflow-hidden" role="none">
-		<table class="w-full">
-			{#each favoriteLinks ?? [] as favorite (favorite.href)}
-				<tr>
-					<a href={favorite.href} on:click={close} class="inline-flex flex-row px-4 py-2">
-						<td class="center-center">
+	<div class="overflow-hidden" role="none">
+		{#if !favoriteLinks.length}
+			<div class="py-1" role="none">
+				<div class="text-gray-600 block px-4 py-2 text-xs" role="menuitem" tabindex="-1">
+					Add Scripts/Flows/Apps here by starring them
+				</div>
+			</div>
+		{:else}
+			<div class="py-1 w-full max-w-full">
+				{#each favoriteLinks ?? [] as favorite (favorite.href)}
+					<a href={favorite.href} on:click={close} class="w-full inline-flex flex-row px-4 py-2 hover:bg-gray-100">
+						<span class="center-center">
 							{#if favorite.kind == 'script'}
-								<Icon data={faCode} />
+								<Code2 size={16} />
 							{:else if favorite.kind == 'flow'}
 								<Icon data={faBarsStaggered} />
 							{:else if favorite.kind == 'app'}
-								<Icon data={faTelevision} />
+								<LayoutDashboard size={16} />
 							{/if}
-						</td>
-						<td class="text-gray-800 ml-2 grow text-xs center-center truncate">{favorite.label}</td>
+						</span>
+						<span class="text-gray-800 ml-2 grow min-w-0 text-xs truncate">
+							{favorite.label}
+						</span>
 					</a>
-				</tr>
-			{/each}
-		</table>
-		<div class="py-1" role="none">
-			<div class="text-gray-600 block px-4 py-2 text-xs" role="menuitem" tabindex="-1">
-				Add Scripts/Flows/Apps here by starring them
+				{/each}
 			</div>
-		</div>
+		{/if}
 	</div>
 </Menu>
diff --git a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
index dc884654cc..61652ad7f7 100644
--- a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
+++ b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
@@ -27,22 +27,24 @@
 	</button>
 
 	<div class="divide-y divide-gray-100" role="none">
-		<table class="w-full">
-			{#each $userWorkspaces as workspace}
-				<tr
-					class="text-xs cursor-pointer"
-					on:click={() => {
-						workspaceStore.set(workspace.id)
-						close()
-					}}
-				>
-					<td class="text-gray-500 font-mono pl-4 pr-1 py-2 text-xs whitespace-nowrap"
-						>{workspace.id}</td
+		<div class="py-1">
+			<table class="w-full">
+				{#each $userWorkspaces as workspace}
+					<tr
+						class="text-xs cursor-pointer hover:bg-gray-100"
+						on:click={() => {
+							workspaceStore.set(workspace.id)
+							close()
+						}}
 					>
-					<td class="text-gray-700 pr-4 py-2 w-full">{workspace.name}</td>
-				</tr>
-			{/each}
-		</table>
+						<td class="text-gray-500 font-mono pl-4 pr-1 py-2 text-xs whitespace-nowrap"
+							>{workspace.id}</td
+						>
+						<td class="text-gray-700 pr-4 py-2 w-full">{workspace.name}</td>
+					</tr>
+				{/each}
+			</table>
+		</div>
 		<div class="py-1" role="none">
 			<a
 				href="/user/create_workspace"
diff --git a/frontend/src/routes/(root)/(logged)/+layout.svelte b/frontend/src/routes/(root)/(logged)/+layout.svelte
index d3faa11cf8..bfbc65098b 100644
--- a/frontend/src/routes/(root)/(logged)/+layout.svelte
+++ b/frontend/src/routes/(root)/(logged)/+layout.svelte
@@ -185,7 +185,7 @@
 				isCollapsed ? 'md:w-12' : 'md:w-40'
 			)}
 		>
-			<div class="flex-1 flex flex-col min-h-0 h-screen overflow-y-auto shadow-lg bg-[#2e3440]">
+			<div class="flex-1 flex flex-col min-h-0 h-screen shadow-lg bg-[#2e3440]">
 				<button
 					on:click={() => {
 						goto('/')