WIP design for post page

package.json

@@ -11,8 +11,11 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@tauri-apps/api": "^1.5.3"
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@tauri-apps/api": "^1.5.3",
+    "svelte-fa": "^4.0.2"
   },
   "devDependencies": {
     "@skeletonlabs/skeleton": "^2.9.0",

pnpm-lock.yaml

@@ -8,12 +8,21 @@ dependencies:
   '@fortawesome/fontawesome-svg-core':
     specifier: ^6.5.1
     version: 6.5.1
+  '@fortawesome/free-brands-svg-icons':
+    specifier: ^6.5.1
+    version: 6.5.1
   '@fortawesome/free-regular-svg-icons':
     specifier: ^6.5.1
     version: 6.5.1
+  '@fortawesome/free-solid-svg-icons':
+    specifier: ^6.5.1
+    version: 6.5.1
   '@tauri-apps/api':
     specifier: ^1.5.3
     version: 1.5.3
+  svelte-fa:
+    specifier: ^4.0.2
+    version: 4.0.2(svelte@4.2.12)
 
 devDependencies:
   '@skeletonlabs/skeleton':
@@ -75,7 +84,6 @@ packages:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
-    dev: true
 
   /@esbuild/aix-ppc64@0.19.12:
     resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
@@ -298,6 +306,14 @@ packages:
       '@fortawesome/fontawesome-common-types': 6.5.1
     dev: false
 
+  /@fortawesome/free-brands-svg-icons@6.5.1:
+    resolution: {integrity: sha512-093l7DAkx0aEtBq66Sf19MgoZewv1zeY9/4C7vSKPO4qMwEsW/2VYTUTpBtLwfb9T2R73tXaRDPmE4UqLCYHfg==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 6.5.1
+    dev: false
+
   /@fortawesome/free-regular-svg-icons@6.5.1:
     resolution: {integrity: sha512-m6ShXn+wvqEU69wSP84coxLbNl7sGVZb+Ca+XZq6k30SzuP3X4TfPqtycgUh9ASwlNh5OfQCd8pDIWxl+O+LlQ==}
     engines: {node: '>=6'}
@@ -306,6 +322,14 @@ packages:
       '@fortawesome/fontawesome-common-types': 6.5.1
     dev: false
 
+  /@fortawesome/free-solid-svg-icons@6.5.1:
+    resolution: {integrity: sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 6.5.1
+    dev: false
+
   /@isaacs/cliui@8.0.2:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -325,28 +349,23 @@ packages:
       '@jridgewell/set-array': 1.2.1
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.25
-    dev: true
 
   /@jridgewell/resolve-uri@3.1.2:
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/set-array@1.2.1:
     resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: true
 
   /@jridgewell/trace-mapping@0.3.25:
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -699,7 +718,6 @@ packages:
 
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
-    dev: true
 
   /@types/pug@2.0.10:
     resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==}
@@ -709,7 +727,6 @@ packages:
     resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
@@ -753,7 +770,6 @@ packages:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
     dependencies:
       dequal: 2.0.3
-    dev: true
 
   /autoprefixer@10.4.18(postcss@8.4.35):
     resolution: {integrity: sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==}
@@ -775,7 +791,6 @@ packages:
     resolution: {integrity: sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==}
     dependencies:
       dequal: 2.0.3
-    dev: true
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -858,7 +873,6 @@ packages:
       acorn: 8.11.3
       estree-walker: 3.0.3
       periscopic: 3.1.0
-    dev: true
 
   /color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
@@ -900,7 +914,6 @@ packages:
     dependencies:
       mdn-data: 2.0.30
       source-map-js: 1.0.2
-    dev: true
 
   /cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
@@ -928,7 +941,6 @@ packages:
   /dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
-    dev: true
 
   /detect-indent@6.1.0:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
@@ -1011,7 +1023,6 @@ packages:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
     dependencies:
       '@types/estree': 1.0.5
-    dev: true
 
   /fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
@@ -1183,7 +1194,6 @@ packages:
     resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
     dependencies:
       '@types/estree': 1.0.5
-    dev: true
 
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
@@ -1224,7 +1234,6 @@ packages:
 
   /locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
-    dev: true
 
   /lru-cache@10.2.0:
     resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==}
@@ -1236,11 +1245,9 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-    dev: true
 
   /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
@@ -1382,7 +1389,6 @@ packages:
       '@types/estree': 1.0.5
       estree-walker: 3.0.3
       is-reference: 3.0.2
-    dev: true
 
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
@@ -1621,7 +1627,6 @@ packages:
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
@@ -1708,6 +1713,14 @@ packages:
       - sugarss
     dev: true
 
+  /svelte-fa@4.0.2(svelte@4.2.12):
+    resolution: {integrity: sha512-lza8Jfii6jcpMQB73mBStONxaLfZsUS+rKJ/hH6WxsHUd+g68+oHIL9yQTk4a0uY9HQk78T/CPvQnED0msqJfg==}
+    peerDependencies:
+      svelte: ^4.0.0
+    dependencies:
+      svelte: 4.2.12
+    dev: false
+
   /svelte-hmr@0.15.3(svelte@4.2.12):
     resolution: {integrity: sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
@@ -1784,7 +1797,6 @@ packages:
       locate-character: 3.0.0
       magic-string: 0.30.8
       periscopic: 3.1.0
-    dev: true
 
   /tailwindcss@3.4.1:
     resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==}

src-tauri/src/main.rs

@@ -22,6 +22,20 @@ async fn get_posts(query: Option<String>, arcmut_esix_client: State<'_, Arc<Mute
     }
 }
 
