add kanban

src/Tabs/messageTab.tsx

@@ -2,9 +2,9 @@ import * as React from "bloatless-react";
 
 import { closeChatView, isShowingObjects, selectedChat, toggleChatTools } from "../Model/model";
 
-import { ChatObjectView } from "../Views/Objects/chatObjectView";
 import { ChatOptionModal } from "../Views/Chat/chatOptionModal";
 import { MessageComposer } from "../Views/Chat/messageComposer";
+import { ObjectPane } from "../Views/Objects/objectPane";
 import { ThreadView } from "../Views/Chat/threadView";
 import { translation } from "../translations";
 
@@ -50,7 +50,7 @@ export function MessageTab() {
         </span>
       </header>,
 
-      ChatObjectView(chat),
+      ObjectPane(chat),
       ThreadView(chat),
 
       <footer>{MessageComposer(chat)}</footer>,

src/Views/Objects/kanbanView.tsx

@@ -0,0 +1,73 @@
+import * as React from "bloatless-react";
+
+import { Chat, MessageObject } from "../../Model/chatModel";
+
+import { ObjectEntryView } from "./objectEntryView";
+import { ObjectGridView } from "./objectGridView";
+import { translation } from "../../translations";
+
+interface KanbanBoard {
+  title: string;
+  items: MessageObject[];
+}
+
+export function KanbanView(
+  chat: Chat,
+  selectedObject: React.State<MessageObject | undefined>,
+  isShowingObjectModal: React.State<boolean>
+) {
+  const boards = new React.MapState<KanbanBoard>();
+
+  chat.objects.subscribe(() => {
+    boards.clear();
+    chat.objects.value.forEach((messageObject) => {
+      const latest = chat.getMostRecentContent(messageObject);
+      if (!latest.categoryName) return;
+
+      const boardTitle = latest.categoryName;
+
+      if (!boards.value.has(boardTitle))
+        boards.set(boardTitle, { title: boardTitle, items: [] });
+
+      boards.value.get(boardTitle)?.items.push(messageObject);
+    });
+  });
+
+  const converter: React.StateItemConverter<KanbanBoard> = (board) =>
+    KanbanBoardView(chat, board, selectedObject, isShowingObjectModal);
+
+  const content = React.createProxyState([chat.objects], () => (
+    <div
+      class="flex-row large-gap width-100 height-100 scroll-v scroll-h padding"
+      children:append={[boards, converter]}
+    ></div>
+  ));
+
+  return (
+    <div class="width-100 height-100 scroll-no" children:set={content}></div>
+  );
+}
+
+function KanbanBoardView(
+  chat: Chat,
+  kanbanBoard: KanbanBoard,
+  selectedObject: React.State<MessageObject | undefined>,
+  isShowingObjectModal: React.State<boolean>
+) {
+  return (
+    <div class="flex-column flex-no" style="min-width: 280px">
+      <b class="flex-row width-100">{kanbanBoard.title}</b>
+      <hr></hr>
+      <div class="flex-column gap padding-bottom">
+        {...kanbanBoard.items.map((messageObject) =>
+          ObjectEntryView(
+            chat,
+            messageObject,
+            selectedObject,
+            isShowingObjectModal
+          )
+        )}
+      </div>
+    </div>
+  );
+}

src/Views/Objects/noteObjectsView.tsx

@@ -2,7 +2,6 @@ import * as React from "bloatless-react";
 
 import { Chat, MessageObject } from "../../Model/chatModel";
 
-import { ObjectEntryView } from "./objectEntryView";
 import { ObjectGridView } from "./objectGridView";
 import { translation } from "../../translations";
 

src/Views/Objects/objectGridView.tsx

@@ -3,7 +3,6 @@ import * as React from "bloatless-react";
 import { Chat, MessageObject } from "../../Model/chatModel";
 
 import { ObjectEntryView } from "./objectEntryView";
-import { icons } from "../../icons";
 
 export function ObjectGridView(
   chat: Chat,
@@ -31,7 +30,7 @@ export function ObjectGridView(
     </div>
   ) : (
     <div
-      class="grid gap padding"
+      class="width-100 grid gap padding scroll-v"
       style="grid-template-columns: repeat(auto-fill, minmax(170px, 1fr))"
       children:prepend={[messageObjects, objectConverter]}
     ></div>

src/Views/Objects/objectPane.tsx

@@ -3,6 +3,7 @@ import * as React from "bloatless-react";
 import { Chat, MessageObject } from "../../Model/chatModel";
 
 import { AllObjectsView } from "./allObjectsView";
+import { KanbanView } from "./kanbanView";
 import { NoteObjectsView } from "./noteObjectsView";
 import { ObjectDetailModal } from "./objectDetailModal";
 import { icons } from "../../icons";
@@ -11,9 +12,10 @@ import { translation } from "../../translations";
 export const viewTypes = {
   all: [translation.viewAll, "grid_view"],
   notes: [translation.viewNotes, icons.noteContent],
+  kanban: [translation.viewKanban, "view_kanban"],
 };
 
-export function ChatObjectView(chat: Chat) {
+export function ObjectPane(chat: Chat) {
   // selection and modal
   const isShowingObjectModal = new React.State(false);
   const selectedObject = new React.State<MessageObject | undefined>(undefined);
@@ -37,6 +39,8 @@ export function ChatObjectView(chat: Chat) {
       switch (selectedViewType.value) {
         case "notes":
           return NoteObjectsView;
+        case "kanban":
+          return KanbanView;
         default:
           return AllObjectsView;
       }
@@ -54,7 +58,7 @@ export function ChatObjectView(chat: Chat) {
   }
 
   return (
-    <div class="chat-object-view flex-column">
+    <div class="chat-object-view flex-column scroll-no">
       <div class="flex-row align-center border-bottom">
         <button
           class="primary height-100"
@@ -75,10 +79,7 @@ export function ChatObjectView(chat: Chat) {
         </button>
       </div>
 
-      <div
-        class="width-100 height-100 flex-1 scroll-h"
-        children:set={mainView}
-      ></div>
+      <div class="width-100 height-100 flex scroll-no" children:set={mainView}></div>
 
       <div children:set={objectModal}></div>
     </div>

src/translations.ts

@@ -88,6 +88,7 @@ const englishTranslations = {
 
   viewAll: "All",
   viewNotes: "Notes",
+  viewKanban: "Kanban",
 
   noObjects: "No objects",
   noNotes: "No notes",
@@ -201,6 +202,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
 
     viewAll: "Todos",
     viewNotes: "Notas",
+    viewKanban: "Kanban",
 
     noObjects: "Sin objetos",
     noNotes: "Sin notas",
@@ -311,6 +313,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
 
     viewAll: "Alle",
     viewNotes: "Notizen",
+    viewKanban: "Kanban",
 
     noObjects: "Keine Objekte",
     noNotes: "Keine Notizen",