rimecms 0.23.20 → 0.23.21

package/dist/panel/components/sections/document/upload-header/UploadHeader.svelte

@@ -82,7 +82,10 @@
 					</div>
 				{:else}
 					{@const FileIcon = mimeTypeToIcon(form.values.mimeType)}
-					<FileIcon size="40" />
+					<div class="rz-doc-upload-header__prewiew-file">
+						<FileIcon size="40" />
+						<span>{form.values.mimeType}</span>
+					</div>
 				{/if}
 			</div>
 			<div class="rz-doc-upload-header__info">
@@ -109,6 +112,7 @@
 	}
 
 	.rz-doc-upload-header__file {
+		min-height: 250px;
 		border: var(--rz-border);
 		overflow: hidden;
 		border-radius: var(--radius-md);
@@ -122,6 +126,7 @@
 		overflow: hidden;
 		width: clamp(var(--rz-size-60), 40vw, 80%);
 		max-height: 400px;
+		background-color: light-dark(hsl(var(--rz-gray-12)), hsl(var(--rz-gray-3)));
 		border-top-right-radius: var(--rz-radius-md);
 		border-top-left-radius: var(--rz-radius-md);
 	}
@@ -206,8 +211,8 @@
 		padding-bottom: var(--rz-size-4);
 	}
 	.rz-doc-upload-header__info h4 {
-		font-variation-settings: 'wght' 700;
-		font-weight: 700;
+		opacity: 0.4;
+		margin-bottom: var(--rz-size-1);
 		font-size: var(--rz-text-xs);
 	}
 	.rz-doc-upload-header__info a {
@@ -218,4 +223,11 @@
 	.rz-doc-upload-header__info p {
 		margin-bottom: var(--rz-size-3);
 	}
+	.rz-doc-upload-header__prewiew-file {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--rz-size-2);
+	}
 </style>

package/dist/panel/components/ui/card-document/card-document.svelte

@@ -5,7 +5,6 @@
 	type Props = { doc: GenericDoc };
 	const { doc }: Props = $props();
 