+#[tauri::command]
+async fn get_post(post_id: u64, arcmut_esix_client: State<'_, Arc<Mutex<Client>>>) -> anyhow::Result<Post, String> {
+    let mut esix_client = arcmut_esix_client.lock().await;
+    match esix_client.get_post(post_id).await {
+        Ok(res) => {
+            return Ok(res);
+        }
+        Err(err) => {
+            eprintln!("{err}");
+            return Err(format!("{err}"));
+        }
+    }
+}
+
 #[tokio::main]
 async fn main() {
     let user_agent = "eSixClient/1.0 (by pixelhunter on e621)";
@@ -34,7 +48,7 @@ async fn main() {
     let arcmut_esix_client = Arc::new(Mutex::new(esix_client));
 
     tauri::Builder::default()
-        .invoke_handler(tauri::generate_handler![get_posts])
+        .invoke_handler(tauri::generate_handler![get_posts, get_post])
         .manage(arcmut_esix_client.clone())
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src/lib/components/BackAppRailAnchor.svelte

@@ -0,0 +1,33 @@
+<script>
+import {faArrowLeft} from "@fortawesome/free-solid-svg-icons";
+import {Fa} from "svelte-fa";
+import {AppRailAnchor} from "@skeletonlabs/skeleton";
+
+export let popCount = 1;
+
+let href;
+let pathnameParts = window.location.pathname.split('/');
+for(let i = 0; i < popCount; i++) {
+    pathnameParts.pop();
+}
+
+switch (pathnameParts.length) {
+    case 0:
+        href = '/'
+        break;
+    case 1:
+        href = `/${pathnameParts[0]}`
+        break;
+    default:
+        href = '/' + pathnameParts.join('/')
+        break;
+}
+
+console.log(href);
+</script>
+<AppRailAnchor {href} target="_self" title="Back">
+    <div class="flex flex-col gap-2 place-content-center">
+        <Fa size={'2x'} icon={faArrowLeft} />
+        <p>Back</p>
+    </div>
+</AppRailAnchor>

src/lib/components/BackButton.svelte

@@ -1,3 +0,0 @@
-<button class="btn" on:click|preventDefault={() => {
-    history.back();
-}}>Back</button>

src/lib/components/ImageGrid.svelte

@@ -6,7 +6,7 @@
 
 <div class="grid gap-3" style={`grid-template-columns: repeat(${$imageGridColumns}, minmax(0, 1fr))`}>
     {#each posts as post}
-        <a href={`/posts/${post.id}`} class="card flex flex-col justify-end">
+        <a href={`/posts/${post.id}`} class="card flex flex-col justify-end items-center">
             <section class="flex">
                 <img src={post[$imageGridPreviewQuality].url}
                      loading="lazy"

src/lib/components/index.js

@@ -1,7 +1,5 @@
-import BackButton from './BackButton.svelte'
 import ImageGrid from './ImageGrid.svelte';
 
 export {
-    BackButton,
     ImageGrid,
 }

src/lib/stores.js

@@ -1,5 +1,9 @@
 import { localStorageStore } from '@skeletonlabs/skeleton';
+import { writable } from 'svelte/store';
 
 export const lastSearch = localStorageStore('lastSearch', '');
 export const imageGridColumns = localStorageStore('gridColumns', 8);
+export const imageSearchResults = writable(null);
 export const imageGridPreviewQuality = localStorageStore('gridPreviewQuality', 'preview');
+
+export const loading = writable(false);

src/routes/+error.svelte

@@ -0,0 +1,4 @@
+<div class="container mx-auto">
+    <p>Error</p>
+    <slot />
+</div>

src/routes/+layout.svelte

@@ -1,12 +1,16 @@
 <script>
     import '../app.pcss';
-    import {initializeStores} from '@skeletonlabs/skeleton';
+    import {initializeStores, ProgressRadial} from '@skeletonlabs/skeleton';
+    import {loading} from '$lib/stores';
 
     initializeStores();
 </script>
 
-<div class="min-h-dvh bg-surface-400-500-token">
+<div class="relative min-h-dvh">
+    {#if $loading}
+        <div class="fixed inset-x-1/2 top-1 w-8 h-8">
+            <ProgressRadial width="w-8" height="h-8" stroke={120} strokeLinecap="butt"  />
+        </div>
+    {/if}
     <slot />
 </div>
-
-<style lang="postcss"></style>

src/routes/+page.svelte

@@ -1,37 +1,47 @@
 <script>
+    import { Fa } from 'svelte-fa';
     import { ImageGrid } from '$lib/components';
-    import { onMount } from 'svelte';
+    import { faGear } from '@fortawesome/free-solid-svg-icons';
     import { invoke } from '@tauri-apps/api/tauri'
-    import { lastSearch, imageGridColumns, imageGridPreviewQuality } from '$lib/stores';
+    import { lastSearch, imageGridColumns, imageGridPreviewQuality, imageSearchResults, loading } from '$lib/stores';
-    import { AppShell, Drawer, RangeSlider, getDrawerStore } from '@skeletonlabs/skeleton';
+    import { onMount } from 'svelte';
+    import {
+        AppShell,
+        Drawer,
+        RangeSlider,
+        getDrawerStore,
+        AppRail,
+        AppRailAnchor,
+        ProgressRadial
+    } from '@skeletonlabs/skeleton';
 
     const drawerStore = getDrawerStore();
 
-    let data = null;
-    let query = '';
-
     onMount(async () => {
-        query = $lastSearch;
+        if ($imageSearchResults === null) {
-        onSearch();
+            $loading = true;
+            $imageSearchResults = invoke('get_posts', { query: $lastSearch });
+            $imageSearchResults.then(() => {
+                $loading = false;
+            });
+        }
     });
 
     function onSearch() {
-        $lastSearch = query;
+        $loading = true;
-        data = invoke('get_posts', { query });
+        $imageSearchResults = invoke('get_posts', { query: $lastSearch });
+        $imageSearchResults.then(() => {
+            $loading = false;
+        });
     }
 </script>
 
-<button class="absolute top-1 left-1 z-50 btn variant-filled-primary"
-        on:click|preventDefault={() => {
-            drawerStore.open();
-        }}
->Button</button>
 <Drawer bgDrawer="bg-surface-500/90" width="w-6/12" height="h-dvh" position="left">
     <div class="h-full p-4 flex flex-col justify-between bg-token">
         <div class="flex flex-row">
             <label class="label basis-1 flex-grow">
-                <span class="font-bold">Query</span>
+                <span class="text-dark-token font-bold">Query</span>
-                <input class="input" type="text" bind:value={query} />
+                <input class="input" type="text" bind:value={$lastSearch} />
             </label>
             <button class="btn variant-filled flex-shrink" type="button" on:click={() => {onSearch()}}>Search</button>
         </div>
@@ -39,14 +49,14 @@
             <div class="basis-1/2">
                 <RangeSlider name="grid-columns" min={1} max={12} bind:value={$imageGridColumns} ticked={true}>
                     <div class="flex flex-grow justify-between items-center">
-                        <div class="font-bold">Grid Columns</div>
+                        <div class="text-dark-token font-bold">Grid Columns</div>
-                        <div class="text-xs">{$imageGridColumns} / {12}</div>
+                        <div class="text-xs text-dark-token">{$imageGridColumns} / {12}</div>
                     </div>
                 </RangeSlider>
             </div>
             <div class="basis-1/2">
                 <label class="label">
-                    <span class="font-bold">Preview type</span>
+                    <span class="text-dark-token font-bold">Preview type</span>
                     <select class="select" bind:value={$imageGridPreviewQuality}>
                         <option value="preview">Preview</option>
                         <option value="sample">Sample</option>
@@ -56,12 +66,24 @@
         </div>
     </div>
 </Drawer>
+
 <AppShell>
+    <svelte:fragment slot="sidebarLeft">
+        <AppRail height="h-dvh">
+            <svelte:fragment slot="trail">
+                <AppRailAnchor on:click={() => drawerStore.open()}>
+                    <div class="flex flex-col gap-2 place-content-center">
+                        <Fa size={'2x'} icon={faGear} />
+                        <p>Settings</p>
+                    </div>
+                </AppRailAnchor>
+            </svelte:fragment>
+        </AppRail>
+    </svelte:fragment>
     <svelte:fragment>
-        <div class="m-2">
+        <div class="max-h-dvh p-2">
-            {#if data}
+            {#if $imageSearchResults}
-                {#await data}
+                {#await $imageSearchResults}
-                    <p>Loading...</p>
                 {:then result}
                     <ImageGrid posts={result} />
                 {:catch err}

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

@@ -1,9 +1,11 @@
-import {invoke} from "@tauri-apps/api/tauri";
+import { invoke } from "@tauri-apps/api/tauri";
+
+export const ssr = false;
 
 /** @type {import('./$types').PageLoad} */
 export async function load({ params }) {
     // const post = await invoke('get_post', {post_id: params.post_id});
-    const post = null;
+    const post = await invoke('get_post', {postId: +params.post_id});
 
     return {
         postId: params.post_id,

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

@@ -1,14 +1,94 @@
 <script>
-    import { BackButton } from '$lib/components';
+    import {
+        AppRail,
+        AppRailAnchor,
+        AppShell,
+        Modal,
+        getDrawerStore,
+        getModalStore,
+        Drawer
+    } from '@skeletonlabs/skeleton';
+    import {faCode, faGear} from '@fortawesome/free-solid-svg-icons';
+    import { Fa } from 'svelte-fa';
+    import BackAppRailAnchor from "$lib/components/BackAppRailAnchor.svelte";
     export let data;
+
+    let drawerStore = getDrawerStore();
+    let modalStore = getModalStore();
+
+    const tagTypes = Object.entries({
+        artist: 'Artist',
+        character: 'Character',
+        copyright: 'Copyright',
+        general: 'General',
+        lore: 'Lore',
+        meta: 'Meta',
+        invalid: 'Invalid'
+    });
 </script>
 
-<BackButton />
+<Modal />
-<div>
+<Drawer>
-    <p>{data.postId}</p>
+
+</Drawer>
+<AppShell>
+    <svelte:fragment slot="sidebarRight">
+        <div class="p-2 h-dvh">
+            {#each tagTypes as [name, label]}
+                <div class="mb-2">
+                    <p class="font-bold">{label}</p>
+                    {#each data.post.tags[name] as tag}
+                        <p>{tag}</p>
+                    {/each}
+                </div>
+            {/each}
+        </div>
+    </svelte:fragment>
+    <svelte:fragment slot="sidebarLeft">
+        <AppRail height="h-dvh">
+            <svelte:fragment slot="lead">
+                <BackAppRailAnchor popCount={2} />
+            </svelte:fragment>
+            <svelte:fragment slot="trail">
+                <!-- <AppRailAnchor on:click={() => modalStore.trigger({body: JSON.stringify(data.post, null, 2)})}>
+                    <div class="flex flex-col gap-2 place-content-center">
+                        <Fa size={'2x'} icon={faCode} />
+                        <p>Post data</p>
+                    </div>
+                </AppRailAnchor> -->
+                <AppRailAnchor on:click={() => drawerStore.open()}>
+                    <div class="flex flex-col gap-2 place-content-center">
+                        <Fa size={'2x'} icon={faGear} />
+                        <p>Settings</p>
+                    </div>
+                </AppRailAnchor>
+            </svelte:fragment>
+        </AppRail>
+    </svelte:fragment>
+    <svelte:fragment slot="default">
+        <div class="max-h-dvh container mx-auto p-2">
+            <div class="flex flex-row place-content-center">
+                {#if data?.post?.preview?.has}
+                    <img class="mb-2" src={data.post.preview.url} alt={`Post ${data.post.id}`} />
+                {:else}
+                    <img class="mb-2" src={data.post.file.url} alt={`Post ${data.post.id}}`} />
+                {/if}
+            </div>
+            <div class="card">
+                <header class="px-3 pt-2">
+                    <p class="font-bold">Description</p>
+                </header>
+                <section class="p-3">
+                    <p>{data.post.description}</p>
+                </section>
+            </div>
+            <!-- <div>
                 <pre>
-        {JSON.stringify(data)}
+                    {JSON.stringify(data, null, 2)}
                 </pre>
-</div>
+            </div>-->
+        </div>
+    </svelte:fragment>
+</AppShell>
 
 <style lang="postcss"></style>