@@ -2,6 +2,7 @@ Cargo.lock
 **/*.rs.bk
 
 **/target
+/data/copyright.png
 /pkg
 /static/ui/
 /var

-.PHONY: start wasm build run clean
-
 PROFILE ?= dev
 ifeq "$(PROFILE)" "release"
 CARGO_PROFILE = --release
 WASM_PROFILE = --release
 WASM_EXTRA = --no-default-features --features wee_alloc
+SERVER_TARGET = target/release/artshop-server
+WASM_TARGET = ui/target/wasm32-unknown-unknown/release/artshop_frontend.wasm
 else
 CARGO_PROFILE =
 WASM_PROFILE = --dev
 WASM_EXTRA =
+SERVER_TARGET = target/debug/artshop-server
+WASM_TARGET = ui/target/wasm32-unknown-unknown/debug/artshop_frontend.wasm
 endif
 
+SERVER_SOURCES = common/Cargo.toml \
+                 server/Cargo.toml \
+                 $(shell find common -name "*.rs") \
+                 $(shell find server -name "*.rs")
+WASM_DEPLOY = static/ui/artshop_frontend_bg.wasm
+WASM_SOURCES = common/Cargo.toml \
+               ui/Cargo.toml \
+               $(shell find common -name "*.rs") \
+               $(shell find ui -name "*.rs")
+
 define msg
+	@printf "\033[38;5;197m%s\033[0m" "$(1)"
+endef
+
+define msgnl
 	@printf "\033[38;5;197m%s\033[0m\n" "$(1)"
 endef
 
+.PHONY: start run wasm build clean release
+
 start:
-	systemfd --no-pid -s 0.0.0.0:3000 -- \
-		cargo watch -i static/ -i var/ -s "PROFILE=$(PROFILE) make run"
+	$(call msgnl,NOTIFY REBUILD RUN)
+	@systemfd --no-pid -s 0.0.0.0:3000 -- \
+		cargo watch -i static/ -i var/ \
+		-s "PROFILE=$(PROFILE) make run"
 
-wasm:
-	$(call msg,BUILD WASM UI)
+run: build wasm data/copyright.png
+	$(call msgnl,RUN SERVER)
+	@PROFILE=$(PROFILE) cargo run $(CARGO_PROFILE) --bin artshop-server
+
+wasm: $(WASM_DEPLOY)
+
+build: $(SERVER_TARGET)
+
+clean:
+	$(call msgnl,CLEAN WORKSPACE)
+	@PROFILE=$(PROFILE) cargo clean
+	$(call msgnl,CLEAN INSTALLED WASM)
+	@rm -Rf ./static/ui
+	$(call msgnl,CLEAN INSTALLED WASM)
+	@pushd ui; PROFILE=$(PROFILE) cargo clean; popd
+	$(call msgnl,CLEAN COPYRIGHT PNG)
+	@rm -Rf ./data/copyright.png
+
+$(WASM_TARGET): $(WASM_SOURCES)
+	$(call msgnl,BUILD WASM UI)
+	@PROFILE=$(PROFILE) wasm-pack build $(WASM_PROFILE) -d ../static/ui \
+		-t web --mode no-install ./ui -- $(WASM_EXTRA)
+
+$(WASM_DEPLOY): $(WASM_TARGET)
+	$(call msgnl,INSTALL WASM UI)
 	@PROFILE=$(PROFILE) wasm-pack build $(WASM_PROFILE) -d ../static/ui \
 		-t web ./ui -- $(WASM_EXTRA)
 
-build:
-	$(call msg,BUILD SERVER)
+$(SERVER_TARGET): $(SERVER_SOURCES)
+	$(call msgnl,PATCH DIFFY)
+	@PROFILE=$(PROFILE) cargo patch
+	$(call msgnl,BUILD SERVER)
 	@PROFILE=$(PROFILE) cargo build $(CARGO_PROFILE) --bin artshop-server
 
-run: build wasm
-	$(call msg,RUN SERVER)
-	@PROFILE=$(PROFILE) cargo run $(CARGO_PROFILE) --bin artshop-server
+data/copyright.png: data/copyright.txt
+	$(call msgnl,CREATE COPYRIGHT PNG)
+	@cat $< | convert -pointsize 24 -font Helvetica \
+		-background transparent -fill "rgba(255,255,255,0.35)" \
+		text:- -trim +repage $@
 
 release:
 	docker build -t artshop -f build/Dockerfile .
 
+.PHONY: createdb devdb downdb enterdb rootdb
+
+createdb: downdb devdb
+	$(call msg,TRY TO CONNECT TO DB )
+	@while true;\
+	do\
+		echo "SELECT VERSION();"|\
+			docker exec -i mariadb-dev \
+			mysql -p123456 >/dev/null 2>&1 && break;\
+		echo -n ".";\
+		sleep 3;\
+	done; echo
+	$(call msgnl,INITIALIZE APPLICATION DB)
+	echo "CREATE DATABASE artshop CHARACTER SET = 'utf8mb3' \
+		COLLATE = 'utf8mb3_general_ci'; \
+		GRANT ALL PRIVILEGES ON artshop.* TO 'artshop'@'%'"|\
+	docker exec -i mariadb-dev mysql -p123456
+	$(call msgnl,RUN MIGRATIONS)
+	@diesel migration run
+
+downdb:
+	$(call msgnl,STOP DB CONTAINER)
+	@docker stop mariadb-dev||true
+	$(call msgnl,REMOVE DB CONTAINER)
+	@docker rm -v mariadb-dev||true
+	$(call msgnl,REMOVE IMAGES)
+	@rm -Rf var/lib/artshop/images
+
 devdb:
-	docker network create mariadb-dev-network
-	docker run --detach --network mariadb-dev-network --name mariadb-dev \
+	$(call msgnl,CREATE DB CONTAINER)
+	@docker run --detach --name mariadb-dev \
 		-p 3306:3306 \
 		--env MARIADB_USER=artshop \
 		--env MARIADB_PASSWORD=123456 \
 		--env MARIADB_ROOT_PASSWORD=123456 mariadb:latest
 
 enterdb:
-	docker exec -it mariadb-dev mysql -D artshop -u artshop -p
+	docker exec -it mariadb-dev mysql -D artshop -u artshop -p123456||true
 #	docker run -it --network mariadb-dev-network --rm mariadb:latest \
 #		mysql -h mariadb-dev -u artshop -p
 
 rootdb:
-	docker exec -it mariadb-dev mysql -p
-
-clean:
-	cargo clean
-	rm -Rf ./static/ui
+	docker exec -it mariadb-dev mysql -p123456||true

@@ -5,5 +5,17 @@ namespace = "artshop.shome.steffers.org"
 # url = "./var/lib/artshop/database"
 
 [locations]
-upload = "/tmp/artshop/uploads"
+data = "./data"
 images = "./var/lib/artshop/images"
+upload = "/tmp/artshop/uploads"
+
+[sizes]
+large = { width = 1280, height = 1280 }
+medium = { width = 800, height = 800 }
+small = { width = 400, height = 400 }
+thumbnail = {width = 100, height = 100 }
+
+[copyright]
+image_path = "./data/copyright.png"
+steganography = "Copyright © 2022, Stefanies Artshop, All rights reserved"
+exiv = "Copyright, Stefanies Artshop, 2022. All rights reserved"

