trying to push scrapbook changes to git

5 files changed, 267 insertions, 2 deletions

diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 7992ed412..64334ac47 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -53,7 +53,7 @@ import { WebBox } from './nodes/WebBox';
 import { CalendarBox } from './nodes/calendarBox/CalendarBox';
 import { ChatBox } from './nodes/chatbot/chatboxcomponents/ChatBox';
 import { DailyJournal } from './nodes/formattedText/DailyJournal';
-import { ScrapbookVersionTwo } from './nodes/scrapbook/ScrapbookVersionTwo';
+//import { ScrapbookVersionTwo } from './nodes/scrapbook/ScrapbookVersionTwo';
 import { DashDocCommentView } from './nodes/formattedText/DashDocCommentView';
 import { DashDocView } from './nodes/formattedText/DashDocView';
 import { DashFieldView } from './nodes/formattedText/DashFieldView';
@@ -66,6 +66,7 @@ import { PresBox, PresSlideBox } from './nodes/trails';
 import { FaceRecognitionHandler } from './search/FaceRecognitionHandler';
 import { SearchBox } from './search/SearchBox';
 import { StickerPalette } from './smartdraw/StickerPalette';
+import { ScrapbookBox } from './nodes/scrapbook/ScrapbookBox';
 
 dotenv.config();
 
@@ -121,7 +122,7 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' };
             FormattedTextBox,
             DailyJournal, // AARAV
             ImageBox,
-            ScrapbookVersionTwo,
+            ScrapbookBox,
             FontIconBox,
             LabelBox,
             EquationBox,
