koloml/furbooru-tagging-assistant
1
0
Fork 0
mirror of https://github.com/koloml/furbooru-tagging-assistant.git synced 2025-12-24 07:12:57 +00:00
Code Issues Activity

Reformatting the code using new editorconfig

Browse Source
This commit is contained in:
KoloMl
2024-03-23 03:13:39 +04:00
parent 659d9d4e73
commit fdb1ed913e
25 changed files with 326 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app.d.ts vendored
View File

@@ -1,13 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};

16
src/app.html
View File

@@ -1,11 +1,11 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

22
src/components/layout/Footer.svelte
View File

@@ -1,19 +1,19 @@
<script>
import {version} from "$app/environment";
import {version} from "$app/environment";
</script>
<footer>
v{version}, made with ♥ by KoloMl.
v{version}, made with ♥ by KoloMl.
</footer>
<style lang="scss">
@use 'src/styles/colors';
@use 'src/styles/colors';
footer {
background: colors.$footer;
color: colors.$footer-text;
padding: 0 24px;
font-size: 12px;
line-height: 36px;
}
</style>
footer {
background: colors.$footer;
color: colors.$footer-text;
padding: 0 24px;
font-size: 12px;
line-height: 36px;
}
</style>

40
src/components/layout/Header.svelte
View File

