From dab81b014bafc9bd7f8c462eee1f13f34dfec2af Mon Sep 17 00:00:00 2001
From: Karl Clement <539188+karlclement@users.noreply.github.com>
Date: Wed, 13 Nov 2024 11:12:51 -0800
Subject: [PATCH 1/4] Suggested rules

---
 .../repos/[repositoryId]/+page.server.ts      |  2 +
 .../[orgId]/repos/[repositoryId]/+page.svelte | 44 +++++++++++++------
 tailwind.config.ts                            | 14 ++++++
 3 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.server.ts b/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.server.ts
index d1bd1cd..abe4164 100644
--- a/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.server.ts
+++ b/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.server.ts
@@ -24,6 +24,8 @@ export const load: PageServerLoad = async ({ fetch, parent, params }) => {
 		payload.rules = repoRules.filter(r => r.is_public);
 		payload.customRules = repoRules.filter(r => !r.is_public);
 
+		console.log(">>> ", payload, " <<<");
+
 		return payload;
 	} catch (error: any) {
 		console.error('Error loading page:', error);
diff --git a/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte b/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte
index fa79506..186057f 100644
--- a/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte
+++ b/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte
@@ -27,11 +27,9 @@
 		<StatGroupItem title={'Coding Standards'} value={28} />
 	</StatGroup> -->
 
-	<div class="flex flex-row justify-between items-center">
-		<h2 class="text-xl font-semibold">Custom Rules</h2>
-		{#if customRules?.length}
-			<a href={getNewRuleRoute()} class="btn btn-sm btn-electric rounded-full">Create a Rule</a>
-		{/if}
+	<div class="flex flex-row items-center space-x-4">
+		<h2 class="text-xl font-semibold">Suggested Rules</h2>
+		<Tag clazz="bg-electric">4</Tag>
 	</div>
 
 	<div class="bg-neutral-900 divide-y divide-neutral-800 rounded border border-neutral-800">
@@ -41,8 +39,22 @@
 					<span>{rule.title}</span>
 				</ListItem>
 			{/each}
-		{:else}
-			<div class="p-6 flex flex-col items-center space-y-2">
+		{/if}
+	</div>
+
+	<div class="divider"></div>
+
+	{#if rules?.length}
+		<div class="flex flex-row justify-between items-center">
+			<h2 class="text-xl font-semibold">Code Review Rules</h2>
+			{#if customRules?.length}
+				<a href={getNewRuleRoute()} class="btn btn-sm btn-electric rounded-full">Create a Rule</a>
+			{/if}
+		</div>
+
+		<div class="space-y-2">
+			{#if !customRules?.length}
+			<div class="p-6 flex flex-col items-center space-y-2 bg-neutral-900 rounded border border-neutral-800">
 				<span>
 					<iconify-icon icon="lucide:file-check" class="text-5xl text-neutral-100"></iconify-icon>
 				</span>
@@ -52,14 +64,20 @@
 					<a href={getNewRuleRoute()} class="btn btn-sm btn-electric rounded-full">Create a Rule</a>
 				</div>
 			</div>
-		{/if}
-	</div>
-
-	{#if rules?.length}
-		<h2 class="text-xl font-semibold">Code Review Rules</h2>
+			{/if}
 
-		<div class="space-y-2">
 			<div class="bg-neutral-900 divide-y divide-neutral-800 rounded border border-neutral-800">
+
+				<!-- CUSTOM -->
+				{#if customRules?.length}
+					{#each customRules as rule}
+						<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)}>
+							<span>{rule.title}</span>
+						</ListItem>
+					{/each}
+				{/if}
+
+				<!-- SQUIRE -->
 				{#each rules as rule}
 					<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)}>
 						<div class="space-y-1">
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8e4aa65..7f30efd 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -42,6 +42,20 @@ export default {
 					800: '#005753',
 					900: '#001F1D',
 					950: '#000302'
+				},
+				ice: {
+					DEFAULT: '#7B61FF',
+					50: '#EEEBFF',
+					100: '#E1DBFF',
+					200: '#C8BDFF',
+					300: '#AE9EFF',
+					400: '#9580FF',
+					500: '#7B61FF',
+					600: '#3F1AFF',
+					700: '#2200D1',
+					800: '#17008A',
+					900: '#0B0042',
+					950: '#05001F'
 				}
 			}
 		}

From 688f40001890a5abea1d85faea59cac7c92c43cb Mon Sep 17 00:00:00 2001
From: Karl Clement <539188+karlclement@users.noreply.github.com>
Date: Wed, 13 Nov 2024 15:29:20 -0800
Subject: [PATCH 2/4] Accept or reject suggested rules

---
 src/lib/components/lists/ListItem.svelte      | 36 ++++++-
 src/lib/styles/buttons.scss                   | 13 ++-
 .../repos/[repositoryId]/+page.server.ts      |  2 -
 .../[orgId]/repos/[repositoryId]/+page.svelte | 96 +++++++++++++++----
 tailwind.config.ts                            |  2 +-
 5 files changed, 122 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/lists/ListItem.svelte b/src/lib/components/lists/ListItem.svelte
index 5cb5bce..e2ddaad 100644
--- a/src/lib/components/lists/ListItem.svelte
+++ b/src/lib/components/lists/ListItem.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
 
-	export let href: string | null = null;
+	export let href: string | undefined = undefined;
+	export let borderColor: string | undefined = undefined;
+	let conditionalClasses: string = '';
+	$: conditionalClasses = (
+		`${href ? 'cursor-pointer' : ''} ${borderColor ? 'borderColor !' + borderColor : ''}`
+	);
 
 	const handleClick = () => {
 		if (!href) return;
@@ -9,11 +14,34 @@
 	};
 </script>
 
-<div class={`px-4 py-3 flex justify-between items-center ${href ? 'cursor-pointer' : ''}`} on:click={handleClick}>
-	<div class="flex items-center space-x-2">
+<div class={`list-item ${conditionalClasses}`} class:cursor-pointer={href} on:click={handleClick}>
+	<div class="flex-1 items-center space-x-2">
 		<slot />
 	</div>
 	{#if href}
-		<iconify-icon icon="lucide:chevron-right" class="text-xl" />
+		<div class="pl-4 flex flex-row items-center">
+			<iconify-icon icon="lucide:chevron-right" class="text-xl" />
+		</div>
 	{/if}
 </div>
+
+<style lang="scss">
+	.list-item {
+		@apply px-4 py-3 flex justify-between items-center;
+		@apply border-l-0;
+		margin-left: 2px;
+
+		&.borderColor {
+			@apply border-l-2;
+			margin-left: 0;
+		}
+
+		&:first-child {
+			@apply rounded-t;
+		}
+
+		&:last-child {
+			@apply rounded-b;
+		}
+	}
+</style>
diff --git a/src/lib/styles/buttons.scss b/src/lib/styles/buttons.scss
index 04c3dd3..87ac984 100644
--- a/src/lib/styles/buttons.scss
+++ b/src/lib/styles/buttons.scss
@@ -3,8 +3,17 @@
     @apply text-neutral-900 font-display font-normal;
     @apply border border-electric;
     @apply hover:border-electric;
-    @apply hover:to-electric-700 hover:from-electric-600;
-    @apply transition ease-in-out duration-150;
+    @apply hover:to-electric-500 hover:from-electric-500;
+    @apply transition-all ease-in-out duration-150;
+}
+
+.btn-dark {
+	@apply bg-gradient-to-b from-neutral-600 to-neutral-800;
+	@apply text-neutral-100 font-display font-normal;
+	@apply border border-neutral-600;
+	@apply hover:border-neutral-600;
+	@apply hover:to-neutral-600 hover:from-neutral-600;
+	@apply transition-all ease-in-out duration-150;
 }
 
 .btn-transparent {
diff --git a/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.server.ts b/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.server.ts
index abe4164..d1bd1cd 100644
--- a/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.server.ts
+++ b/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.server.ts
@@ -24,8 +24,6 @@ export const load: PageServerLoad = async ({ fetch, parent, params }) => {
 		payload.rules = repoRules.filter(r => r.is_public);
 		payload.customRules = repoRules.filter(r => !r.is_public);
 
-		console.log(">>> ", payload, " <<<");
-
 		return payload;
 	} catch (error: any) {
 		console.error('Error loading page:', error);
diff --git a/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte b/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte
index 186057f..4e6c7ea 100644
--- a/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte
+++ b/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { invalidateAll } from "$app/navigation";
 	import { page } from "$app/stores";
 	import CollapsibleListItem from '$lib/components/lists/CollapsibleListItem.svelte';
 	import ListItem from '$lib/components/lists/ListItem.svelte';
@@ -6,6 +7,7 @@
 	import StatGroupItem from '$lib/components/stats/StatGroupItem.svelte';
 	import Tag from '$lib/components/Tag.svelte';
 	import { ORGANIZATION_ROUTES } from "$lib/constants/routeConstants";
+	import { errorMessage, successMessage } from "$lib/toast";
 	import 'iconify-icon';
 
 	$: ({ orgId, repository, rules, customRules } = $page.data);
@@ -13,6 +15,19 @@
 	const getNewRuleRoute = (): string => {
 		return ORGANIZATION_ROUTES.REPOSITORY_RULE_NEW(orgId, repository.public_id);
 	}
+
+	const addressSuggestion = (event: Event, publicId: string, accept: boolean) => {
+		event.stopPropagation();
+
+		if (accept) {
+			console.log('Accepting', publicId);
+			successMessage('Rule accepted');
+		} else {
+			console.log('Rejecting', publicId);
+			errorMessage('Rule rejected');
+		}
+		invalidateAll();
+	};
 </script>
 
 <div class="py-10 px-4 space-y-6">
@@ -27,20 +42,52 @@
 		<StatGroupItem title={'Coding Standards'} value={28} />
 	</StatGroup> -->
 
-	<div class="flex flex-row items-center space-x-4">
-		<h2 class="text-xl font-semibold">Suggested Rules</h2>
-		<Tag clazz="bg-electric">4</Tag>
-	</div>
+	<!-- SUGGESTED -->
+	{#if customRules?.length}
+		<div class="flex flex-row items-center space-x-4">
+			<h2 class="text-xl font-semibold">Suggested Rules</h2>
+			<Tag clazz="bg-electric">{customRules?.length}</Tag>
+		</div>
 
-	<div class="bg-neutral-900 divide-y divide-neutral-800 rounded border border-neutral-800">
-		{#if customRules?.length}
+		<div class="bg-neutral-900 divide-y divide-neutral-800 rounded border border-neutral-800">
 			{#each customRules as rule}
-				<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)}>
-					<span>{rule.title}</span>
+				<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)} borderColor="border-l-electric">
+					<div class="flex-1 flex flex-row">
+						<div class="flex-1 flex flex-col justify-center space-y-1">
+							<div>
+								<span>{rule.title}</span>
+							</div>
+							{#if rule.tags?.length}
+								<div class="space-x-1 pb-1">
+									{#each rule.tags as tag}
+										<Tag clazz="bg-neutral-700 text-neutral-200">{tag.name}</Tag>
+									{/each}
+								</div>
+							{/if}
+						</div>
+						<div class="flex flex-row items-center space-x-2">
+							<div class="lg:tooltip" data-tip="Reject">
+								<button
+									class="btn btn-sm btn-circle w-12 btn-dark"
+									on:click={(e) => addressSuggestion(e, rule.public_id, false)}
+								>
+									<iconify-icon icon="lucide:x" class="text-xl"></iconify-icon>
+								</button>
+							</div>
+							<div class="lg:tooltip" data-tip="Accept">
+								<button
+									class="btn btn-sm btn-circle w-12 btn-electric"
+									on:click={(e) => addressSuggestion(e, rule.public_id, true)}
+								>
+									<iconify-icon icon="lucide:check" class="text-xl"></iconify-icon>
+								</button>
+							</div>
+						</div>
+					</div>
 				</ListItem>
 			{/each}
-		{/if}
-	</div>
+		</div>
+	{/if}
 
 	<div class="divider"></div>
 
@@ -71,24 +118,37 @@
 				<!-- CUSTOM -->
 				{#if customRules?.length}
 					{#each customRules as rule}
-						<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)}>
-							<span>{rule.title}</span>
+						<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)} borderColor="border-l-electric">
+							<div class="space-y-1">
+								<div>
+									<span>{rule.title}</span>
+								</div>
+								{#if rule.tags?.length}
+									<div class="space-x-1 pb-1">
+										{#each rule.tags as tag}
+											<Tag clazz="bg-neutral-700 text-neutral-200">{tag.name}</Tag>
+										{/each}
+									</div>
+								{/if}
+							</div>
 						</ListItem>
 					{/each}
 				{/if}
 
 				<!-- SQUIRE -->
 				{#each rules as rule}
-					<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)}>
+					<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)} borderColor="border-l-icey">
 						<div class="space-y-1">
 							<div>
 								<span>{rule.title}</span>
 							</div>
-							<div class="space-x-1 pb-1">
-								{#each rule.tags as tag}
-									<Tag clazz="bg-neutral-700 text-neutral-200">{tag.name}</Tag>
-								{/each}
-							</div>
+							{#if rule.tags?.length}
+								<div class="space-x-1 pb-1">
+									{#each rule.tags as tag}
+										<Tag clazz="bg-neutral-700 text-neutral-200">{tag.name}</Tag>
+									{/each}
+								</div>
+							{/if}
 						</div>
 					</ListItem>
 				{/each}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7f30efd..f96627c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -43,7 +43,7 @@ export default {
 					900: '#001F1D',
 					950: '#000302'
 				},
-				ice: {
+				icey: {
 					DEFAULT: '#7B61FF',
 					50: '#EEEBFF',
 					100: '#E1DBFF',

From 19c5a35cf4ed8b778afdb3b1071ff3498c141c37 Mon Sep 17 00:00:00 2001
From: Karl Clement <539188+karlclement@users.noreply.github.com>
Date: Wed, 13 Nov 2024 15:46:11 -0800
Subject: [PATCH 3/4] Suggestion

---
 src/lib/components/lists/ListItem.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/components/lists/ListItem.svelte b/src/lib/components/lists/ListItem.svelte
index e2ddaad..3e92021 100644
--- a/src/lib/components/lists/ListItem.svelte
+++ b/src/lib/components/lists/ListItem.svelte
@@ -32,8 +32,7 @@
 		margin-left: 2px;
 
 		&.borderColor {
-			@apply border-l-2;
-			margin-left: 0;
+			@apply border-l-2 ml-0;
 		}
 
 		&:first-child {

From 968f78a52ce787917bf52768936bc272cd3ced15 Mon Sep 17 00:00:00 2001
From: Karl Clement <539188+karlclement@users.noreply.github.com>
Date: Wed, 13 Nov 2024 16:23:14 -0800
Subject: [PATCH 4/4] Fix borders

---
 src/lib/components/lists/ListItem.svelte      | 33 +++++--------------
 .../[orgId]/repos/[repositoryId]/+page.svelte | 27 +--------------
 2 files changed, 9 insertions(+), 51 deletions(-)

diff --git a/src/lib/components/lists/ListItem.svelte b/src/lib/components/lists/ListItem.svelte
index 3e92021..e61d378 100644
--- a/src/lib/components/lists/ListItem.svelte
+++ b/src/lib/components/lists/ListItem.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
+	import { twMerge } from "tailwind-merge";
 
 	export let href: string | undefined = undefined;
 	export let borderColor: string | undefined = undefined;
-	let conditionalClasses: string = '';
-	$: conditionalClasses = (
-		`${href ? 'cursor-pointer' : ''} ${borderColor ? 'borderColor !' + borderColor : ''}`
-	);
+	let classes: string = 'px-4 py-3 flex justify-between items-center first:rounded-t last:rounded-b border-b border-b-neutral-800 last:border-b-0';
+
+	const getBorderColor = () => {
+		if (!borderColor) return 'border-l-0 ml-0.5';
+		return `border-l-2 ml-0 ${borderColor}`;
+	};
 
 	const handleClick = () => {
 		if (!href) return;
@@ -14,7 +17,7 @@
 	};
 </script>
 
-<div class={`list-item ${conditionalClasses}`} class:cursor-pointer={href} on:click={handleClick}>
+<div class={twMerge(classes, getBorderColor())} class:cursor-pointer={href} on:click={handleClick}>
 	<div class="flex-1 items-center space-x-2">
 		<slot />
 	</div>
@@ -24,23 +27,3 @@
 		</div>
 	{/if}
 </div>
-
-<style lang="scss">
-	.list-item {
-		@apply px-4 py-3 flex justify-between items-center;
-		@apply border-l-0;
-		margin-left: 2px;
-
-		&.borderColor {
-			@apply border-l-2 ml-0;
-		}
-
-		&:first-child {
-			@apply rounded-t;
-		}
-
-		&:last-child {
-			@apply rounded-b;
-		}
-	}
-</style>
diff --git a/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte b/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte
index 4e6c7ea..ef8e4be 100644
--- a/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte
+++ b/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte
@@ -113,7 +113,7 @@
 			</div>
 			{/if}
 
-			<div class="bg-neutral-900 divide-y divide-neutral-800 rounded border border-neutral-800">
+			<div class="bg-neutral-900 rounded border border-neutral-800">
 
 				<!-- CUSTOM -->
 				{#if customRules?.length}
@@ -153,31 +153,6 @@
 					</ListItem>
 				{/each}
 			</div>
-
-			<!-- {#each frameworks as framework}
-				<CollapsibleListItem>
-					<div slot="top" class="flex-1">
-						<div class="w-full flex flex-row items-center space-x-2">
-							<div class="flex-1">{framework.name}</div>
-							{#if framework.comments > 0}
-								<div class="flex items-center space-x-1 text-gray-400">
-									<iconify-icon icon="lucide:message-square-code" class="text-xl" />
-									<span>{framework.comments}</span>
-								</div>
-							{/if}
-						</div>
-
-					</div>
-					<div slot="bottom" class="divide-y divide-neutral-800">
-						{#each framework.standards as standard}
-							<ListItem href={ORGANIZATION_ROUTES.STANDARD(orgId, repository.public_id, framework.public_id, standard.public_id)}>
-								<Tag clazz="bg-electric">{standard.key}</Tag>
-								<span>{standard.title}</span>
-							</ListItem>
-						{/each}
-					</div>
-				</CollapsibleListItem>
-			{/each} -->
 		</div>
 	{/if}
 </div>