WIP UI

src/lib/components/AppSettings.svelte

@@ -1,5 +1,4 @@
 <script>
-    import { RangeSlider, Tab, TabGroup, InputChip, SlideToggle } from '@skeletonlabs/skeleton';
     import useSettings from '$lib/useSettings.svelte.js';
     const settings = useSettings();
 

src/lib/components/BackButton.svelte

@@ -28,6 +28,6 @@
 
 </script>
 
-<a {href} class="h-full flex flex-row aspect-square place-content-center justify-center items-center">
+<a {href} class="flex flex-row aspect-square place-content-center justify-center items-center bg-gray-600 h-10">
-    <Fa color="white" size={'2x'} icon={faArrowLeft} />
+    <Fa color="white" size={'1.5x'} icon={faArrowLeft} />
 </a>

src/lib/components/GlobalSearch.svelte

@@ -17,6 +17,6 @@
           loading.set(true);
           onsubmit?.(searchString, true);
       }}>
-    <input class="h-10 p-2" type="text" placeholder="Search" bind:value={searchString} />
+    <input class="h-10 p-2" type="text" placeholder="tags" bind:value={searchString} />
-    <button class="h-10 p-2 text-white bg-gray-600" type="submit">Submit</button>
+    <button class="h-10 p-2 text-white bg-gray-600" type="submit">Search</button>
 </form>

src/lib/components/Header.svelte

@@ -1,13 +1,20 @@
 <script>
-    import {BackAppRailAnchor, GlobalSearch} from "$lib/components";
+    import {BackButton, GlobalSearch} from "$lib/components";
-    let {onsubmit = null, back = null, class: className} = $props();
+    import {faArrowLeft, faCogs} from "@fortawesome/free-solid-svg-icons";
+    import {Fa} from "svelte-fa";
+    let {onsubmit = null, back = null, class: className, showSearch = true} = $props();
 </script>
 
-<header class="sticky w-full top-0 flex bg-gray-800 py-2 px-4 gap-1 {className}">
+<header class="absolute w-full top-0 flex bg-transparent py-2 px-4 gap-1 {className}">
     {#if back}
-        <BackAppRailAnchor popCount={back} />
+        <BackButton popCount={back} />
     {/if}
+    {#if showSearch}
         <GlobalSearch onsubmit={(val = '', explicitRefresh = false) => {
             onsubmit?.(val, explicitRefresh);
         }} />
+    {/if}
+    <a href="/settings" class="flex flex-row aspect-square place-content-center justify-center items-center bg-gray-600 h-10">
+        <Fa color="white" size={'1.5x'} icon={faCogs} />
+    </a>
 </header>

src/lib/components/PostMedia.svelte

@@ -9,16 +9,23 @@
 
     /** @type {Props} */
     let { post = null, class: className} = $props();
+    let elemRef;
 </script>
 
 {#if post?.preview?.has}
     <img class:max-h-dvh={settings.limitImageHeight} class={className} src={post.preview.url} alt={`Post ${post.id}`} />
 {:else}
     {#if ['webm', 'mp4'].includes(post.file.ext)}
-        <video class:max-h-dvh={settings.limitImageHeight} class={className} controls playsinline>
+        <video class={className} controls playsinline onclick={async e => {
+            e.preventDefault();
+            await e.currentTarget.requestFullscreen();
+        }}>
             <source src={post.file.url} />
         </video>
     {:else}
-        <img class:max-h-dvh={settings.limitImageHeight} class={className} src={post.file.url} alt={`Post ${post.id}`} />
+        <img class={className} src={post.file.url} alt={`Post ${post.id}`} onclick={async e => {
+            e.preventDefault();
+            await e.currentTarget.requestFullscreen();
+        }}/>
     {/if}
 {/if}

src/lib/components/index.js

@@ -1,5 +1,5 @@
 import AppSettings from './AppSettings.svelte';
-import BackAppRailAnchor from './BackButton.svelte';
+import BackButton from './BackButton.svelte';
 import GlobalSearch from './GlobalSearch.svelte';
 import ImageGrid from './ImageGrid.svelte';
 import PostMedia from './PostMedia.svelte';
@@ -7,7 +7,7 @@ import Header from './Header.svelte';
 
 export {
     AppSettings,
-    BackAppRailAnchor,
+    BackButton,
     GlobalSearch,
     ImageGrid,
     PostMedia,

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

@@ -20,7 +20,7 @@
 </script>
 
 <div class="grid [grid-template-areas:'header_header_header''main_main_aside']">
-    <Header class="[grid-area:header]" back={2} onsubmit={(val = '') => {
+    <Header class="[grid-area:header]" back={2} showSearch={false} onsubmit={(val = '') => {
         const queryParams = new URLSearchParams();
         queryParams.set('search', val);
         goto("/?" + queryParams.toString())
@@ -29,9 +29,7 @@
     <main class="[grid-area:main]">
         {#if post}
             <div class="flex flex-col">
-                <section class="flex flex-col place-items-center bg-white">
+                <PostMedia class="max-h-[95vh] w-auto" {post} />
-                    <PostMedia class="object-contain" {post} />
-                </section>
                 <section class="flex flex-row justify-between bg-black">
                     <div class="flex flex-row px-2 gap-2">
                         <button class="py-2 px-3 flex flex-row place-items-center gap-1 text-white hover:text-black hover:bg-white">

src/routes/settings/+page.svelte

@@ -1,2 +1,12 @@
-<script></script>
+<script>
-<div></div>
+import {goto} from "$app/navigation";
+import {Header} from "$lib/components/index.js";
+</script>
+
+<div class="grid [grid-template-areas:'header_header_header''main_main_aside']">
+    <Header class="[grid-area:header]" back={2} showSearch={false} onsubmit={(val = '') => {
+        const queryParams = new URLSearchParams();
+        queryParams.set('search', val);
+        goto("/?" + queryParams.toString())
+    }}></Header>
+</div>