@@ -1,28 +1,28 @@
<header>
<a href="/">Furbooru Tagging Assistant</a>
<a href="/">Furbooru Tagging Assistant</a>
</header>
<style lang="scss">
@use "src/styles/colors";
@use "src/styles/colors";
header {
background: colors.$header;
padding: 0 24px;
display: flex;
position: sticky;
top: 0;
left: 0;
right: 0;
header {
background: colors.$header;
padding: 0 24px;
display: flex;
position: sticky;
top: 0;
left: 0;
right: 0;
a {
color: colors.$text;
line-height: 36px;
padding: 0 12px;
margin-left: -12px;
a {
color: colors.$text;
line-height: 36px;
padding: 0 12px;
margin-left: -12px;
&:hover {
background: colors.$header-hover-background;
}
&:hover {
background: colors.$header-hover-background;
}
}
}
}
</style>
</style>

14
src/components/ui/forms/FormContainer.svelte
View File

@@ -1,11 +1,11 @@
<form>
<slot></slot>
<slot></slot>
</form>
<style lang="scss">
form {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}
</style>
form {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}
</style>

14
src/components/ui/forms/FormControl.svelte
View File

@@ -1,16 +1,16 @@
<script>
/** @type {string|undefined} */
export let label;
/** @type {string|undefined} */
export let label;
</script>
<label class="control">
{#if label}
<div class="label">{label}</div>
{/if}
<slot></slot>
{#if label}
<div class="label">{label}</div>
{/if}
<slot></slot>
</label>
<style lang="scss">
</style>
</style>

14
src/components/ui/forms/TextField.svelte
View File

@@ -1,12 +1,12 @@
<script>
/** @type {string|undefined} */
export let name = undefined;
/** @type {string|undefined} */
export let name = undefined;
/** @type {string|undefined} */
export let placeholder = undefined;
/** @type {string|undefined} */
export let placeholder = undefined;
/** @type {string} */
export let value = '';
/** @type {string} */
export let value = '';
</script>
<input type="text" {name} {placeholder} bind:value={value}>
<input type="text" {name} {placeholder} bind:value={value}>

62
src/components/ui/menu/Menu.svelte
View File

@@ -1,38 +1,38 @@
<nav>
<slot></slot>
<slot></slot>
</nav>
<style lang="scss">
@use 'src/styles/colors';
@use 'src/styles/colors';
nav {
display: flex;
flex-direction: column;
nav {
display: flex;
flex-direction: column;
& > :global(a) {
padding: 5px 24px;
& > :global(a) {
padding: 5px 24px;
}
:global(a) {
color: colors.$text;
&:hover {
background: colors.$header-mobile-link-hover;
}
}
:global(hr) {
background: colors.$block-border;
margin: .5em 24px;
border: 0;
height: 1px;
}
:global(main) > & {
margin: {
left: -24px;
right: -24px;
}
}
}
:global(a) {
color: colors.$text;
&:hover {
background: colors.$header-mobile-link-hover;
}
}
:global(hr) {
background: colors.$block-border;
margin: .5em 24px;
border: 0;
height: 1px;
}
:global(main) > & {
margin: {
left: -24px;
right: -24px;
}
}
}
</style>
</style>

58
src/components/ui/menu/MenuLink.svelte
View File

@@ -1,41 +1,41 @@
<script>
/**
* @type {string}
*/
export let href;
/**
* @type {string}
*/
export let href;
/**
* @type {"tag"|"paint-brush"|"arrow-left"|"info-circle"|"wrench"|"globe"|"plus"|null}
*/
export let icon = null;
/**
* @type {"tag"|"paint-brush"|"arrow-left"|"info-circle"|"wrench"|"globe"|"plus"|null}
*/
export let icon = null;
/**
* @type {"_blank"|"_self"|"_parent"|"_top"|undefined}
*/
export let target = undefined;
/**
* @type {"_blank"|"_self"|"_parent"|"_top"|undefined}
*/
export let target = undefined;
</script>
{#if href}
<a {href} {target} on:click>
{#if icon}
<i class="icon icon-{icon}"></i>
{/if}
<slot></slot>
</a>
<a {href} {target} on:click>
{#if icon}
<i class="icon icon-{icon}"></i>
{/if}
<slot></slot>
</a>
{/if}
<style lang="scss">
@use '../../../styles/colors';
@use '../../../styles/colors';
a {
display: flex;
align-items: center;
a {
display: flex;
align-items: center;
i {
width: 16px;
height: 16px;
background: colors.$text;
margin-right: 6px;
i {
width: 16px;
height: 16px;
background: colors.$text;
margin-right: 6px;
}
}
}
</style>
</style>

28
src/components/web-components/TagsEditor.svelte
View File

@@ -1,21 +1,21 @@
<script>
import "$lib/web-components/TagEditorComponent.js";
import "$lib/web-components/TagEditorComponent.js";
/**
* @type {string[]}
*/
export let tags = [];
/**
* @type {string[]}
*/
export let tags = [];
let tagsAttribute = tags.join(',');
let tagsAttribute = tags.join(',');
/**
* @param {CustomEvent<string[]>} event
*/
function onTagsChanged(event) {
tags = event.detail;
}
/**
* @param {CustomEvent<string[]>} event
*/
function onTagsChanged(event) {
tags = event.detail;
}
$: tagsAttribute = tags.join(',');
$: tagsAttribute = tags.join(',');
</script>
<tags-editor tags="{tagsAttribute}" on:change={onTagsChanged}></tags-editor>
<tags-editor tags="{tagsAttribute}" on:change={onTagsChanged}></tags-editor>

16
src/routes/+layout.svelte
View File

@@ -1,17 +1,17 @@
<script>
import "../styles/popup.scss";
import Header from "$components/layout/Header.svelte";
import Footer from "$components/layout/Footer.svelte";
import "../styles/popup.scss";
import Header from "$components/layout/Header.svelte";
import Footer from "$components/layout/Footer.svelte";
</script>
<Header/>
<main>
<slot/>
<slot/>
</main>
<Footer/>
<style lang="scss" global>
main {
padding: .5em 24px;
}
</style>
main {
padding: .5em 24px;
}
</style>

12
src/routes/+page.svelte
View File

@@ -1,10 +1,10 @@
<script>
import Menu from "$components/ui/menu/Menu.svelte";
import MenuLink from "$components/ui/menu/MenuLink.svelte";
import Menu from "$components/ui/menu/Menu.svelte";
import MenuLink from "$components/ui/menu/MenuLink.svelte";
</script>
<Menu>
<MenuLink href="/settings/maintenance">Manual Tags Maintenance</MenuLink>
<hr>
<MenuLink href="/about">About</MenuLink>
</Menu>
<MenuLink href="/settings/maintenance">Manual Tags Maintenance</MenuLink>
<hr>
<MenuLink href="/about">About</MenuLink>
</Menu>

30
src/routes/about/+page.svelte
View File

@@ -1,25 +1,25 @@
<script>
import Menu from "$components/ui/menu/Menu.svelte";
import MenuLink from "$components/ui/menu/MenuLink.svelte";
import Menu from "$components/ui/menu/Menu.svelte";
import MenuLink from "$components/ui/menu/MenuLink.svelte";
</script>
<Menu>
<MenuLink icon="arrow-left" href="/">Back</MenuLink>
<hr>
<MenuLink icon="arrow-left" href="/">Back</MenuLink>
<hr>
</Menu>
<h1>
Furbooru Tagging Assistant
Furbooru Tagging Assistant
</h1>
<p>
This is a tool made to help tag images on Furbooru more efficiently. It is currently in development and is not yet
ready for use, but it still can provide some useful functionality.
This is a tool made to help tag images on Furbooru more efficiently. It is currently in development and is not yet
ready for use, but it still can provide some useful functionality.
</p>
<Menu>
<hr>
<MenuLink icon="globe" href="https://furbooru.org" target="_blank">
Visit Furbooru
</MenuLink>
<MenuLink icon="info-circle" href="https://github.com/koloml/furbooru-tagging-assistant" target="_blank">
GitHub Repo
</MenuLink>
</Menu>
<hr>
<MenuLink icon="globe" href="https://furbooru.org" target="_blank">
Visit Furbooru
</MenuLink>
<MenuLink icon="info-circle" href="https://github.com/koloml/furbooru-tagging-assistant" target="_blank">
GitHub Repo
</MenuLink>
</Menu>

12
src/routes/settings/+page.svelte
View File

@@ -1,10 +1,10 @@
<script>
import Menu from "$components/ui/menu/Menu.svelte";
import MenuLink from "$components/ui/menu/MenuLink.svelte";
import Menu from "$components/ui/menu/Menu.svelte";
import MenuLink from "$components/ui/menu/MenuLink.svelte";
</script>
<Menu>
<MenuLink href="/">Back</MenuLink>
<hr>
<MenuLink href="/settings/maintenance">Maintenance</MenuLink>
</Menu>
<MenuLink href="/">Back</MenuLink>
<hr>
<MenuLink href="/settings/maintenance">Maintenance</MenuLink>
</Menu>

134
src/routes/settings/maintenance/[id]/edit/+page.svelte
View File

@@ -1,80 +1,80 @@
<script>
import Menu from "$components/ui/menu/Menu.svelte";
import MenuLink from "$components/ui/menu/MenuLink.svelte";
import TagsEditor from "$components/web-components/TagsEditor.svelte";
import FormControl from "$components/ui/forms/FormControl.svelte";
import TextField from "$components/ui/forms/TextField.svelte";
import FormContainer from "$components/ui/forms/FormContainer.svelte";
import {page} from "$app/stores";
import {goto} from "$app/navigation";
import {maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
import MaintenanceProfile from "$entities/MaintenanceProfile.js";
import {onDestroy} from "svelte";
import Menu from "$components/ui/menu/Menu.svelte";
import MenuLink from "$components/ui/menu/MenuLink.svelte";
import TagsEditor from "$components/web-components/TagsEditor.svelte";
import FormControl from "$components/ui/forms/FormControl.svelte";
import TextField from "$components/ui/forms/TextField.svelte";
import FormContainer from "$components/ui/forms/FormContainer.svelte";
import {page} from "$app/stores";
import {goto} from "$app/navigation";
import {maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
import MaintenanceProfile from "$entities/MaintenanceProfile.js";
import {onDestroy} from "svelte";
/** @type {string} */
let profileId = $page.params.id;
/** @type {MaintenanceProfile|null} */
let targetProfile = null;
/** @type {string} */
let profileId = $page.params.id;
/** @type {MaintenanceProfile|null} */
let targetProfile = null;
/** @type {string} */
let profileName = '';
/** @type {string[]} */
let tagsList = [];
/** @type {string} */
let profileName = '';
/** @type {string[]} */
let tagsList = [];
const unsubscribeFromProfiles = maintenanceProfilesStore.subscribe(profiles => {
if (profileId === 'new') {
targetProfile = new MaintenanceProfile(crypto.randomUUID(), {});
return;
const unsubscribeFromProfiles = maintenanceProfilesStore.subscribe(profiles => {
if (profileId === 'new') {
targetProfile = new MaintenanceProfile(crypto.randomUUID(), {});
return;
}
const maybeProfile = profiles.find(p => p.id === profileId);
if (!maybeProfile) {
goto('/settings/maintenance');
return;
}
targetProfile = maybeProfile;
profileName = targetProfile.settings.name;
tagsList = [...targetProfile.settings.tags];
queueMicrotask(() => {
unsubscribeFromProfiles();
})
});
async function saveProfile() {
if (!targetProfile) {
console.warn('Attempting to save the profile, but the profile is not loaded yet.');
return;
}
targetProfile.settings.name = profileName;
targetProfile.settings.tags = [...tagsList];
await targetProfile.save();
await goto('/settings/maintenance/' + targetProfile.id);
}
const maybeProfile = profiles.find(p => p.id === profileId);
if (!maybeProfile) {
goto('/settings/maintenance');
return;
}
targetProfile = maybeProfile;
profileName = targetProfile.settings.name;
tagsList = [...targetProfile.settings.tags];
queueMicrotask(() => {
unsubscribeFromProfiles();
})
});
async function saveProfile() {
if (!targetProfile) {
console.warn('Attempting to save the profile, but the profile is not loaded yet.');
return;
}
targetProfile.settings.name = profileName;
targetProfile.settings.tags = [...tagsList];
await targetProfile.save();
await goto('/settings/maintenance/' + targetProfile.id);
}
onDestroy(unsubscribeFromProfiles);
onDestroy(unsubscribeFromProfiles);
</script>
<Menu>
<MenuLink icon="arrow-left" href="/settings/maintenance{profileId === 'new' ? '' : '/' + profileId}">
Back
</MenuLink>
<hr>
<MenuLink icon="arrow-left" href="/settings/maintenance{profileId === 'new' ? '' : '/' + profileId}">
Back
</MenuLink>
<hr>
</Menu>
<FormContainer>
<FormControl label="Profile Name">
<TextField bind:value={profileName} placeholder="Profile Name"></TextField>
</FormControl>
<FormControl label="Tags">
<TagsEditor bind:tags={tagsList}></TagsEditor>
</FormControl>
<FormControl label="Profile Name">
<TextField bind:value={profileName} placeholder="Profile Name"></TextField>
</FormControl>
<FormControl label="Tags">
<TagsEditor bind:tags={tagsList}></TagsEditor>
</FormControl>
</FormContainer>
<Menu>
<hr>
<MenuLink href="#" on:click={saveProfile}>Save Profile</MenuLink>
</Menu>
<hr>
<MenuLink href="#" on:click={saveProfile}>Save Profile</MenuLink>
</Menu>