WIP design for post page

2024-03-18 02:20:50 +01:00 · 2024-03-18 02:20:50 +01:00 · 0464014ae0
commit 0464014ae0
parent c704958470
13 changed files with 241 additions and 68 deletions
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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==}
--- a/src-tauri/src/main.rs
+++ b/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");
--- a/src/lib/components/BackAppRailAnchor.svelte
+++ b/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>
--- a/src/lib/components/BackButton.svelte
+++ b/src/lib/components/BackButton.svelte
@ -1,3 +0,0 @@
-<button class="btn" on:click|preventDefault={() => {
-    history.back();
-}}>Back</button>
--- a/src/lib/components/ImageGrid.svelte
+++ b/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"
--- a/src/lib/components/index.js
+++ b/src/lib/components/index.js
@ -1,7 +1,5 @@
-import BackButton from './BackButton.svelte'
 import ImageGrid from './ImageGrid.svelte';

 export {
-    BackButton,
    ImageGrid,
 }
--- a/src/lib/stores.js
+++ b/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);
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@ -0,0 +1,4 @@
+<div class="container mx-auto">
+    <p>Error</p>
+    <slot />
+</div>
--- a/src/routes/+layout.svelte
+++ b/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>
+</div>
--- a/src/routes/+page.svelte
+++ b/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 { AppShell, Drawer, RangeSlider, getDrawerStore } from '@skeletonlabs/skeleton';
+    import { lastSearch, imageGridColumns, imageGridPreviewQuality, imageSearchResults, loading } from '$lib/stores';
+    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;
-        onSearch();
+        if ($imageSearchResults === null) {
+            $loading = true;
+            $imageSearchResults = invoke('get_posts', { query: $lastSearch });
+            $imageSearchResults.then(() => {
+                $loading = false;
+            });
+        }
    });

    function onSearch() {
-        $lastSearch = query;
-        data = invoke('get_posts', { query });
+        $loading = true;
+        $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>
-                <input class="input" type="text" bind:value={query} />
+                <span class="text-dark-token font-bold">Query</span>
+                <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-xs">{$imageGridColumns} / {12}</div>
+                        <div class="text-dark-token font-bold">Grid Columns</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">
-            {#if data}
-                {#await data}
-                    <p>Loading...</p>
+        <div class="max-h-dvh p-2">
+            {#if $imageSearchResults}
+                {#await $imageSearchResults}
                {:then result}
                    <ImageGrid posts={result} />
                {:catch err}
--- a/src/routes/posts/[post_id]/+page.js
+++ b/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,
--- a/src/routes/posts/[post_id]/+page.svelte
+++ b/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 />
-<div>
-    <p>{data.postId}</p>
-    <pre>
-        {JSON.stringify(data)}
-    </pre>
-</div>
+<Modal />
+<Drawer>
+
+</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, null, 2)}
+                </pre>
+            </div>-->
+        </div>
+    </svelte:fragment>
+</AppShell>

 <style lang="postcss"></style>