Copyparty-content-tag/DESIGN.md

This is a design draft. Lots of things are missing. Fill the holes during planning. Ask user if things are unclear.

Rules

• Project uses copyparty (github.com/9001/copyparty) for both application, content, user data and interactions trough it's web-dav like interface. Check github.com/9001/copyparty/blob/hovudstraum/docs/devnotes.md for http api reference.
• Project must be tested with a set of curl/nodejs sanity checks and an automated browser in docker, using gitea actions for releases and local docker for development loops.
• Project's repository lives at gitea.antonene.space/KORMsoftware/Copyparty-content-tag.
• Plan development and track progress in PLAN.md.
• Make tests for each feature (unless bulletproof or not observable from tests e.g. css styles on web-pages, that will require human interaction).
• All scripts must be served from copyparty. If you add an external library, download a local copy.

Functionality

• The tagging system is a fully-static html+js application running on copyparty as a backend. It is supposed to make image/video/animation uplolading, tagging and sorting easy.
• Meets users with a "directory" input field if "current-cwd-header" is not set (basically a login screen). It is a custom url text field that allows setting the working directory. Below is a "check" button and an "enter" button. Check button gets user's permissions for the chosen directory and tells the user whether it is accessible and whether the user has write access.
• After picking a working directory the user must be dropped into the main ui.
• App loads database for all files and their tags in tsv format stored under {cwd}/db/latest.tsv.
• App lists new content in {cwd}/content/unmanaged, checks if files are not already in the loaded database: if not - moves them to {cwd}/content/managed under their new db-related ids (or copyparty's W-file hashes #todo?), processes hashes and adds them to the database.
• App computes similarity hashes (hamming) and main colors for images (1-4) (only images for now).

UI

### HEADER (top) ###
[last part of current working directory (centered)] [change working directory button (aligned right)]

### MAIN TAGGING UI ###
[open gallery button]

[grid of untagged images (images load into viewer when clicked)]
[previous item arrow] [image viewer] [next item arrow]
[album selector field (select from last albums, type to search, create new)]
[album position field (disabled unless an album is set)]
[tag input field (suggests existing, splits tags on comma)]

[similarity hash]
[base colors display (small)]

### GALLERY ###
### HEADER (top) ###
[back button (to tagging ui)]
[tag filter picker (user tags/albums)]
[order-by picker (creation time/modification time/similarity/color similarity)]
[image grid (grouped by album)] [tag editor (sidebar) - allow for album/album position/user tag modifications when an image is clicked]
[context menu (right-click) - find similar by similarity hash/]

Tag types

0. DB modification time - timestamp of last tag modification time
1. Content type - image/video/animation
2. Similarity hash
3. Base colors
4. Album UUID - if set, content belongs to an ordered group of content items
5. № in album - position of the item inside the group
6. User tags - a comma-separated list of entries