@@ -8,27 +8,23 @@ pub enum Either<L, R> {
 
 #[derive(Clone, Debug, Serialize, Deserialize)]
 pub struct MarkdownJson {
-    pub name: String,
-    pub content: String,
-    pub number_of_versions: i32,
-    pub date_created: String,
-    pub date_updated: String,
+    pub name               :String,
+    pub content            :String,
+    pub number_of_versions :i32,
+    pub date_created       :String,
+    pub date_updated       :String,
 }
 
 #[derive(Clone, Debug, Serialize, Deserialize)]
 pub struct MarkdownDiffJson {
-    pub id: i32,
-    pub date_created: String,
+    pub id           :i32,
+    pub date_created :String,
 }
 
 #[derive(Clone, Debug, Serialize, Deserialize)]
 pub struct ImageJson {
-    pub upload_uuid  :Option<Vec<u8>>,
-    pub uuid         :Option<Vec<u8>>,
-    pub size         :i32,
-    pub dim_x        :Option<i32>,
-    pub dim_y        :Option<i32>,
-    pub mime_type    :String,
+    pub id           :i32,
+    pub uuid         :Vec<u8>,
     pub date_created :String,
     pub date_updated :String
 }

+Copyright © 2022, Stefanies Artshop

@@ -64,3 +64,18 @@ and parallel:
 
     GRANT ALL PRIVILEGES ON artshop.* TO 'artshop'@'%';
     CREATE DATABASE artshop CHARACTER SET = 'utf8mb3' COLLATE = 'utf8mb3_general_ci';
+
+# Get information for github user while not having own account
+
+    https://api.github.com/users/xxxxxxx/events/public
+
+where xxxxxxx is the github username. Then search for email.
+
+# Create a Copyright Watermark ...
+
+    cat text.txt | convert -pointsize 24 -font Helvetica -background black \
+	-fill white text:- -trim +repage text.jpg
+
+    cat copyright.txt | convert -pointsize 24 -font Helvetica \
+    	-background transparent -fill "rgba(255,255,255,0.35)" \
+	text:- -trim +repage copyright.png

@@ -102,7 +102,7 @@ erstellen. Theoretisch könnte für solche Böcke dann Syntax-Highliting eingeba
 ```shell
 #!/bin/env sh
 
-FOO="foo"
+FOO=\"foo\"
 
 function func() {
   local BAR=bar
@@ -193,6 +193,6 @@ wie hier.</pre>
 </ul>
 
 [lnk1]: https://heise.de/tp/ 'Telepolis'
-[lnk2]: https://arkdown.land/markdown-table 'markdown.land' "
+[lnk2]: https://arkdown.land/markdown-table 'markdown.land'"
 	, '2022-01-29 21:33:34.000'
 	, '2022-01-29 21:33:34.000' );

+-- This file should undo anything in `up.sql`
+DROP VIEW images_blob_as_b64;

+CREATE VIEW images_blob_as_b64 AS
+SELECT id, TO_BASE64(upload_uuid), TO_BASE64(uuid), size, dim_x, dim_y,
+       mime_type, date_created, date_updated
+FROM images;

+--- src/patch/parse.rs	2022-01-31 14:20:14.539741482 +0100
++++ src/patch/parse.rs	2022-01-31 14:21:27.058846339 +0100
+@@ -193,8 +193,8 @@
+ 
+ fn verify_hunks_in_order<T: ?Sized>(hunks: &[Hunk<'_, T>]) -> bool {
+     for hunk in hunks.windows(2) {
+-        if hunk[0].old_range.end() >= hunk[1].old_range.start()
+-            || hunk[0].new_range.end() >= hunk[1].new_range.start()
++        if hunk[0].old_range.end() > hunk[1].old_range.start()
++            || hunk[0].new_range.end() > hunk[1].new_range.start()
+         {
+             return false;
+         }

@@ -8,15 +8,15 @@ repository = "https://gitlab.weird-web-workers.org/rust/artshop"
 license = "GPL-3.0-or-later"
 
 [dependencies]
-actix-files = "0.2"
-actix-rt = "1.1.1"
-actix-web = "2.0"
+actix-files = "^0.5"
+actix-rt = "^1.1"
+actix-web = "^3.3"
 anyhow = "1.0"
 artshop-common = { path = "../common" }
-async-std = "^1.10"
+async-std = { version = "^1.10", features = ["unstable"] }
 chrono = "0.4.15"
-diesel = { version = "1.4.7", features = ["mysql", "sqlite", "r2d2"]}
-diffy = "0.2"
+diesel = { version = "1.4.7", features = ["mysql", "sqlite", "r2d2"] }
+diffy = "0.2.2"
 dotenv = "0.15.0"
 flate2 = "^1.0"
 futures = "^0.3"
@@ -24,9 +24,12 @@ futures-util = { version = "0", features = ["std"] }
 image = "^0.23"
 listenfd = "0.3"
 once_cell = "^1.9"
+mime = "^0.3"
 r2d2 = "0.8.9"
+rexiv2 = "^0.9"
 serde = { version = "^1.0", features = ["derive"] }
 serde_derive = "1.0"
 serde_json = "1.0"
+steganography = { git = "https://github.com/teovoinea/steganography" }
 toml = "^0.5"
 uuid = { version = "^0.8", features = ["v4", "v5"] }

 use std::fs::File;
 use std::io::Read;
+use image::{ DynamicImage, io::Reader as ImageReader };
 use once_cell::sync::Lazy;
 use serde::Deserialize;
+use anyhow::Result;
+use crate::routes::image::Size as ImageSize;
 
 #[derive(Debug, Deserialize)]
 struct Database { url :Option<String> }
 
 #[derive(Debug, Deserialize)]
-struct Locations { upload :String
-                 , images :String }
+struct Locations { data   :String
+                 , images :String
+                 , upload :String }
 
 #[derive(Debug, Deserialize)]
-pub(crate) struct Config { namespace :String
-                         , database  :Database
-                         , locations :Locations }
+struct Size { width :u32
+            , height :u32 }
 
-pub(crate) static CONFIG :Lazy<Config> = Lazy::new(|| Config::load());
+#[derive(Debug, Deserialize)]
+struct Sizes { large :Size
+             , medium :Size
+             , small :Size
+             , thumbnail :Size }
+
+#[derive(Debug, Deserialize)]
+struct Copyright { image_path :String
+                 , steganography :String
+                 , exiv :String }
+
+#[derive(Debug, Deserialize)]
+pub(crate) struct ConfigFile { namespace :String
+                             , database  :Database
+                             , locations :Locations
+                             , sizes     :Sizes
+                             , copyright :Copyright }
+
+pub(crate) struct Config { config_file :ConfigFile
+                         , copyright_image :DynamicImage }
+
+pub(crate) static CONFIG :Lazy<Config> =
+    Lazy::new(|| Config::load().unwrap());
 
 impl Config {
-    pub fn load() -> Config {
-        let filename = std::env::var("CONFIG").unwrap();
+    pub fn load() -> Result<Self> {
+        let filename = std::env::var("CONFIG")?;
 
         let mut buffer = vec![];
-        let mut file = File::open(filename).unwrap();
+        let mut file = File::open(filename)?;
 
-        file.read_to_end(&mut buffer).unwrap();
-        let mut config :Config = toml::from_slice(&buffer).unwrap();
+        file.read_to_end(&mut buffer)?;
+        let mut config_file :ConfigFile = toml::from_slice(&buffer)?;
 
-        config.database.url = match config.database.url {
+        config_file.database.url = match config_file.database.url {
             Some(url) => Some(url),
             None => std::env::var("DATABASE_URL").ok()
         };
 
-        config
+        let copyright_image = ImageReader::open(&config_file.copyright.image_path)?
+                            . with_guessed_format()?
+                            . decode()?;
+
+        Ok(Self { config_file, copyright_image })
     }
 
     pub fn namespace(&self) -> &str {
-        self.namespace.as_str()
+        self.config_file.namespace.as_str()
     }
 
     pub fn upload_dir(&self) -> &str {
-        self.locations.upload.as_str()
+        self.config_file.locations.upload.as_str()
     }
 
     pub fn images_dir(&self) -> &str {
-        self.locations.images.as_str()
+        self.config_file.locations.images.as_str()
+    }
+
+    pub fn width(&self, size :ImageSize) -> Option<u32> {
+        match size {
+            ImageSize::Original => None,
+            ImageSize::Large => Some(self.config_file.sizes.large.width),
+            ImageSize::Medium => Some(self.config_file.sizes.medium.width),
+            ImageSize::Small => Some(self.config_file.sizes.small.width),
+            ImageSize::Thumbnail => Some(self.config_file.sizes.thumbnail.width),
+        }
+    }
+
+    pub fn height(&self, size :ImageSize) -> Option<u32> {
+        match size {
+            ImageSize::Original => None,
+            ImageSize::Large => Some(self.config_file.sizes.large.height),
+            ImageSize::Medium => Some(self.config_file.sizes.medium.height),
+            ImageSize::Small => Some(self.config_file.sizes.small.height),
+            ImageSize::Thumbnail => Some(self.config_file.sizes.thumbnail.height),
+        }
+    }
+
+    pub fn copyright_image(&self) -> &DynamicImage {
+        &self.copyright_image
+    }
+
+    pub fn copyright_steganography(&self) -> &str {
+        self.config_file.copyright.steganography.as_str()
+    }
+
+    pub fn copyright_exiv(&self) -> &str {
+        self.config_file.copyright.exiv.as_str()
     }
 }

-use std::{fmt::Display, pin::Pin};
+use std::{fmt::Display, pin::Pin, sync::Arc};
 
+use actix_rt::blocking::BlockingError;
+use actix_web::{http::{StatusCode, header::ToStrError}, ResponseError};
+use async_std::channel::SendError;
 use diesel::result;
-use diffy::ParsePatchError;
+use diffy::{ParsePatchError, ApplyError};
+use image::ImageError;
+use mime::FromStrError;
 use r2d2;
+use rexiv2::Rexiv2Error;
+
+use crate::{Pool, models::image::Image};
 
 type ParentError = Option<Pin<Box<dyn std::error::Error>>>;
 
 #[derive(Debug)]
 pub struct Error {
-    source: ParentError,
-    message: String,
+    source  :ParentError,
+    message :String,
+    status  :Option<StatusCode>
 }
 
 unsafe impl Send for Error {}
@@ -22,19 +31,36 @@ impl std::error::Error for Error {
     }
 }
 
+impl ResponseError for Error {
+    fn status_code(&self) -> StatusCode {
+        self.status.unwrap_or(StatusCode::INTERNAL_SERVER_ERROR)
+    }
+}
+
 impl Display for Error {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         match self {
-            Error { source: Some(source), message } =>
-                write!(f, "{}: {}", message, source),
-            Error { source: None, message } => write!(f, "{}", message),
+            Error { source: Some(source), message, status } =>
+                write!( f
+                      , "[{}] {}: {}"
+                      , status.unwrap_or(StatusCode::INTERNAL_SERVER_ERROR)
+                      , message
+                      , source ),
+            Error { source: None, message, status } =>
+                write!( f
+                      , "[{}] {}"
+                      , status.unwrap_or(StatusCode::INTERNAL_SERVER_ERROR)
+                      , message ),
         }
     }
 }
 
-impl From<&str> for Error {
-    fn from(message: &str) -> Self {
-        Self { source: None, message: String::from(message) }
+impl Error {
+    pub(crate) fn new(message :&str, status :StatusCode) -> Self {
+        Self { source: None
+             , message: String::from(message)
+             , status: Some(status)
+        }
     }
 }
 
@@ -42,6 +68,7 @@ impl From<result::Error> for Error {
     fn from(source: result::Error) -> Self {
         Self { source: Some(Box::pin(source))
              , message: String::from("Diesel Result Error")
+             , status: Some(StatusCode::INTERNAL_SERVER_ERROR)
         }
     }
 }
@@ -49,7 +76,8 @@ impl From<result::Error> for Error {
 impl From<r2d2::Error> for Error {
     fn from(source: r2d2::Error) -> Self {
         Self { source: Some(Box::pin(source))
-             , message: String::from("Diesel Result Error")
+             , message: String::from("R2D2 Pool Error")
+             , status: Some(StatusCode::INTERNAL_SERVER_ERROR)
         }
     }
 }
@@ -58,6 +86,7 @@ impl From<std::io::Error> for Error {
     fn from(source: std::io::Error) -> Self {
         Self { source: Some(Box::pin(source))
              , message: String::from("IO Error")
+             , status: Some(StatusCode::INTERNAL_SERVER_ERROR)
         }
     }
 }
@@ -65,7 +94,8 @@ impl From<std::io::Error> for Error {
 impl From<std::str::Utf8Error> for Error {
     fn from(source: std::str::Utf8Error) -> Self {
         Self { source: Some(Box::pin(source))
-             , message: String::from("IO Error")
+             , message: String::from("UTF8 Error")
+             , status: Some(StatusCode::INTERNAL_SERVER_ERROR)
         }
     }
 }
@@ -73,7 +103,17 @@ impl From<std::str::Utf8Error> for Error {
 impl From<ParsePatchError> for Error {
     fn from(source: ParsePatchError) -> Self {
         Self { source: Some(Box::pin(source))
-             , message: String::from("IO Error")
+             , message: String::from("Diffy Error")
+             , status: Some(StatusCode::INTERNAL_SERVER_ERROR)
+        }
+    }
+}
+
+impl From<ApplyError> for Error {
+    fn from(source: ApplyError) -> Self {
+        Self { source: Some(Box::pin(source))
+             , message: String::from("Diffy Error")
+             , status: Some(StatusCode::INTERNAL_SERVER_ERROR)
         }
     }
 }
@@ -82,6 +122,61 @@ impl From<uuid::Error> for Error {
     fn from(source: uuid::Error) -> Self {
         Self { source: Some(Box::pin(source))
              , message: String::from("UUID error")
+             , status: Some(StatusCode::INTERNAL_SERVER_ERROR)
+        }
+    }
+}
+
+impl From<FromStrError> for Error {
+    fn from(source: FromStrError) -> Self {
+        Self { source: Some(Box::pin(source))
+             , message: String::from("Mime error")
+             , status: Some(StatusCode::INTERNAL_SERVER_ERROR)
+        }
+    }
+}
+
+impl From<ToStrError> for Error {
+    fn from(source: ToStrError) -> Self {
+        Self { source: Some(Box::pin(source))
+             , message: String::from("Header error")
+             , status: Some(StatusCode::INTERNAL_SERVER_ERROR)
+        }
+    }
+}
+
+impl From<SendError<(Arc<Pool>, Image)>> for Error {
+    fn from(source: SendError<(Arc<Pool>, Image)>) -> Self {
+        Self { source: Some(Box::pin(source))
+             , message: String::from("Image Worker send error")
+             , status: Some(StatusCode::INTERNAL_SERVER_ERROR)
+        }
+    }
+}
+
+impl From<ImageError> for Error {
+    fn from(source: ImageError) -> Self {
+        Self { source: Some(Box::pin(source))
+             , message: String::from("Image processing error")
+             , status: Some(StatusCode::INTERNAL_SERVER_ERROR)
+        }
+    }
+}
+
+impl From<Rexiv2Error> for Error {
+    fn from(source: Rexiv2Error) -> Self {
+        Self { source: Some(Box::pin(source))
+             , message: String::from("Exiv error")
+             , status: Some(StatusCode::INTERNAL_SERVER_ERROR)
+        }
+    }
+}
+
+impl From<BlockingError<Error>> for Error {
+    fn from(source: BlockingError<Error>) -> Self {
+        Self { source: Some(Box::pin(source))
+             , message: String::from("web::block error")
+             , status: Some(StatusCode::INTERNAL_SERVER_ERROR)
         }
     }
 }

@@ -12,8 +12,12 @@ mod upload_worker;
 use models::image::Image;
 use routes::markdown::*;
 use routes::other::*;
+use routes::ui::frontend_js;
+use routes::ui::frontend_wasm;
 use routes::user::*;
 use routes::upload::*;
+use routes::image::*;
+
 
 use actix_web::{guard, web, App, HttpResponse, HttpServer};
 use async_std::channel::Sender;
@@ -21,7 +25,6 @@ use diesel::r2d2::{self, ConnectionManager};
 use diesel::MysqlConnection;
 use listenfd::ListenFd;
 use std::sync::Arc;
-use std::ops::Deref;
 
 pub(crate) type Pool = r2d2::Pool<ConnectionManager<MysqlConnection>>;
 
@@ -37,8 +40,6 @@ async fn main() -> std::io::Result<()> {
 
     dotenv::dotenv().ok();
 
-    println!("CONFIG: {:?}", config::CONFIG.deref());
-
     let tx_upload_worker = upload_worker::launch();
 
     let database_url = std::env::var("DATABASE_URL").expect("NOT FOUND");
@@ -56,6 +57,12 @@ async fn main() -> std::io::Result<()> {
                             . service( web::resource("/upload")
                                      . route(web::post().to(upload))
                                      )
+                            . service( web::resource("/images")
+                                     . route(web::get().to(get_images))
+                                     )
+                            . service( web::resource("/images/{id}")
+                                     . route(web::get().to(get_image))
+                                     )
                             . service( web::resource("/markdowns")
                                      . route(web::get().to(get_markdowns))
                                      )
@@ -76,6 +83,12 @@ async fn main() -> std::io::Result<()> {
                                      . route(web::put().to(update_user))
                                      )
                             )
+                   . service( web::scope("/ui")
+                            . route( "/artshop_frontend.js"
+                                   , web::get().to(frontend_js) )
+                            . route( "/artshop_frontend_bg.wasm"
+                                   , web::get().to(frontend_wasm))
+                            )
                    . service( web::scope("")
                             . route("/", web::get().to(root))
                             . route("/api.html", web::get().to(apidoc))

+use std::convert::TryFrom;
+use std::io::SeekFrom;
 use std::sync::Arc;
 
 use crate::error::*;
-use crate::{schema::*, Pool};
+use crate::routes::image::Size;
+use crate::uuid::Uuid;
+use crate::{schema::*, Pool, config::CONFIG};
+use actix_web::http::StatusCode;
+use async_std::fs::File;
+use async_std::io::prelude::SeekExt;
+use async_std::path::PathBuf;
 use diesel::{Connection, insert_into, delete, update};
 use diesel::prelude::*;
 use serde::{Deserialize, Serialize};
 
+use async_std::io::ReadExt;
+
 #[derive(Clone, Debug, Serialize, Deserialize, Queryable, Identifiable)]
 pub struct Image {
     pub id           :i32,
@@ -50,6 +60,13 @@ pub struct ImagePatch {
     pub date_updated :String
 }
 
+pub struct ImageContext {
+    pub image       :Image,
+    base_path   :Option<PathBuf>,
+    uuid_string :Option<String>,
+    upload_path :Option<PathBuf>
+}
+
 impl From<Image> for ImagePatch {
     fn from(image: Image) -> Self {
         let now = chrono::Local::now().naive_local();
@@ -65,26 +82,119 @@ impl From<Image> for ImagePatch {
     }
 }
 
-#[macro_export]
-macro_rules! upload_uuid {
-    ($u:expr) => {
-        match &$u.upload_uuid {
-            Some(uuid) => $crate::uuid::Uuid::try_from(uuid.as_slice()).ok(),
-            None       => None,
-        }
-    };
+async fn read_at( f   :&mut File
+                , pos :SeekFrom
+                , buf :&mut [u8]) -> std::io::Result<()> {
+    f.seek(pos).await?;
+    f.read_exact(buf).await
 }
 
-#[macro_export]
-macro_rules! upload_filename {
-    ($u:expr) => {
-        $crate::upload_uuid!($u)
-            . and_then(|uuid| Some(format!( "{}/upload_{}"
-                                          , $crate::config::CONFIG.upload_dir()
-                                          , uuid )))
-    };
+async fn get_sample( f   :&mut File
+                   , buf :&mut [u8]) -> std::io::Result<()> {
+    let file_len = f.metadata().await?.len();
+    let chunk_size = buf.len() / 3;
+
+    read_at(f, SeekFrom::Start(0), &mut buf[0..chunk_size]).await?;
+    if file_len >= 2 * chunk_size as u64 {
+        read_at( f
+               , SeekFrom::End(-(chunk_size as i64))
+               , &mut buf[2*chunk_size..]).await?;
+    }
+    if file_len >= 3 * chunk_size as u64 {
+        read_at( f
+               , SeekFrom::Start((file_len-chunk_size as u64) / 2)
+               , &mut buf[chunk_size..2*chunk_size]).await?;
+    }
+
+    Ok(())
+}
+
+impl Image {
+    pub(crate) fn context(self) -> ImageContext {
+        ImageContext { image       :self
+                     , base_path   :None
+                     , uuid_string :None
+                     , upload_path :None }
+    }
+}
+
+impl ImageContext {
+    pub(crate) async fn upload_path(&mut self) -> Option<&PathBuf> {
+        if self.upload_path.is_none() {
+            let uuid = Uuid::try_from(self.image.upload_uuid.clone()?).ok()?;
+            let uuid_string = format!("{}", uuid);
+
+            let mut upload_path = PathBuf::from(CONFIG.upload_dir());
+            upload_path.push(&uuid_string);
+
+            self.upload_path = Some(upload_path);
+        }
+
+        self.upload_path.as_ref()
+    }
+
+    async fn uuid_string(&mut self) -> Result<&String> {
+        if self.uuid_string.is_none() {
+            let uuid :Uuid;
+
+            if let Some(u) = &self.image.uuid {
+                uuid = Uuid::try_from(u.as_ref())?;
+            } else {
+                let path = self
+                         . upload_path().await
+                         . ok_or(Error::new( "No upload and no uuid"
+                                           , StatusCode::INTERNAL_SERVER_ERROR ))?;
+
+                let mut f = File::open(&path).await?;
+                let mut buf = vec!['.' as u8; 3 * 3 * 4096];
+
+                get_sample(&mut f, buf.as_mut()).await?;
+                uuid = Uuid::get(CONFIG.namespace(), buf.as_mut());
+
+                self.image.uuid = Some(uuid.0.as_bytes().to_vec());
+                self.image.upload_uuid = None;
+            }
+
+            self.uuid_string = Some(format!("{}", uuid));
+        }
+
+        Ok(self.uuid_string.as_ref().unwrap())
+    }
+
+    pub(crate) async fn base_path(&mut self) -> Option<&PathBuf> {
+        if self.upload_path.is_none() {
+            let uuid_string = self.uuid_string().await.ok()?;
+
+            let mut base_path = PathBuf::from(CONFIG.images_dir());
+            base_path.push(&uuid_string.as_str()[..1]);
+            base_path.push(&uuid_string.as_str()[..2]);
+            base_path.push(&uuid_string.as_str()[..3]);
+
+            self.base_path = Some(base_path);
+        }
+
+        self.base_path.as_ref()
+    }
+
+    pub(crate) async fn path(&mut self, size :Size) -> Option<PathBuf> {
+        let mut path = self.base_path().await?.to_owned();
+        path.push(&format!("{}_{}", &self.uuid_string().await.ok()?, size));
+
+        Some(path)
+    }
 }
 
+impl Upload {
+    pub(crate) async fn upload_path(&mut self) -> Option<PathBuf> {
+        let uuid = Uuid::try_from(self.upload_uuid.clone()?).ok()?;
+        let uuid_string = format!("{}", uuid);
+
+        let mut upload_path = PathBuf::from(CONFIG.upload_dir());
+        upload_path.push(&uuid_string);
+
+        Some(upload_path)
+    }
+}
 
 pub(crate) fn upload( pool: Arc<Pool>
                     , item: Upload ) -> Result<Image> {
@@ -108,8 +218,8 @@ pub(crate) fn upload( pool: Arc<Pool>
     })?)
 }
 
-pub(crate) fn finalize( pool: Arc<Pool>
-                      , item: Image ) -> Result<Image> {
+pub(crate) fn finalize( pool :Arc<Pool>
+                      , item :Image ) -> Result<Image> {
     use crate::schema::images::dsl::*;
 
     let db_connection = pool.get()?;
@@ -129,3 +239,22 @@ pub(crate) fn finalize( pool: Arc<Pool>
         },
     }
 }
+
+pub(crate) fn get_images(pool: Arc<Pool>) -> Result<Vec<Image>>
+{
+    use crate::schema::images::dsl::*;
+    let db_connection = pool.get()?;
+    Ok(images.load::<Image>(&db_connection)?)
+}
+
+pub(crate) fn get_image( pool  :Arc<Pool>
+                       , ident :i32 ) -> Result<Image>
+{
+    use crate::schema::images::dsl::*;
+
+    let db_connection = pool.get()?;
+
+    Ok( images
+      . filter(id.eq(ident))
+      . first::<Image>(&db_connection)? )
+}

@@ -162,7 +162,7 @@ pub(crate) fn get_markdown( pool:  Arc<Pool>
             let patch_data = patch.get_diff_as_string()?;
             let decomp = Patch::from_str(&patch_data)?;
 
-            markdown.content = apply(&markdown.content, &decomp).unwrap();
+            markdown.content = apply(&markdown.content, &decomp)?;
             markdown.date_updated = patch.date_created;
         }
     };
@@ -211,8 +211,8 @@ pub(crate) fn update_markdown( pool: Arc<Pool>
     let patch = format!( "{}", create_patch( item.content.as_str()
                                            , markdown.content.as_str() ));
     let mut encoder = DeflateEncoder::new(Vec::new(), Compression::best());
-    encoder.write_all(patch.as_bytes()).unwrap();
-    let compressed = encoder.finish().unwrap();
+    encoder.write_all(patch.as_bytes())?;
+    let compressed = encoder.finish()?;
 
     let last_diff = match markdown_diffs . filter(markdown_id.eq(markdown.id))
                                          . order(diff_id.desc())
@@ -240,7 +240,7 @@ pub(crate) fn update_markdown( pool: Arc<Pool>
         update(&markdown).set(MarkdownChange::from(&item)).execute(&db_connection)?;
 
         Ok(())
-    }).unwrap();
+    })?;
 
     markdown.name               = item.name;
     markdown.content            = item.content;

+use std::fmt::Display;
+
+use crate::{models::image, AppData, error::Error};
+
+use actix_web::{Error as ActixError, web, HttpResponse, http::StatusCode};
+use anyhow::Result;
+use serde::{Deserialize, Serialize};
+
+#[derive(Clone, Copy, Debug, Deserialize, Serialize)]
+#[serde (rename_all = "lowercase")]
+pub enum Size {
+    Original,
+    Large,
+    Medium,
+    Small,
+    Thumbnail
+}
+
+#[derive(Debug, Deserialize, Serialize)]
+pub struct SizeQuery {
+    size :Option<Size>,
+}
+
+impl Display for Size {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        let size_str = match self {
+            Size::Original => "original",
+            Size::Large => "large",
+            Size::Medium => "medium",
+            Size::Small => "small",
+            Size::Thumbnail => "thumbnail"
+        };
+
+        write!(f, "{}", size_str)
+    }
+}
+
+pub async fn get_images(app_data: web::Data<AppData>)
+    -> Result<HttpResponse, ActixError>
+{
+    let pool = app_data.database_pool.clone();
+
+    Ok(web::block(move || image::get_images(pool))
+       . await
+       . map(|images| HttpResponse::Ok().json(images))
+       . map_err(|_| HttpResponse::InternalServerError())?)
+}
+
+pub async fn get_image( app_data: web::Data<AppData>
+                      , ident: web::Path<i32>
+                      , size: web::Query<SizeQuery>
+                      ) -> Result<actix_files::NamedFile, ActixError>
+{
+    let pool = app_data.database_pool.clone();
+    let ident = ident.into_inner();
+    let size = size.into_inner().size.unwrap_or(Size::Large);
+
+    let image = web::block(move || image::get_image(pool, ident)).await?;
+    let path = image.clone().context()
+             . path(size).await
+             . ok_or(Error::new( "Image not ready"
+                               , StatusCode::SERVICE_UNAVAILABLE ))?;
+
+    Ok( actix_files::NamedFile::open(path)?
+      . set_content_type( image.mime_type
+                        . parse()
+                        . map_err(|e| Error::from(e))? )
+      . disable_content_disposition() )
+}

+pub(crate) mod image;
 pub(crate) mod markdown;
 pub(crate) mod other;
+pub(crate) mod ui;
 pub(crate) mod upload;
 pub(crate) mod user;

+use actix_web::Error;
+use actix_files::NamedFile;
+use anyhow::Result;
+
+pub async fn frontend_js() -> Result<NamedFile, Error> {
+    Ok( NamedFile::open("static/ui/artshop_frontend.js")?
+      . set_content_type(mime::APPLICATION_JAVASCRIPT) )
+}
+
+pub async fn frontend_wasm() -> Result<NamedFile, Error> {
+    Ok( NamedFile::open("static/ui/artshop_frontend_bg.wasm")?
+      . set_content_type("application/wasm".parse::<mime::Mime>().unwrap()) )
+}

-use actix_web::{Error, HttpResponse, web};
+use actix_web::{Error as ActixError, HttpResponse, web, http::StatusCode};
 use anyhow::Result;
 use async_std::fs::DirBuilder;
 use futures::{stream::StreamExt, AsyncWriteExt};
 use async_std::fs::OpenOptions;
 
-use crate::{AppData, models::image::{Upload, self}, upload_filename};
+use crate::{AppData, models::image::{Upload, self}, error::Error};
 use crate::config::CONFIG;
-use std::convert::TryFrom;
 
 pub async fn upload( app_data :web::Data<AppData>
                    , mut body :web::Payload
-                   , request  :web::HttpRequest ) -> Result<HttpResponse, Error>
+                   , request  :web::HttpRequest
+                   ) -> Result<HttpResponse, ActixError>
 {
     let pool = app_data.database_pool.clone();
     let worker = app_data.tx_upload_worker.clone();
 
     let upload_uuid = Some(uuid::Uuid::new_v4().as_bytes().to_vec());
     let size = request.headers().get("content-length")
-             . and_then(|h| Some(h.to_str().unwrap().parse::<i32>()))
-             . unwrap().unwrap();
-    let mime_type = String::from( request.headers().get("content-type")
-                                . and_then(|h| Some(h.to_str().unwrap()))
-                                . unwrap() );
+             . and_then(|h| h.to_str().ok())
+             . and_then(|s| s.parse::<i32>().ok());
+    let mime_type = request.headers().get("content-type")
+                  . and_then(|h| h.to_str().ok())
+                  . ok_or(Error::new( "Upload expects content-type"
+                                    , StatusCode::BAD_REQUEST ))?;
+    let mime_type = String::from(mime_type);
 
-    let upload = Upload {
+    let mut upload = Upload {
         upload_uuid,
-        size,
+        size: size.unwrap_or(0),
         mime_type
     };
 
@@ -33,24 +35,33 @@ pub async fn upload( app_data :web::Data<AppData>
                       . create(CONFIG.upload_dir())
                       . await?;
 
-    let upload_filename = upload_filename!(upload).unwrap();
+    let mut upload_size = 0;
+    let upload_filename = upload.upload_path().await.unwrap();
     let mut output = OpenOptions::new();
     let mut output = output
                    . create(true)
                    . write(true)
                    . open(&upload_filename).await?;
     while let Some(item) = body.next().await {
-        output.write_all(&item?).await?;
+        let item = item?;
+        output.write_all(&item).await?;
+        upload_size += item.len() as i32;
+    }
+    output.flush().await?;
+
+    if let Some(size) = size {
+        if size != upload_size {
+            Err(Error::new( "Did not receive expected size"
+                          , StatusCode::BAD_REQUEST ))?
+        }
+    } else {
+        upload.size = upload_size;
     }
-    output.flush().await.unwrap();
 
     let pool_for_worker = pool.clone();
-    Ok( match web::block(move || image::upload(pool, upload)).await {
-        Ok(image) => {
-            // TODO handle this as error response...
-            worker.send((pool_for_worker, image.clone())).await.unwrap();
-            HttpResponse::Ok().json(image)
-        },
-        Err(_) => HttpResponse::InternalServerError().finish()
-    } )
+    let image = web::block(move || image::upload(pool, upload)).await?;
+    worker . send((pool_for_worker, image.clone())).await
+           . map_err(|e| Error::from(e))?;
+
+    Ok(HttpResponse::Accepted().json(image))
 }

-use std::{io::{SeekFrom, ErrorKind}, sync::Arc};
-use actix_web::web;
-use async_std::{ fs::{File, DirBuilder, copy, metadata, remove_file}
+use std::{ io::ErrorKind
+         , sync::Arc };
+use actix_web::{web, http::StatusCode};
+use async_std::{ fs::{DirBuilder, copy, metadata, remove_file}
                , channel::{Sender, Receiver, bounded}
-               , path::PathBuf
-               , io::Result };
-use futures::{ AsyncSeekExt, AsyncReadExt, FutureExt, StreamExt, select
+               , task::spawn_blocking };
+use futures::{ FutureExt, StreamExt, select
              , stream::FuturesUnordered};
+use rexiv2::Metadata;
+use steganography::encoder::Encoder;
 
-use crate::{models::image::{Image, finalize}, upload_filename, config::CONFIG, Pool};
-use crate::uuid::Uuid;
+use crate::{ models::image::{Image, finalize, ImageContext}
+           , config::CONFIG
+           , Pool
+           , routes::image::Size
+           , error::Error };
 
-use std::convert::TryFrom;
-use image::{io::Reader as ImageReader, GenericImageView};
+use image::{ io::Reader as ImageReader
+           , GenericImageView
+           , imageops::{FilterType::Lanczos3, overlay}
+           , ImageFormat::Jpeg, DynamicImage };
 
 pub fn launch() -> Sender<(Arc<Pool>, Image)> {
     let (tx_upload_worker, rx_upload_worker)
-        : (Sender<(Arc<Pool>, Image)>, Receiver<(Arc<Pool>, Image)>) = bounded(32);
+        : (Sender<(Arc<Pool>, Image)>, Receiver<(Arc<Pool>, Image)>) = bounded(100);
 
     actix_rt::spawn(async move {
         let mut workers = FuturesUnordered::new();
 
         loop {
-            select! {
-                image = rx_upload_worker.recv().fuse() => {
-                    match image {
-                        Err(_) => break,
-                        Ok((pool, image)) => workers.push(worker(pool, image)),
-                    }
-                },
-                _result = workers.next() => {},
+            if workers.len() <= 3 {
+                select! {
+                    image = rx_upload_worker.recv().fuse() => {
+                        match image {
+                            Err(_) => break,
+                            Ok((pool, image)) => workers.push(worker(pool, image)),
+                        }
+                    },
+                    _result = workers.next() => {},
+                }
+            } else {
+                workers.next().await;
             }
         }
 
@@ -40,76 +51,121 @@ pub fn launch() -> Sender<(Arc<Pool>, Image)> {
     tx_upload_worker
 }
 
+async fn store_original(context :&mut ImageContext) -> Result<u64, Error> {
+    let upload_path = context
+                    . upload_path().await
+                    . ok_or(Error::new( "Can't retreive upload path"
+                                      , StatusCode::INTERNAL_SERVER_ERROR ))?
+                    . to_owned();
+    let original_path = context
+                      . path(Size::Original).await
+                      . ok_or(Error::new( "No path for given size"
+                                        , StatusCode::INTERNAL_SERVER_ERROR ))?;
+
+    let result = match metadata(&original_path).await {
+        Err(e) if e.kind() == ErrorKind::NotFound => {
+            match copy(&upload_path, &original_path).await {
+                Ok(size) => Ok(size),
+                Err(e) => Err(Error::from(e)),
+            }
+        },
+        Err(e) => Err(Error::from(e)),
+        Ok(_) => Err(Error::new( "File already exists"
+                               , StatusCode::CONFLICT )),
+    };
 
-async fn worker(pool :Arc<Pool>, mut image :Image) {
-    let upload_filename = upload_filename!(image).unwrap();
-    let mut f = File::open(&upload_filename).await.unwrap();
-
-    let mut buf = vec!['.' as u8; 3 * 3 * 4096];
-    get_sample(&mut f, buf.as_mut()).await.unwrap();
-    let uuid = Uuid::get(CONFIG.namespace(), buf.as_mut());
-    let uuid_string = format!("{}", uuid);
+    remove_file(&upload_path).await?;
 
-    let mut image_path = PathBuf::from(CONFIG.images_dir());
-    image_path.push(&uuid_string.as_str()[..2]);
-    image_path.push(&uuid_string.as_str()[..5]);
+    result
+}
 
-    DirBuilder::new() . recursive(true)
-                      . create(&image_path)
-                      . await
-                      . unwrap();
+async fn load_original(context :&mut ImageContext) -> Result<DynamicImage, Error> {
+    let original_path = context
+                      . path(Size::Original).await
+                      . ok_or(Error::new( "Unable to load original image"
+                                        , StatusCode::INTERNAL_SERVER_ERROR ))?;
 
-    image_path.push(&uuid_string);
+    spawn_blocking(move || -> Result<DynamicImage, Error> {
+        Ok(ImageReader::open(&original_path)? . with_guessed_format()?
+                                              . decode()?)
+    }).await
+}
 
-    image.upload_uuid = None;
-    image.uuid = Some(uuid.0.as_bytes().to_vec());
+async fn save_resized( original :&DynamicImage
+                     , context :&mut ImageContext
+                     , size :Size ) -> Result<(), Error> {
+    let width = CONFIG.width(size)
+              . ok_or(Error::new( "Can't get width for size"
+                                , StatusCode::INTERNAL_SERVER_ERROR ))?;
+    let height = CONFIG.height(size)
+               . ok_or(Error::new( "Can't get height for size"
+                                 , StatusCode::INTERNAL_SERVER_ERROR ))?;
+
+    let path = context.path(size).await
+             . ok_or(Error::new( "Can't get path for size"
+                               , StatusCode::INTERNAL_SERVER_ERROR ))?;
+
+    let original = original.to_owned();
+
+    match metadata(&path).await {
+        Err(e) if e.kind() == ErrorKind::NotFound =>
+            spawn_blocking(move || -> Result<(), Error> {
+                let mut scaled = original.resize(width, height, Lanczos3);
+
+                if let Size::Thumbnail = size {
+                } else {
+                    overlay(&mut scaled, CONFIG.copyright_image(), 0_u32, 0_u32);
+                }
+
+                let stegonography = CONFIG.copyright_steganography().as_bytes();
+                let encoder = Encoder::new(stegonography, scaled);
+                let scaled = encoder.encode_alpha();
+                scaled.save_with_format(&path, Jpeg)?;
+
+                let exiv = Metadata::new_from_path(&path)?;
+                exiv.set_tag_string("Exif.Image.Copyright", CONFIG.copyright_exiv())?;
+                exiv.save_to_file(&path)?;
+
+                Ok(())
+            }).await,
+        Err(e) => Err(e)?,
+        Ok(_) => Err(Error::new( "File already exists"
+                               , StatusCode::CONFLICT )),
+    }
+}
 
-    match metadata(&image_path).await {
-        Err(e) if e.kind() == ErrorKind::NotFound => {
-            copy(&upload_filename, &image_path).await.unwrap();
+async fn worker(pool :Arc<Pool>, image :Image) -> Result<(), Error> {
+    let mut context = image.context();
+    let base_path = context.base_path().await
+                  . ok_or(Error::new( "Missing base_path"
+                                    , StatusCode::INTERNAL_SERVER_ERROR ))?;
 
-            let img = ImageReader::open(&image_path).unwrap()
-                    . with_guessed_format().unwrap()
-                    . decode().unwrap();
-            let (dim_x, dim_y) = img.dimensions();
+    DirBuilder::new() . recursive(true)
+                      . create(base_path)
+                      . await?;
 
-            image.dim_x = Some(dim_x as i32);
-            image.dim_y = Some(dim_y as i32);
-        },
-        Err(e) => {
-            let e :Result<()> = Err(e);
-            e.unwrap();
-        },
-        Ok(_) => {},
-    }
+    store_original(&mut context).await.unwrap_or(0);
 
-    remove_file(&upload_filename).await.unwrap();
-    web::block(move || finalize(pool, image)).await.unwrap();
-}
+    if let Ok(original) = load_original(&mut context).await {
+        let (dim_x, dim_y) = original.dimensions();
 
-async fn read_at( f   :&mut File
-                , pos :SeekFrom
-                , buf :&mut [u8]) -> std::io::Result<()> {
-    f.seek(pos).await?;
-    f.read_exact(buf).await
-}
+        context.image.dim_x = Some(dim_x as i32);
+        context.image.dim_y = Some(dim_y as i32);
 
-async fn get_sample( f   :&mut File
-                       , buf :&mut [u8]) -> std::io::Result<()> {
-    let file_len = f.metadata().await?.len();
-    let chunk_size = buf.len() / 3;
+        macro_rules! save_resized{
+            ($s:expr) => { save_resized(&original, &mut context, $s) }
+        }
 
-    read_at(f, SeekFrom::Start(0), &mut buf[0..chunk_size]).await?;
-    if file_len >= 2 * chunk_size as u64 {
-        read_at( f
-               , SeekFrom::End(-(chunk_size as i64))
-               , &mut buf[2*chunk_size..]).await?;
-    }
-    if file_len >= 3 * chunk_size as u64 {
-        read_at( f
-               , SeekFrom::Start((file_len-chunk_size as u64) / 2)
-               , &mut buf[chunk_size..2*chunk_size]).await?;
+        save_resized!(Size::Large).await.unwrap_or(());
+        save_resized!(Size::Medium).await.unwrap_or(());
+        save_resized!(Size::Small).await.unwrap_or(());
+        save_resized!(Size::Thumbnail).await.unwrap_or(());
     }
 
+    // TODO Think about two simpler functions than finanlize...
+    // One to update one do remove the new entry depending if the
+    // entry exists already...
+    web::block(move || finalize(pool, context.image)).await?;
+
     Ok(())
 }

@@ -30,3 +30,11 @@ impl TryFrom<&[u8]> for Uuid {
         Ok(Self(uuid::Uuid::from_slice(value)?))
     }
 }
+
+impl TryFrom<Vec<u8>> for Uuid {
+    type Error = Error;
+
+    fn try_from(value: Vec<u8>) -> Result<Self, Self::Error> {
+        Ok(Self(uuid::Uuid::from_slice(value.as_slice())?))
+    }
+}

@@ -7,7 +7,7 @@
     </head>
     <body>
         <script type="module">
-         import init from '/static/ui/artshop_frontend.js';
+         import init from '/ui/artshop_frontend.js';
          window.addEventListener('load', async () => {
              await init();
          });

-.upload {
+.application > div {
 	float: left;
-	width: 400px;
+	width: 30%;
+}
+
+.selector {
+	padding: 1em;
+	border-radius: .5em;
+	border: 1px solid #ddd;
+	background: #f7f7f7;
+}
+
+.selector img {
+	max-width: 75px;
+	max-height: 75px;
+	width: auto;
+	height: auto;
+	vertical-align: middle;
+}
+
+.selector > ul {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 5px;
+	justify-content: space-between;
+	align-items: center;
+	max-height: 15em;
+	width: calc(100% - 15px);
+	overflow-y: auto;
+	overflow-x: auto;
+	background: #ffffff;
+	border-radius: .35em;
+	border: 2px solid #bbb;
+	cursor: default;
+	padding-left: 5px;
+	padding-right: 5px;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.selector > ul > li {
+	display: unset;
+	border: 1px solid black;
+	width: fit-content;
+	height: fit-content;
+	margin-bottom: .15em;
+}
+
+.selector > ul > li:last-child {
+	margin-bottom: 0;
+}
+
+.upload {
 	padding: 1em;
 	border-radius: .5em;
 	border: 1px solid #ddd;
@@ -55,13 +105,18 @@
 }
 
 .markdown {
-	float: left;
 	padding: 1em;
 	border-radius: .5em;
 	border: 1px solid #ddd;
 	background: #f7f7f7;
 }
 
+.markdown img {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
 .markdown p {
 	text-align: justify;
 	text-indent: .5em;
@@ -70,7 +125,6 @@
 
 .markdown > div:first-child {
 	position: fixed;
-	width: inherit;
 	z-index: 10;
 }
 

+use std::fmt::Display;
+
+use artshop_common::types::ImageJson;
+
+use super::super::error::*;
+use super::super::client::Client;
+
+#[derive(Debug, Clone)]
+pub struct Image {
+    pub json: ImageJson,
+}
+
+pub(crate) async fn images() -> Result<Vec<Image>> {
+    let client = Client::new()?;
+    let (response, data) = client.get("/api/v0/images").await?;
+
+    match response.status() {
+        200 => Ok ( serde_json::from_str(data.as_str())
+                  . map(|images :Vec<ImageJson>| {
+                      images.into_iter().map(|json| Image { json }).collect()
+                  })? ),
+        status => Err(status_error(status)),
+    }
+}
+
+fn status_error<I: Display>(status :I) -> Error {
+    let err_str = format!("Invalid response status: {}", status);
+    Error::from(err_str.as_str())
+}
+
+// impl Image {
+// }

+pub(crate) mod image;
 pub(crate) mod markdown;
 pub(crate) mod upload;

@@ -21,7 +21,7 @@ impl UploadApi {
                                               , upload.size()
                                               , upload.data() ).await?;
         match response.status() {
-            200 => Ok(self),
+            202 => Ok(self),
             status => Err(Self::status_error(status)),
         }
     }

+use mogwai::prelude::*;
+
+use crate::api::image::{Image, images};
+
+use super::{PatchSender, view::image_preview_view};
+
+pub(super) async fn image_preview_logic() {
+}
+
+pub(super) async fn selector_logic( mut rx_dom  :broadcast::Receiver<Dom>
+                                  , tx_previews :PatchSender) {
+    let mut previews :ListPatchModel<Image> = ListPatchModel::new();
+
+    mogwai::spawn(previews.stream().for_each(move |patch| {
+        let patch :ListPatch<ViewBuilder<Dom>> = patch.map(|i| {
+            let view = image_preview_view(
+                String::from(format!( "/api/v0/images/{}?size=thumbnail"
+                                    , i.json.id )));
+            let logic = image_preview_logic();
+
+            Component::from(view).with_logic(logic).into()
+        });
+        let tx_previews = tx_previews.clone();
+
+        async move {
+            tx_previews.send(patch).await.unwrap();
+        }
+    }));
+
+    if let Some(_) = rx_dom.next().await {
+        for image in images().await.unwrap().into_iter() {
+            previews.list_patch_push(image);
+        }
+    }
+}

+pub(crate) mod logic;
+mod view;
+
+use mogwai::prelude::*;
+
+use self::{view::selector_view, logic::selector_logic};
+
+type PatchSender = mpmc::Sender<ListPatch<ViewBuilder<Dom>>>;
+type PatchReceiver = mpmc::Receiver<ListPatch<ViewBuilder<Dom>>>;
+
+pub(crate) async fn new() -> Component<Dom> {
+    let (tx_previews, rx_previews) = mpmc::bounded(1);
+    let (tx_dom, rx_dom) = broadcast::bounded(1);
+
+    let view = selector_view(tx_dom, rx_previews);
+    let logic = selector_logic(rx_dom, tx_previews);
+
+    Component::from(view).with_logic(logic)
+}

+use mogwai::prelude::*;
+
+use crate::component::imageselector::PatchReceiver;
+
+pub(super) fn image_preview_view(image_url :String) -> ViewBuilder<Dom> {
+    builder! {
+        <li><img src=image_url/></li>
+    }
+}
+
+pub(super) fn selector_view( tx_dom :broadcast::Sender<Dom>
+                           , rx_previews :PatchReceiver) -> ViewBuilder<Dom> {
+    let post_build = move |dom: &mut Dom| {
+        tx_dom.try_broadcast(dom.clone()).unwrap();
+    };
+
+    builder! {
+        <div class="selector">
+            <ul patch:children=rx_previews
+                post:build=post_build>
+            </ul>
+        </div>
+    }
+}

@@ -27,7 +27,7 @@ pub(super) async fn markdown_logic( mut rx_logic: broadcast::Receiver<MarkdownLo
             MarkdownLogic::Store => {
                 let new_md = state.get_md();
                 if md.json.content != new_md {
-                    md.json.content = state.get_md();
+                    md.json.content = new_md;
                     md.save().await.unwrap();
                 }
             },

@@ -58,7 +58,6 @@ pub(super) fn markdown_view( tx_logic: broadcast::Sender<MarkdownLogic>
 
     builder! {
         <div class="markdown"
-             style:width="33%"
              post:build=move |_: &mut Dom| {
                  tx_logic.try_broadcast(MarkdownLogic::Choose(None)).unwrap();
              }

+pub(crate) mod imageselector;
 pub(crate) mod markdown;
 pub(crate) mod upload;

@@ -21,12 +21,31 @@ pub(super) async fn upload_preview_logic( mut rx_canvas :broadcast::Receiver<Dom
             let context = canvas
                         . get_context("2d").unwrap().unwrap()
                         . dyn_into::<CanvasRenderingContext2d>().unwrap();
+            let bitmap = upload.bitmap();
+            let image_width = bitmap.width() as f64;
+            let image_height = bitmap.height() as f64;
+            let canvas_width = canvas.width() as f64;
+            let canvas_height = canvas.height() as f64;
+
+            /* scale with aspect ratio */
+            let (ox, oy, width, height) = if image_width > image_height {
+                let f = canvas_width / image_width;
+                let dest_height = image_height * f;
+                let o_y = (canvas_height - dest_height) / 2.0;
+                (0.0, o_y, canvas_width, dest_height)
+            } else {
+                let f = canvas_height / image_height;
+                let dest_width = image_width * f;
+                let o_x = (canvas_width - dest_width) / 2.0;
+                (o_x, 0.0, dest_width, canvas_height)
+            };
+
             context
                 . draw_image_with_image_bitmap_and_dw_and_dh(
-                      &upload.bitmap()
-                    , 0.0, 0.0
-                    , canvas.width() as f64, canvas.height() as f64 )
+                      &bitmap
+                    , ox, oy, width, height )
                 . unwrap();
+            bitmap.close();
         }
     }
 
@@ -85,28 +104,23 @@ pub(super) async fn upload_logic( mut rx_logic :broadcast::Receiver<UploadLogic>
                 }
             },
             UploadLogic::Upload => {
-                let mut remove_ids = vec![];
+                let mut uploads_vec = vec![];
+                let mut index = 0;
 
                 for upload in uploads.read().await.iter() {
-                    match api.store(upload).await {
-                        Ok(_) => remove_ids.push(upload.id),
-                        Err(e) => log::error!("{:?}", e),
-                    }
+                    uploads_vec.push(upload.clone());
                 }
 
-                for id in remove_ids.iter() {
-                    let mut found = None;
-
-                    for (upload, index) in uploads.read().await.iter().zip(0..) {
-                        if upload.id == *id {
-                            found = Some(index);
-                            break;
+                for upload in uploads_vec.iter() {
+                    match api.store(upload).await {
+                        Ok(_) => {
+                            uploads.list_patch_remove(index).unwrap();
+                        },
+                        Err(e) => {
+                            log::error!("{:?}", e);
+                            index += 1;
                         }
                     }
-
-                    if let Some(index) = found {
-                        uploads.list_patch_remove(index).unwrap();
-                    }
                 }
             }
         }

-mod logic;
+pub(crate) mod logic;
 pub(crate) mod upload;
 mod view;
 

@@ -29,11 +29,13 @@ pub async fn main() -> Result<(), JsValue> {
 
     let md = markdown::new().await;
     let comp = upload::new().await;
+    let selector = imageselector::new().await;
 
     let page = Component::from(builder! {
-        <div>
+        <div class="application">
             {comp}
             {md}
+            {selector}
         </div>
     });
     page.build()?.run()