Implement window titles, add default tasks window

src/client/components/window-manager/floating-window-area.jsx

@@ -30,7 +30,7 @@ module.exports = function FloatingWindowArea({windows, onStartMove, onStartCorne
 			};
 
 			return (
-				<Window elementRef={onWindowRef.bind(null, window_.id)} key={window_.id} style={windowStyle} window={window_} resizeDirection="both" {...handlers} />
+				<Window.Window elementRef={onWindowRef.bind(null, window_.id)} key={window_.id} style={windowStyle} window={window_} resizeDirection="both" {...handlers} />
 			);
 		})
 	);

src/client/components/window-manager/sidebar.jsx

@@ -66,7 +66,7 @@ module.exports = function Sidebar({elementRef, side, windows, onMouseOver, onMou
 				};
 
 				return (
-					<Window elementRef={trackRef(window_.id)} key={window_.id} style={windowStyle} window={window_} resizeDirection="vertical" {...handlers} />
+					<Window.Window elementRef={trackRef(window_.id)} key={window_.id} style={windowStyle} window={window_} resizeDirection="vertical" {...handlers} />
 				);
 			})}
 		</div>

src/client/components/window/index.jsx

@@ -0,0 +1,6 @@
+"use strict";
+
+module.exports = {
+	Window: require("./window"),
+	Title: require("./window-title")
+};

src/client/components/window/window-title-context.js

@@ -0,0 +1,5 @@
+"use strict";
+
+const React = require("react");
+
+module.exports = React.createContext(() => {});

src/client/components/window/window-title.jsx

@@ -0,0 +1,12 @@
+"use strict";
+
+const React = require("react");
+
+const windowTitleContext = require("./window-title-context");
+
+module.exports = function WindowTitle({children}) {
+	let reporter = React.useContext(windowTitleContext);
+	reporter(children);
+
+	return null;
+};

src/client/components/window/window.jsx

@@ -4,7 +4,8 @@ const React = require("react");
 const createReactClass = require("create-react-class");
 const classnames = require("classnames");
 
-const renderIf = require("../util/render-if");
+const renderIf = require("../../util/render-if");
+const windowTitleContext = require("./window-title-context");
 
 function cancelEvent(event) {
 	/* NOTE: This is used on mousedown events for controls like the CloseButton, to ensure that a click-and-drag on a titlebar control cannot start a window drag operation. */
@@ -78,17 +79,21 @@ function Resizer({onMouseDown}) {
 }
 
 module.exports = function Window({elementRef, style, window: window_, onMouseDown, onTitleMouseDown, onClose, onResizerMouseDown}) {
+	let [windowTitle, setWindowTitle] = React.useState("");
+
 	return (
 		<div ref={elementRef} className={classnames("window", {active: window_.isActive})} style={style} onMouseDown={onMouseDown}>
-			<TitleBar title="Window Title Goes Here" onMouseDown={onTitleMouseDown} onClose={onClose} />
+			<TitleBar title={windowTitle} onMouseDown={onTitleMouseDown} onClose={onClose} />
 
-			<div className="body">
-				<div className="contents">
-					{window_.contents}
-				</div>
+			<windowTitleContext.Provider value={setWindowTitle}>
+				<div className="body">
+					<div className="contents">
+						{window_.contents}
+					</div>
 
-				{renderIf(window_.resizable, <Resizer onMouseDown={onResizerMouseDown} />)}
-			</div>
+					{renderIf(window_.resizable, <Resizer onMouseDown={onResizerMouseDown} />)}
+				</div>
+			</windowTitleContext.Provider>
 		</div>
 	);
 };

src/client/index.jsx

@@ -86,6 +86,16 @@ let App = createReactClass({
 			})
 		};
 	},
+	componentDidMount: function () {
+		this.onAction({
+			type: "open",
+			path: "/tasks",
+			options: {
+				sidebar: "right",
+				height: 380
+			}
+		});
+	},
 	onAction: function (action) {
 		if (action.type === "open") {
 			this.state.windows.add({
@@ -95,6 +105,7 @@ let App = createReactClass({
 				initialX: defaultValue(action.options.x, 20),
 				initialY: defaultValue(action.options.y, 100),
 				resizable: defaultValue(action.options.resizable, true),
+				sidebar: action.options.sidebar,
 				contents: <ViewManager.ViewManager router={router} initialPath={action.path} onAction={this.onAction} />
 			});
 		} else if (action.type === "notify") {

src/client/router.js

@@ -6,6 +6,8 @@ const React = require("react");
 const createRouter = require("./hybrid-router");
 const ViewManager = require("./components/view-manager");
 
+const TasksView = require("./views/tasks");
+
 function PageOne({foo}) {
 	return (
 		<div>
@@ -39,7 +41,7 @@ function SubmittedForm({data}) {
 let router = createRouter();
 
 router.get("/actions/create-new-node", (req, res) => {
-	res.open("/");
+	res.open("/node/create");
 });
 
 router.get("/node/create", (req, res) => {
@@ -64,6 +66,10 @@ router.get("/", (req, res) => {
 	});
 });
 
+router.get("/tasks", (req, res) => {
+	res.render(TasksView);
+});
+
 router.get("/page2", (req, res) => {
 	res.render(PageTwo, {
 		foo: "baz"

src/client/stores/windows.js

@@ -53,7 +53,8 @@ module.exports = function createWindowStore({onUpdated}) {
 				userX: 0,
 				userY: 0,
 				width: window_.initialWidth,
-				height: window_.initialHeight
+				height: window_.initialHeight,
+				sidebar: window_.sidebar
 			}));
 
 			updateWindowIndexes();

src/client/views/node/create.jsx

@@ -2,6 +2,8 @@
 
 const React = require("react");
 
+const Window = require("../../components/window");
+
 // const { Form, Field, Label, TextInput, Section } = require("../components/form");
 
 function Form(opts) {
@@ -31,19 +33,22 @@ function Section(opts) {
 
 module.exports = function CreateNode() {
 	return (
-		<Form method="post">
-			<Field required>
-				<Label>Name</Label>
-				<TextInput name="name" />
-			</Field>
-			<Field>
-				<Label>Type</Label>
-				<TextInput name="name" />
-			</Field>
-
-			<Section label="Properties">
-
-			</Section>
-		</Form>
+		<div>
+			<Window.Title>Create new node</Window.Title>
+			<Form method="post">
+				<Field required>
+					<Label>Name</Label>
+					<TextInput name="name" />
+				</Field>
+				<Field>
+					<Label>Type</Label>
+					<TextInput name="name" />
+				</Field>
+
+				<Section label="Properties">
+
+				</Section>
+			</Form>
+		</div>
 	);
 };

src/client/views/tasks.jsx

@@ -0,0 +1,14 @@
+"use strict";
+
+const React = require("react");
+
+const Window = require("../components/window");
+
+module.exports = function TasksView() {
+	return (
+		<div>
+			<Window.Title>Tasks</Window.Title>
+			Tasks go here
+		</div>
+	);
+};