Merge branch 'next'

.prettierrc

@@ -3,7 +3,18 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}
+	"plugins": [
+		"prettier-plugin-svelte"
+	],
+	"pluginSearchDirs": [
+		"."
+	],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

src/hooks.server.ts

@@ -45,6 +45,8 @@ export const handleError = (async ({ error, event }: any) => {
 		path: '/'
 	});
 
+	console.error(error);
+
 	return {
 		message: error?.message,
 		status: error?.status

src/lib/clients/saferwall.ts

@@ -109,7 +109,7 @@ export class SaferwallClient {
 
 	public async getFileProcessTree(guid: string) {
 		return this.request<{ proc_tree: Saferwall.Behaviors.ProcessItem[] }>(
-			`behaviors/${guid}/?fields=proc_tree`
+			`behaviors/${guid}?fields=proc_tree`
 		).then((res) => res.proc_tree ?? []);
 	}
 
@@ -123,6 +123,12 @@ export class SaferwallClient {
 		).then((res) => res.arrayBuffer());
 	}
 
+	public async rescanFile(hash: string) {
+		return this.request<unknown>(`files/${hash}/rescan`, {
+			method: 'POST'
+		});
+	}
+
 	public async getUser(username: string) {
 		return this.request<Saferwall.User>(`users/${username}`);
 	}

src/lib/components/ActivityMeta.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Saferwall } from '$lib/types';
 	import { getLabelClass, getLabelIcon } from '$lib/utils';
+	import Icon from './Icon.svelte';
 
 	export let file: Saferwall.File;
 
@@ -12,7 +13,7 @@
 	<li class="meta__item">
 		<span>CLASSIFICATION</span>
 		<div class="capitalize label label--{labelClass}">
-			<svg class="w-4 h-4"><use href="/images/icons.svg#icon-{labelIcon}" /></svg>
+			<Icon size="w-5 h-4" class="mr-1" name={labelIcon} />
 			<span>{labelClass}</span>
 		</div>
 	</li>

src/lib/components/Card.svelte

@@ -5,10 +5,15 @@
 </script>
 
 <article
-	class="card relative overflow-hidden bg-white rounded-xl shadow-base  {$$props.class}"
+	class="card relative overflow-hidden bg-white rounded-xl shadow-base {$$props.class}"
 	class:card--flex={flex}
 	class:card--padding={padding}
 	class:card--spacing={spacing}
 >
