1
Fork 0
mirror of https://github.com/Steffo99/todocolors.git synced 2024-11-21 07:44:18 +00:00
This commit is contained in:
Steffo 2024-09-13 17:29:34 +02:00
parent db35005190
commit d96cb1564e
Signed by: steffo
GPG key ID: 5ADA3868646C3FC0
53 changed files with 4523 additions and 508 deletions

View file

@ -1,14 +1,8 @@
<component name="ProjectRunConfigurationManager">
<configuration default="false" name="Run server" type="CargoCommandRunConfiguration" factoryName="Cargo Command">
<option name="buildProfileId" value="dev" />
<option name="command" value="run" />
<option name="workingDirectory" value="file://$PROJECT_DIR$/todored" />
<option name="emulateTerminal" value="true" />
<option name="channel" value="DEFAULT" />
<option name="requiredFeatures" value="true" />
<option name="allFeatures" value="false" />
<option name="withSudo" value="false" />
<option name="buildTarget" value="REMOTE" />
<option name="backtrace" value="SHORT" />
<envs>
<env name="AXUM_HOST" value="0.0.0.0:8080" />
<env name="REDIS_CONN" value="redis://127.0.0.1:6379/" />
@ -16,6 +10,13 @@
<env name="TODORED_RATE_LIMIT_CONNECTIONS_PER_MINUTE" value="0" />
<env name="TODORED_RATE_LIMIT_MESSAGES_PER_MINUTE" value="0" />
</envs>
<option name="emulateTerminal" value="true" />
<option name="channel" value="DEFAULT" />
<option name="requiredFeatures" value="true" />
<option name="allFeatures" value="false" />
<option name="withSudo" value="false" />
<option name="buildTarget" value="REMOTE" />
<option name="backtrace" value="SHORT" />
<option name="isRedirectInput" value="false" />
<option name="redirectInputPath" value="" />
<method v="2">

2
todoblue/.gitignore vendored
View file

@ -1,5 +1,7 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
.npmrc
# dependencies
/node_modules
/.pnp

View file