diff --git a/src/client/views/nodes/scrapbook/EmbeddedDocView.tsx b/src/client/views/nodes/scrapbook/EmbeddedDocView.tsx
new file mode 100644
index 000000000..e99bf67c7
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/EmbeddedDocView.tsx
@@ -0,0 +1,52 @@
+//IGNORE FOR NOW, CURRENTLY NOT USED IN SCRAPBOOK IMPLEMENTATION
+import * as React from "react";
+import { observer } from "mobx-react";
+import { Doc } from "../../../../fields/Doc";
+import { DocumentView } from "../DocumentView";
+import { Transform } from "../../../util/Transform";
+
+interface EmbeddedDocViewProps {
+    doc: Doc;
+    width?: number;
+    height?: number;
+    slotId?: string;
+}
+
+@observer
+export class EmbeddedDocView extends React.Component<EmbeddedDocViewProps> {
+    render() {
+        const { doc, width = 300, height = 200, slotId } = this.props;
+        
+        // Use either an existing embedding or create one
+        let docToDisplay = doc;
+        
+        // If we need an embedding, create or use one
+        if (!docToDisplay.isEmbedding) {
+            docToDisplay = Doc.BestEmbedding(doc) || Doc.MakeEmbedding(doc);
+            // Set the container to the slot's ID so we can track it
+            if (slotId) {
+                docToDisplay.embedContainer = `scrapbook-slot-${slotId}`;
+            }
+        }
+        
+        return (
+            <DocumentView 
+                Document={docToDisplay}
+                renderDepth={0}
+                // Required sizing functions
+                NativeWidth={() => width}
+                NativeHeight={() => height}
+                PanelWidth={() => width}
+                PanelHeight={() => height}
+                // Required state functions
+                isContentActive={() => true}
+                childFilters={() => []}
+                ScreenToLocalTransform={() => new Transform()}
+                // Display options
+                hideDeleteButton={true}
+                hideDecorations={true}
+                hideResizeHandles={true}
+            />
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/scrapbook/ScrapbookSlot.scss b/src/client/views/nodes/scrapbook/ScrapbookSlot.scss
new file mode 100644
index 000000000..ae647ad36
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/ScrapbookSlot.scss
@@ -0,0 +1,85 @@
+//IGNORE FOR NOW, CURRENTLY NOT USED IN SCRAPBOOK IMPLEMENTATION
+.scrapbook-slot {
+  position: absolute;
+  background-color: rgba(245, 245, 245, 0.7);
+  border: 2px dashed #ccc;
+  border-radius: 5px;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+  overflow: hidden;
+
+  &.scrapbook-slot-over {
+    border-color: #4a90e2;
+    background-color: rgba(74, 144, 226, 0.1);
+  }
+
+  &.scrapbook-slot-filled {
+    border-style: solid;
+    border-color: rgba(0, 0, 0, 0.1);
+    background-color: transparent;
+
+    &.scrapbook-slot-over {
+      border-color: #4a90e2;
+      background-color: rgba(74, 144, 226, 0.1);
+    }
+  }
+
+  .scrapbook-slot-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .scrapbook-slot-placeholder {
+    text-align: center;
+    color: #888;
+  }
+
+  .scrapbook-slot-title {
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  .scrapbook-slot-instruction {
+    font-size: 0.9em;
+    font-style: italic;
+  }
+
+  .scrapbook-slot-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .scrapbook-slot-controls {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+
+    .scrapbook-slot-remove-btn {
+      background-color: rgba(255, 255, 255, 0.8);
+      border: 1px solid #ccc;
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 10px;
+      
+      &:hover {
+        background-color: rgba(255, 0, 0, 0.1);
+      }
+    }
+  }
+
+  &:hover .scrapbook-slot-controls {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/scrapbook/ScrapbookSlot.tsx b/src/client/views/nodes/scrapbook/ScrapbookSlot.tsx
index 05215d3e5..2c8f93778 100644
--- a/src/client/views/nodes/scrapbook/ScrapbookSlot.tsx
+++ b/src/client/views/nodes/scrapbook/ScrapbookSlot.tsx
@@ -1,3 +1,5 @@
+
+//IGNORE FOR NOW, CURRENTLY NOT USED IN SCRAPBOOK IMPLEMENTATION
 export interface SlotDefinition {
     id: string;
     x: number; y: number;
diff --git a/src/client/views/nodes/scrapbook/ScrapbookVersionTwo.tsx b/src/client/views/nodes/scrapbook/ScrapbookVersionTwo.tsx
new file mode 100644
index 000000000..d15d2fe56
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/ScrapbookVersionTwo.tsx
@@ -0,0 +1,125 @@
+//IGNORE FOR NOW, CURRENTLY NOT USED IN SCRAPBOOK IMPLEMENTATION
+import { action, makeObservable, observable } from 'mobx';
+import * as React from 'react';
+import { RichTextField } from '../../../../fields/RichTextField';
+import { Docs } from '../../../documents/Documents';
+import { DocumentType } from '../../../documents/DocumentTypes';
+import { ViewBoxAnnotatableComponent } from '../../DocComponent';
+import { FieldView, FieldViewProps } from '../FieldView';
+import { FormattedTextBox, FormattedTextBoxProps } from '../formattedText/FormattedTextBox';
+
+export class ScrapbookVersionTwo extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+    @observable scrapbookDate: string;
+
+    public static LayoutString(fieldStr: string) {
+        return FieldView.LayoutString(ScrapbookVersionTwo, fieldStr);
+    }
+
+    constructor(props: FormattedTextBoxProps) {
+        super(props);
+        makeObservable(this);
+        this.scrapbookDate = this.getFormattedDate();
+
+        console.log('Constructor: Setting initial title and text...');
+        this.setDailyTitle();
+        this.setDailyText();
+    }
+
+    getFormattedDate(): string {
+        const date = new Date().toLocaleDateString(undefined, {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        });
+        console.log('getFormattedDate():', date);
+        return date;
+    }
+
+    @action
+    setDailyTitle() {
+        console.log('setDailyTitle() called...');
+        console.log('Current title before update:', this.dataDoc.title);
+
+        if (!this.dataDoc.title || this.dataDoc.title !== this.scrapbookDate) {
+            console.log('Updating title to:', this.scrapbookDate);
+            this.dataDoc.title = this.scrapbookDate;
+        }
+
+        console.log('New title after update:', this.dataDoc.title);
+    }
+
+    @action
+    setDailyText() {
+        console.log('setDailyText() called...');
+        const placeholderText = 'Start writing here...';
+        const initialText = `Scrapbook - $\n${placeholderText}`;
+
+        console.log('Checking if dataDoc has text field...');
+
+        const styles = {
+            bold: true, // Make the journal date bold
+            color: 'red', // Set the journal date color to blue
+            fontSize: 12, // Set the font size to 18px for the whole text
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
+            gap: '8px',
+            padding: '10px',
+            background: '#fafafa',
+            width: '100%',
+            height: '100%',
+        };
+
+        console.log('Setting new text field with:', initialText);
+        this.dataDoc[this.fieldKey] = RichTextField.textToRtf(
+            initialText,
+            undefined, // No image DocId
+            styles, // Pass the styles object here
+            placeholderText.length // The position for text selection
+        );
+
+        console.log('Current text field:', this.dataDoc[this.fieldKey]);
+    }
+
+    componentDidMount(): void {
+        console.log('componentDidMount() triggered...');
+        // bcz: This should be moved into Docs.Create.DailyJournalDocument()
+        // otherwise, it will override all the text whenever the note is reloaded
+        this.setDailyTitle();
+        this.setDailyText();
+    }
+
+    render() {
+        return (
+            <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
+              gap: '8px',
+              padding: '10px',
+              background: '#fafafa',
+              width: '100%',
+              height: '100%',
+            }}
+          >
+                <FormattedTextBox {...this._props} fieldKey={'text'} Document={this.Document} TemplateDataDocument={undefined} />
+            </div>
+        );
+    }
+}
+
+Docs.Prototypes.TemplateMap.set(DocumentType.SCRAPBOOK, {
+    layout: { view: ScrapbookVersionTwo, dataField: 'text' },
+    options: {
+        acl: '',
+        _height: 35,
+        _xMargin: 10,
+        _yMargin: 10,
+        _layout_autoHeight: true,
+        _layout_nativeDimEditable: true,
+        _layout_reflowVertical: true,
+        _layout_reflowHorizontal: true,
+        defaultDoubleClick: 'ignore',
+        systemIcon: 'BsFileEarmarkTextFill',
+    },
+});
\ No newline at end of file