feat: many small features/fixes

projects/athena-web/src/main.tsx

@@ -72,7 +72,7 @@ export function Application() {
   return (
     <>
       <Helmet>
-        <title>{`Vault Name | Athena`}</title>
+        <title>{`Application | Athena`}</title>
       </Helmet>
       <main className="h-[100vh] w-[100vw] bg-br-atom-700 flex">
         {/** Vault Section **/}
@@ -94,7 +94,7 @@ export function Application() {
               onClick={() => {}}
               className="absolute left-[10px] py-2"
             />
-            <p className="text-br-whiteGrey-100 font-bold py-2">Vault Name</p>
+            <p className="text-br-whiteGrey-100 font-bold py-2">Athena</p>
             <div className="absolute right-[10px] flex">
               <CreateContentIconAndPopup />
             </div>

projects/athena-web/src/patterns/components/content-card/content-tags.tsx

@@ -50,6 +50,7 @@ export function TagsDisplay(props: {tags: Tag[]}) {
     <div className="flex flex-wrap gap-1.5">
       {props.tags.map(tag =>
         <TagElement
+          key={tag.id}
           text={tag.name}
           backgroundColour={tag.backgroundColour}
           textColour={tag.textColour}

projects/athena-web/src/patterns/components/content-details/content-details.tsx

@@ -1,35 +1,62 @@
 import React from "react";
 import {ContentData} from "../../../state/features/ui/content/content-selctors";
 import {ContentType} from "../../../state/features/ui/content/content-interface";
-import {formatUTCString} from "../../../helpers/format-utc-string";
+import {ApplicationState, useAppSelector} from "../../../state/store";
+import {selectTasks} from "../../../state/features/current-vault/task-lists/tasks/task-selectors";
+import {DatabaseTask, TaskStatus} from "../../../state/features/current-vault/task-lists/tasks/task-interface";
+import {DatabaseTaskList} from "../../../state/features/current-vault/task-lists/task-lists-interface";
+import {DatabaseNote} from "../../../state/features/current-vault/notes/notes-interface";
+import {DatabaseNoteTemplate} from "../../../state/features/current-vault/note-templates/note-templates-interface";
+
 
 export interface ContentDetailsProps {
   content: ContentData
 }
-
 export function ContentDetails(props: ContentDetailsProps) {
-  let details;
   if (props.content.type === ContentType.TASK_LIST) {
-    details = (
-      <p className="text-br-whiteGrey-700 text-center italic">0 open tasks | 0 complete tasks</p>
-    )
+    return <TaskListDetails taskList={props.content.data} />
   }
   else {
-    const wordCount = props.content.data.body
-      .split(" ")
-      .filter(word => word !== "")
-      .length;
-    const charCount = props.content.data.body.length;
-    details = (
-      <div>
-        <p className="text-br-whiteGrey-700 text-center italic">{wordCount} words | {charCount} chars</p>
-      </div>
-    )
+    return <TextDetails content={props.content.data} />
   }
+}
+
+
+export interface TextDetailsProps {
+  content: DatabaseNote | DatabaseNoteTemplate
+}
+export function TextDetails(props: TextDetailsProps) {
+  const wordCount = props.content.body
+    .split(" ")
+    .filter(word => word !== "")
+    .length;
+  const charCount = props.content.body.length;
 
   return (
     <div className="overflow-x-scroll whitespace-nowrap">
-      {details}
+      <p className="text-br-whiteGrey-700 text-center italic">{wordCount} words | {charCount} chars</p>
     </div>
   )
+}
+
+
+export interface TaskListDetailsProps {
+  taskList: DatabaseTaskList
+}
+export function TaskListDetails(props: TaskListDetailsProps) {
+  const tasks = useAppSelector((state: ApplicationState) => selectTasks(state, props.taskList.id));
+  const openTasks: DatabaseTask[] = [];
+  const completedTasks: DatabaseTask[] = [];
+  for (const task of tasks) {
+    if (task.status === TaskStatus.OPEN) {
+      openTasks.push(task);
+    }
+    else {
+      completedTasks.push(task);
+    }
+  }
+
+  return (
+    <p className="text-br-whiteGrey-700 text-center italic">{openTasks.length} open tasks | {completedTasks.length} complete tasks</p>
+  )
 }

projects/athena-web/src/patterns/components/folder-view.tsx

@@ -208,7 +208,7 @@ export function FileSystem() {
   return (
     <>
       <FolderItem
-        folder="Vault Name"
+        folder="/"
         level={0}
         isExpanded={isExpanded}
         onClick={() => {setIsExpanded(!isExpanded)}}

projects/athena-web/src/patterns/components/move-folder-view.tsx

@@ -108,7 +108,7 @@ export function MoveFolderView(props: MoveFolderViewProps) {
       className="relative bg-br-atom-900"
     >
       <FolderFileSystemItem
-        folder="Vault Name"
+        folder="/"
         level={0}
         isExpanded={isExpanded}
         onFolderClick={() => {setIsExpanded(!isExpanded)}}

projects/athena-web/src/patterns/components/popup-menus/content-list-filter-icon-and-popup.tsx

@@ -154,17 +154,11 @@ export function ContentListFilterIconAndPopup() {
     <ContentWithPopup
       label="Open Filter Menu"
       content={
-        <button
-          className={classNames(
-            "p-1 flex items-center",
-            "text-br-whiteGrey-50 hover:text-br-teal-600"
-          )}
-          aria-label="Open Filter Menu"
-        >
+        <div className="p-1 flex items-center text-br-whiteGrey-50 hover:text-br-teal-600">
           {filtersAreActive && <i className="h-[10px] w-[10px] rounded-full bg-br-teal-600 mr-1"></i>}
           <span className="mr-1 font-bold underline underline-offset-4">Filters</span>
           <Filter size={iconSizes.small} />
-        </button>
+        </div>
       }
       popupContent={
         <PopupPanel className="p-2 maw-w-[350px]">

projects/athena-web/src/patterns/components/popup-menus/tags-list-filter-icon-and-popup.tsx

@@ -1,5 +1,4 @@
 import {ContentWithPopup} from "./content-with-popup";
-import classNames from "classnames";
 import {Filter} from "lucide-react";
 import {Button, iconSizes, Input, Select} from "@ben-ryder/jigsaw";
 import React, {useState} from "react";
@@ -119,17 +118,11 @@ export function TagsListFilterIconAndPopup() {
     <ContentWithPopup
       label="Open Filter Menu"
       content={
-        <button
-          className={classNames(
-            "p-1 flex items-center",
-            "text-br-whiteGrey-50 hover:text-br-teal-600"
-          )}
-          aria-label="Open Filter Menu"
-        >
+        <div className="p-1 flex items-center text-br-whiteGrey-50 hover:text-br-teal-600">
           {filtersAreActive && <i className="h-[10px] w-[10px] rounded-full bg-br-teal-600 mr-1"></i>}
           <span className="mr-1 font-bold underline underline-offset-4">Filters</span>
           <Filter size={iconSizes.small} />
-        </button>
+        </div>
       }
       popupContent={
         <PopupPanel className="p-2 maw-w-[350px]">

projects/athena-web/src/patterns/components/tags-view.tsx

@@ -57,7 +57,7 @@ export function TagsView() {
           </div>
       }
       {tagsData.list.map(tag =>
-        <TagCard tag={tag} />
+        <TagCard key={tag.id} tag={tag} />
       )}
       <div className="my-6 mx-4 flex justify-between items-center">
         <p className="text-br-whiteGrey-100">page {tagsData.meta.currentPage}/{totalPages} - {totalCurrentCount}/{tagsData.meta.total} items</p>

projects/athena-web/src/patterns/components/welcome-message.tsx

@@ -11,6 +11,10 @@ export function WelcomeMessage() {
         <div className="mt-5">
           <p className="text-br-red-500">This app is in development, expect bugs and incomplete functionality!</p>
         </div>
+
+        <div className="mt-5">
+          <p className="text-br-blueGrey-600">v0.1.0-alpha</p>
+        </div>
       </div>
     </div>
   )

projects/athena-web/src/state/features/current-vault/task-lists/tasks/task-thunks.ts

@@ -1,7 +1,8 @@
-import {AppThunkDispatch} from "../../../../store";
+import {ApplicationState, AppThunkDispatch} from "../../../../store";
 import {v4 as createUUID} from "uuid";
 import {DatabaseTask, TaskStatus} from "./task-interface";
 import {createTask, updateTask} from "./task-actions";
+import {updateTaskList} from "../task-lists-actions";
 
 
 export function createNewTask(taskListId: string, name: string) {
@@ -18,11 +19,20 @@ export function createNewTask(taskListId: string, name: string) {
       updatedAt: timestamp
     }
     dispatch(createTask(task));
+
+    dispatch(updateTaskList({
+      id: taskListId,
+      changes: {
+        updatedAt: timestamp
+      }
+    }))
   }
 }
 
 export function renameTask(taskId: string, name: string) {
-  return (dispatch: AppThunkDispatch) => {
+  return (dispatch: AppThunkDispatch, getState: () => ApplicationState) => {
+    const state = getState();
+    const task = state.currentVault.tasks.entities[taskId]
     const updatedAt = new Date().toISOString();
 
     dispatch(updateTask({
@@ -32,11 +42,20 @@ export function renameTask(taskId: string, name: string) {
         updatedAt: updatedAt
       }
     }));
+
+    dispatch(updateTaskList({
+      id: task.taskListId,
+      changes: {
+        updatedAt: updatedAt
+      }
+    }))
   }
 }
 
 export function completeTask(taskId: string) {
-  return (dispatch: AppThunkDispatch) => {
+  return (dispatch: AppThunkDispatch, getState: () => ApplicationState) => {
+    const state = getState();
+    const task = state.currentVault.tasks.entities[taskId]
     const updatedAt = new Date().toISOString();
 
     dispatch(updateTask({
@@ -46,11 +65,20 @@ export function completeTask(taskId: string) {
         updatedAt: updatedAt
       }
     }));
+
+    dispatch(updateTaskList({
+      id: task.taskListId,
+      changes: {
+        updatedAt: updatedAt
+      }
+    }))
   }
 }
 
 export function reopenTask(taskId: string) {
-  return (dispatch: AppThunkDispatch) => {
+  return (dispatch: AppThunkDispatch, getState: () => ApplicationState) => {
+    const state = getState();
+    const task = state.currentVault.tasks.entities[taskId]
     const updatedAt = new Date().toISOString();
 
     dispatch(updateTask({
@@ -60,5 +88,12 @@ export function reopenTask(taskId: string) {
         updatedAt: updatedAt
       }
     }));
+
+    dispatch(updateTaskList({
+      id: task.taskListId,
+      changes: {
+        updatedAt: updatedAt
+      }
+    }))
   }
 }