+	{#if $$slots.header}
+		<div class="card--padding !pb-0">
+			<slot name="header" />
+		</div>
+	{/if}
 	<slot />
 </article>

src/lib/components/Expandable.svelte

@@ -0,0 +1,30 @@
+<script>
+	import { slide } from 'svelte/transition';
+	import Icon from './Icon.svelte';
+
+	export let expandable = false;
+
+	let open = true;
+	const onTogglePress = () => {
+		open = !open;
+	};
+</script>
+
+<div class="flex flex-col">
+	<div on:click={onTogglePress} on:keypress={onTogglePress} class="cursor-pointer">
+		<div class="flex items-start space-x-4">
+			{#if expandable}
+				<div class="pt-2 text-neutral-400">
+					<Icon name="arrow-down" size="w-4 h-3" class={open ? '' : '-rotate-90'} />
+				</div>
+			{/if}
+			<slot name="header" />
+		</div>
+	</div>
+
+	{#if open && expandable}
+		<div transition:slide>
+			<slot name="expanded" />
+		</div>
+	{/if}
+</div>

src/lib/components/Icon.svelte

@@ -3,6 +3,7 @@
 	export let size: string = 'w-6 h-6';
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <svg on:click class="icon {size} {$$props.class}">
 	<use href="/images/icons.svg#icon-{name}" />
 </svg>

src/lib/components/LoadMore.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
+	import Icon from './Icon.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -20,14 +21,10 @@
 	>
 		<div class="flex-center space-x-1">
 			{#if loading}
-				<svg class="w-6 h-6 animate-spin">
-					<use href="/images/icons.svg#icon-loading" />
-				</svg>
+				<Icon name="loading" size="w-6 h-6" class="animate-spin" />
 			{:else}
 				<span><slot /></span>
-				<svg class="w-4 h-4">
-					<use href="/images/icons.svg#icon-arrow-down" />
-				</svg>
+				<Icon name="arrow-down" size="w-4 h-4" />
 			{/if}
 		</div>
 	</div>

src/lib/components/TableKeyValue.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { splitCamelCase, valueToHex } from '$lib/utils';
 
+	export let lines = false;
 	export let header = true;
 	export let hexValue = true;
 	export let camelCase = true;
 	export let items: [string, any][] = [];
 </script>
 
 <table class="w-full">
-	<tbody>
+	<tbody class:divide-y={lines} class:divide-neutral-100={lines}>
 		{#if header}
 			<tr>
 				<td class="font-semibold text-base">Member</td>
@@ -28,6 +29,11 @@
 <style lang="scss">
 	table {
 		@apply w-full;
+		.divide-y {
+			td {
+				@apply px-4;
+			}
+		}
 
 		tbody tr {
 			td {

src/lib/components/cards/profile/ProfileCard.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Icon from '$lib/components/Icon.svelte';
 	import ButtonFollow from '$lib/components/form/ButtonFollow.svelte';
 	import Avatar from '../../Avatar.svelte';
 	import Button from '../../form/Button.svelte';
@@ -30,9 +31,7 @@
 							class="inline-flex items-center font-medium text-primary-600 bg-primary-600 bg-opacity-10 rounded px-4 space-x-2 max-w-full w-max mt-4"
 							rel="noreferrer"
 						>
-							<svg class="w-4 h-4">
-								<use href="/images/icons.svg#icon-link" />
-							</svg>
+							<Icon name="link" size="w-4 h-4" />
 							<div class="py-2 bg-transparent focus:outline-none px-1 truncate inline-flex w-max">
 								{url}
 							</div>

src/lib/components/form/Button.svelte

@@ -13,42 +13,57 @@
 
 {#if href}
 	<a
+		on:mouseup
 		{...$$props}
 		{href}
 		{target}
-		on:mouseup
 		class="button button--{theme} button--size--{size} {$$props.class}"
 	>
-		{#if icon && !loading}<svg class="icon"><use href="/images/icons.svg#icon-{icon}" /></svg>{/if}
-		<Loading {loading}><slot /></Loading>
+		<Loading {loading}>
+			<div class="content">
+				{#if icon}
+					<svg class="icon" class:opacity-0={loading}
+						><use href="/images/icons.svg#icon-{icon}" /></svg
+					>{/if}
+				<slot />
+			</div>
+		</Loading>
 	</a>
 {:else}
 	<button
+		on:mouseup
 		{...$$props}
 		{type}
 		disabled={loading || disabled}
-		on:mouseup
 		class="button button--{theme} button--size--{size} {$$props.class}"
 	>
-		{#if icon && !loading}
-			<svg class="icon"><use href="/images/icons.svg#icon-{icon}" /></svg>
-		{/if}
 		<Loading {loading}>
-			<slot />
+			<div class="content">
+				{#if icon}
+					<svg class="icon" class:opacity-0={loading}
+						><use href="/images/icons.svg#icon-{icon}" /></svg
+					>
+				{/if}
+				<slot />
+				{#if loading}
+					<slot name="loading" />
+				{/if}
+			</div>
 		</Loading>
-		{#if loading}
-			<slot name="loading" />
-		{/if}
 	</button>
 {/if}
 
 <style lang="scss">
 	.button {
 		@apply py-2.5 px-4;
 		@apply font-semibold;
-		@apply inline-flex justify-center items-center space-x-4;
 		@apply border rounded;
 
+		&,
+		.content {
+			@apply inline-flex justify-center items-center space-x-4;
+		}
+
 		&--base {
 			@apply text-primary bg-white;
 		}

src/lib/components/form/ButtonLike.svelte

@@ -13,17 +13,17 @@
 <form
 	action="/actions?/like"
 	method="post"
-	use:enhance={({ data }) => {
+	use:enhance={({ formData }) => {
 		loading = true;
 
-		data.append('hash', hash);
-		data.append('like', liked ? 'unlike' : 'like');
+		formData.append('hash', hash);
+		formData.append('like', liked ? 'unlike' : 'like');
 
 		return async ({ result }) => {
 			loading = false;
 
 			if (result.type === 'success') {
-				liked = result.data?.like;
+				liked = Boolean(result.data?.like);
 			}
 		};
 	}}

src/lib/components/form/Checkbox.svelte

@@ -1,20 +1,27 @@
 <script lang="ts">
 	export let checked: boolean = false;
-	export let group: undefined = undefined;
+	export let group: any = [];
 	export let value: string | undefined = undefined;
+	export let size: 'sm' | 'lg' | '' = '';
 </script>
 
-<label class={$$props.class}>
+<label class={`${size} ${$$props.class}`}>
 	<input type="checkbox" on:click on:change bind:group bind:checked {value} {...$$restProps} />
-	<slot />
+	{#if $$slots}
+		<span>
+			<slot />
+		</span>
+	{/if}
 </label>
 
 <style lang="scss">
 	label {
 		@apply cursor-pointer;
+		@apply inline-flex items-center space-x-2;
 
 		input {
-			@apply w-6 h-6 shrink-0;
+			@apply w-6 h-6;
+			@apply shrink-0;
 			@apply outline-none appearance-none;
 			@apply relative border-2 border-neutral-300/40 rounded;
 			transition: background-color 0.3s ease, border-color 0.3s ease;
@@ -38,5 +45,17 @@
 				@apply border-primary-400;
 			}
 		}
+
+		&.sm {
+			input {
+				@apply w-4 h-4 rounded-sm;
+			}
+		}
+
+		&.lg {
+			input {
+				@apply w-8 h-8;
+			}
+		}
 	}
 </style>

src/lib/components/form/Loading.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
+	import Icon from '../Icon.svelte';
+
 	export let loading = true;
 </script>
 
-{#if loading}
-	<svg class="w-6 h-6 animate-spin"><use href="/images/icons.svg#icon-loading" /></svg>
-{:else}
-	<slot />
-{/if}
+<div class="relative">
+	<span class:text-transparent={loading}><slot /></span>
+	{#if loading}
+		<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+			<Icon name="loading" class="w-6 h-6 animate-spin" />
+		</div>
+	{/if}
+</div>

src/lib/components/partials/ComingSoon.svelte

@@ -1,7 +1,7 @@
 <div
-	class="w-full absolute bottom-0 bg-gradient-to-t from-white to-transparent h-full  backdrop-blur-xs"
+	class="w-full absolute bottom-0 bg-gradient-to-t from-white to-transparent h-full opacity-90 backdrop-blur-xs"
 >
 	<div class="flex items-center justify-center w-full h-full bg-white bg-opacity-60">
-		<p class="text-3xl font-bold text-primary ">🚀 Coming soon!</p>
+		<p class="text-3xl font-bold text-primary">🚀 Coming soon!</p>
 	</div>
 </div>