Add meta info bar and some more

src/lib/components/AppSettings.svelte

@@ -17,7 +17,7 @@
             {#if tabPos === 0}
                 <div class="flex flex-col gap-3">
                     <h3 class="h3 text-dark-token font-bold">Image</h3>
-                    <SlideToggle name="image-limit-height" checked={$limitImageHeight}>Limit image height</SlideToggle>
+                    <SlideToggle name="image-limit-height" bind:checked={$limitImageHeight}><span class="text-dark-token">Limit image height</span></SlideToggle>
 
                     <h3 class="h3 text-dark-token font-bold">Grid</h3>
                     <div class="basis-1/2">

src/lib/components/ImageGrid.svelte

@@ -11,13 +11,16 @@
             $loading = true;
             $showSearch = false
         }}>
-            <section class="flex">
+            <header class="card-header p-0"></header>
+            <section class="flex flex-col">
                 <img src={post[$postGridPreviewQuality].url}
                      loading="lazy"
                      alt={`Post ${post.id}`} />
+                <div class="bg-black px-2 py-1">
+                    <p class="text-center text-dark-token">{post.id} {post.file.ext} {post.rating}</p>
+                </div>
             </section>
-            <footer>
+            <footer >
-                <p class="text-center">{post.id} {post.file.ext} {post.rating}</p>
             </footer>
         </a>
     {/each}

src/lib/components/PostMedia.svelte

@@ -1,19 +1,17 @@
 <script>
-    import { limitImageHeight } from '$lib/settings.js';
+    import { limitImageHeight } from '$lib/settings';
 
     export let post = null;
 </script>
 
-<div>
+{#if post?.preview?.has}
-    {#if post?.preview?.has}
+    <img class:max-h-dvh={$limitImageHeight} src={post.preview.url} alt={`Post ${post.id}`} />
-        <img class:h-dvh={$limitImageHeight} src={post.preview.url} alt={`Post ${post.id}`} />
+{:else}
+    {#if ['webm', 'mp4'].includes(post.file.ext)}
+        <video class:max-h-dvh={$limitImageHeight} controls playsinline>
+            <source src={post.file.url} />
+        </video>
     {:else}
-        {#if ['webm', 'mp4'].includes(post.file.ext)}
+        <img class:max-h-dvh={$limitImageHeight} src={post.file.url} alt={`Post ${post.id}`} />
-            <video class:h-dvh={$limitImageHeight} controls playsinline>
-                <source src={post.file.url} />
-            </video>
-        {:else}
-            <img class:h-dvh={$limitImageHeight} src={post.file.url} alt={`Post ${post.id}}`} />
-        {/if}
     {/if}
-</div>
+{/if}

src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script>
     import '../app.pcss';
-    import {Drawer, initializeStores, Modal, ProgressRadial} from '@skeletonlabs/skeleton';
+    import {Drawer, initializeStores, Modal, ProgressRadial, Toast} from '@skeletonlabs/skeleton';
     import {loading} from '$lib/stores';
     import {AppSettings} from '$lib/components';
 
@@ -9,6 +9,7 @@
 
 <div class="relative h-dvh">
     <Modal />
+    <Toast />
     <Drawer bgDrawer="bg-surface-500/90" width="w-6/12" height="h-dvh" position="left">
         <div class="h-full p-4">
             <AppSettings />

src/routes/+page.svelte

@@ -10,11 +10,12 @@
         AppRail,
         AppRailAnchor,
         AppShell,
-        getDrawerStore
+        getDrawerStore, getToastStore
     } from '@skeletonlabs/skeleton';
     import PostList from '$lib/PostList';
 
     const drawerStore = getDrawerStore();
+    const toastStore = getToastStore();
 
     function onSearch() {
         $loading = true;

src/routes/posts/[post_id]/+page.svelte

@@ -8,7 +8,7 @@
         clipboard,
         getToastStore
     } from '@skeletonlabs/skeleton';
-    import { faGear, faCopy } from '@fortawesome/free-solid-svg-icons';
+    import {faGear, faCopy, faStar, faCaretUp, faCaretDown, faHeart} from '@fortawesome/free-solid-svg-icons';
     import { Fa } from 'svelte-fa';
     import { BackAppRailAnchor, GlobalSearch, PostMedia, SearchAppRailAnchor } from '$lib/components';
     import { onMount } from 'svelte';
@@ -67,7 +67,7 @@
                     <svelte:fragment slot="trail">
                         {#if post}
                             <AppRailAnchor>
-                                <button class="w-full flex flex-col gap-2 place-content-center place-items-center" use:clipboard={`https://e621.net/posts/${post.id}`} on:click={() => toastStore.trigger({message: 'Copied link'})}>
+                                <button class="w-full flex flex-col gap-2 place-content-center place-items-center" on:click={() => toastStore.trigger({message: 'Copied link'})} use:clipboard={`https://e621.net/posts/${post.id}`}>
                                     <Fa size={'2x'} icon={faCopy} />
                                     Copy link
                                 </button>
@@ -85,21 +85,53 @@
     </svelte:fragment>
 
     <svelte:fragment slot="default">
-        {#if post}
+        <div class="container mx-auto flex flex-col items-center justify-center">
-            <div class="container mx-auto p-2">
+            {#if post}
-                <div class="flex flex-row place-content-center" >
+                <div class="card mb-4 flex flex-col">
-                    <PostMedia post={post} />
+                    <section class="flex flex-col place-items-center">
-                </div>
+                        <PostMedia {post} />
-                <div class="card">
-                    <header class="px-3 pt-2">
-                        <p class="font-bold" class:font-red={post.description === ''}>Description</p>
-                    </header>
-                    <section class="p-3">
-                        <p>{post.description}</p>
                     </section>
+                    <section class="flex flex-row justify-between bg-black">
+                        <div class="btn-group variant-filled rounded-none">
+                            <button>
+                                <span class:text-primary-500={!post.is_favorited} class:text-secondary-500={post.is_favorited}>
+                                    <Fa size={'1x'} icon={faHeart} />
+                                </span>
+                                    &nbsp;
+                                    <span>
+                                    {post.fav_count}
+                                </span>
+                            </button>
+                            <button>
+                                <span class="text-secondary-500">
+                                    <Fa size={'1x'} icon={faStar} />
+                                </span>
+                                &nbsp;
+                                {post.score.total}
+                            </button>
+                            <button>
+                                <Fa size={'1x'} icon={faCaretUp} />
+                            </button>
+                            <button>
+                                <Fa size={'1x'} icon={faCaretDown} />
+                            </button>
+                        </div>
+                        <div class="btn-group variant-filled rounded-none">
+                            <button>
+                                ID: {post.id}
+                            </button>
+                        </div>
+                    </section>
+                    <footer class="card-footer pt-4">
+                        <h3 class="font-bold mb-2" class:line-through={post.description === ''} >Description</h3>
+                        <p>{post.description}</p>
+                        <!-- <pre class="break-all">
+                            {JSON.stringify(post, null, 2)}
+                        </pre> -->
+                    </footer>
                 </div>
-            </div>
+            {/if}
-        {/if}
+        </div>
     </svelte:fragment>
 </AppShell>