-	const hasPreview = $derived(doc.mimeType && doc.mimeType.includes('image'));
 	const thumbnailUrl = $derived.by(() => {
 		if (doc.mimeType && doc.mimeType.includes('image')) {
 			return doc._thumbnail;
@@ -16,9 +15,7 @@
 
 <div class="rz-document-card">
 	<div class="rz-document-card__preview">
-		{#if hasPreview}
-			<UploadThumbCell mimeType={doc.mimeType} url={thumbnailUrl} />
-		{/if}
+		<UploadThumbCell mimeType={doc.mimeType} url={thumbnailUrl} />
 	</div>
 
 	<div class="rz-document-card__body">
@@ -37,7 +34,8 @@
 <style>
 	/** */
 	:root {
-		--rz-card-hover-bg: light-dark(hsl(var(--rz-gray-14)), hsl(var(--rz-gray-1)));
+		--rz-card-hover-bg: light-dark(hsl(var(--rz-gray-14)), hsl(var(--rz-gray-4)));
+		--rz-card-bg: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
 	}
 
 	.rz-document-card {
@@ -80,7 +78,9 @@
 	}
 
 	.rz-document-card__body {
-		display: block;
+		display: flex;
+		flex-direction: column;
+		gap: var(--rz-size-2);
 		text-align: left;
 		padding: 0 0.6rem 0.6rem 0.6rem;
 	}

package/dist/site/components/avatar/avatar.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { isRelationPopulated } from '../../../fields/relation/client';
+
+	type Props = { user: UsersDoc };
+	const { user }: Props = $props();
+
+	const avatar = $derived(user.avatar && isRelationPopulated(user.avatar) ? user.avatar : null);
+</script>
+
+{#if avatar}
+	<img src={avatar[0].sizes.thumbnail} alt={user.name || 'User Avatar'} class="avatar-image" />
+{:else}
+	<div class="avatar-placeholder">
+		{user.name.charAt(0).toUpperCase()}
+	</div>
+{/if}
+
+<style>
+	.avatar-image,
+	.avatar-placeholder {
+		width: 32px;
+		height: 32px;
+		border-radius: 50%;
+		-o-object-fit: cover;
+		   object-fit: cover;
+		background-color: light-dark(var(--gray-10), var(--gray-3));
+		color: var(--gray-7);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: bold;
+		font-size: 1rem;
+	}
+</style>

package/dist/site/components/avatar/avatar.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    user: UsersDoc;
+};
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/site/components/feed/feed.svelte

@@ -3,6 +3,15 @@
 	import Post from '../post/post.svelte';
 </script>
 
-{#each page.data.posts as post}
-	<Post {post} />
-{/each}
+<div>
+	{#each page.data.posts as post}
+		<Post {post} />
+	{/each}
+</div>
+
+<style>
+	div {
+		padding-inline: var(--size-8);
+		padding-block: var(--size-8);
+	}
+</style>

package/dist/site/components/nav/nav.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { BookText, House, User } from '@lucide/svelte';
+	import Button from '../button/button.svelte';
+</script>
+
+<div class="nav">
+	<div class="nav__inner">
+		<nav>
+			<ul>
+				<li><House size="18" /><a href="/">Accueil</a></li>
+				<li><BookText size="18" /><a href="/documents">Documents</a></li>
+				<li><User size="18" /><a href="/me">Profil</a></li>
+			</ul>
+		</nav>
+
+		<Button variant="default" size="lg">Poster</Button>
+	</div>
+</div>
+
+<style>
+	.nav {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		padding: var(--size-40) var(--size-8);
+		:global(.button) {
+			min-width: 240px;
+		}
+	}
+
+	.nav__inner {
+		display: grid;
+		gap: var(--size-4);
+	}
+
+	nav {
+		font-size: var(--size-5);
+		ul {
+			display: grid;
+			gap: var(--size-2);
+		}
+		li {
+			display: flex;
+			align-items: center;
+			gap: var(--size-2);
+		}
+	}
+</style>

package/dist/site/components/nav/nav.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Nav: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Nav = InstanceType<typeof Nav>;
+export default Nav;

package/dist/site/components/post/post-actions/post-actions.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Heart, MessageCircle } from '@lucide/svelte';
+	import Button from '../../button/button.svelte';
+
+	type Props = { id: string };
+	const { id }: Props = $props();
+</script>
+
+<div class="post-actions">
+	<Button variant="text" icon={Heart} aria-label="Like post" />
+	<Button variant="text" icon={MessageCircle} aria-label="Comment on post" />
+</div>
+
+<style>
+	.post-actions {
+		display: flex;
+		align-items: center;
+		gap: var(--size-4);
+	}
+</style>

package/dist/site/components/post/post-actions/post-actions.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    id: string;
+};
+declare const PostActions: import("svelte").Component<Props, {}, "">;
+type PostActions = ReturnType<typeof PostActions>;
+export default PostActions;

package/dist/site/components/post/post.svelte

@@ -1,6 +1,47 @@
 <script lang="ts">
-	type Props = { post: PostsDoc };
+	import { RenderRichText } from '../../../fields/rich-text/client.js';
+	import type { WithRelationPopulated } from '../../../types';
+
+	import UserInline from '../user-inline/user-inline.svelte';
+	import PostActions from './post-actions/post-actions.svelte';
+	import { isRelationPopulated } from '../../../fields/relation/client';
+
+	type Props = { post: WithRelationPopulated<PostsDoc> };
 	const { post }: Props = $props();
+
+	const author = $derived(post.author && isRelationPopulated(post.author) ? post.author : null);
 </script>
 
-<h2>{post.title}</h2>
+<article>
+	<header>
+		{#if author}
+			<UserInline user={author[0]} />
+		{/if}
+
+		{#if post.createdAt}
+			{new Date(post.createdAt).toLocaleDateString('en-US', {
+				year: 'numeric',
+				month: 'long',
+				day: 'numeric'
+			})}
+		{/if}
+	</header>
+
+	<RenderRichText json={post.text} />
+
+	<footer>
+		<PostActions id={post.id} />
+	</footer>
+</article>
+
+<style>
+	article {
+		display: grid;
+		gap: var(--size-4);
+	}
+	header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+</style>

package/dist/site/components/post/post.svelte.d.ts

@@ -1,5 +1,6 @@
+import type { WithRelationPopulated } from '../../../types';
 type Props = {
-    post: PostsDoc;
+    post: WithRelationPopulated<PostsDoc>;
 };
 declare const Post: import("svelte").Component<Props, {}, "">;
 type Post = ReturnType<typeof Post>;

package/dist/site/components/user-inline/user-inline.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Avatar from '../avatar/avatar.svelte';
+
+	type Props = { user: UsersDoc };
+	const { user }: Props = $props();
+</script>
+
+<div class="user-inline">
+	<Avatar {user} />
+	<span>{user.name || user.email}</span>
+</div>
+
+<style>
+	.user-inline {
+		display: flex;
+		align-items: center;
+		gap: var(--size-2);
+	}
+
+	.user-inline span {
+		font-weight: 500;
+	}
+</style>

package/dist/site/components/user-inline/user-inline.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    user: UsersDoc;
+};
+declare const UserInline: import("svelte").Component<Props, {}, "">;
+type UserInline = ReturnType<typeof UserInline>;
+export default UserInline;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "rimecms",
-	"version": "0.23.20",
+	"version": "0.23.21",
 	"homepage": "https://github.com/bienbiendev/rime",
 	"scripts": {
 		"dev": "vite dev",