@ -10,11 +10,11 @@
"lint": "next lint"
},
"dependencies": {
"@awesome.me/kit-dfe340c874": "^1.0.10",
"@fortawesome/fontawesome-svg-core": "*",
"@fortawesome/free-regular-svg-icons": "*",
"@fortawesome/free-solid-svg-icons": "*",
"@fortawesome/react-fontawesome": "*",
"@steffo/bluelib": "*",
"any-date-parser": "^1.5.4",
"classnames": "*",
"client-only": "*",
"i18next": "*",

View file

@ -30,27 +30,6 @@
"taskStatusInProgress": "In progress",
"taskStatusComplete": "Complete",
"taskStatusJournaled": "Journaled",
"taskIconBookmark": "Bookmark",
"taskIconCircle": "Circle",
"taskIconSquare": "Square",
"taskIconHeart": "Heart",
"taskIconStar": "Star",
"taskIconSun": "Sun",
"taskIconMoon": "Moon",
"taskIconEye": "Eye",
"taskIconHand": "Hand",
"taskIconHandshake": "Handshake",
"taskIconFaceSmile": "Smile",
"taskIconUser": "User",
"taskIconComment": "Comment",
"taskIconEnvelope": "Envelope",
"taskIconFile": "File",
"taskIconPaperPlane": "Paper plane",
"taskIconBuilding": "Building",
"taskIconFlag": "Flag",
"taskIconBell": "Bell",
"taskIconClock": "Clock",
"taskIconImage": "Image",
"taskButtonJournal": "Move this task to the Journal",
"taskButtonUnjournal": "Remove this task from the Journal",
"taskButtonDelete": "Delete this task",

View file

@ -30,27 +30,6 @@
"taskStatusInProgress": "In corso",
"taskStatusComplete": "Completato",
"taskStatusJournaled": "Salvato nel Diario",
"taskIconBookmark": "Segnalibro",
"taskIconCircle": "Cerchio",
"taskIconSquare": "Quadrato",
"taskIconHeart": "Cuore",
"taskIconStar": "Stella",
"taskIconSun": "Sole",
"taskIconMoon": "Luna",
"taskIconEye": "Occhio",
"taskIconHand": "Mano",
"taskIconHandshake": "Stretta di mano",
"taskIconFaceSmile": "Sorriso",
"taskIconUser": "Utente",
"taskIconComment": "Commento",
"taskIconEnvelope": "Busta",
"taskIconFile": "File",
"taskIconPaperPlane": "Aeroplano di carta",
"taskIconBuilding": "Edificio",
"taskIconFlag": "Bandiera",
"taskIconBell": "Campana",
"taskIconClock": "Orologio",
"taskIconImage": "Immagine",
"taskButtonJournal": "Sposta questa attività nel Diario",
"taskButtonUnjournal": "Rimuovi questa attività dal Diario",
"taskButtonDelete": "Elimina questa attività",

View file

@ -51,7 +51,7 @@ export function StarredProvider({children}: {children: ReactNode}) {
}, [])
const isStarred = useCallback((value: string) => {
return starred.indexOf(value) >= 0
return starred.includes(value)
}, [starred])
return (

View file

@ -1,7 +1,7 @@
"use client";
import {useClientTranslation} from "@/app/(i18n)/client"
import {faLock} from "@fortawesome/free-solid-svg-icons"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import classNames from "classnames"
import {useRouter} from "next/navigation"
@ -71,7 +71,7 @@ export function CreatePrivateBoardPanel({lang}: {lang: string}) {
onSubmit={createBoardValidated}
>
<h3>
<FontAwesomeIcon icon={faLock} size={"1x"}/>
<FontAwesomeIcon icon={fas.faLock} size={"1x"}/>
{" "}
{t("createPrivateBoardTitle")}
</h3>

View file

@ -2,7 +2,7 @@
import {useClientTranslation} from "@/app/(i18n)/client"
import {useLowerKebabifier} from "@/app/(utils)/(kebab)"
import {faGlobe} from "@fortawesome/free-solid-svg-icons"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import cn from "classnames"
import {useRouter} from "next/navigation"
@ -32,7 +32,7 @@ export function CreatePublicBoardPanel({lang}: {lang: string}) {
onSubmit={createBoardValidated}
>
<h3>
<FontAwesomeIcon icon={faGlobe}/>
<FontAwesomeIcon icon={fas.faGlobe}/>
{" "}
{t("createPublicBoardTitle")}
</h3>

View file

@ -2,7 +2,7 @@
import {useClientTranslation} from "@/app/(i18n)/client"
import {useLowerKebabifier} from "@/app/(utils)/(kebab)"
import {faKey} from "@fortawesome/free-solid-svg-icons"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import cn from "classnames"
import {useRouter} from "next/navigation"
@ -32,7 +32,7 @@ export function KnownBoardsPanel({lang}: {lang: string}) {
onSubmit={moveToBoardValidated}
>
<h3>
<FontAwesomeIcon icon={faKey}/>
<FontAwesomeIcon icon={fas.faKey}/>
{" "}
{t("existingKnownBoardsTitle")}
</h3>

View file

@ -2,7 +2,7 @@
import {useClientTranslation} from "@/app/(i18n)/client"
import {useStarredConsumer} from "@/app/[lang]/(layout)/(contextStarred)"
import {faStar} from "@fortawesome/free-solid-svg-icons"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import cn from "classnames"
import Link from "next/link"
@ -66,7 +66,7 @@ export function StarredBoardsPanel({lang}: {lang: string}) {
"box": true,
})}>
<h3>
<FontAwesomeIcon icon={faStar}/>
<FontAwesomeIcon icon={fas.faStar}/>
{" "}
{t("existingStarredBoardsTitle")}
</h3>

View file

@ -1,13 +1,11 @@
import {TaskIcon} from "@/app/[lang]/board/[board]/(api)/(task)/TaskIcon"
import {TaskImportance} from "@/app/[lang]/board/[board]/(api)/(task)/TaskImportance"
import {TaskPriority} from "@/app/[lang]/board/[board]/(api)/(task)/TaskPriority"
export type Task = {
text: string,
icon: TaskIcon,
icon: string,
importance: TaskImportance,
priority: TaskPriority,
deadline: number | null,
created_on: number | null,
started_on: number | null,
completed_on: number | null,

File diff suppressed because it is too large Load diff

View file

@ -1,10 +0,0 @@
/**
* **Enum** of priority levels a {@link Task} may have.
*/
export enum TaskPriority {
Highest = "Highest",
High = "High",
Normal = "Normal",
Low = "Low",
Lowest = "Lowest",
}

View file

@ -1,7 +1,4 @@
export {TaskIcon} from "./TaskIcon"
export {TaskImportance} from "./TaskImportance"
export {TaskPriority} from "./TaskPriority"
export {TASK_ICON_TO_FONTAWESOME_SOLID, TASK_ICON_TO_FONTAWESOME_REGULAR} from "./taskIconMappings"
export type {Task} from "./Task"
export type {TaskId} from "./TaskId"

View file

@ -1,52 +0,0 @@
import {faBell as faBellRegular, faBookmark as faBookmarkRegular, faBuilding as faBuildingRegular, faCircle as faCircleRegular, faClock as faClockRegular, faComment as faCommentRegular, faEnvelope as faEnvelopeRegular, faEye as faEyeRegular, faFaceSmile as faFaceSmileRegular, faFile as faFileRegular, faFlag as faFlagRegular, faHand as faHandRegular, faHandshake as faHandshakeRegular, faHeart as faHeartRegular, faImage as faImageRegular, faMoon as faMoonRegular, faPaperPlane as faPaperPlaneRegular, faSquare as faSquareRegular, faStar as faStarRegular, faSun as faSunRegular, faUser as faUserRegular} from "@fortawesome/free-regular-svg-icons"
import {faBell as faBellSolid, faBookmark as faBookmarkSolid, faBuilding as faBuildingSolid, faCircle as faCircleSolid, faClock as faClockSolid, faComment as faCommentSolid, faEnvelope as faEnvelopeSolid, faEye as faEyeSolid, faFaceSmile as faFaceSmileSolid, faFile as faFileSolid, faFlag as faFlagSolid, faHand as faHandSolid, faHandshake as faHandshakeSolid, faHeart as faHeartSolid, faImage as faImageSolid, faMoon as faMoonSolid, faPaperPlane as faPaperPlaneSolid, faSquare as faSquareSolid, faStar as faStarSolid, faSun as faSunSolid, faUser as faUserSolid, IconDefinition} from "@fortawesome/free-solid-svg-icons"
import {TaskIcon} from "./TaskIcon"
export const TASK_ICON_TO_FONTAWESOME_SOLID: {[T in TaskIcon]: IconDefinition} = {
[TaskIcon.User]: faUserSolid,
[TaskIcon.Image]: faImageSolid,
[TaskIcon.Envelope]: faEnvelopeSolid,
[TaskIcon.Star]: faStarSolid,
[TaskIcon.Heart]: faHeartSolid,
[TaskIcon.Comment]: faCommentSolid,
[TaskIcon.FaceSmile]: faFaceSmileSolid,
[TaskIcon.File]: faFileSolid,
[TaskIcon.Bell]: faBellSolid,
[TaskIcon.Bookmark]: faBookmarkSolid,
[TaskIcon.Eye]: faEyeSolid,
[TaskIcon.Hand]: faHandSolid,
[TaskIcon.PaperPlane]: faPaperPlaneSolid,
[TaskIcon.Handshake]: faHandshakeSolid,
[TaskIcon.Sun]: faSunSolid,
[TaskIcon.Clock]: faClockSolid,
[TaskIcon.Circle]: faCircleSolid,
[TaskIcon.Square]: faSquareSolid,
[TaskIcon.Building]: faBuildingSolid,
[TaskIcon.Flag]: faFlagSolid,
[TaskIcon.Moon]: faMoonSolid,
}
export const TASK_ICON_TO_FONTAWESOME_REGULAR: {[T in TaskIcon]: IconDefinition} = {
[TaskIcon.User]: faUserRegular,
[TaskIcon.Image]: faImageRegular,
[TaskIcon.Envelope]: faEnvelopeRegular,
[TaskIcon.Star]: faStarRegular,
[TaskIcon.Heart]: faHeartRegular,
[TaskIcon.Comment]: faCommentRegular,
[TaskIcon.FaceSmile]: faFaceSmileRegular,
[TaskIcon.File]: faFileRegular,
[TaskIcon.Bell]: faBellRegular,
[TaskIcon.Bookmark]: faBookmarkRegular,
[TaskIcon.Eye]: faEyeRegular,
[TaskIcon.Hand]: faHandRegular,
[TaskIcon.PaperPlane]: faPaperPlaneRegular,
[TaskIcon.Handshake]: faHandshakeRegular,
[TaskIcon.Sun]: faSunRegular,
[TaskIcon.Clock]: faClockRegular,
[TaskIcon.Circle]: faCircleRegular,
[TaskIcon.Square]: faSquareRegular,
[TaskIcon.Building]: faBuildingRegular,
[TaskIcon.Flag]: faFlagRegular,
[TaskIcon.Moon]: faMoonRegular,
}

View file

@ -1,4 +1,4 @@
import {TaskIcon} from "@/app/[lang]/board/[board]/(api)/(task)"
import {ICONS} from "@/app/[lang]/board/[board]/(api)/(task)/TaskIcon"
import {useBoardConsumer} from "@/app/[lang]/board/[board]/(layout)/(contextBoard)"
import {TaskEditorIcon} from "@/app/[lang]/board/[board]/(page)/(edit)/(task)/TaskEditorIcon"
import {TaskEditorInput} from "@/app/[lang]/board/[board]/(page)/(edit)/(task)/TaskEditorInput"
@ -12,56 +12,33 @@ import {SyntheticEvent, useCallback} from "react"
import style from "./TaskEditor.module.css"
const ICON_SEQUENCE = [
TaskIcon.Bookmark,
TaskIcon.Circle,
TaskIcon.Square,
TaskIcon.Heart,
TaskIcon.Star,
TaskIcon.Sun,
TaskIcon.Moon,
TaskIcon.Eye,
TaskIcon.Hand,
TaskIcon.Handshake,
TaskIcon.FaceSmile,
TaskIcon.User,
TaskIcon.Comment,
TaskIcon.Envelope,
TaskIcon.File,
TaskIcon.PaperPlane,
TaskIcon.Building,
TaskIcon.Flag,
TaskIcon.Bell,
TaskIcon.Clock,
TaskIcon.Image,
]
export function TaskEditor({t, className, editorHook: {input, setInput, task, setTask}}: { t: TFunction, className?: string, editorHook: ReturnType<typeof useTaskEditor> }) {
const {isReady, sendRequest} = useBoardConsumer()
const nextIcon = useCallback((e: SyntheticEvent<HTMLButtonElement>) => {
if("key" in e && typeof e["key"] === "string") {
if(![" "].includes(e.key)) {
return;
return
}
}
e.preventDefault()
e.stopPropagation()
let index = ICON_SEQUENCE.indexOf(task.icon) + 1;
if(index === ICON_SEQUENCE.length) index = 0;
setTask({...task, icon: ICON_SEQUENCE[index]})
setTask({...task, icon: ICONS[Math.floor(Math.random() * ICONS.length)]})
}, [task])
const submitTask = useCallback((e: SyntheticEvent<HTMLInputElement>) => {
e.preventDefault()
e.stopPropagation()
if(task.text === "") return
if(task.text === "") {
return
}
sendRequest({"Task": [null, task]})
setInput(taskToString({...task, text: ""}))
}, [sendRequest, task, setInput])
if(!isReady) return null
if(!isReady) {
return null
}
return (
<div
@ -70,7 +47,7 @@ export function TaskEditor({t, className, editorHook: {input, setInput, task, se
<TaskContainer
role={"form"}
importance={task.importance}
priority={task.priority}
deadline={task.deadline}
status={TaskSimplifiedStatus.NonExistent}
onSubmit={submitTask}
>

View file

@ -1,38 +1,13 @@
import {TaskIcon} from "@/app/[lang]/board/[board]/(api)/(task)"
import {TaskIconComponent} from "@/app/[lang]/board/[board]/(page)/(task)/TaskIconComponent"
import {TaskSimplifiedStatus} from "@/app/[lang]/board/[board]/(page)/(task)/TaskSimplifiedStatus"
import {TFunction} from "i18next"
import {SyntheticEvent} from "react"
const ICON_TO_KEY = {
[TaskIcon.Bookmark]: "taskIconBookmark",
[TaskIcon.Circle]: "taskIconCircle",
[TaskIcon.Square]: "taskIconSquare",
[TaskIcon.Heart]: "taskIconHeart",
[TaskIcon.Star]: "taskIconStar",
[TaskIcon.Sun]: "taskIconSun",
[TaskIcon.Moon]: "taskIconMoon",
[TaskIcon.Eye]: "taskIconEye",
[TaskIcon.Hand]: "taskIconHand",
[TaskIcon.Handshake]: "taskIconHandshake",
[TaskIcon.FaceSmile]: "taskIconFaceSmile",
[TaskIcon.User]: "taskIconUser",
[TaskIcon.Comment]: "taskIconComment",
[TaskIcon.Envelope]: "taskIconEnvelope",
[TaskIcon.File]: "taskIconFile",
[TaskIcon.PaperPlane]: "taskIconPaperPlane",
[TaskIcon.Building]: "taskIconBuilding",
[TaskIcon.Flag]: "taskIconFlag",
[TaskIcon.Bell]: "taskIconBell",
[TaskIcon.Clock]: "taskIconClock",
[TaskIcon.Image]: "taskIconImage",
}
export function TaskEditorIcon({t, icon, nextIcon}: {t: TFunction, icon: TaskIcon, nextIcon: (e: SyntheticEvent<HTMLButtonElement>) => void}) {
export function TaskEditorIcon({t, icon, nextIcon}: {t: TFunction, icon: string, nextIcon: (e: SyntheticEvent<HTMLButtonElement>) => void}) {
return (
<TaskIconComponent
title={t(ICON_TO_KEY[icon])}
title={icon}
icon={icon}
status={TaskSimplifiedStatus.NonExistent}
onInteract={nextIcon}

View file

@ -0,0 +1,6 @@
export const DEADLINE_GLYPH_START = "["
export const DEADLINE_GLYPH_END = "]"
export const DEADLINE_GLYPH_RE = /\[(.+?)]\s?/
export const DEADLINE_DEFAULT = null

View file

@ -1,8 +1,5 @@
import {TaskIcon} from "@/app/[lang]/board/[board]/(api)/(task)"
export const ICON_GLYPH = "#"
export const ICON_GLYPH_RE = /#([A-Za-z]+)\s?/
export const ICON_GLYPH_RE = /#([A-Za-z0-9-]+)\s?/
export const ICON_DEFAULT = TaskIcon.Circle
export const ICON_DEFAULT = "Circle"

View file

@ -1,8 +0,0 @@
import {TaskPriority} from "@/app/[lang]/board/[board]/(api)/(task)"
export const PRIORITY_GLYPH = "/"
export const PRIORITY_GLYPH_RE = /\/([1-5])\s?/
export const PRIORITY_DEFAULT = TaskPriority.Normal

View file

@ -1,8 +1,12 @@
import {Task, TaskIcon, TaskImportance, TaskPriority} from "@/app/[lang]/board/[board]/(api)/(task)"
import {ICON_GLYPH_RE} from "@/app/[lang]/board/[board]/(page)/(edit)/icon"
import {Task, TaskImportance} from "@/app/[lang]/board/[board]/(api)/(task)"
import {DEADLINE_GLYPH_RE} from "@/app/[lang]/board/[board]/(page)/(edit)/deadline"
import {ICON_DEFAULT, ICON_GLYPH_RE} from "@/app/[lang]/board/[board]/(page)/(edit)/icon"
import {IMPORTANCE_GLYPH_RE} from "@/app/[lang]/board/[board]/(page)/(edit)/importance"
import {PRIORITY_GLYPH_RE} from "@/app/[lang]/board/[board]/(page)/(edit)/priority"
import {default as dateParser} from "any-date-parser"
// ahhh i love typescript shenanigans
// @ts-ignore
const DATE_FROM_STRING = dateParser.fromString;
const VALUE_TO_TASK_IMPORTANCE = {
"1": TaskImportance.Highest,
@ -12,61 +16,28 @@ const VALUE_TO_TASK_IMPORTANCE = {
"5": TaskImportance.Lowest,
}
const VALUE_TO_TASK_PRIORITY = {
"1": TaskPriority.Highest,
"2": TaskPriority.High,
"3": TaskPriority.Normal,
"4": TaskPriority.Low,
"5": TaskPriority.Lowest,
}
const VALUE_TO_TASK_ICON = {
"bookmark": TaskIcon.Bookmark,
"circle": TaskIcon.Circle,
"square": TaskIcon.Square,
"heart": TaskIcon.Heart,
"star": TaskIcon.Star,
"sun": TaskIcon.Sun,
"moon": TaskIcon.Moon,
"eye": TaskIcon.Eye,
"hand": TaskIcon.Hand,
"handshake": TaskIcon.Handshake,
"facesmile": TaskIcon.FaceSmile,
"smile": TaskIcon.FaceSmile,
"user": TaskIcon.User,
"comment": TaskIcon.Comment,
"envelope": TaskIcon.Envelope,
"file": TaskIcon.File,
"paperplane": TaskIcon.PaperPlane,
"plane": TaskIcon.PaperPlane,
"building": TaskIcon.Building,
"flag": TaskIcon.Flag,
"bell": TaskIcon.Bell,
"clock": TaskIcon.Clock,
"image": TaskIcon.Image,
}
export function stringToTask(text: string): Task {
const priorityMatch = PRIORITY_GLYPH_RE.exec(text)
export function stringToTask(text: string, lang: string): Task {
const importanceMatch = IMPORTANCE_GLYPH_RE.exec(text)
const iconMatch = ICON_GLYPH_RE.exec(text)
const deadlineMatch = DEADLINE_GLYPH_RE.exec(text)
const priority: TaskPriority = VALUE_TO_TASK_PRIORITY[priorityMatch?.[1]?.trim() as "1"|"2"|"3"|"4"|"5" ?? "3"]
const importance: TaskImportance = VALUE_TO_TASK_IMPORTANCE[importanceMatch?.[1]?.trim() as "1"|"2"|"3"|"4"|"5" ?? "3"]
// @ts-ignore
const icon: TaskIcon = VALUE_TO_TASK_ICON[iconMatch?.[1]?.toLowerCase()?.trim()] ?? TaskIcon.Circle
const icon: string = iconMatch?.[1]?.trim() ?? ICON_DEFAULT
const deadlineGroup: string | undefined = deadlineMatch?.[1]?.trim()
const deadlineDate: Date | undefined = deadlineGroup === undefined ? undefined : DATE_FROM_STRING(deadlineGroup, lang) ?? undefined
const deadline: number | null = (deadlineDate?.getTime?.()) ?? null
// TODO: Splice so the regexes aren't executed twice
text = text.replace(PRIORITY_GLYPH_RE, "")
text = text.replace(IMPORTANCE_GLYPH_RE, "")
text = text.replace(ICON_GLYPH_RE, "")
text = text.replace(DEADLINE_GLYPH_RE, "")
text = text.trim()
return {
text,
priority,
importance,
icon,
deadline,
created_on: + new Date(),
started_on: null,
completed_on: null,

View file

@ -1,7 +1,7 @@
import {Task, TaskImportance, TaskPriority} from "@/app/[lang]/board/[board]/(api)/(task)"
import {Task, TaskImportance} from "@/app/[lang]/board/[board]/(api)/(task)"
import {DEADLINE_DEFAULT, DEADLINE_GLYPH_END, DEADLINE_GLYPH_START} from "@/app/[lang]/board/[board]/(page)/(edit)/deadline"
import {ICON_DEFAULT, ICON_GLYPH} from "@/app/[lang]/board/[board]/(page)/(edit)/icon"
import {IMPORTANCE_DEFAULT, IMPORTANCE_GLYPH} from "@/app/[lang]/board/[board]/(page)/(edit)/importance"
import {PRIORITY_DEFAULT, PRIORITY_GLYPH} from "@/app/[lang]/board/[board]/(page)/(edit)/priority"
const TASK_IMPORTANCE_TO_VALUE = {
@ -12,17 +12,25 @@ const TASK_IMPORTANCE_TO_VALUE = {
[TaskImportance.Lowest]: "5",
}
const TASK_PRIORITY_TO_VALUE = {
[TaskPriority.Highest]: "1",
[TaskPriority.High]: "2",
[TaskPriority.Normal]: "3",
[TaskPriority.Low]: "4",
[TaskPriority.Lowest]: "5",
}
export function taskToString(t: Task, lang: string): string {
const intlDate = Intl.DateTimeFormat(lang, {
year: "numeric",
month: "short",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
})
export function taskToString(t: Task): string {
let s = ""
if(t.deadline !== DEADLINE_DEFAULT) {
s += DEADLINE_GLYPH_START
s += intlDate.format(new Date(t.deadline))
s += DEADLINE_GLYPH_END
s += " "
}
if(t.icon !== ICON_DEFAULT) {
s += ICON_GLYPH
s += t.icon
@ -35,12 +43,6 @@ export function taskToString(t: Task): string {
s += " "
}
if(t.priority !== PRIORITY_DEFAULT) {
s += PRIORITY_GLYPH
s += TASK_PRIORITY_TO_VALUE[t.priority]
s += " "
}
s += t.text
return s

View file

@ -1,6 +1,6 @@
import {useBoardConsumer} from "@/app/[lang]/board/[board]/(layout)/(contextBoard)"
import style from "@/app/[lang]/board/[board]/(page)/(header)/BoardHeaderButtons.module.css"
import {faUsers} from "@fortawesome/free-solid-svg-icons"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import cn from "classnames"
import {TFunction} from "i18next"
@ -16,7 +16,7 @@ export function ConnectedClientsButton({t}: {t: TFunction}) {
title={t("privacyButtonTitle")}
className={cn(style.block, style.singleBlock)}
>
<FontAwesomeIcon icon={faUsers} size={"2xs"}/>
<FontAwesomeIcon icon={fas.faUsers} size={"2xs"}/>
&nbsp;
{clients.length}
</div>

View file

@ -1,6 +1,6 @@
import {useBoardConsumer} from "@/app/[lang]/board/[board]/(layout)/(contextBoard)"
import style from "@/app/[lang]/board/[board]/(page)/(header)/BoardHeaderButtons.module.css"
import {faObjectGroup} from "@fortawesome/free-solid-svg-icons"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import cn from "classnames"
import {TFunction} from "i18next"
@ -17,7 +17,7 @@ export function CycleGroupingButton({t, next}: {t: TFunction, next: () => void})
onClick={next}
className={cn(style.block, style.singleBlock)}
>
<FontAwesomeIcon icon={faObjectGroup}/>
<FontAwesomeIcon icon={fas.faObjectGroup}/>
</button>
)
}

View file

@ -1,6 +1,6 @@
import {useBoardConsumer} from "@/app/[lang]/board/[board]/(layout)/(contextBoard)"
import style from "@/app/[lang]/board/[board]/(page)/(header)/BoardHeaderButtons.module.css"
import {faArrowDownWideShort} from "@fortawesome/free-solid-svg-icons"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import cn from "classnames"
import {TFunction} from "i18next"
@ -17,7 +17,7 @@ export function CycleSortingButton({t, next}: {t: TFunction, next: () => void})
onClick={next}
className={cn(style.block, style.singleBlock)}
>
<FontAwesomeIcon icon={faArrowDownWideShort}/>
<FontAwesomeIcon icon={fas.faArrowDownWideShort}/>
</button>
)
}

View file

@ -1,5 +1,5 @@
import style from "@/app/[lang]/board/[board]/(page)/(header)/BoardHeaderButtons.module.css"
import {faHouse} from "@fortawesome/free-solid-svg-icons"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import cn from "classnames"
import {TFunction} from "i18next"
@ -17,7 +17,7 @@ export function NavigateHomeButton({t}: {t: TFunction}) {
onClick={goHome}
className={cn(style.block, style.singleBlock)}
>
<FontAwesomeIcon icon={faHouse}/>
<FontAwesomeIcon icon={fas.faHouse}/>
</button>
)
}

View file

@ -1,7 +1,7 @@
import {useBoardConsumer} from "@/app/[lang]/board/[board]/(layout)/(contextBoard)"
import style from "@/app/[lang]/board/[board]/(page)/(header)/BoardHeaderButtons.module.css"
import {useBoardMetadataEditor} from "@/app/[lang]/board/[board]/(page)/useBoardMetadataEditor"
import {faFloppyDisk, faPencil} from "@fortawesome/free-solid-svg-icons"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import cn from "classnames"
import {TFunction} from "i18next"
@ -19,7 +19,7 @@ export function ToggleEditingButton({t, metadataHook}: {t: TFunction, metadataHo
onClick={metadataHook.toggleEditingMetadata}
className={cn(style.block, style.singleBlock)}
>
<FontAwesomeIcon icon={metadataHook.isEditingMetadata ? faFloppyDisk : faPencil}/>
<FontAwesomeIcon icon={fas[metadataHook.isEditingMetadata ? "faFloppyDisk" : "faPencil"]}/>
</button>
)
}

View file

@ -1,7 +1,7 @@
import {LockBoardRequest} from "@/app/[lang]/board/[board]/(api)/(request)"
import {useBoardConsumer} from "@/app/[lang]/board/[board]/(layout)/(contextBoard)"
import style from "@/app/[lang]/board/[board]/(page)/(header)/BoardHeaderButtons.module.css"
import {faLock, faLockOpen} from "@fortawesome/free-solid-svg-icons"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import cn from "classnames"
import {TFunction} from "i18next"
@ -25,7 +25,7 @@ export function ToggleLockedButton({t}: {t: TFunction}) {
onClick={toggleLock}
className={cn(style.block, style.singleBlock)}
>
<FontAwesomeIcon icon={locked ? faLock : faLockOpen}/>
<FontAwesomeIcon icon={fas[locked ? "faLock" : "faLockOpen"]}/>
</button>
)
}

View file

@ -1,8 +1,9 @@
"use client";
import {useStarredConsumer} from "@/app/[lang]/(layout)/(contextStarred)"
import {useBoardConsumer} from "@/app/[lang]/board/[board]/(layout)/(contextBoard)"
import style from "@/app/[lang]/board/[board]/(page)/(header)/BoardHeaderButtons.module.css"
import {faStar as faStarRegular} from "@fortawesome/free-regular-svg-icons"
import {faStar as faStarSolid} from "@fortawesome/free-solid-svg-icons"
import {far, fas} from "@awesome.me/kit-dfe340c874/icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import cn from "classnames"
import {TFunction} from "i18next"
@ -19,7 +20,7 @@ export function ToggleStarredButton({t}: {t: TFunction}) {
onClick={() => toggleStarred(boardName)}
className={cn(style.block, style.singleBlock)}
>
<FontAwesomeIcon icon={thisIsStarred ? faStarSolid : faStarRegular}/>
<FontAwesomeIcon icon={(thisIsStarred ? fas : far)["faStar"]}/>
</button>
)
}

View file

@ -1,7 +1,7 @@
import {TrimBoardRequest} from "@/app/[lang]/board/[board]/(api)/(request)"
import {useBoardConsumer} from "@/app/[lang]/board/[board]/(layout)/(contextBoard)"
import style from "@/app/[lang]/board/[board]/(page)/(header)/BoardHeaderButtons.module.css"
import {faScissors} from "@fortawesome/free-solid-svg-icons"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import cn from "classnames"
import {TFunction} from "i18next"
@ -25,7 +25,7 @@ export function TrimButton({t}: {t: TFunction}) {
onClick={requestTrim}
className={cn(style.block, style.singleBlock)}
>
<FontAwesomeIcon icon={faScissors}/>
<FontAwesomeIcon icon={fas.faScissors}/>
</button>
)
}

View file

@ -1,4 +1,4 @@
import {IconDefinition} from "@fortawesome/free-solid-svg-icons"
import {IconDefinition} from "@fortawesome/fontawesome-svg-core"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import cn from "classnames"
import {SyntheticEvent} from "react"

View file

@ -45,31 +45,39 @@
font-weight: 200;
}
.taskPriorityHighest {
border: 4px solid hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.45);
.taskDeadlineHour {
border: 4px hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.45);
padding: 4px;
}
.taskPriorityHigh {
border: 3px solid hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.25);
.taskDeadlineDay {
border: 3px hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.25);
padding: 5px;
}
.taskPriorityNormal {
border: 2px solid hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.15);
.taskDeadlineWeek {
border: 2px hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.15);
padding: 6px;
}
.taskPriorityLow {
border: 1px solid hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.15);
.taskDeadlineMonth {
border: 1px hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.15);
padding: 7px;
}
.taskPriorityLowest {
.taskDeadlineNone {
border: 0;
padding: 8px;
}
.taskDeadlineIncoming {
border-style: solid;
}
.taskDeadlinePast {
border-style: dashed;
}
@keyframes inProgress {
0%, 100% {
opacity: 0.4;

View file

@ -1,4 +1,4 @@
import {TaskImportance, TaskPriority} from "@/app/[lang]/board/[board]/(api)/(task)"
import {TaskImportance} from "@/app/[lang]/board/[board]/(api)/(task)"
import {TaskSimplifiedStatus} from "@/app/[lang]/board/[board]/(page)/(task)/TaskSimplifiedStatus"
import cn from "classnames"
import {ComponentPropsWithoutRef} from "react"
@ -9,12 +9,16 @@ export type TaskContainerProps = {
className?: string,
role: "article" | "form",
importance: TaskImportance,
priority: TaskPriority,
deadline: number | null,
status: TaskSimplifiedStatus,
} & ComponentPropsWithoutRef<"article">
export function TaskContainer({role, className, importance, priority, status, ...props}: TaskContainerProps) {
export function TaskContainer({role, className, importance, deadline, status, ...props}: TaskContainerProps) {
const now = + new Date();
const delta = deadline === null ? null : deadline - now
const deltaAbs = delta === null ? null : Math.abs(delta)
const fullProps = {
className: cn({
"panel": true,
@ -25,11 +29,13 @@ export function TaskContainer({role, className, importance, priority, status, ..
[style.taskImportanceNormal]: importance === TaskImportance.Normal,
[style.taskImportanceLow]: importance === TaskImportance.Low,
[style.taskImportanceLowest]: importance === TaskImportance.Lowest,
[style.taskPriorityHighest]: priority === TaskPriority.Highest,
[style.taskPriorityHigh]: priority === TaskPriority.High,
[style.taskPriorityNormal]: priority === TaskPriority.Normal,
[style.taskPriorityLow]: priority === TaskPriority.Low,
[style.taskPriorityLowest]: priority === TaskPriority.Lowest,
[style.taskDeadlineNone]: deadline === null,
[style.taskDeadlineHour]: deltaAbs !== null && deltaAbs < 60 * 60 * 1000,
[style.taskDeadlineDay]: deltaAbs !== null && 60 * 60 * 1000 <= deltaAbs && deltaAbs < 24 * 60 * 60 * 1000,
[style.taskDeadlineWeek]: deltaAbs !== null && 24 * 60 * 60 * 1000 <= deltaAbs && deltaAbs < 7 * 24 * 60 * 60 * 1000,
[style.taskDeadlineMonth]: deltaAbs !== null && deltaAbs >= 7 * 24 * 60 * 60 * 1000,
[style.taskDeadlineIncoming]: delta !== null && delta > 0,
[style.taskDeadlinePast]: delta !== null && delta < 0,
[style.taskStatusNonExistent]: status === TaskSimplifiedStatus.NonExistent,
[style.taskStatusUnfinished]: status === TaskSimplifiedStatus.Unfinished,
[style.taskStatusInProgress]: status === TaskSimplifiedStatus.InProgress,

View file

@ -2,3 +2,7 @@
border-radius: var(--b-border-radius);
flex-grow: 1;
}
.taskDescriptionSource {
font-family: monospace;
}

View file

@ -4,14 +4,16 @@ import style from "./TaskDescription.module.css"
type TaskDescriptionProps = {
className?: string,
isSource?: boolean,
text: string,
}
export function TaskDescription({className, text}: TaskDescriptionProps) {
export function TaskDescription({className, isSource, text}: TaskDescriptionProps) {
return (
<div className={cn({
"taskDescription": true,
[style.taskDescription]: true,
[style.taskDescriptionSource]: isSource,
}, className)} tabIndex={0}>
{text}
</div>

View file

@ -1,5 +1,6 @@
import {TASK_ICON_TO_FONTAWESOME_REGULAR, TASK_ICON_TO_FONTAWESOME_SOLID, TaskIcon} from "@/app/[lang]/board/[board]/(api)/(task)"
import {TaskSimplifiedStatus} from "@/app/[lang]/board/[board]/(page)/(task)/TaskSimplifiedStatus"
import {fal, far, fas} from "@awesome.me/kit-dfe340c874/icons"
import {IconPack} from "@fortawesome/fontawesome-svg-core"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import cn from "classnames"
import {SyntheticEvent} from "react"
@ -9,11 +10,18 @@ import style from "./TaskIconComponent.module.css"
type TaskIconProps = {
className?: string,
title: string,
icon: TaskIcon,
icon: string,
status: TaskSimplifiedStatus,
onInteract?: (e: SyntheticEvent<HTMLButtonElement>) => void,
}
const STATUS_TO_PREFIX: {[t in TaskSimplifiedStatus]: IconPack} = {
[TaskSimplifiedStatus.Unfinished]: fal,
[TaskSimplifiedStatus.InProgress]: far,
[TaskSimplifiedStatus.Complete]: fas,
[TaskSimplifiedStatus.Journaled]: fas,
[TaskSimplifiedStatus.NonExistent]: far,
}
export function TaskIconComponent({className, title, icon, status, onInteract}: TaskIconProps) {
const clickable = !!onInteract;
@ -32,7 +40,7 @@ export function TaskIconComponent({className, title, icon, status, onInteract}:
>
<FontAwesomeIcon
size={"lg"}
icon={[TaskSimplifiedStatus.Complete, TaskSimplifiedStatus.Journaled].includes(status) ? TASK_ICON_TO_FONTAWESOME_SOLID[icon] : TASK_ICON_TO_FONTAWESOME_REGULAR[icon]}
icon={STATUS_TO_PREFIX[status][`fa${icon}`]}
beatFade={status === TaskSimplifiedStatus.InProgress}
/>
</button>

View file

@ -1,8 +1,9 @@
import {ColumningMode} from "@/app/[lang]/board/[board]/(page)/(view)/(columning)/ColumningMode"
import {faTableColumns, faTableList} from "@fortawesome/free-solid-svg-icons"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {IconDefinition} from "@fortawesome/fontawesome-svg-core"
export const COLUMNING_MODE_TO_ICON = {
[ColumningMode.SingleColumn]: faTableList,
[ColumningMode.MultiColumn]: faTableColumns,
export const COLUMNING_MODE_TO_ICON: {[m in ColumningMode]: IconDefinition} = {
[ColumningMode.SingleColumn]: fas.faTableList,
[ColumningMode.MultiColumn]: fas.faTableColumns,
}

View file

@ -1,6 +1,5 @@
export enum GroupingMode {
ByImportance,
ByPriority,
ByStatus,
ByIcon,
Journal,

View file

@ -1,4 +1,5 @@
import {TaskIcon, TaskImportance, TaskPriority} from "@/app/[lang]/board/[board]/(api)/(task)"
import {TaskImportance} from "@/app/[lang]/board/[board]/(api)/(task)"
import {ICONS} from "@/app/[lang]/board/[board]/(api)/(task)/TaskIcon"
import {GroupingMode} from "@/app/[lang]/board/[board]/(page)/(view)/(grouping)/GroupingMode"
import {TaskGroup} from "@/app/[lang]/board/[board]/(page)/(view)/(grouping)/TaskGroup"
@ -11,14 +12,6 @@ const TASK_IMPORTANCE_TO_VALUE = {
[TaskImportance.Lowest]: 5,
}
const TASK_PRIORITY_TO_VALUE = {
[TaskPriority.Highest]: 1,
[TaskPriority.High]: 2,
[TaskPriority.Normal]: 3,
[TaskPriority.Low]: 4,
[TaskPriority.Lowest]: 5,
}
const TASK_STATUS_TO_VALUE = {
"Journaled": 3,
"Complete": 2,
@ -26,45 +19,18 @@ const TASK_STATUS_TO_VALUE = {
"Unfinished": 0,
}
const TASK_ICON_TO_VALUE = {
[TaskIcon.Bookmark]: 1,
[TaskIcon.Circle]: 2,
[TaskIcon.Square]: 3,
[TaskIcon.Heart]: 4,
[TaskIcon.Star]: 5,
[TaskIcon.Sun]: 6,
[TaskIcon.Moon]: 7,
[TaskIcon.Eye]: 8,
[TaskIcon.Hand]: 9,
[TaskIcon.Handshake]: 10,
[TaskIcon.FaceSmile]: 11,
[TaskIcon.User]: 12,
[TaskIcon.Comment]: 13,
[TaskIcon.Envelope]: 14,
[TaskIcon.File]: 15,
[TaskIcon.PaperPlane]: 16,
[TaskIcon.Building]: 17,
[TaskIcon.Flag]: 18,
[TaskIcon.Bell]: 19,
[TaskIcon.Clock]: 20,
[TaskIcon.Image]: 21,
}
export const GROUPING_MODE_TO_GROUP_SORTER_FUNCTION = {
[GroupingMode.ByImportance]: function sortGroupsByImportance(a: TaskGroup<TaskImportance>, b: TaskGroup<TaskImportance>): number {
return TASK_IMPORTANCE_TO_VALUE[a.k] - TASK_IMPORTANCE_TO_VALUE[b.k]
},
[GroupingMode.ByPriority]: function sortGroupsByPriority(a: TaskGroup<TaskPriority>, b: TaskGroup<TaskPriority>): number {
return TASK_PRIORITY_TO_VALUE[a.k] - TASK_PRIORITY_TO_VALUE[b.k]
},
[GroupingMode.ByStatus]: function sortGroupsByStatus(a: TaskGroup<string>, b: TaskGroup<string>): number {
// @ts-ignore
return TASK_STATUS_TO_VALUE[a.k] - TASK_STATUS_TO_VALUE[b.k]
},
[GroupingMode.ByIcon]: function sortGroupsByIcon(a: TaskGroup<TaskIcon>, b: TaskGroup<TaskIcon>): number {
return TASK_ICON_TO_VALUE[a.k] - TASK_ICON_TO_VALUE[b.k]
[GroupingMode.ByIcon]: function sortGroupsByIcon(a: TaskGroup<string>, b: TaskGroup<string>): number {
return ICONS.indexOf(a.k as any) - ICONS.indexOf(b.k as any)
},
[GroupingMode.Journal]: function sortGroupsAlphabetically(a: TaskGroup<TaskIcon>, b: TaskGroup<TaskIcon>): number {
[GroupingMode.Journal]: function sortGroupsAlphabetically(a: TaskGroup<string>, b: TaskGroup<string>): number {
return b.k.localeCompare(a.k)
}
}

View file

@ -1,24 +1,19 @@
import {TaskIcon, TaskImportance, TaskPriority} from "@/app/[lang]/board/[board]/(api)/(task)"
import {TaskImportance} from "@/app/[lang]/board/[board]/(api)/(task)"
import {TaskWithId} from "@/app/[lang]/board/[board]/(page)/(task)/TaskWithId"
import {GroupingMode} from "@/app/[lang]/board/[board]/(page)/(view)/(grouping)/GroupingMode"
export const GROUPING_MODE_TO_TASK_GROUPER_FUNCTION = {
[GroupingMode.ByImportance]: function groupTasksByImportance(t: TaskWithId): TaskImportance | null {
if(t[1].journaled_on) return null
return t[1].importance
},
[GroupingMode.ByPriority]: function groupTasksByPriority(t: TaskWithId): TaskPriority | null {
if(t[1].journaled_on) return null
return t[1].priority
},
[GroupingMode.ByStatus]: function groupTasksByStatus(t: TaskWithId): string | null {
if(t[1].journaled_on) return null
else if(t[1].completed_on) return "Complete"
else if(t[1].started_on) return "InProgress"
else return "Unfinished"
},
[GroupingMode.ByIcon]: function groupTasksByIcon(t: TaskWithId): TaskIcon | null {
[GroupingMode.ByIcon]: function groupTasksByIcon(t: TaskWithId): string | null {
if(t[1].journaled_on) return null
return t[1].icon
},

View file

@ -1,6 +1,7 @@
import {TASK_ICON_TO_FONTAWESOME_REGULAR, TaskIcon, TaskImportance, TaskPriority} from "@/app/[lang]/board/[board]/(api)/(task)"
import {TaskImportance} from "@/app/[lang]/board/[board]/(api)/(task)"
import style from "@/app/[lang]/board/[board]/(page)/(task)/TaskContainer.module.css"
import {GroupingMode} from "@/app/[lang]/board/[board]/(page)/(view)/(grouping)/GroupingMode"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import {TFunction} from "i18next"
import {ReactNode} from "react"
@ -48,41 +49,6 @@ export const GROUPING_MODE_TO_TITLE_COMPONENT: {[key in GroupingMode]: (t: Title
}
},
[GroupingMode.ByPriority]: function TitleFromPriority({t, k}: { t: TFunction, k: TaskPriority }): ReactNode {
switch(k) {
case TaskPriority.Highest:
return (
<span className={style.taskPriorityHighestColumnHeader}>
{t("taskPriorityHighest")}
</span>
)
case TaskPriority.High:
return (
<span className={style.taskPriorityHighColumnHeader}>
{t("taskPriorityHigh")}
</span>
)
case TaskPriority.Normal:
return (
<span className={style.taskPriorityNormalColumnHeader}>
{t("taskPriorityNormal")}
</span>
)
case TaskPriority.Low:
return (
<span className={style.taskPriorityLowColumnHeader}>
{t("taskPriorityLow")}
</span>
)
case TaskPriority.Lowest:
return (
<span className={style.taskPriorityLowestColumnHeader}>
{t("taskPriorityLowest")}
</span>
)
}
},
[GroupingMode.ByStatus]: function TitleFromStatus({t, k}: { t: TFunction, k: string }): ReactNode {
switch(k) {
case "Unfinished":
@ -106,12 +72,12 @@ export const GROUPING_MODE_TO_TITLE_COMPONENT: {[key in GroupingMode]: (t: Title
}
},
[GroupingMode.ByIcon]: function TitleFromIcon({k}: { t: TFunction, k: TaskIcon }): ReactNode {
[GroupingMode.ByIcon]: function TitleFromIcon({k}: { t: TFunction, k: string }): ReactNode {
return (
<span>
<FontAwesomeIcon icon={TASK_ICON_TO_FONTAWESOME_REGULAR[k]}/>
<FontAwesomeIcon icon={fas[`fa${k}`]}/>
&nbsp;
{TaskIcon[k]}
{k}
</span>
)
},

View file

@ -1,6 +1,6 @@
export enum SortingMode {
ByPriority,
ByImportance,
ByDeadline,
ByIcon,
ByText,
ByStatus,

View file

@ -1,4 +1,5 @@
import {TaskIcon, TaskImportance, TaskPriority} from "@/app/[lang]/board/[board]/(api)/(task)"
import {TaskImportance} from "@/app/[lang]/board/[board]/(api)/(task)"
import {ICONS} from "@/app/[lang]/board/[board]/(api)/(task)/TaskIcon"
import {TaskWithId} from "@/app/[lang]/board/[board]/(page)/(task)/TaskWithId"
import {SortingMode} from "@/app/[lang]/board/[board]/(page)/(view)/(sorting)/SortingMode"
@ -11,38 +12,6 @@ const TASK_IMPORTANCE_TO_VALUE = {
[TaskImportance.Lowest]: 5,
}
const TASK_PRIORITY_TO_VALUE = {
[TaskPriority.Highest]: 1,
[TaskPriority.High]: 2,
[TaskPriority.Normal]: 3,
[TaskPriority.Low]: 4,
[TaskPriority.Lowest]: 5,
}
const TASK_ICON_TO_VALUE = {
[TaskIcon.Bookmark]: 1,
[TaskIcon.Circle]: 2,
[TaskIcon.Square]: 3,
[TaskIcon.Heart]: 4,
[TaskIcon.Star]: 5,
[TaskIcon.Sun]: 6,
[TaskIcon.Moon]: 7,
[TaskIcon.Eye]: 8,
[TaskIcon.Hand]: 9,
[TaskIcon.Handshake]: 10,
[TaskIcon.FaceSmile]: 11,
[TaskIcon.User]: 12,
[TaskIcon.Comment]: 13,
[TaskIcon.Envelope]: 14,
[TaskIcon.File]: 15,
[TaskIcon.PaperPlane]: 16,
[TaskIcon.Building]: 17,
[TaskIcon.Flag]: 18,
[TaskIcon.Bell]: 19,
[TaskIcon.Clock]: 20,
[TaskIcon.Image]: 21,
}
export function getTaskSorter(sortingModes: SortingMode[]) {
return (a: TaskWithId, b: TaskWithId) => {
@ -61,13 +30,13 @@ const SORTING_MODE_TO_SORTING_FUNCTION = {
return a[1].text.localeCompare(b[1].text)
},
[SortingMode.ByIcon]: function sortTasksByIcon(a: TaskWithId, b: TaskWithId) {
return TASK_ICON_TO_VALUE[a[1].icon] - TASK_ICON_TO_VALUE[b[1].icon]
return ICONS.indexOf(a[1].icon as any) - ICONS.indexOf(b[1].icon as any)
},
[SortingMode.ByImportance]: function sortTasksByImportance(a: TaskWithId, b: TaskWithId) {
return TASK_IMPORTANCE_TO_VALUE[a[1].importance] - TASK_IMPORTANCE_TO_VALUE[b[1].importance]
},
[SortingMode.ByPriority]: function sortTasksByPriority(a: TaskWithId, b: TaskWithId) {
return TASK_PRIORITY_TO_VALUE[a[1].priority] - TASK_PRIORITY_TO_VALUE[b[1].priority]
[SortingMode.ByDeadline]: function sortTasksByPriority(a: TaskWithId, b: TaskWithId) {
return (a[1].deadline ?? -1) - (b[1].deadline ?? -1)
},
[SortingMode.ByStatus]: function sortTasksByStatus(a: TaskWithId, b: TaskWithId) {
if(a[1].journaled_on && !b[1].journaled_on) return 1;

View file

@ -1,5 +1,6 @@
import {ModifyTaskBoardRequest} from "@/app/[lang]/board/[board]/(api)/(request)"
import {useBoardConsumer} from "@/app/[lang]/board/[board]/(layout)/(contextBoard)"
import {taskToString} from "@/app/[lang]/board/[board]/(page)/(edit)/taskToString"
import {TaskActions} from "@/app/[lang]/board/[board]/(page)/(task)/TaskActions"
import {TaskContainer} from "@/app/[lang]/board/[board]/(page)/(task)/TaskContainer"
import {TaskDescription} from "@/app/[lang]/board/[board]/(page)/(task)/TaskDescription"
@ -12,7 +13,7 @@ import {TFunction} from "i18next"
import {Dispatch, KeyboardEvent, PointerEvent, SetStateAction, SyntheticEvent, useCallback, useState} from "react"
export function TaskViewer({t, taskWithId: [id, task], setEditorInput}: {t: TFunction, taskWithId: TaskWithId, setEditorInput: Dispatch<SetStateAction<string>>}) {
export function TaskViewer({lang, t, taskWithId: [id, task], setEditorInput}: {lang: string, t: TFunction, taskWithId: TaskWithId, setEditorInput: Dispatch<SetStateAction<string>>}) {
const [isFlipped, setFlipped] = useState<boolean>(false)
const {sendRequest, boardState: {locked}} = useBoardConsumer()
@ -129,7 +130,7 @@ export function TaskViewer({t, taskWithId: [id, task], setEditorInput}: {t: TFun
<TaskContainer
role={"article"}
importance={task.importance}
priority={task.priority}
deadline={task.deadline}
status={status}
onKeyDown={toggleFlipOnKeyDown}
onPointerEnter={flipOnPointerEnter}
@ -138,12 +139,13 @@ export function TaskViewer({t, taskWithId: [id, task], setEditorInput}: {t: TFun
>
<TaskViewerIcon
t={t}
icon={task.icon}
icon={task.icon as any}
status={status}
onInteract={status === TaskSimplifiedStatus.Journaled ? undefined : toggleStatus}
/>
<TaskDescription
text={task.text}
isSource={isFlipped}
text={isFlipped ? taskToString(task, lang) : task.text}
/>
{sideElements}
</TaskContainer>

View file

@ -1,4 +1,3 @@
import {TaskIcon} from "@/app/[lang]/board/[board]/(api)/(task)"
import {TaskIconComponent} from "@/app/[lang]/board/[board]/(page)/(task)/TaskIconComponent"
import {TaskSimplifiedStatus} from "@/app/[lang]/board/[board]/(page)/(task)/TaskSimplifiedStatus"
import {TFunction} from "i18next"
@ -15,7 +14,7 @@ const TASK_STATUS_TO_I18N_KEY: {[key in TaskSimplifiedStatus]: string} = {
export type TaskViewerIconProps = {
t: TFunction,
status: TaskSimplifiedStatus,
icon: TaskIcon,
icon: string,
onInteract?: Parameters<typeof TaskIconComponent>[0]["onInteract"]
}

View file

@ -2,7 +2,7 @@ import {UpdateTaskBoardChange} from "@/app/[lang]/board/[board]/(api)/(change)"
import {useBoardConsumer} from "@/app/[lang]/board/[board]/(layout)/(contextBoard)"
import {TaskButton} from "@/app/[lang]/board/[board]/(page)/(task)/TaskButton"
import {TaskWithId} from "@/app/[lang]/board/[board]/(page)/(task)/TaskWithId"
import {faBookBookmark} from "@fortawesome/free-solid-svg-icons"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {TFunction} from "i18next"
import {SyntheticEvent, useCallback} from "react"
@ -25,7 +25,7 @@ export function TaskViewerJournalButton({t, taskWithId: [id, task]}: {t: TFuncti
return (
<TaskButton
title={t("taskButtonJournal")}
icon={faBookBookmark}
icon={fas.faBookBookmark}
onInteract={locked ? undefined : toggleJournalTask}
/>
)

View file

@ -3,7 +3,7 @@ import {useBoardConsumer} from "@/app/[lang]/board/[board]/(layout)/(contextBoar
import {taskToString} from "@/app/[lang]/board/[board]/(page)/(edit)/taskToString"
import {TaskButton} from "@/app/[lang]/board/[board]/(page)/(task)/TaskButton"
import {TaskWithId} from "@/app/[lang]/board/[board]/(page)/(task)/TaskWithId"
import {faTrashArrowUp} from "@fortawesome/free-solid-svg-icons"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {TFunction} from "i18next"
import {Dispatch, SetStateAction, SyntheticEvent, useCallback} from "react"
@ -34,7 +34,7 @@ export function TaskViewerRecreateButton({t, taskWithId: [id, task], setEditorIn
return (
<TaskButton
title={t("taskButtonRecreate")}
icon={faTrashArrowUp}
icon={fas.faTrashArrowUp}
onInteract={locked ? undefined : recreateTask}
/>
)

View file

@ -4,38 +4,39 @@ import {GroupingMode} from "@/app/[lang]/board/[board]/(page)/(view)/(grouping)"
import {SortingMode} from "@/app/[lang]/board/[board]/(page)/(view)/(sorting)"
import {BoardViewer} from "@/app/[lang]/board/[board]/(page)/(view)/BoardViewer"
import {SplashWithIcon} from "@/app/[lang]/board/[board]/(page)/(view)/SplashWithIcon"
import {faAsterisk, faGear, faLink, faLinkSlash} from "@fortawesome/free-solid-svg-icons"
import {fas} from "@awesome.me/kit-dfe340c874/icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import {TFunction} from "i18next"
import {Dispatch, SetStateAction} from "react"
export function BoardMain({t, className, columning, sorting, grouping, setEditorInput}: {t: TFunction, className?: string, columning: ColumningMode, grouping: GroupingMode, sorting: SortingMode[], setEditorInput: Dispatch<SetStateAction<string>>}) {
export function BoardMain({lang, t, className, columning, sorting, grouping, setEditorInput}: {lang: string, t: TFunction, className?: string, columning: ColumningMode, grouping: GroupingMode, sorting: SortingMode[], setEditorInput: Dispatch<SetStateAction<string>>}) {
const {webSocketState, webSocketBackoffMs, boardState} = useBoardConsumer()
switch(webSocketState) {
case undefined:
return <SplashWithIcon
icon={<FontAwesomeIcon size={"4x"} icon={faGear} beatFade/>}
icon={<FontAwesomeIcon size={"4x"} icon={fas.faGear} beatFade/>}
text={t("boardPreparing")}
className={className}
/>
case WebSocket.CONNECTING:
return <SplashWithIcon
icon={<FontAwesomeIcon size={"4x"} icon={faLink} beatFade/>}
icon={<FontAwesomeIcon size={"4x"} icon={fas.faLink} beatFade/>}
text={t("boardConnecting")}
className={className}
/>
case WebSocket.OPEN:
if(Object.keys(boardState.tasks).length === 0) {
return <SplashWithIcon
icon={<FontAwesomeIcon size={"4x"} icon={faAsterisk}/>}
icon={<FontAwesomeIcon size={"4x"} icon={fas.faAsterisk}/>}
text={t("boardEmpty")}
className={className}
/>
}
else {
return <BoardViewer
lang={lang}
t={t}
columning={columning}
sorting={sorting}
@ -46,13 +47,13 @@ export function BoardMain({t, className, columning, sorting, grouping, setEditor
}
case WebSocket.CLOSING:
return <SplashWithIcon
icon={<FontAwesomeIcon size={"4x"} icon={faLinkSlash} beatFade/>}
icon={<FontAwesomeIcon size={"4x"} icon={fas.faLinkSlash} beatFade/>}
text={t("boardDisconnecting")}
className={className}
/>
case WebSocket.CLOSED:
return <SplashWithIcon
icon={<FontAwesomeIcon size={"4x"} icon={faLinkSlash}/>}
icon={<FontAwesomeIcon size={"4x"} icon={fas.faLinkSlash}/>}
text={t("boardDisconnected", { retryingInSeconds: Math.ceil((webSocketBackoffMs ?? 0) / 1000).toString() })}
className={className}
/>

View file

@ -12,7 +12,7 @@ import {Dispatch, SetStateAction} from "react"
import style from "./BoardViewer.module.css"
export function BoardViewer({className, t, columning, grouping, sorting, setEditorInput}: {className?: string, t: TFunction, columning: ColumningMode, grouping: GroupingMode, sorting: SortingMode[], setEditorInput: Dispatch<SetStateAction<string>>}) {
export function BoardViewer({className, lang, t, columning, grouping, sorting, setEditorInput}: {className?: string, t: TFunction, lang: string, columning: ColumningMode, grouping: GroupingMode, sorting: SortingMode[], setEditorInput: Dispatch<SetStateAction<string>>}) {
const {boardState: {tasks}} = useBoardConsumer()
const {taskGroups} = useBoardTasksArranger(tasks, grouping, sorting);
@ -22,12 +22,12 @@ export function BoardViewer({className, t, columning, grouping, sorting, setEdit
[style.boardMainTaskGroupsMultiColumn]: columning === ColumningMode.MultiColumn,
[style.boardMainTaskGroupsSingleColumn]: columning === ColumningMode.SingleColumn,
})}>
{taskGroups.map((tg) => <BoardViewerColumn t={t} taskGroup={tg} key={tg.k} grouping={grouping} setEditorInput={setEditorInput}/>)}
{taskGroups.map((tg) => <BoardViewerColumn lang={lang} t={t} taskGroup={tg} key={tg.k} grouping={grouping} setEditorInput={setEditorInput}/>)}
</main>
)
}
export function BoardViewerColumn({t, grouping, taskGroup, setEditorInput}: {t: TFunction, grouping: GroupingMode, taskGroup: TaskGroup<string | number>, setEditorInput: Dispatch<SetStateAction<string>>}) {
export function BoardViewerColumn({lang, t, grouping, taskGroup, setEditorInput}: {lang: string, t: TFunction, grouping: GroupingMode, taskGroup: TaskGroup<string | number>, setEditorInput: Dispatch<SetStateAction<string>>}) {
const ColumnTitle = GROUPING_MODE_TO_TITLE_COMPONENT[grouping]
return (
@ -36,7 +36,7 @@ export function BoardViewerColumn({t, grouping, taskGroup, setEditorInput}: {t:
<ColumnTitle t={t} k={taskGroup.k}/>
</h3>
<div className={style.boardColumnContents}>
{taskGroup.tasks.map((task: TaskWithId) => <TaskViewer t={t} taskWithId={task} key={task[0]} setEditorInput={setEditorInput}/>)}
{taskGroup.tasks.map((task: TaskWithId) => <TaskViewer lang={lang} t={t} taskWithId={task} key={task[0]} setEditorInput={setEditorInput}/>)}
</div>
</div>
)

View file

@ -15,7 +15,7 @@ export function BoardPage({lang}: {lang: string}) {
const internationalization = useClientTranslation(lang, "board")
const metadataHook = useBoardMetadataEditor()
const layoutHook = useBoardLayoutEditor()
const editorHook = useTaskEditor()
const editorHook = useTaskEditor(lang)
const t = internationalization.t as TFunction
@ -28,6 +28,7 @@ export function BoardPage({lang}: {lang: string}) {
layoutHook={layoutHook}
/>
<BoardMain
lang={lang}
t={t}
className={style.pageMain}
columning={layoutHook.columningHook.value}

View file

@ -19,7 +19,6 @@ export function useBoardLayoutEditor() {
ColumningMode.MultiColumn,
])
const groupingHook = useCycler(useLocalStorage<number | undefined>(localStorageKeyGrouping, undefined), [
GroupingMode.ByPriority,
GroupingMode.ByImportance,
GroupingMode.ByStatus,
GroupingMode.ByIcon,
@ -28,7 +27,7 @@ export function useBoardLayoutEditor() {
const sortingHook = useCycler(useLocalStorage<number | undefined>(localStorageKeySorting, undefined), [
[
SortingMode.ByStatus,
SortingMode.ByPriority,
SortingMode.ByDeadline,
SortingMode.ByImportance,
SortingMode.ByText,
SortingMode.ByIcon,
@ -37,7 +36,7 @@ export function useBoardLayoutEditor() {
[
SortingMode.ByStatus,
SortingMode.ByImportance,
SortingMode.ByPriority,
SortingMode.ByDeadline,
SortingMode.ByText,
SortingMode.ByIcon,
SortingMode.ByCreation,
@ -53,7 +52,7 @@ export function useBoardLayoutEditor() {
SortingMode.ByCreation,
],
[
SortingMode.ByPriority,
SortingMode.ByDeadline,
SortingMode.ByImportance,
SortingMode.ByText,
SortingMode.ByIcon,
@ -61,7 +60,7 @@ export function useBoardLayoutEditor() {
],
[
SortingMode.ByImportance,
SortingMode.ByPriority,
SortingMode.ByDeadline,
SortingMode.ByText,
SortingMode.ByIcon,
SortingMode.ByCreation,

View file

@ -4,12 +4,12 @@ import {taskToString} from "@/app/[lang]/board/[board]/(page)/(edit)/taskToStrin
import {useCallback, useMemo, useState} from "react"
export function useTaskEditor() {
export function useTaskEditor(lang: string) {
const [input, setInput] = useState<string>("")
const task = useMemo(() => stringToTask(input), [input])
const task = useMemo(() => stringToTask(input, lang), [input, lang])
const setTask = useCallback((t: Task) => {
setInput(taskToString(t))
setInput(taskToString(t, lang))
}, [])
return {

View file

@ -2,6 +2,13 @@
# yarn lockfile v1
"@awesome.me/kit-dfe340c874@^1.0.10":
version "1.0.10"
resolved "https://npm.fontawesome.com/@awesome.me/kit-dfe340c874/-/1.0.10/kit-dfe340c874-1.0.10.tgz#a09e8b5a92ab9d58e703008f5adde7aaeaf6f629"
integrity sha512-q8cIvNP/0xULSNs5XqusIa4pTgI9pvMubNZIQQWIDM8yacpYt1wM54jOceq0g3tGTzl1HummO4oN5Xdfbm8gww==
dependencies:
"@fortawesome/fontawesome-common-types" "^6.6.0"
"@babel/runtime@^7.23.2":
version "7.25.6"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
@ -9,35 +16,21 @@
dependencies:
regenerator-runtime "^0.14.0"
"@fortawesome/fontawesome-common-types@6.6.0":
"@fortawesome/fontawesome-common-types@6.6.0", "@fortawesome/fontawesome-common-types@^6.6.0":
version "6.6.0"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz#31ab07ca6a06358c5de4d295d4711b675006163f"
resolved "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/6.6.0/fontawesome-common-types-6.6.0.tgz#31ab07ca6a06358c5de4d295d4711b675006163f"
integrity sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==
"@fortawesome/fontawesome-svg-core@*":
version "6.6.0"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz#2a24c32ef92136e98eae2ff334a27145188295ff"
resolved "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/6.6.0/fontawesome-svg-core-6.6.0.tgz#2a24c32ef92136e98eae2ff334a27145188295ff"
integrity sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==
dependencies:
"@fortawesome/fontawesome-common-types" "6.6.0"
"@fortawesome/free-regular-svg-icons@*":
version "6.6.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz#fc49a947ac8dfd20403c9ea5f37f0919425bdf04"
integrity sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==
dependencies:
"@fortawesome/fontawesome-common-types" "6.6.0"
"@fortawesome/free-solid-svg-icons@*":
version "6.6.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz#061751ca43be4c4d814f0adbda8f006164ec9f3b"
integrity sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==
dependencies:
"@fortawesome/fontawesome-common-types" "6.6.0"
"@fortawesome/react-fontawesome@*":
version "0.2.2"
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz#68b058f9132b46c8599875f6a636dad231af78d4"
resolved "https://npm.fontawesome.com/@fortawesome/react-fontawesome/-/0.2.2/react-fontawesome-0.2.2.tgz#68b058f9132b46c8599875f6a636dad231af78d4"
integrity sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==
dependencies:
prop-types "^15.8.1"
@ -142,6 +135,11 @@
"@types/prop-types" "*"
csstype "^3.0.2"
any-date-parser@^1.5.4:
version "1.5.4"
resolved "https://registry.yarnpkg.com/any-date-parser/-/any-date-parser-1.5.4.tgz#3c462f3a419b7147a88a8c7cab91da4193ff680b"
integrity sha512-S4gl9UmXNk9XXSQxp5w5harUD6aM0fepyL3dZM/B3znX57sWf792hS2UvvCFIHECfpsqfKbQ+cqWBky4AKyRIg==
busboy@1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"