From 66e59d3029195b82bd06216ecc2d3ac4efa24775 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Thu, 8 Oct 2020 20:09:34 -0700
Subject: [PATCH 01/34] Seach text. WIP

---
 src/client/boardPage.tsx                 |  5 ++++
 src/client/boardTree.ts                  | 20 ++++++++++++++
 src/client/components/boardComponent.tsx | 35 +++++++++++++++++++++---
 src/client/octoTypes.ts                  |  1 +
 4 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/client/boardPage.tsx b/src/client/boardPage.tsx
index c7334e3d5..8bb1334e3 100644
--- a/src/client/boardPage.tsx
+++ b/src/client/boardPage.tsx
@@ -227,6 +227,11 @@ class BoardPage implements IPageController {
 		this.filterAnchorElement = ahchorElement
 		this.render()
 	}
+
+	setSearchText(text?: string) {
+		this.boardTree.setSearchText(text)
+		this.render()
+	}
 }
 
 export { BoardPage }
diff --git a/src/client/boardTree.ts b/src/client/boardTree.ts
index 74c89dfbb..10459a5bf 100644
--- a/src/client/boardTree.ts
+++ b/src/client/boardTree.ts
@@ -17,6 +17,7 @@ class BoardTree {
 	activeView?: BoardView
 	groupByProperty?: IPropertyTemplate
 
+	private searchText?: string
 	private allCards: IBlock[] = []
 	get allBlocks(): IBlock[] {
 		return [this.board, ...this.views, ...this.allCards]
@@ -93,8 +94,18 @@ class BoardTree {
 		this.applyFilterSortAndGroup()
 	}
 
+	getSearchText(): string | undefined {
+		return this.searchText
+	}
+
+	setSearchText(text?: string) {
+		this.searchText = text
+		this.applyFilterSortAndGroup()
+	}
+
 	applyFilterSortAndGroup() {
 		this.cards = this.filterCards(this.allCards)
+		this.cards = this.searchFilterCards(this.cards)
 		this.cards = this.sortCards(this.cards)
 
 		if (this.activeView.groupById) {
@@ -104,6 +115,15 @@ class BoardTree {
 		}
 	}
 
+	private searchFilterCards(cards: IBlock[]) {
+		const { searchText } = this
+		if (!searchText) { return cards.slice() }
+
+		return cards.filter(card => {
+			if (card.title?.toLowerCase().indexOf(searchText) !== -1) { return true }
+		})
+	}
+
 	private setGroupByProperty(propertyId: string) {
 		const { board } = this
 
diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx
index 1b75c6ef3..ef1fca990 100644
--- a/src/client/components/boardComponent.tsx
+++ b/src/client/components/boardComponent.tsx
@@ -25,15 +25,26 @@ type Props = {
 
 type State = {
 	isHoverOnCover: boolean
+	isSearching: boolean
 }
 
 class BoardComponent extends React.Component<Props, State> {
 	private draggedCard: IBlock
 	private draggedHeaderOption: IPropertyOption
+	private searchFieldRef = React.createRef<Editable>()
 
 	constructor(props: Props) {
 		super(props)
-		this.state = { isHoverOnCover: false }
+		this.state = {
+			isHoverOnCover: false,
+			isSearching: false
+		}
+	}
+
+	componentDidUpdate(prevPros: Props, prevState: State) {
+		if (this.state.isSearching && !prevState.isSearching) {
+			this.searchFieldRef.current.focus()
+		}
 	}
 
 	render() {
@@ -87,9 +98,12 @@ class BoardComponent extends React.Component<Props, State> {
 							<div className="octo-button" id="groupByButton" onClick={(e) => { this.groupByClicked(e) }}>
 								Group by <span style={groupByStyle} id="groupByLabel">{boardTree.groupByProperty?.name}</span>
 							</div>
-							<div className={ hasFilter ? "octo-button active" : "octo-button"} onClick={(e) => { this.filterClicked(e) }}>Filter</div>
-							<div className={ hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { this.sortClicked(e) }}>Sort</div>
-							<div className="octo-button">Search</div>
+							<div className={hasFilter ? "octo-button active" : "octo-button"} onClick={(e) => { this.filterClicked(e) }}>Filter</div>
+							<div className={hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { this.sortClicked(e) }}>Sort</div>
+							{this.state.isSearching
+								? <Editable ref={this.searchFieldRef} text={boardTree.getSearchText()} placeholderText="Search text" onChanged={(text) => { this.searchChanged(text) }} onKeyDown={(e) => { this.onSearchKeyDown(e) }}></Editable>
+								: <div className="octo-button" onClick={() => { this.setState({ ...this.state, isSearching: true }) }}>Search</div>
+							}
 							<div className="octo-button" onClick={(e) => { this.optionsClicked(e) }}><div className="imageOptions" /></div>
 							<div className="octo-button filled" onClick={() => { this.addCard(undefined) }}>New</div>
 						</div>
@@ -380,6 +394,19 @@ class BoardComponent extends React.Component<Props, State> {
 			await mutator.changePropertyOptionOrder(board, boardTree.groupByProperty, draggedHeaderOption, destIndex)
 		}
 	}
+
+	onSearchKeyDown(e: React.KeyboardEvent) {
+		if (e.keyCode === 27) {		// ESC: Clear search
+			this.searchFieldRef.current.text = ""
+			this.setState({...this.state, isSearching: false})
+			this.props.pageController.setSearchText(undefined)
+			e.preventDefault()
+		}
+	}
+
+	searchChanged(text?: string) {
+		this.props.pageController.setSearchText(text)
+	}
 }
 
 export { BoardComponent }
diff --git a/src/client/octoTypes.ts b/src/client/octoTypes.ts
index 1a3f994c2..026046329 100644
--- a/src/client/octoTypes.ts
+++ b/src/client/octoTypes.ts
@@ -26,6 +26,7 @@ interface IPageController {
 	showCard(card: IBlock): Promise<void>
 	showView(viewId: string): void
 	showFilter(anchorElement?: HTMLElement): void
+	setSearchText(text?: string): void
 }
 
 export { IProperty, IBlock, IPageController }

From c98ae89b505d5069a244728397a72fa2fe63bd32 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Thu, 8 Oct 2020 20:20:02 -0700
Subject: [PATCH 02/34] Search

---
 src/client/components/boardComponent.tsx | 9 +++++++--
 src/client/components/editable.tsx       | 1 -
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx
index ef1fca990..c6f41de65 100644
--- a/src/client/components/boardComponent.tsx
+++ b/src/client/components/boardComponent.tsx
@@ -101,7 +101,12 @@ class BoardComponent extends React.Component<Props, State> {
 							<div className={hasFilter ? "octo-button active" : "octo-button"} onClick={(e) => { this.filterClicked(e) }}>Filter</div>
 							<div className={hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { this.sortClicked(e) }}>Sort</div>
 							{this.state.isSearching
-								? <Editable ref={this.searchFieldRef} text={boardTree.getSearchText()} placeholderText="Search text" onChanged={(text) => { this.searchChanged(text) }} onKeyDown={(e) => { this.onSearchKeyDown(e) }}></Editable>
+								? <Editable
+									ref={this.searchFieldRef}
+									text={boardTree.getSearchText()}
+									placeholderText="Search text"
+									onChanged={(text) => { this.searchChanged(text) }}
+									onKeyDown={(e) => { this.onSearchKeyDown(e) }}></Editable>
 								: <div className="octo-button" onClick={() => { this.setState({ ...this.state, isSearching: true }) }}>Search</div>
 							}
 							<div className="octo-button" onClick={(e) => { this.optionsClicked(e) }}><div className="imageOptions" /></div>
@@ -398,7 +403,7 @@ class BoardComponent extends React.Component<Props, State> {
 	onSearchKeyDown(e: React.KeyboardEvent) {
 		if (e.keyCode === 27) {		// ESC: Clear search
 			this.searchFieldRef.current.text = ""
-			this.setState({...this.state, isSearching: false})
+			this.setState({ ...this.state, isSearching: false })
 			this.props.pageController.setSearchText(undefined)
 			e.preventDefault()
 		}
diff --git a/src/client/components/editable.tsx b/src/client/components/editable.tsx
index 5b7b1e028..0c388ff55 100644
--- a/src/client/components/editable.tsx
+++ b/src/client/components/editable.tsx
@@ -102,7 +102,6 @@ class Editable extends React.Component<Props, State> {
 					this.text = newText
 
 					this.elementRef.current.classList.remove("active")
-
 					if (onBlur) { onBlur() }
 				}}
 

From 0bccdc26e91d7c8e28156924f3ae8860ba13935c Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Thu, 8 Oct 2020 20:24:34 -0700
Subject: [PATCH 03/34] Search in TableComponent as well

---
 src/client/components/boardComponent.tsx |  5 +---
 src/client/components/tableComponent.tsx | 33 ++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx
index c6f41de65..89acd61e7 100644
--- a/src/client/components/boardComponent.tsx
+++ b/src/client/components/boardComponent.tsx
@@ -35,10 +35,7 @@ class BoardComponent extends React.Component<Props, State> {
 
 	constructor(props: Props) {
 		super(props)
-		this.state = {
-			isHoverOnCover: false,
-			isSearching: false
-		}
+		this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText() }
 	}
 
 	componentDidUpdate(prevPros: Props, prevState: State) {
diff --git a/src/client/components/tableComponent.tsx b/src/client/components/tableComponent.tsx
index a7328af42..5177099ad 100644
--- a/src/client/components/tableComponent.tsx
+++ b/src/client/components/tableComponent.tsx
@@ -23,16 +23,24 @@ type Props = {
 
 type State = {
 	isHoverOnCover: boolean
+	isSearching: boolean
 }
 
 class TableComponent extends React.Component<Props, State> {
 	private draggedHeaderTemplate: IPropertyTemplate
 	private cardIdToRowMap = new Map<string, React.RefObject<TableRow>>()
 	private cardIdToFocusOnRender: string
+	private searchFieldRef = React.createRef<Editable>()
 
 	constructor(props: Props) {
 		super(props)
-		this.state = { isHoverOnCover: false }
+		this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText() }
+	}
+
+	componentDidUpdate(prevPros: Props, prevState: State) {
+		if (this.state.isSearching && !prevState.isSearching) {
+			this.searchFieldRef.current.focus()
+		}
 	}
 
 	render() {
@@ -83,7 +91,15 @@ class TableComponent extends React.Component<Props, State> {
 							<div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</div>
 							<div className={ hasFilter ? "octo-button active" : "octo-button"} onClick={(e) => { this.filterClicked(e) }}>Filter</div>
 							<div className={ hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { this.sortClicked(e) }}>Sort</div>
-							<div className="octo-button">Search</div>
+							{this.state.isSearching
+								? <Editable
+									ref={this.searchFieldRef}
+									text={boardTree.getSearchText()}
+									placeholderText="Search text"
+									onChanged={(text) => { this.searchChanged(text) }}
+									onKeyDown={(e) => { this.onSearchKeyDown(e) }}></Editable>
+								: <div className="octo-button" onClick={() => { this.setState({ ...this.state, isSearching: true }) }}>Search</div>
+							}
 							<div className="octo-button" onClick={(e) => this.optionsClicked(e)}><div className="imageOptions"></div></div>
 							<div className="octo-button filled" onClick={() => { this.addCard(true) }}>New</div>
 						</div>
@@ -401,6 +417,19 @@ class TableComponent extends React.Component<Props, State> {
 		const destIndex = template ? board.cardProperties.indexOf(template) : 0
 		await mutator.changePropertyTemplateOrder(board, draggedHeaderTemplate, destIndex)
 	}
+
+	onSearchKeyDown(e: React.KeyboardEvent) {
+		if (e.keyCode === 27) {		// ESC: Clear search
+			this.searchFieldRef.current.text = ""
+			this.setState({ ...this.state, isSearching: false })
+			this.props.pageController.setSearchText(undefined)
+			e.preventDefault()
+		}
+	}
+
+	searchChanged(text?: string) {
+		this.props.pageController.setSearchText(text)
+	}
 }
 
 export { TableComponent }

From c6463e55349961413936ce1a0abaa9ba7f44a03c Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Thu, 8 Oct 2020 21:05:57 -0700
Subject: [PATCH 04/34] Search color

---
 src/client/components/boardComponent.tsx | 1 +
 src/client/components/tableComponent.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx
index 89acd61e7..ba5343b1c 100644
--- a/src/client/components/boardComponent.tsx
+++ b/src/client/components/boardComponent.tsx
@@ -102,6 +102,7 @@ class BoardComponent extends React.Component<Props, State> {
 									ref={this.searchFieldRef}
 									text={boardTree.getSearchText()}
 									placeholderText="Search text"
+									style={{ color: "#000000" }}
 									onChanged={(text) => { this.searchChanged(text) }}
 									onKeyDown={(e) => { this.onSearchKeyDown(e) }}></Editable>
 								: <div className="octo-button" onClick={() => { this.setState({ ...this.state, isSearching: true }) }}>Search</div>
diff --git a/src/client/components/tableComponent.tsx b/src/client/components/tableComponent.tsx
index 5177099ad..bd05ea44c 100644
--- a/src/client/components/tableComponent.tsx
+++ b/src/client/components/tableComponent.tsx
@@ -96,6 +96,7 @@ class TableComponent extends React.Component<Props, State> {
 									ref={this.searchFieldRef}
 									text={boardTree.getSearchText()}
 									placeholderText="Search text"
+									style={{ color: "#000000" }}
 									onChanged={(text) => { this.searchChanged(text) }}
 									onKeyDown={(e) => { this.onSearchKeyDown(e) }}></Editable>
 								: <div className="octo-button" onClick={() => { this.setState({ ...this.state, isSearching: true }) }}>Search</div>

From ae93fe22ced044f7fd4115d445e7ed70013bc044 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 08:52:40 -0700
Subject: [PATCH 05/34] Add Go WebSocket method comments

---
 server/main/websockets.go | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/server/main/websockets.go b/server/main/websockets.go
index 317d9a4e8..0316ac3fe 100644
--- a/server/main/websockets.go
+++ b/server/main/websockets.go
@@ -42,12 +42,14 @@ func (ws *WSServer) GetListeners(blockID string) []*websocket.Conn {
 	return listeners
 }
 
+// WSServer is a WebSocket server
 type WSServer struct {
 	upgrader  websocket.Upgrader
 	listeners map[string][]*websocket.Conn
 	mu        sync.RWMutex
 }
 
+// NewWSServer creates a new WSServer
 func NewWSServer() *WSServer {
 	return &WSServer{
 		listeners: make(map[string][]*websocket.Conn),
@@ -59,7 +61,7 @@ func NewWSServer() *WSServer {
 	}
 }
 
-// WebsocketMsg is send on block changes
+// WebsocketMsg is sent on block changes
 type WebsocketMsg struct {
 	Action  string `json:"action"`
 	BlockID string `json:"blockId"`

From 92882fee5ffd79635efe1afbdc645baee5e799cc Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 08:55:59 -0700
Subject: [PATCH 06/34] Case-insensitive search

---
 src/client/boardTree.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/boardTree.ts b/src/client/boardTree.ts
index 10459a5bf..146a0ed2d 100644
--- a/src/client/boardTree.ts
+++ b/src/client/boardTree.ts
@@ -116,11 +116,11 @@ class BoardTree {
 	}
 
 	private searchFilterCards(cards: IBlock[]) {
-		const { searchText } = this
+		const searchText = this.searchText?.toLocaleLowerCase()
 		if (!searchText) { return cards.slice() }
 
 		return cards.filter(card => {
-			if (card.title?.toLowerCase().indexOf(searchText) !== -1) { return true }
+			if (card.title?.toLocaleLowerCase().indexOf(searchText) !== -1) { return true }
 		})
 	}
 

From c6a0f7f3e9708620b18600e37101fb6c389b9a15 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 09:22:12 -0700
Subject: [PATCH 07/34] Show selected property on sort menu

---
 src/client/components/boardComponent.tsx |  8 +++++++-
 src/client/components/tableComponent.tsx |  8 +++++++-
 src/client/menu.ts                       | 13 +++++++++++++
 src/static/images.css                    |  9 ++++++++-
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx
index ba5343b1c..647090ee3 100644
--- a/src/client/components/boardComponent.tsx
+++ b/src/client/components/boardComponent.tsx
@@ -282,7 +282,13 @@ class BoardComponent extends React.Component<Props, State> {
 		const sortOption = sortOptions.length > 0 ? sortOptions[0] : undefined
 
 		const propertyTemplates = boardTree.board.cardProperties
-		Menu.shared.options = propertyTemplates.map((o) => { return { id: o.id, name: o.name } })
+		Menu.shared.options = propertyTemplates.map((o) => {
+			return {
+				id: o.id,
+				name: o.name,
+				icon: (sortOption.propertyId === o.id) ? "checked" : undefined
+			}
+		})
 		Menu.shared.onMenuClicked = async (propertyId: string) => {
 			let newSortOptions: ISortOption[] = []
 			if (sortOption && sortOption.propertyId === propertyId) {
diff --git a/src/client/components/tableComponent.tsx b/src/client/components/tableComponent.tsx
index bd05ea44c..3627bfddc 100644
--- a/src/client/components/tableComponent.tsx
+++ b/src/client/components/tableComponent.tsx
@@ -255,7 +255,13 @@ class TableComponent extends React.Component<Props, State> {
 		const sortOption = sortOptions.length > 0 ? sortOptions[0] : undefined
 
 		const propertyTemplates = boardTree.board.cardProperties
-		Menu.shared.options = propertyTemplates.map((o) => { return { id: o.id, name: o.name } })
+		Menu.shared.options = propertyTemplates.map((o) => {
+			return {
+				id: o.id,
+				name: o.name,
+				icon: (sortOption.propertyId === o.id) ? "checked" : undefined
+			}
+		})
 		Menu.shared.onMenuClicked = async (propertyId: string) => {
 			let newSortOptions: ISortOption[] = []
 			if (sortOption && sortOption.propertyId === propertyId) {
diff --git a/src/client/menu.ts b/src/client/menu.ts
index 58912321c..a79445fed 100644
--- a/src/client/menu.ts
+++ b/src/client/menu.ts
@@ -4,6 +4,7 @@ type MenuOption = {
 	id: string,
 	name: string,
 	isOn?: boolean,
+	icon?: "checked" | undefined,
 	type?: "separator" | "color" | "submenu" | "switch" | undefined
 }
 
@@ -54,6 +55,18 @@ class Menu {
 						this.showSubMenu(rect.right - bodyRect.left, rect.top - bodyRect.top, option.id)
 					}
 				} else {
+
+					if (option.icon) {
+						let iconName: string
+						switch (option.icon) {
+							case "checked": { iconName = "imageMenuCheck" }
+							default: { Utils.assertFailure(`Unsupported menu icon: ${option.icon}`) }
+						}
+						if (iconName) {
+							optionElement.appendChild(Utils.htmlToElement(`<div class="${iconName}" style="float: right;"></div>`))
+						}
+					}
+
 					optionElement.onmouseenter = () => {
 						this.hideSubMenu()
 					}
diff --git a/src/static/images.css b/src/static/images.css
index 23d5390ea..b2c1b2e84 100644
--- a/src/static/images.css
+++ b/src/static/images.css
@@ -6,7 +6,7 @@
 }
 
 .imageAdd {
-	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="stroke:black;stroke-width:4;" stroke-opacity="50%"><polyline points="30,50 70,50" /><polyline points="50,30 50,70" /></svg>');
+	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="stroke:black;stroke-width:4;" fill="none" stroke-opacity="50%"><polyline points="30,50 70,50" /><polyline points="50,30 50,70" /></svg>');
 	background-size: 100% 100%;
 	min-width: 24px;
 	min-height: 24px;
@@ -25,3 +25,10 @@
 	min-width: 24px;
 	min-height: 24px;
 }
+
+.imageMenuCheck {
+	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="stroke:black;stroke-width:8;" fill="none" stroke-opacity="50%"><polyline points="20,60 40,80 80,40" /></svg>');
+	background-size: 100% 100%;
+	min-width: 24px;
+	min-height: 24px;
+}

From 187df20be719c1c89cd86778e20e64f7b3c740a5 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 09:29:49 -0700
Subject: [PATCH 08/34] Show sort direction in sort menu

---
 src/client/components/boardComponent.tsx |  2 +-
 src/client/components/tableComponent.tsx |  2 +-
 src/client/menu.ts                       |  6 ++++--
 src/static/images.css                    | 16 ++++++++++++++++
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx
index 647090ee3..6456d8497 100644
--- a/src/client/components/boardComponent.tsx
+++ b/src/client/components/boardComponent.tsx
@@ -286,7 +286,7 @@ class BoardComponent extends React.Component<Props, State> {
 			return {
 				id: o.id,
 				name: o.name,
-				icon: (sortOption.propertyId === o.id) ? "checked" : undefined
+				icon: (sortOption.propertyId === o.id) ? sortOption.reversed ? "sortUp" : "sortDown" : undefined
 			}
 		})
 		Menu.shared.onMenuClicked = async (propertyId: string) => {
diff --git a/src/client/components/tableComponent.tsx b/src/client/components/tableComponent.tsx
index 3627bfddc..042f1319e 100644
--- a/src/client/components/tableComponent.tsx
+++ b/src/client/components/tableComponent.tsx
@@ -259,7 +259,7 @@ class TableComponent extends React.Component<Props, State> {
 			return {
 				id: o.id,
 				name: o.name,
-				icon: (sortOption.propertyId === o.id) ? "checked" : undefined
+				icon: (sortOption.propertyId === o.id) ? sortOption.reversed ? "sortUp" : "sortDown" : undefined
 			}
 		})
 		Menu.shared.onMenuClicked = async (propertyId: string) => {
diff --git a/src/client/menu.ts b/src/client/menu.ts
index a79445fed..35f86763b 100644
--- a/src/client/menu.ts
+++ b/src/client/menu.ts
@@ -4,7 +4,7 @@ type MenuOption = {
 	id: string,
 	name: string,
 	isOn?: boolean,
-	icon?: "checked" | undefined,
+	icon?: "checked" | "sortUp" | "sortDown" | undefined,
 	type?: "separator" | "color" | "submenu" | "switch" | undefined
 }
 
@@ -59,7 +59,9 @@ class Menu {
 					if (option.icon) {
 						let iconName: string
 						switch (option.icon) {
-							case "checked": { iconName = "imageMenuCheck" }
+							case "checked": { iconName = "imageMenuCheck"; break }
+							case "sortUp": { iconName = "imageMenuSortUp"; break }
+							case "sortDown": { iconName = "imageMenuSortDown"; break }
 							default: { Utils.assertFailure(`Unsupported menu icon: ${option.icon}`) }
 						}
 						if (iconName) {
diff --git a/src/static/images.css b/src/static/images.css
index b2c1b2e84..4640988b5 100644
--- a/src/static/images.css
+++ b/src/static/images.css
@@ -19,6 +19,8 @@
 	min-height: 24px;
 }
 
+/*-- Menu images --*/
+
 .imageSubmenuTriangle {
 	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,35 75,50 50,65" style="fill:black;stroke:none;" fill-opacity="70%" /></svg>');
 	background-size: 100% 100%;
@@ -32,3 +34,17 @@
 	min-width: 24px;
 	min-height: 24px;
 }
+
+.imageMenuSortUp {
+	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="stroke:black;stroke-width:8;" fill="none" stroke-opacity="50%"><polyline points="50,20 50,80" /><polyline points="30,40 50,20 70,40" /></svg>');
+	background-size: 100% 100%;
+	min-width: 24px;
+	min-height: 24px;
+}
+
+.imageMenuSortDown {
+	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="stroke:black;stroke-width:8;" fill="none" stroke-opacity="50%"><polyline points="50,20 50,80" /><polyline points="30,60 50,80 70,60" /></svg>');
+	background-size: 100% 100%;
+	min-width: 24px;
+	min-height: 24px;
+}

From 63c7763b41b35f2f540ebf19d9e1cf01e6883c66 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 09:32:36 -0700
Subject: [PATCH 09/34] Refactor: Move sort menu to OctoUtils

---
 src/client/components/boardComponent.tsx | 34 +--------------------
 src/client/components/tableComponent.tsx | 34 +--------------------
 src/client/octoUtils.tsx                 | 39 +++++++++++++++++++++---
 3 files changed, 37 insertions(+), 70 deletions(-)

diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx
index 6456d8497..16cbbd2d0 100644
--- a/src/client/components/boardComponent.tsx
+++ b/src/client/components/boardComponent.tsx
@@ -96,7 +96,7 @@ class BoardComponent extends React.Component<Props, State> {
 								Group by <span style={groupByStyle} id="groupByLabel">{boardTree.groupByProperty?.name}</span>
 							</div>
 							<div className={hasFilter ? "octo-button active" : "octo-button"} onClick={(e) => { this.filterClicked(e) }}>Filter</div>
-							<div className={hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { this.sortClicked(e) }}>Sort</div>
+							<div className={hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { OctoUtils.showSortMenu(e, mutator, boardTree) }}>Sort</div>
 							{this.state.isSearching
 								? <Editable
 									ref={this.searchFieldRef}
@@ -275,38 +275,6 @@ class BoardComponent extends React.Component<Props, State> {
 		pageController.showFilter(e.target as HTMLElement)
 	}
 
-	private async sortClicked(e: React.MouseEvent) {
-		const { mutator, boardTree } = this.props
-		const { activeView } = boardTree
-		const { sortOptions } = activeView
-		const sortOption = sortOptions.length > 0 ? sortOptions[0] : undefined
-
-		const propertyTemplates = boardTree.board.cardProperties
-		Menu.shared.options = propertyTemplates.map((o) => {
-			return {
-				id: o.id,
-				name: o.name,
-				icon: (sortOption.propertyId === o.id) ? sortOption.reversed ? "sortUp" : "sortDown" : undefined
-			}
-		})
-		Menu.shared.onMenuClicked = async (propertyId: string) => {
-			let newSortOptions: ISortOption[] = []
-			if (sortOption && sortOption.propertyId === propertyId) {
-				// Already sorting by name, so reverse it
-				newSortOptions = [
-					{ propertyId, reversed: !sortOption.reversed }
-				]
-			} else {
-				newSortOptions = [
-					{ propertyId, reversed: false }
-				]
-			}
-
-			await mutator.changeViewSortOptions(activeView, newSortOptions)
-		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
-	}
-
 	private async optionsClicked(e: React.MouseEvent) {
 		const { boardTree } = this.props
 
diff --git a/src/client/components/tableComponent.tsx b/src/client/components/tableComponent.tsx
index 042f1319e..3e1e6c8cc 100644
--- a/src/client/components/tableComponent.tsx
+++ b/src/client/components/tableComponent.tsx
@@ -90,7 +90,7 @@ class TableComponent extends React.Component<Props, State> {
 							<div className="octo-spacer"></div>
 							<div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</div>
 							<div className={ hasFilter ? "octo-button active" : "octo-button"} onClick={(e) => { this.filterClicked(e) }}>Filter</div>
-							<div className={ hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { this.sortClicked(e) }}>Sort</div>
+							<div className={ hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { OctoUtils.showSortMenu(e, mutator, boardTree) }}>Sort</div>
 							{this.state.isSearching
 								? <Editable
 									ref={this.searchFieldRef}
@@ -248,38 +248,6 @@ class TableComponent extends React.Component<Props, State> {
 		pageController.showFilter(e.target as HTMLElement)
 	}
 
-	private async sortClicked(e: React.MouseEvent) {
-		const { mutator, boardTree } = this.props
-		const { activeView } = boardTree
-		const { sortOptions } = activeView
-		const sortOption = sortOptions.length > 0 ? sortOptions[0] : undefined
-
-		const propertyTemplates = boardTree.board.cardProperties
-		Menu.shared.options = propertyTemplates.map((o) => {
-			return {
-				id: o.id,
-				name: o.name,
-				icon: (sortOption.propertyId === o.id) ? sortOption.reversed ? "sortUp" : "sortDown" : undefined
-			}
-		})
-		Menu.shared.onMenuClicked = async (propertyId: string) => {
-			let newSortOptions: ISortOption[] = []
-			if (sortOption && sortOption.propertyId === propertyId) {
-				// Already sorting by name, so reverse it
-				newSortOptions = [
-					{ propertyId, reversed: !sortOption.reversed }
-				]
-			} else {
-				newSortOptions = [
-					{ propertyId, reversed: false }
-				]
-			}
-
-			await mutator.changeViewSortOptions(activeView, newSortOptions)
-		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
-	}
-
 	private async optionsClicked(e: React.MouseEvent) {
 		const { boardTree } = this.props
 
diff --git a/src/client/octoUtils.tsx b/src/client/octoUtils.tsx
index 10b388ada..8ed264a82 100644
--- a/src/client/octoUtils.tsx
+++ b/src/client/octoUtils.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { IPropertyTemplate } from "./board"
 import { BoardTree } from "./boardTree"
-import { BoardView } from "./boardView"
+import { BoardView, ISortOption } from "./boardView"
 import { Editable } from "./components/editable"
 import { Menu, MenuOption } from "./menu"
 import { Mutator } from "./mutator"
@@ -143,7 +143,7 @@ class OctoUtils {
 						showMenu(e.target as HTMLElement)
 					}
 				} : undefined}
-				onFocus={mutator ? () => { Menu.shared.hide() } : undefined }
+				onFocus={mutator ? () => { Menu.shared.hide() } : undefined}
 			>
 				{finalDisplayValue}
 			</div>
@@ -176,7 +176,7 @@ class OctoUtils {
 		if (index === 0) {
 			return block.order / 2
 		}
-		const previousBlock = blocks[index-1]
+		const previousBlock = blocks[index - 1]
 		return (block.order + previousBlock.order) / 2
 	}
 
@@ -185,9 +185,40 @@ class OctoUtils {
 		if (index === blocks.length - 1) {
 			return block.order + 1000
 		}
-		const nextBlock = blocks[index+1]
+		const nextBlock = blocks[index + 1]
 		return (block.order + nextBlock.order) / 2
 	}
+
+	static showSortMenu(e: React.MouseEvent, mutator: Mutator, boardTree: BoardTree) {
+		const { activeView } = boardTree
+		const { sortOptions } = activeView
+		const sortOption = sortOptions.length > 0 ? sortOptions[0] : undefined
+
+		const propertyTemplates = boardTree.board.cardProperties
+		Menu.shared.options = propertyTemplates.map((o) => {
+			return {
+				id: o.id,
+				name: o.name,
+				icon: (sortOption.propertyId === o.id) ? sortOption.reversed ? "sortUp" : "sortDown" : undefined
+			}
+		})
+		Menu.shared.onMenuClicked = async (propertyId: string) => {
+			let newSortOptions: ISortOption[] = []
+			if (sortOption && sortOption.propertyId === propertyId) {
+				// Already sorting by name, so reverse it
+				newSortOptions = [
+					{ propertyId, reversed: !sortOption.reversed }
+				]
+			} else {
+				newSortOptions = [
+					{ propertyId, reversed: false }
+				]
+			}
+
+			await mutator.changeViewSortOptions(activeView, newSortOptions)
+		}
+		Menu.shared.showAtElement(e.target as HTMLElement)
+	}
 }
 
 export { OctoUtils }

From 04d4a7beb0f8c5781d69aa16d431d6ed7a3df093 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 09:33:03 -0700
Subject: [PATCH 10/34] cleanup

---
 src/client/components/boardComponent.tsx | 1 -
 src/client/components/tableComponent.tsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx
index 16cbbd2d0..885953c1e 100644
--- a/src/client/components/boardComponent.tsx
+++ b/src/client/components/boardComponent.tsx
@@ -4,7 +4,6 @@ import { Block } from "../block"
 import { BlockIcons } from "../blockIcons"
 import { IPropertyOption } from "../board"
 import { BoardTree } from "../boardTree"
-import { ISortOption } from "../boardView"
 import { CardFilter } from "../cardFilter"
 import { Constants } from "../constants"
 import { Menu } from "../menu"
diff --git a/src/client/components/tableComponent.tsx b/src/client/components/tableComponent.tsx
index 3e1e6c8cc..795ba6e39 100644
--- a/src/client/components/tableComponent.tsx
+++ b/src/client/components/tableComponent.tsx
@@ -4,7 +4,6 @@ import { Block } from "../block"
 import { BlockIcons } from "../blockIcons"
 import { IPropertyTemplate } from "../board"
 import { BoardTree } from "../boardTree"
-import { ISortOption } from "../boardView"
 import { CsvExporter } from "../csvExporter"
 import { Menu } from "../menu"
 import { Mutator } from "../mutator"

From fec32947bb0a5d272f9052d7e4f2d2afbf2905a7 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 10:01:58 -0700
Subject: [PATCH 11/34] Cleanup boardPage - layout page frame in code

---
 html-templates/index.ejs             |  6 ------
 html-templates/page.ejs              | 17 ++---------------
 src/client/boardPage.tsx             | 27 ++++++++++++++++++++++++++-
 src/client/boardsPage.ts             |  8 +++++++-
 src/client/components/pageHeader.tsx | 16 ++++++++++++++++
 src/static/main.css                  | 14 +++++---------
 6 files changed, 56 insertions(+), 32 deletions(-)
 create mode 100644 src/client/components/pageHeader.tsx

diff --git a/html-templates/index.ejs b/html-templates/index.ejs
index 024e53969..85f4fd368 100644
--- a/html-templates/index.ejs
+++ b/html-templates/index.ejs
@@ -24,12 +24,6 @@
 			<a href="boards">All Boards</a>
 		</p>
 	</main>
-
-	<footer id="footer">
-	</footer>
-
-	<div id="overlay">
-	</div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/html-templates/page.ejs b/html-templates/page.ejs
index 6766463bd..36c86ecf4 100644
--- a/html-templates/page.ejs
+++ b/html-templates/page.ejs
@@ -11,21 +11,8 @@
 	<link rel="stylesheet" href="/colors.css">
 </head>
 
-<body class="container">
-	<header id="header">
-		<a href="/">OCTO</a>
-	</header>
-
-	<main id="main">
-	</main>
-
-	<footer id="footer">
-	</footer>
-
-	<div id="overlay">
-	</div>
-
-	<div id="modal">
+<body>
+	<div id="octo-tasks-app">
 	</div>
 </body>
 
diff --git a/src/client/boardPage.tsx b/src/client/boardPage.tsx
index 8bb1334e3..6e6c2a6f2 100644
--- a/src/client/boardPage.tsx
+++ b/src/client/boardPage.tsx
@@ -6,6 +6,7 @@ import { CardTree } from "./cardTree"
 import { BoardComponent } from "./components/boardComponent"
 import { CardDialog } from "./components/cardDialog"
 import { FilterComponent } from "./components/filterComponent"
+import { PageHeader } from "./components/pageHeader"
 import { TableComponent } from "./components/tableComponent"
 import { FlashMessage } from "./flashMessage"
 import { Mutator } from "./mutator"
@@ -46,6 +47,8 @@ class BoardPage implements IPageController {
 			return
 		}
 
+		this.layoutPage()
+
 		this.boardId = queryString.get("id")
 		this.viewId = queryString.get("v")
 
@@ -89,6 +92,23 @@ class BoardPage implements IPageController {
 		this.render()
 	}
 
+	private layoutPage() {
+		const root = Utils.getElementById("octo-tasks-app")
+		root.innerText = ""
+
+		const header = root.appendChild(document.createElement("div"))
+		header.id = "header"
+
+		const main = root.appendChild(document.createElement("div"))
+		main.id = "main"
+
+		const overlay = root.appendChild(document.createElement("div"))
+		overlay.id = "overlay"
+
+		const modal = root.appendChild(document.createElement("div"))
+		modal.id = "modal"
+	}
+
 	render() {
 		const { octo, boardTree } = this
 		const { board, activeView } = boardTree
@@ -96,11 +116,16 @@ class BoardPage implements IPageController {
 
 		const rootElement = Utils.getElementById("main")
 
+		ReactDOM.render(
+			<PageHeader />,
+			Utils.getElementById("header")
+		)
+
 		if (board) {
 			Utils.setFavicon(board.icon)
 		} else {
 			ReactDOM.render(
-				<div>Loading...</div>,
+				<div className="page-loading">Loading...</div>,
 				rootElement
 			)
 			return
diff --git a/src/client/boardsPage.ts b/src/client/boardsPage.ts
index ee5a3c15b..b37603446 100644
--- a/src/client/boardsPage.ts
+++ b/src/client/boardsPage.ts
@@ -16,7 +16,13 @@ class BoardsPage {
 	constructor() {
 		// This is a placeholder page
 
-		const mainPanel = Utils.getElementById("main")
+		const root = Utils.getElementById("octo-tasks-app")
+		root.innerText = ""
+
+		// Header
+		root.appendChild(Utils.htmlToElement(`<div class="page-header"><a href="/">OCTO</a></div`))
+
+		const mainPanel = root.appendChild(document.createElement("div"))
 
 		this.boardsPanel = mainPanel.appendChild(document.createElement("div"))
 
diff --git a/src/client/components/pageHeader.tsx b/src/client/components/pageHeader.tsx
new file mode 100644
index 000000000..9bea99ca6
--- /dev/null
+++ b/src/client/components/pageHeader.tsx
@@ -0,0 +1,16 @@
+import React from "react"
+
+type Props = {
+}
+
+class PageHeader extends React.Component<Props> {
+	render() {
+		return (
+			<div className="page-header">
+				<a href="/">OCTO</a>
+			</div>
+		)
+	}
+}
+
+export { PageHeader }
diff --git a/src/static/main.css b/src/static/main.css
index e4952a5c9..9dc77aa1c 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -36,7 +36,7 @@ hr {
 	margin-bottom: 8px;
 }
 
-header {
+.page-header {
 	font-size: 18px;
 	font-weight: bold;
 	background-color: #eeeeee;
@@ -44,16 +44,12 @@ header {
 	padding: 10px 20px;
 }
 
-header a {
+.page-header a {
 	color: #505050;
 }
 
-main {
-	padding: 10px 20px;
-}
-
-footer {
-	padding: 10px 20px;
+.page-loading {
+	margin: 50px auto;
 }
 
 .title, h1 {
@@ -67,7 +63,7 @@ footer {
 /* OCTO */
 
 .octo-frame {
-	padding: 10px 50px 50px 50px;
+	padding: 10px 95px 50px 95px;
 	min-width: 1000px;
 }
 

From 316ad45020e5a71b10127b5ec1ae46b861d29f51 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 11:02:07 -0700
Subject: [PATCH 12/34] Sidebar. WIP

---
 server/main/main.go                          |  7 ++-
 server/main/octoDatabase.go                  | 26 ++++++++++
 src/client/boardPage.tsx                     | 41 ++++++----------
 src/client/components/sidebar.tsx            | 28 +++++++++++
 src/client/components/workspaceComponent.tsx | 51 ++++++++++++++++++++
 src/client/workspaceTree.ts                  | 23 +++++++++
 src/static/main.css                          | 20 ++++++++
 7 files changed, 167 insertions(+), 29 deletions(-)
 create mode 100644 src/client/components/sidebar.tsx
 create mode 100644 src/client/components/workspaceComponent.tsx
 create mode 100644 src/client/workspaceTree.ts

diff --git a/server/main/main.go b/server/main/main.go
index db2aebb07..1d5c24b59 100644
--- a/server/main/main.go
+++ b/server/main/main.go
@@ -48,12 +48,15 @@ func handleGetBlocks(w http.ResponseWriter, r *http.Request) {
 	blockType := query.Get("type")
 
 	var blocks []string
-	if len(blockType) > 0 {
+	if len(blockType) > 0 && len(parentID) > 0 {
 		blocks = getBlocksWithParentAndType(parentID, blockType)
+	} else if len(blockType) > 0 {
+		blocks = getBlocksWithType(blockType)
 	} else {
 		blocks = getBlocksWithParent(parentID)
 	}
-	log.Printf("GetBlocks parentID: %s, %d result(s)", parentID, len(blocks))
+
+	log.Printf("GetBlocks parentID: %s, type: %s, %d result(s)", parentID, blockType, len(blocks))
 	response := `[` + strings.Join(blocks[:], ",") + `]`
 	jsonResponse(w, 200, response)
 }
diff --git a/server/main/octoDatabase.go b/server/main/octoDatabase.go
index 4a4568fa1..3b98953f2 100644
--- a/server/main/octoDatabase.go
+++ b/server/main/octoDatabase.go
@@ -155,6 +155,32 @@ func getBlocksWithParent(parentID string) []string {
 	return blocksFromRows(rows)
 }
 
+func getBlocksWithType(blockType string) []string {
+	query := `WITH latest AS
+		(
+			SELECT * FROM
+			(
+				SELECT
+					*,
+					ROW_NUMBER() OVER (PARTITION BY id ORDER BY insert_at DESC) AS rn
+				FROM blocks
+			) a
+			WHERE rn = 1
+		)
+
+		SELECT COALESCE("json", '{}')
+		FROM latest
+		WHERE delete_at = 0 and type = $1`
+
+	rows, err := db.Query(query, blockType)
+	if err != nil {
+		log.Printf(`getBlocksWithParentAndType ERROR: %v`, err)
+		panic(err)
+	}
+
+	return blocksFromRows(rows)
+}
+
 func getSubTree(blockID string) []string {
 	query := `WITH latest AS
 	(
diff --git a/src/client/boardPage.tsx b/src/client/boardPage.tsx
index 6e6c2a6f2..c157a4497 100644
--- a/src/client/boardPage.tsx
+++ b/src/client/boardPage.tsx
@@ -3,11 +3,10 @@ import ReactDOM from "react-dom"
 import { BoardTree } from "./boardTree"
 import { BoardView } from "./boardView"
 import { CardTree } from "./cardTree"
-import { BoardComponent } from "./components/boardComponent"
 import { CardDialog } from "./components/cardDialog"
 import { FilterComponent } from "./components/filterComponent"
 import { PageHeader } from "./components/pageHeader"
-import { TableComponent } from "./components/tableComponent"
+import { WorkspaceComponent } from "./components/workspaceComponent"
 import { FlashMessage } from "./flashMessage"
 import { Mutator } from "./mutator"
 import { OctoClient } from "./octoClient"
@@ -15,6 +14,7 @@ import { OctoListener } from "./octoListener"
 import { IBlock, IPageController } from "./octoTypes"
 import { UndoManager } from "./undomanager"
 import { Utils } from "./utils"
+import { WorkspaceTree } from "./workspaceTree"
 
 class BoardPage implements IPageController {
 	boardTitle: HTMLElement
@@ -26,6 +26,7 @@ class BoardPage implements IPageController {
 	boardId: string
 	viewId: string
 
+	workspaceTree: WorkspaceTree
 	boardTree: BoardTree
 	view: BoardView
 
@@ -49,6 +50,8 @@ class BoardPage implements IPageController {
 
 		this.layoutPage()
 
+		this.workspaceTree = new WorkspaceTree(this.octo)
+
 		this.boardId = queryString.get("id")
 		this.viewId = queryString.get("v")
 
@@ -114,7 +117,7 @@ class BoardPage implements IPageController {
 		const { board, activeView } = boardTree
 		const mutator = new Mutator(octo)
 
-		const rootElement = Utils.getElementById("main")
+		const mainElement = Utils.getElementById("main")
 
 		ReactDOM.render(
 			<PageHeader />,
@@ -126,7 +129,7 @@ class BoardPage implements IPageController {
 		} else {
 			ReactDOM.render(
 				<div className="page-loading">Loading...</div>,
-				rootElement
+				mainElement
 			)
 			return
 		}
@@ -134,27 +137,10 @@ class BoardPage implements IPageController {
 		if (activeView) {
 			document.title = `OCTO - ${board.title} | ${activeView.title}`
 
-			switch (activeView.viewType) {
-				case "board": {
-					ReactDOM.render(
-						<BoardComponent mutator={mutator} boardTree={this.boardTree} pageController={this} />,
-						rootElement
-					)
-					break
-				}
-
-				case "table": {
-					ReactDOM.render(
-						<TableComponent mutator={mutator} boardTree={this.boardTree} pageController={this} />,
-						rootElement
-					)
-					break
-				}
-
-				default: {
-					Utils.assertFailure(`render() Unhandled viewType: ${activeView.viewType}`)
-				}
-			}
+			ReactDOM.render(
+				<WorkspaceComponent mutator={mutator} workspaceTree={this.workspaceTree} boardTree={this.boardTree} pageController={this} />,
+				mainElement
+			)
 
 			if (boardTree && boardTree.board && this.shownCardTree) {
 				ReactDOM.render(
@@ -170,7 +156,7 @@ class BoardPage implements IPageController {
 		} else {
 			ReactDOM.render(
 				<div>Loading...</div>,
-				rootElement
+				mainElement
 			)
 		}
 
@@ -200,8 +186,9 @@ class BoardPage implements IPageController {
 	}
 
 	async sync() {
-		const { boardTree } = this
+		const { workspaceTree, boardTree } = this
 
+		await workspaceTree.sync()
 		await boardTree.sync()
 
 		// Default to first view
diff --git a/src/client/components/sidebar.tsx b/src/client/components/sidebar.tsx
new file mode 100644
index 000000000..a22db4ac8
--- /dev/null
+++ b/src/client/components/sidebar.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+import { WorkspaceTree } from "../workspaceTree"
+
+type Props = {
+	workspaceTree: WorkspaceTree
+}
+
+class Sidebar extends React.Component<Props> {
+
+	render() {
+		const { workspaceTree } = this.props
+		const { boards } = workspaceTree
+
+		return (
+			<div className="octo-sidebar">
+				{ boards.map(board => {
+					return (
+						<div>
+							{board.title || "(Untitled Board)"}
+						</div>
+					)
+				})}
+			</div>
+		)
+	}
+}
+
+export { Sidebar }
diff --git a/src/client/components/workspaceComponent.tsx b/src/client/components/workspaceComponent.tsx
new file mode 100644
index 000000000..5bbd04537
--- /dev/null
+++ b/src/client/components/workspaceComponent.tsx
@@ -0,0 +1,51 @@
+import React from "react"
+import { BoardTree } from "../boardTree"
+import { Mutator } from "../mutator"
+import { IPageController } from "../octoTypes"
+import { Utils } from "../utils"
+import { WorkspaceTree } from "../workspaceTree"
+import { BoardComponent } from "./boardComponent"
+import { Sidebar } from "./sidebar"
+import { TableComponent } from "./tableComponent"
+
+type Props = {
+	mutator: Mutator,
+	workspaceTree: WorkspaceTree
+	boardTree?: BoardTree
+	pageController: IPageController
+}
+
+class WorkspaceComponent extends React.Component<Props> {
+	render() {
+		const element =
+			<div className="octo-workspace">
+				<Sidebar workspaceTree={this.props.workspaceTree}></Sidebar>
+				{this.mainComponent()}
+			</div>
+
+		return element
+	}
+
+	private mainComponent() {
+		const { mutator, boardTree, pageController } = this.props
+		const { activeView } = boardTree
+
+		switch (activeView.viewType) {
+			case "board": {
+				return <BoardComponent mutator={mutator} boardTree={boardTree} pageController={pageController} />
+			}
+
+			case "table": {
+				return <TableComponent mutator={mutator} boardTree={boardTree} pageController={pageController} />
+			}
+
+			default: {
+				Utils.assertFailure(`render() Unhandled viewType: ${activeView.viewType}`)
+				return <div></div>
+			}
+		}
+
+	}
+}
+
+export { WorkspaceComponent }
diff --git a/src/client/workspaceTree.ts b/src/client/workspaceTree.ts
new file mode 100644
index 000000000..c86fdb6d0
--- /dev/null
+++ b/src/client/workspaceTree.ts
@@ -0,0 +1,23 @@
+import { Board } from "./board"
+import { OctoClient } from "./octoClient"
+import { IBlock } from "./octoTypes"
+
+class WorkspaceTree {
+	boards: Board[] = []
+
+	constructor(
+		private octo: OctoClient) {
+	}
+
+	async sync() {
+		const blocks = await this.octo.getBlocks(undefined, "board")
+		this.rebuild(blocks)
+	}
+
+	private rebuild(blocks: IBlock[]) {
+		const boardBlocks = blocks.filter(block => block.type === "board")
+		this.boards = boardBlocks.map(o => new Board(o))
+	}
+}
+
+export { WorkspaceTree }
diff --git a/src/static/main.css b/src/static/main.css
index 9dc77aa1c..f6d35a7ad 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -60,6 +60,26 @@ hr {
 	display: inline-block;
 }
 
+/* Sidebar */
+
+.octo-workspace {
+	display: flex;
+	flex-direction: row;
+}
+
+.octo-sidebar {
+	display: flex;
+	flex-direction: column;
+
+	padding: 20px;
+	background-color: rgb(247, 246, 243);
+	min-width: 230px;
+}
+
+.octo-sidebar div {
+	font-weight: 500;
+}
+
 /* OCTO */
 
 .octo-frame {

From e29d2ef9bafe9b8b96b2dbe292fe66c491e86af0 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 11:40:09 -0700
Subject: [PATCH 13/34] Sidebar style

---
 src/client/components/sidebar.tsx | 10 ++++++++--
 src/static/main.css               | 10 ++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/client/components/sidebar.tsx b/src/client/components/sidebar.tsx
index a22db4ac8..1e004f29d 100644
--- a/src/client/components/sidebar.tsx
+++ b/src/client/components/sidebar.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { Board } from "../board"
 import { WorkspaceTree } from "../workspaceTree"
 
 type Props = {
@@ -14,15 +15,20 @@ class Sidebar extends React.Component<Props> {
 		return (
 			<div className="octo-sidebar">
 				{ boards.map(board => {
+					const displayTitle = board.title || "(Untitled Board)"
 					return (
-						<div>
-							{board.title || "(Untitled Board)"}
+						<div className="octo-sidebar-item" onClick={() => { this.boardClicked(board) }}>
+							{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}
 						</div>
 					)
 				})}
 			</div>
 		)
 	}
+
+	private boardClicked(board: Board) {
+		// TODO
+	}
 }
 
 export { Sidebar }
diff --git a/src/static/main.css b/src/static/main.css
index f6d35a7ad..2b368f45b 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -71,13 +71,19 @@ hr {
 	display: flex;
 	flex-direction: column;
 
-	padding: 20px;
 	background-color: rgb(247, 246, 243);
 	min-width: 230px;
+	padding: 20px 0;
 }
 
-.octo-sidebar div {
+.octo-sidebar-item {
 	font-weight: 500;
+	cursor: pointer;
+	padding: 3px 20px;
+}
+
+.octo-sidebar-item:hover {
+	background-color: rgba(0, 0, 0, 0.05);
 }
 
 /* OCTO */

From 7791b885a64da8493ed55fa13aacd489cf7d3706 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 12:01:00 -0700
Subject: [PATCH 14/34] Sidebar: add board. WIP

---
 src/client/components/sidebar.tsx            | 31 +++++++++++++++-----
 src/client/components/workspaceComponent.tsx |  4 ++-
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/client/components/sidebar.tsx b/src/client/components/sidebar.tsx
index 1e004f29d..870cc6ee6 100644
--- a/src/client/components/sidebar.tsx
+++ b/src/client/components/sidebar.tsx
@@ -1,8 +1,10 @@
 import React from "react"
 import { Board } from "../board"
+import { Mutator } from "../mutator"
 import { WorkspaceTree } from "../workspaceTree"
 
 type Props = {
+	mutator: Mutator
 	workspaceTree: WorkspaceTree
 }
 
@@ -14,14 +16,20 @@ class Sidebar extends React.Component<Props> {
 
 		return (
 			<div className="octo-sidebar">
-				{ boards.map(board => {
-					const displayTitle = board.title || "(Untitled Board)"
-					return (
-						<div className="octo-sidebar-item" onClick={() => { this.boardClicked(board) }}>
-							{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}
-						</div>
-					)
-				})}
+				{
+					boards.map(board => {
+						const displayTitle = board.title || "(Untitled Board)"
+						return (
+							<div key={board.id} className="octo-sidebar-item" onClick={() => { this.boardClicked(board) }}>
+								{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}
+							</div>
+						)
+					})
+				}
+
+				<br />
+
+				<div className="octo-button" onClick={() => { this.addBoardClicked() }}>+ Add Board</div>
 			</div>
 		)
 	}
@@ -29,6 +37,13 @@ class Sidebar extends React.Component<Props> {
 	private boardClicked(board: Board) {
 		// TODO
 	}
+
+	async addBoardClicked() {
+		const { mutator } = this.props
+
+		const board = new Board()
+		await mutator.insertBlock(board)
+	}
 }
 
 export { Sidebar }
diff --git a/src/client/components/workspaceComponent.tsx b/src/client/components/workspaceComponent.tsx
index 5bbd04537..fff247acd 100644
--- a/src/client/components/workspaceComponent.tsx
+++ b/src/client/components/workspaceComponent.tsx
@@ -17,9 +17,11 @@ type Props = {
 
 class WorkspaceComponent extends React.Component<Props> {
 	render() {
+		const { mutator, workspaceTree } = this.props
+
 		const element =
 			<div className="octo-workspace">
-				<Sidebar workspaceTree={this.props.workspaceTree}></Sidebar>
+				<Sidebar mutator={mutator} workspaceTree={workspaceTree}></Sidebar>
 				{this.mainComponent()}
 			</div>
 

From 7668dea023542435f85fe8eb959b719bed1f4722 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 12:23:28 -0700
Subject: [PATCH 15/34] Sidebar: showBoard

---
 src/client/boardPage.tsx                     | 10 ++++++++++
 src/client/components/sidebar.tsx            |  5 ++++-
 src/client/components/workspaceComponent.tsx |  4 ++--
 src/client/octoTypes.ts                      |  1 +
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/client/boardPage.tsx b/src/client/boardPage.tsx
index c157a4497..bfab5475f 100644
--- a/src/client/boardPage.tsx
+++ b/src/client/boardPage.tsx
@@ -227,6 +227,16 @@ class BoardPage implements IPageController {
 		this.render()
 	}
 
+	showBoard(boardId: string) {
+		if (this.boardTree.board.id === boardId) { return }
+
+		const newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + `?id=${encodeURIComponent(boardId)}`
+		window.history.pushState({ path: newUrl }, "", newUrl)
+
+		this.boardTree = new BoardTree(this.octo, boardId)
+		this.sync()
+	}
+
 	showView(viewId: string) {
 		this.viewId = viewId
 		this.boardTree.setActiveView(this.viewId)
diff --git a/src/client/components/sidebar.tsx b/src/client/components/sidebar.tsx
index 870cc6ee6..2a2cb95d0 100644
--- a/src/client/components/sidebar.tsx
+++ b/src/client/components/sidebar.tsx
@@ -1,10 +1,12 @@
 import React from "react"
 import { Board } from "../board"
 import { Mutator } from "../mutator"
+import { IPageController } from "../octoTypes"
 import { WorkspaceTree } from "../workspaceTree"
 
 type Props = {
 	mutator: Mutator
+	pageController: IPageController
 	workspaceTree: WorkspaceTree
 }
 
@@ -35,7 +37,8 @@ class Sidebar extends React.Component<Props> {
 	}
 
 	private boardClicked(board: Board) {
-		// TODO
+		const { pageController } = this.props
+		pageController.showBoard(board.id)
 	}
 
 	async addBoardClicked() {
diff --git a/src/client/components/workspaceComponent.tsx b/src/client/components/workspaceComponent.tsx
index fff247acd..940fa1a46 100644
--- a/src/client/components/workspaceComponent.tsx
+++ b/src/client/components/workspaceComponent.tsx
@@ -17,11 +17,11 @@ type Props = {
 
 class WorkspaceComponent extends React.Component<Props> {
 	render() {
-		const { mutator, workspaceTree } = this.props
+		const { mutator, workspaceTree, pageController } = this.props
 
 		const element =
 			<div className="octo-workspace">
-				<Sidebar mutator={mutator} workspaceTree={workspaceTree}></Sidebar>
+				<Sidebar mutator={mutator} pageController={pageController} workspaceTree={workspaceTree}></Sidebar>
 				{this.mainComponent()}
 			</div>
 
diff --git a/src/client/octoTypes.ts b/src/client/octoTypes.ts
index 026046329..498478c14 100644
--- a/src/client/octoTypes.ts
+++ b/src/client/octoTypes.ts
@@ -24,6 +24,7 @@ interface IBlock {
 // These are methods exposed by the top-level page to components
 interface IPageController {
 	showCard(card: IBlock): Promise<void>
+	showBoard(boardId: string): void
 	showView(viewId: string): void
 	showFilter(anchorElement?: HTMLElement): void
 	setSearchText(text?: string): void

From c92f5a8ec0007f1c9535ac45e98b3f647440fc28 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 19:17:37 -0700
Subject: [PATCH 16/34] Sidebar full height

---
 src/static/main.css | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/static/main.css b/src/static/main.css
index 2b368f45b..36024580f 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -60,17 +60,30 @@ hr {
 	display: inline-block;
 }
 
+/* App frame */
+
+#octo-tasks-app {
+	height: 100%;
+}
+
+#octo-tasks-app > #main {
+	height: 100%;
+}
+
 /* Sidebar */
 
 .octo-workspace {
 	display: flex;
 	flex-direction: row;
+
+	height: 100%;
 }
 
 .octo-sidebar {
 	display: flex;
 	flex-direction: column;
 
+	height: 100%;
 	background-color: rgb(247, 246, 243);
 	min-width: 230px;
 	padding: 20px 0;
@@ -86,7 +99,7 @@ hr {
 	background-color: rgba(0, 0, 0, 0.05);
 }
 
-/* OCTO */
+/* Main app */
 
 .octo-frame {
 	padding: 10px 95px 50px 95px;

From 057007d21c21711510f74d25762c4f9d3502f170 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 19:21:58 -0700
Subject: [PATCH 17/34] Switch board - attach listener to new board

---
 src/client/boardPage.tsx | 37 ++++++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/client/boardPage.tsx b/src/client/boardPage.tsx
index bfab5475f..39e116c50 100644
--- a/src/client/boardPage.tsx
+++ b/src/client/boardPage.tsx
@@ -23,8 +23,8 @@ class BoardPage implements IPageController {
 	groupByButton: HTMLElement
 	groupByLabel: HTMLElement
 
-	boardId: string
-	viewId: string
+	boardId?: string
+	viewId?: string
 
 	workspaceTree: WorkspaceTree
 	boardTree: BoardTree
@@ -52,18 +52,12 @@ class BoardPage implements IPageController {
 
 		this.workspaceTree = new WorkspaceTree(this.octo)
 
-		this.boardId = queryString.get("id")
-		this.viewId = queryString.get("v")
+		const boardId = queryString.get("id")
+		const viewId = queryString.get("v")
 
 		console.log(`BoardPage. boardId: ${this.boardId}`)
-		if (this.boardId) {
-			this.boardTree = new BoardTree(this.octo, this.boardId)
-			this.sync()
-
-			this.boardListener.open(this.boardId, (blockId: string) => {
-				console.log(`octoListener.onChanged: ${blockId}`)
-				this.sync()
-			})
+		if (boardId) {
+			this.attachToBoard(boardId, viewId)
 		} else {
 			// Show error
 		}
@@ -185,6 +179,20 @@ class BoardPage implements IPageController {
 		}
 	}
 
+	private attachToBoard(boardId: string, viewId?: string) {
+		this.boardId = boardId
+		this.viewId = viewId
+
+		this.boardTree = new BoardTree(this.octo, boardId)
+
+		this.boardListener.open(boardId, (blockId: string) => {
+			console.log(`octoListener.onChanged: ${blockId}`)
+			this.sync()
+		})
+
+		this.sync()
+	}
+
 	async sync() {
 		const { workspaceTree, boardTree } = this
 
@@ -228,13 +236,12 @@ class BoardPage implements IPageController {
 	}
 
 	showBoard(boardId: string) {
-		if (this.boardTree.board.id === boardId) { return }
+		if (this.boardTree?.board?.id === boardId) { return }
 
 		const newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + `?id=${encodeURIComponent(boardId)}`
 		window.history.pushState({ path: newUrl }, "", newUrl)
 
-		this.boardTree = new BoardTree(this.octo, boardId)
-		this.sync()
+		this.attachToBoard(boardId)
 	}
 
 	showView(viewId: string) {

From 8ac37839a602e5dfdb80a2a0d804c2ad9497bde8 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 19:28:15 -0700
Subject: [PATCH 18/34] Sidebar: Switch to board when adding

---
 src/client/components/sidebar.tsx            | 13 +++++++++++--
 src/client/components/workspaceComponent.tsx |  4 ++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/client/components/sidebar.tsx b/src/client/components/sidebar.tsx
index 2a2cb95d0..9c810a4cd 100644
--- a/src/client/components/sidebar.tsx
+++ b/src/client/components/sidebar.tsx
@@ -1,5 +1,6 @@
 import React from "react"
 import { Board } from "../board"
+import { BoardTree } from "../boardTree"
 import { Mutator } from "../mutator"
 import { IPageController } from "../octoTypes"
 import { WorkspaceTree } from "../workspaceTree"
@@ -7,7 +8,8 @@ import { WorkspaceTree } from "../workspaceTree"
 type Props = {
 	mutator: Mutator
 	pageController: IPageController
-	workspaceTree: WorkspaceTree
+	workspaceTree: WorkspaceTree,
+	boardTree?: BoardTree
 }
 
 class Sidebar extends React.Component<Props> {
@@ -42,9 +44,16 @@ class Sidebar extends React.Component<Props> {
 	}
 
 	async addBoardClicked() {
-		const { mutator } = this.props
+		const { mutator, boardTree, pageController } = this.props
 
+		const oldBoardId = boardTree?.board?.id
 		const board = new Board()
+		await mutator.insertBlock(
+			board,
+			"add board",
+			async () => { pageController.showBoard(board.id) },
+			async () => { if (oldBoardId) { pageController.showBoard(oldBoardId) } })
+
 		await mutator.insertBlock(board)
 	}
 }
diff --git a/src/client/components/workspaceComponent.tsx b/src/client/components/workspaceComponent.tsx
index 940fa1a46..c5417e2a6 100644
--- a/src/client/components/workspaceComponent.tsx
+++ b/src/client/components/workspaceComponent.tsx
@@ -17,11 +17,11 @@ type Props = {
 
 class WorkspaceComponent extends React.Component<Props> {
 	render() {
-		const { mutator, workspaceTree, pageController } = this.props
+		const { mutator, boardTree, workspaceTree, pageController } = this.props
 
 		const element =
 			<div className="octo-workspace">
-				<Sidebar mutator={mutator} pageController={pageController} workspaceTree={workspaceTree}></Sidebar>
+				<Sidebar mutator={mutator} pageController={pageController} workspaceTree={workspaceTree} boardTree={boardTree}></Sidebar>
 				{this.mainComponent()}
 			</div>
 

From 67bd2437180ebafe64630e4b17274d4f31a086e9 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 19:45:57 -0700
Subject: [PATCH 19/34] Sidebar: delete board

---
 src/client/components/sidebar.tsx | 35 +++++++++++++++++++++++++++++--
 src/client/mutator.ts             |  4 +++-
 src/static/main.css               |  7 +++++++
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/client/components/sidebar.tsx b/src/client/components/sidebar.tsx
index 9c810a4cd..138121806 100644
--- a/src/client/components/sidebar.tsx
+++ b/src/client/components/sidebar.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import { Board } from "../board"
 import { BoardTree } from "../boardTree"
+import { Menu, MenuOption } from "../menu"
 import { Mutator } from "../mutator"
 import { IPageController } from "../octoTypes"
 import { WorkspaceTree } from "../workspaceTree"
@@ -24,8 +25,10 @@ class Sidebar extends React.Component<Props> {
 					boards.map(board => {
 						const displayTitle = board.title || "(Untitled Board)"
 						return (
-							<div key={board.id} className="octo-sidebar-item" onClick={() => { this.boardClicked(board) }}>
-								{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}
+							<div key={board.id} className="octo-sidebar-item octo-hover-container" onClick={() => { this.boardClicked(board) }}>
+								<div>{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}</div>
+								<div className="octo-spacer"></div>
+								<div className="octo-button square octo-hover-item" onClick={(e) => { this.showOptions(e, board) }}><div className="imageOptions" /></div>
 							</div>
 						)
 					})
@@ -38,6 +41,34 @@ class Sidebar extends React.Component<Props> {
 		)
 	}
 
+	private showOptions(e: React.MouseEvent, board: Board) {
+		const { mutator, pageController, workspaceTree } = this.props
+		const { boards } = workspaceTree
+
+		const options: MenuOption[] = []
+
+		const nextBoardId = boards.length > 1 ? boards.find(o => o.id !== board.id).id : undefined
+		if (nextBoardId) {
+			options.push({ id: "delete", name: "Delete board" })
+		}
+
+		Menu.shared.options = options
+		Menu.shared.onMenuClicked = (optionId: string, type?: string) => {
+			switch (optionId) {
+				case "delete": {
+					mutator.deleteBlock(
+						board,
+						"delete block",
+						async () => { pageController.showBoard(nextBoardId!) },
+						async () => { pageController.showBoard(board.id) },
+					)
+					break
+				}
+			}
+		}
+		Menu.shared.showAtElement(e.target as HTMLElement)
+	}
+
 	private boardClicked(board: Board) {
 		const { pageController } = this.props
 		pageController.showBoard(board.id)
diff --git a/src/client/mutator.ts b/src/client/mutator.ts
index 2cf8e10a7..b88099c07 100644
--- a/src/client/mutator.ts
+++ b/src/client/mutator.ts
@@ -50,7 +50,7 @@ class Mutator {
 		)
 	}
 
-	async deleteBlock(block: IBlock, description?: string) {
+	async deleteBlock(block: IBlock, description?: string, beforeRedo?: () => Promise<void>, afterUndo?: () => Promise<void>) {
 		const { octo, undoManager } = this
 
 		if (!description) {
@@ -59,10 +59,12 @@ class Mutator {
 
 		await undoManager.perform(
 			async () => {
+				await beforeRedo?.()
 				await octo.deleteBlock(block.id)
 			},
 			async () => {
 				await octo.insertBlock(block)
+				await afterUndo?.()
 			},
 			description
 		)
diff --git a/src/static/main.css b/src/static/main.css
index 36024580f..b563a9a14 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -90,6 +90,9 @@ hr {
 }
 
 .octo-sidebar-item {
+	display: flex;
+	flex-direction: row;
+
 	font-weight: 500;
 	cursor: pointer;
 	padding: 3px 20px;
@@ -99,6 +102,10 @@ hr {
 	background-color: rgba(0, 0, 0, 0.05);
 }
 
+.octo-sidebar-item .octo-button:hover {
+	background-color: rgba(0, 0, 0, 0.1);
+}
+
 /* Main app */
 
 .octo-frame {

From 7f23f9dc411c8788ef5bdc7b2fd614b9046b1633 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 21:36:49 -0700
Subject: [PATCH 20/34] Sidebar full height with scroll

---
 src/static/main.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/static/main.css b/src/static/main.css
index b563a9a14..691579357 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -63,11 +63,11 @@ hr {
 /* App frame */
 
 #octo-tasks-app {
-	height: 100%;
+	min-height: 100%;
 }
 
 #octo-tasks-app > #main {
-	height: 100%;
+	min-height: 100%;
 }
 
 /* Sidebar */
@@ -76,14 +76,14 @@ hr {
 	display: flex;
 	flex-direction: row;
 
-	height: 100%;
+	min-height: 100%;
 }
 
 .octo-sidebar {
 	display: flex;
 	flex-direction: column;
 
-	height: 100%;
+	min-height: 100%;
 	background-color: rgb(247, 246, 243);
 	min-width: 230px;
 	padding: 20px 0;

From aa1223923de8da565600f33a41549f7cf0500269 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 13 Oct 2020 08:27:23 -0700
Subject: [PATCH 21/34] Make board scrollable. WIP

---
 src/static/main.css | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/static/main.css b/src/static/main.css
index 691579357..7355bf746 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -63,11 +63,12 @@ hr {
 /* App frame */
 
 #octo-tasks-app {
-	min-height: 100%;
+	height: 100%;
+	overflow: hidden;
 }
 
 #octo-tasks-app > #main {
-	min-height: 100%;
+	height: 100%;
 }
 
 /* Sidebar */
@@ -76,7 +77,7 @@ hr {
 	display: flex;
 	flex-direction: row;
 
-	min-height: 100%;
+	height: 100%;
 }
 
 .octo-sidebar {
@@ -108,9 +109,19 @@ hr {
 
 /* Main app */
 
-.octo-frame {
-	padding: 10px 95px 50px 95px;
+.octo-app {
+	display: flex;
+	flex-direction: column;
+
 	min-width: 1000px;
+	overflow: auto;
+}
+
+.octo-frame {
+	display: flex;
+	flex-direction: column;
+
+	padding: 10px 95px 50px 95px;
 }
 
 .octo-board {

From 29c214b3ab0befa7264d694b4d8bcc0e321d6ec5 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 13 Oct 2020 11:36:27 -0700
Subject: [PATCH 22/34] todo

---
 src/client/octoTypes.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/octoTypes.ts b/src/client/octoTypes.ts
index 498478c14..62672528c 100644
--- a/src/client/octoTypes.ts
+++ b/src/client/octoTypes.ts
@@ -11,10 +11,10 @@ interface IBlock {
 
 	type: string
 	title?: string
-	url?: string
+	url?: string			// TODO: Move to properties (_url)
 	icon?: string
 	order: number
-	properties: IProperty[]
+	properties: IProperty[]	// TODO: Change to map
 
 	createAt: number
 	updateAt: number

From 9069ae0af9e83808ba5071b717f7775be4154f2a Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 13 Oct 2020 13:43:35 -0700
Subject: [PATCH 23/34] Make board and table scroll using flexbox

---
 src/static/main.css | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/static/main.css b/src/static/main.css
index 7355bf746..582046edd 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -5,6 +5,8 @@
 }
 
 html, body {
+	display: flex;
+	width: 100%;
 	height: 100%;
 	color: rgb(55, 53, 47);
 }
@@ -63,21 +65,26 @@ hr {
 /* App frame */
 
 #octo-tasks-app {
-	height: 100%;
-	overflow: hidden;
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: column;
+	overflow: auto;
 }
 
 #octo-tasks-app > #main {
-	height: 100%;
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: column;
+	overflow: auto;
 }
 
 /* Sidebar */
 
 .octo-workspace {
+	flex: 1 1 auto;
 	display: flex;
 	flex-direction: row;
-
-	height: 100%;
+	overflow: auto;
 }
 
 .octo-sidebar {
@@ -110,21 +117,24 @@ hr {
 /* Main app */
 
 .octo-app {
+	flex: 1 1 auto;
 	display: flex;
 	flex-direction: column;
-
-	min-width: 1000px;
 	overflow: auto;
 }
 
 .octo-frame {
+	flex: 1 1 auto;
 	display: flex;
 	flex-direction: column;
+	overflow: scroll;
 
 	padding: 10px 95px 50px 95px;
 }
 
 .octo-board {
+	flex: 0 1 auto;
+
 	display: flex;
 	flex-direction: column;
 }
@@ -172,12 +182,14 @@ hr {
 	display: flex;
 	flex-direction: row;
 	padding: 0 10px;
+	flex: 0 1 auto;
 }
 
 .octo-board-column {
+	flex: 0 0 auto;
+
 	display: flex;
 	flex-direction: column;
-	flex-shrink: 0;
 
 	width: 260px;
 	margin-right: 15px;

From 5074279bc556b53b7277d5050fe2b9244c03f840 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 13 Oct 2020 14:02:57 -0700
Subject: [PATCH 24/34] 	flex: 0 0 auto;

---
 src/static/main.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/static/main.css b/src/static/main.css
index 582046edd..93e79fcc0 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -140,6 +140,7 @@ hr {
 }
 
 .octo-controls {
+	flex: 0 0 auto;
 	display: flex;
 	flex-direction: row;
 
@@ -205,6 +206,7 @@ hr {
 }
 
 .octo-board-card {
+	flex: 0 0 auto;
 	position: relative;
 	display: flex;
 	flex-direction: column;
@@ -439,6 +441,7 @@ hr {
 }
 
 .octo-icontitle {
+	flex: 0 0 auto;
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -451,6 +454,7 @@ hr {
 }
 
 .octo-board-card > .octo-icontitle {
+	flex: 1 1 auto;
 	font-weight: 500;
 }
 
@@ -617,6 +621,7 @@ hr {
 }
 
 .octo-table-cell {
+	flex: 0 0 auto;
 	display: flex;
 	flex-direction: row;
 

From 61a6bac9dce2bd181ab9985b4a1ff4879ef3768f Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 13 Oct 2020 14:06:20 -0700
Subject: [PATCH 25/34] Wider table title cell

---
 src/client/components/tableComponent.tsx | 2 +-
 src/client/components/tableRow.tsx       | 2 +-
 src/static/main.css                      | 6 +++++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/client/components/tableComponent.tsx b/src/client/components/tableComponent.tsx
index 795ba6e39..4179aea1e 100644
--- a/src/client/components/tableComponent.tsx
+++ b/src/client/components/tableComponent.tsx
@@ -111,7 +111,7 @@ class TableComponent extends React.Component<Props, State> {
 							{/* Headers */}
 
 							<div className="octo-table-header" id="mainBoardHeader">
-								<div className="octo-table-cell" id="mainBoardHeader">
+								<div className="octo-table-cell title-cell" id="mainBoardHeader">
 									<div
 										className="octo-label"
 										style={{ cursor: "pointer" }}
diff --git a/src/client/components/tableRow.tsx b/src/client/components/tableRow.tsx
index 742d05e56..fc6d6d7d2 100644
--- a/src/client/components/tableRow.tsx
+++ b/src/client/components/tableRow.tsx
@@ -36,7 +36,7 @@ class TableRow extends React.Component<Props, State> {
 
 			{/* Name / title */}
 
-			<div className="octo-table-cell" id="mainBoardHeader" onMouseOver={() => { openButonRef.current.style.display = null }} onMouseLeave={() => { openButonRef.current.style.display = "none" }}>
+			<div className="octo-table-cell title-cell" id="mainBoardHeader" onMouseOver={() => { openButonRef.current.style.display = null }} onMouseLeave={() => { openButonRef.current.style.display = "none" }}>
 				<div className="octo-icontitle">
 					<div className="octo-icon">{card.icon}</div>
 					<Editable
diff --git a/src/static/main.css b/src/static/main.css
index 93e79fcc0..3f1d3f144 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -630,7 +630,7 @@ hr {
 	box-sizing: border-box;
 	padding: 5px 8px 6px 8px;
 
-	width: 240px;
+	width: 150px;
 	min-height: 32px;
 
 	font-size: 14px;
@@ -640,6 +640,10 @@ hr {
 	position: relative;
 }
 
+.octo-table-cell.title-cell {
+	width: 280px;
+}
+
 .octo-table-cell .octo-propertyvalue {
 	line-height: 17px;
 }

From 5e7712d9f21808cfac6753bc79884487d7f865fc Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 13 Oct 2020 14:10:33 -0700
Subject: [PATCH 26/34] Sidebar - click on options button shouldn't trigger
 change board

---
 src/client/components/sidebar.tsx | 6 ++++--
 src/static/main.css               | 5 ++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/client/components/sidebar.tsx b/src/client/components/sidebar.tsx
index 138121806..355c9e8fe 100644
--- a/src/client/components/sidebar.tsx
+++ b/src/client/components/sidebar.tsx
@@ -25,8 +25,8 @@ class Sidebar extends React.Component<Props> {
 					boards.map(board => {
 						const displayTitle = board.title || "(Untitled Board)"
 						return (
-							<div key={board.id} className="octo-sidebar-item octo-hover-container" onClick={() => { this.boardClicked(board) }}>
-								<div>{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}</div>
+							<div key={board.id} className="octo-sidebar-item octo-hover-container">
+								<div className="octo-sidebar-title" onClick={() => { this.boardClicked(board) }}>{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}</div>
 								<div className="octo-spacer"></div>
 								<div className="octo-button square octo-hover-item" onClick={(e) => { this.showOptions(e, board) }}><div className="imageOptions" /></div>
 							</div>
@@ -67,6 +67,8 @@ class Sidebar extends React.Component<Props> {
 			}
 		}
 		Menu.shared.showAtElement(e.target as HTMLElement)
+
+		e.stopPropagation()
 	}
 
 	private boardClicked(board: Board) {
diff --git a/src/static/main.css b/src/static/main.css
index 3f1d3f144..798ab79cc 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -102,10 +102,13 @@ hr {
 	flex-direction: row;
 
 	font-weight: 500;
-	cursor: pointer;
 	padding: 3px 20px;
 }
 
+.octo-sidebar-title {
+	cursor: pointer;
+}
+
 .octo-sidebar-item:hover {
 	background-color: rgba(0, 0, 0, 0.05);
 }

From 43eefd73654920ecb6f3fafd4e6383284486a29f Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 13 Oct 2020 14:12:20 -0700
Subject: [PATCH 27/34] css

---
 src/static/main.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/static/main.css b/src/static/main.css
index 798ab79cc..512da8390 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -6,6 +6,8 @@
 
 html, body {
 	display: flex;
+	flex-direction: column;
+
 	width: 100%;
 	height: 100%;
 	color: rgb(55, 53, 47);

From 1a9b2a3b5e740b38ee52b71bd06c3516a40996c1 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 13 Oct 2020 14:22:04 -0700
Subject: [PATCH 28/34] Export / import archive from sidebar

---
 src/client/components/sidebar.tsx | 34 ++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/client/components/sidebar.tsx b/src/client/components/sidebar.tsx
index 355c9e8fe..5ce027fdc 100644
--- a/src/client/components/sidebar.tsx
+++ b/src/client/components/sidebar.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { Archiver } from "../archiver"
 import { Board } from "../board"
 import { BoardTree } from "../boardTree"
 import { Menu, MenuOption } from "../menu"
@@ -37,6 +38,10 @@ class Sidebar extends React.Component<Props> {
 				<br />
 
 				<div className="octo-button" onClick={() => { this.addBoardClicked() }}>+ Add Board</div>
+
+				<div className="octo-spacer"></div>
+
+				<div className="octo-button" onClick={(e) => { this.settingsClicked(e) }}>Settings</div>
 			</div>
 		)
 	}
@@ -67,8 +72,35 @@ class Sidebar extends React.Component<Props> {
 			}
 		}
 		Menu.shared.showAtElement(e.target as HTMLElement)
+	}
 
-		e.stopPropagation()
+	private settingsClicked(e: React.MouseEvent) {
+		const { mutator } = this.props
+
+		Menu.shared.options = [
+			{ id: "import", name: "Import Archive" },
+			{ id: "export", name: "Export Archive" },
+		]
+		Menu.shared.onMenuClicked = (optionId: string, type?: string) => {
+			switch (optionId) {
+				case "import": {
+					Archiver.importFullArchive(mutator, () => {
+						this.forceUpdate()
+					})
+					break
+				}
+				case "export": {
+					Archiver.exportFullArchive(mutator)
+					break
+				}
+			}
+		}
+
+		// HACKHACK: Show menu above (TODO: refactor menu code to do this automatically)
+		const element = e.target as HTMLElement
+		const bodyRect = document.body.getBoundingClientRect()
+		const rect = element.getBoundingClientRect()
+		Menu.shared.showAt(rect.left - bodyRect.left + 20, rect.top - bodyRect.top - 30 * Menu.shared.options.length)
 	}
 
 	private boardClicked(board: Board) {

From 42d3d657c64c87a1ea745ad56f855842e141d14d Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 13 Oct 2020 14:36:29 -0700
Subject: [PATCH 29/34] Allow sidebar without active board Redirect to /board
 as default

---
 server/main/main.go                          | 13 ++--
 src/client/boardPage.tsx                     | 73 ++++++++------------
 src/client/components/workspaceComponent.tsx |  8 ++-
 3 files changed, 42 insertions(+), 52 deletions(-)

diff --git a/server/main/main.go b/server/main/main.go
index 1d5c24b59..f49eb7156 100644
--- a/server/main/main.go
+++ b/server/main/main.go
@@ -39,6 +39,13 @@ func handleStaticFile(r *mux.Router, requestPath string, filePath string, conten
 	})
 }
 
+func handleDefault(r *mux.Router, requestPath string) {
+	r.HandleFunc(requestPath, func(w http.ResponseWriter, r *http.Request) {
+		log.Printf("handleDefault")
+		http.Redirect(w, r, "/board", http.StatusFound)
+	})
+}
+
 // ----------------------------------------------------------------------------------------------------
 // REST APIs
 
@@ -338,11 +345,9 @@ func main() {
 	r := mux.NewRouter()
 
 	// Static files
-	handleStaticFile(r, "/", "index.html", "text/html; charset=utf-8")
-	handleStaticFile(r, "/boards", "boards.html", "text/html; charset=utf-8")
-	handleStaticFile(r, "/board", "board.html", "text/html; charset=utf-8")
+	handleDefault(r, "/")
 
-	handleStaticFile(r, "/boardsPage.js", "boardsPage.js", "text/javascript; charset=utf-8")
+	handleStaticFile(r, "/board", "board.html", "text/html; charset=utf-8")
 	handleStaticFile(r, "/boardPage.js", "boardPage.js", "text/javascript; charset=utf-8")
 
 	handleStaticFile(r, "/favicon.ico", "static/favicon.svg", "image/svg+xml; charset=utf-8")
diff --git a/src/client/boardPage.tsx b/src/client/boardPage.tsx
index 39e116c50..bc9009a62 100644
--- a/src/client/boardPage.tsx
+++ b/src/client/boardPage.tsx
@@ -27,7 +27,7 @@ class BoardPage implements IPageController {
 	viewId?: string
 
 	workspaceTree: WorkspaceTree
-	boardTree: BoardTree
+	boardTree?: BoardTree
 	view: BoardView
 
 	updateTitleTimeout: number
@@ -42,24 +42,18 @@ class BoardPage implements IPageController {
 
 	constructor() {
 		const queryString = new URLSearchParams(window.location.search)
-		if (!queryString.has("id")) {
-			// No id, redirect to home
-			window.location.href = "/"
-			return
-		}
+		const boardId = queryString.get("id")
+		const viewId = queryString.get("v")
 
 		this.layoutPage()
 
 		this.workspaceTree = new WorkspaceTree(this.octo)
 
-		const boardId = queryString.get("id")
-		const viewId = queryString.get("v")
-
 		console.log(`BoardPage. boardId: ${this.boardId}`)
 		if (boardId) {
 			this.attachToBoard(boardId, viewId)
 		} else {
-			// Show error
+			this.sync()
 		}
 
 		document.body.addEventListener("keydown", async (e) => {
@@ -108,7 +102,7 @@ class BoardPage implements IPageController {
 
 	render() {
 		const { octo, boardTree } = this
-		const { board, activeView } = boardTree
+		const { board, activeView } = boardTree || {}
 		const mutator = new Mutator(octo)
 
 		const mainElement = Utils.getElementById("main")
@@ -120,37 +114,23 @@ class BoardPage implements IPageController {
 
 		if (board) {
 			Utils.setFavicon(board.icon)
-		} else {
-			ReactDOM.render(
-				<div className="page-loading">Loading...</div>,
-				mainElement
-			)
-			return
+			document.title = `OCTO - ${board.title} | ${activeView.title}`
 		}
 
-		if (activeView) {
-			document.title = `OCTO - ${board.title} | ${activeView.title}`
+		ReactDOM.render(
+			<WorkspaceComponent mutator={mutator} workspaceTree={this.workspaceTree} boardTree={this.boardTree} pageController={this} />,
+			mainElement
+		)
 
+		if (boardTree && boardTree.board && this.shownCardTree) {
 			ReactDOM.render(
-				<WorkspaceComponent mutator={mutator} workspaceTree={this.workspaceTree} boardTree={this.boardTree} pageController={this} />,
-				mainElement
+				<CardDialog mutator={mutator} boardTree={boardTree} cardTree={this.shownCardTree} onClose={() => { this.showCard(undefined) }}></CardDialog>,
+				Utils.getElementById("overlay")
 			)
-
-			if (boardTree && boardTree.board && this.shownCardTree) {
-				ReactDOM.render(
-					<CardDialog mutator={mutator} boardTree={boardTree} cardTree={this.shownCardTree} onClose={() => { this.showCard(undefined) }}></CardDialog>,
-					Utils.getElementById("overlay")
-				)
-			} else {
-				ReactDOM.render(
-					<div />,
-					Utils.getElementById("overlay")
-				)
-			}
 		} else {
 			ReactDOM.render(
-				<div>Loading...</div>,
-				mainElement
+				<div />,
+				Utils.getElementById("overlay")
 			)
 		}
 
@@ -169,7 +149,7 @@ class BoardPage implements IPageController {
 					boardTree={boardTree}
 					pageX={pageX}
 					pageY={pageY}
-					onClose={() => {this.showFilter(undefined)}}
+					onClose={() => { this.showFilter(undefined) }}
 				>
 				</FilterComponent>,
 				Utils.getElementById("modal")
@@ -197,19 +177,20 @@ class BoardPage implements IPageController {
 		const { workspaceTree, boardTree } = this
 
 		await workspaceTree.sync()
-		await boardTree.sync()
+		if (boardTree) {
+			await boardTree.sync()
 
-		// Default to first view
-		if (!this.viewId) {
-			this.viewId = boardTree.views[0].id
+			// Default to first view
+			if (!this.viewId) {
+				this.viewId = boardTree.views[0].id
+			}
+
+			boardTree.setActiveView(this.viewId)
+			// TODO: Handle error (viewId not found)
+			this.viewId = boardTree.activeView.id
+			console.log(`sync complete... title: ${boardTree.board.title}`)
 		}
 
-		boardTree.setActiveView(this.viewId)
-		// TODO: Handle error (viewId not found)
-		this.viewId = boardTree.activeView.id
-
-		console.log(`sync complete... title: ${boardTree.board.title}`)
-
 		this.render()
 	}
 
diff --git a/src/client/components/workspaceComponent.tsx b/src/client/components/workspaceComponent.tsx
index c5417e2a6..30342b2b4 100644
--- a/src/client/components/workspaceComponent.tsx
+++ b/src/client/components/workspaceComponent.tsx
@@ -30,9 +30,13 @@ class WorkspaceComponent extends React.Component<Props> {
 
 	private mainComponent() {
 		const { mutator, boardTree, pageController } = this.props
-		const { activeView } = boardTree
+		const { activeView } = boardTree || {}
 
-		switch (activeView.viewType) {
+		if (!activeView) {
+			return <div></div>
+		}
+
+		switch (activeView?.viewType) {
 			case "board": {
 				return <BoardComponent mutator={mutator} boardTree={boardTree} pageController={pageController} />
 			}

From d8f686ac4201a745b5e18a12ded8109d834261cf Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 13 Oct 2020 14:38:20 -0700
Subject: [PATCH 30/34] Remove boardspage

---
 html-templates/index.ejs |  29 ----------
 src/client/boardsPage.ts | 112 ---------------------------------------
 webpack.common.js        |  31 +++--------
 3 files changed, 8 insertions(+), 164 deletions(-)
 delete mode 100644 html-templates/index.ejs
 delete mode 100644 src/client/boardsPage.ts

diff --git a/html-templates/index.ejs b/html-templates/index.ejs
deleted file mode 100644
index 85f4fd368..000000000
--- a/html-templates/index.ejs
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="UTF-8">
-	<title><%= htmlWebpackPlugin.options.title %></title>
-
-	<link rel="stylesheet" href="/main.css">
-	<link rel="stylesheet" href="/images.css">
-	<link rel="stylesheet" href="/colors.css">
-
-	<script>
-		window.location.href = "/boards"
-	</script>
-</head>
-
-<body class="container">
-	<header id="header">
-		<a href="/">OCTO</a>
-	</header>
-
-	<main id="main">
-		<p>
-			<a href="boards">All Boards</a>
-		</p>
-	</main>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/src/client/boardsPage.ts b/src/client/boardsPage.ts
deleted file mode 100644
index b37603446..000000000
--- a/src/client/boardsPage.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Archiver } from "./archiver"
-import { Board } from "./board"
-import { Mutator } from "./mutator"
-import { OctoClient } from "./octoClient"
-import { UndoManager } from "./undomanager"
-import { Utils } from "./utils"
-
-class BoardsPage {
-	boardsPanel: HTMLElement
-
-	boardId: string
-	boards: Board[]
-
-	octo = new OctoClient()
-
-	constructor() {
-		// This is a placeholder page
-
-		const root = Utils.getElementById("octo-tasks-app")
-		root.innerText = ""
-
-		// Header
-		root.appendChild(Utils.htmlToElement(`<div class="page-header"><a href="/">OCTO</a></div`))
-
-		const mainPanel = root.appendChild(document.createElement("div"))
-
-		this.boardsPanel = mainPanel.appendChild(document.createElement("div"))
-
-		{
-			const addButton = document.body.appendChild(document.createElement("div"))
-			addButton.className = "octo-button"
-			addButton.innerText = "+ Add Board"
-			addButton.onclick = () => { this.addClicked() }
-		}
-
-		document.body.appendChild(document.createElement("br"))
-
-		{
-			const importButton = document.body.appendChild(document.createElement("div"))
-			importButton.className = "octo-button"
-			importButton.innerText = "Import archive"
-			importButton.onclick = async () => {
-				const octo = new OctoClient()
-				const mutator = new Mutator(octo, UndoManager.shared)
-				Archiver.importFullArchive(mutator, () => {
-					this.updateView()
-				})
-			}
-		}
-
-		{
-			const exportButton = document.body.appendChild(document.createElement("div"))
-			exportButton.className = "octo-button"
-			exportButton.innerText = "Export archive"
-			exportButton.onclick = () => {
-				const octo = new OctoClient()
-				const mutator = new Mutator(octo, UndoManager.shared)
-				Archiver.exportFullArchive(mutator)
-			}
-		}
-
-		this.updateView()
-	}
-
-	async getBoardData() {
-		const boards = this.octo.getBlocks(null, "board")
-	}
-
-	async updateView() {
-		const { boardsPanel } = this
-
-		boardsPanel.innerText = ""
-
-		const boards = await this.octo.getBlocks(null, "board")
-		for (const board of boards) {
-			const p = boardsPanel.appendChild(document.createElement("p"))
-			const a = p.appendChild(document.createElement("a"))
-			a.style.padding = "5px 10px"
-			a.style.fontSize = "20px"
-			a.href = `./board?id=${encodeURIComponent(board.id)}`
-
-			if (board.icon) {
-				const icon = a.appendChild(document.createElement("span"))
-				icon.className = "octo-icon"
-				icon.style.marginRight = "10px"
-				icon.innerText = board.icon
-			}
-
-			const title = a.appendChild(document.createElement("b"))
-			const updatedDate = new Date(board.updateAt)
-			title.innerText = board.title
-			const details = a.appendChild(document.createElement("span"))
-			details.style.fontSize = "15px"
-			details.style.color = "#909090"
-			details.style.marginLeft = "10px"
-			details.innerText = ` ${Utils.displayDate(updatedDate)}`
-		}
-
-		console.log(`updateView: ${boards.length} board(s).`)
-	}
-
-	async addClicked() {
-		const board = new Board()
-		await this.octo.insertBlock(board)
-		await this.updateView()
-	}
-}
-
-export = BoardsPage
-
-const _ = new BoardsPage()
-console.log("boardsView")
diff --git a/webpack.common.js b/webpack.common.js
index a309b070a..ccf4d613f 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -1,9 +1,9 @@
-const webpack = require("webpack");
-const path = require("path");
-const CopyPlugin = require("copy-webpack-plugin");
-var HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require("webpack")
+const path = require("path")
+const CopyPlugin = require("copy-webpack-plugin")
+var HtmlWebpackPlugin = require('html-webpack-plugin')
 
-const outpath = path.resolve(__dirname, "pack");
+const outpath = path.resolve(__dirname, "pack")
 
 function makeCommonConfig() {
 	const commonConfig = {
@@ -47,20 +47,6 @@ function makeCommonConfig() {
 					{ from: path.resolve(__dirname, "node_modules/easymde/dist/easymde.min.css"), to: "static" },
 				],
 			}),
-			new HtmlWebpackPlugin({
-				inject: true,
-				title: "OCTO",
-				chunks: [],
-				template: "html-templates/index.ejs",
-				filename: 'index.html'
-			}),
-			new HtmlWebpackPlugin({
-				inject: true,
-				title: "OCTO - Boards",
-				chunks: ["boardsPage"],
-				template: "html-templates/page.ejs",
-				filename: 'boards.html'
-			}),
 			new HtmlWebpackPlugin({
 				inject: true,
 				title: "OCTO",
@@ -70,16 +56,15 @@ function makeCommonConfig() {
 			}),
 		],
 		entry: {
-			boardsPage: "./src/client/boardsPage.ts",
 			boardPage: "./src/client/boardPage.tsx"
 		},
 		output: {
 			filename: "[name].js",
 			path: outpath
 		}
-	};
+	}
 
-	return commonConfig;
+	return commonConfig
 }
 
-module.exports = makeCommonConfig;
+module.exports = makeCommonConfig

From 4db40c310e3e151ebdde70818f5652986c58198e Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 13 Oct 2020 21:26:48 -0700
Subject: [PATCH 31/34] cleanup

---
 src/client/block.ts                      | 24 ------------------------
 src/client/components/boardComponent.tsx |  4 ++--
 src/client/mutator.ts                    |  6 +++---
 3 files changed, 5 insertions(+), 29 deletions(-)

diff --git a/src/client/block.ts b/src/client/block.ts
index 421469e2b..10258cfa6 100644
--- a/src/client/block.ts
+++ b/src/client/block.ts
@@ -41,7 +41,6 @@ class Block implements IBlock {
 		this.updateAt = block.updateAt || now
 		this.deleteAt = block.deleteAt || 0
 
-		// this.properties = block.properties ? block.properties.map((o: IProperty) => ({ ...o })) : []		// Deep clone
 		if (Array.isArray(block.properties)) {
 			// HACKHACK: Port from old schema
 			this.properties = {}
@@ -54,29 +53,6 @@ class Block implements IBlock {
 			this.properties = { ...block.properties || {} }
 		}
 	}
-
-	static getPropertyValue(block: IBlock, id: string): string | undefined {
-		if (!block.properties) { return undefined }
-		return block.properties[id]
-	}
-
-	static setProperty(block: IBlock, id: string, value?: string) {
-		block.properties[id] = value
-		// if (!block.properties) { block.properties = [] }
-		// if (!value) {
-		// 	// Remove property
-		// 	block.properties = block.properties.filter(o => o.id !== id)
-		// 	return
-		// }
-
-		// const property = block.properties.find(o => o.id === id)
-		// if (property) {
-		// 	property.value = value
-		// } else {
-		// 	const newProperty: IProperty = { id, value }
-		// 	block.properties.push(newProperty)
-		// }
-	}
 }
 
 export { Block }
diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx
index 885953c1e..8932c5ba5 100644
--- a/src/client/components/boardComponent.tsx
+++ b/src/client/components/boardComponent.tsx
@@ -233,7 +233,7 @@ class BoardComponent extends React.Component<Props, State> {
 		const properties = CardFilter.propertiesThatMeetFilterGroup(activeView.filter, board.cardProperties)
 		const card = new Block({ type: "card", parentId: boardTree.board.id, properties })
 		if (boardTree.groupByProperty) {
-			Block.setProperty(card, boardTree.groupByProperty.id, groupByValue)
+			card.properties[boardTree.groupByProperty.id] = groupByValue
 		}
 		await mutator.insertBlock(card, "add card", async () => { await this.showCard(card) }, async () => { await this.showCard(undefined) })
 	}
@@ -354,7 +354,7 @@ class BoardComponent extends React.Component<Props, State> {
 
 		if (draggedCard) {
 			Utils.log(`ondrop. Card: ${draggedCard.title}, column: ${propertyValue}`)
-			const oldValue = Block.getPropertyValue(draggedCard, boardTree.groupByProperty.id)
+			const oldValue = draggedCard.properties[boardTree.groupByProperty.id]
 			if (propertyValue !== oldValue) {
 				await mutator.changePropertyValue(draggedCard, boardTree.groupByProperty.id, propertyValue, "drag card")
 			}
diff --git a/src/client/mutator.ts b/src/client/mutator.ts
index 18c062e7b..ef77bc346 100644
--- a/src/client/mutator.ts
+++ b/src/client/mutator.ts
@@ -408,14 +408,14 @@ class Mutator {
 	async changePropertyValue(block: IBlock, propertyId: string, value?: string, description: string = "change property") {
 		const { octo, undoManager } = this
 
-		const oldValue = Block.getPropertyValue(block, propertyId)
+		const oldValue = block.properties[propertyId]
 		await undoManager.perform(
 			async () => {
-				Block.setProperty(block, propertyId, value)
+				block.properties[propertyId] = value
 				await octo.updateBlock(block)
 			},
 			async () => {
-				Block.setProperty(block, propertyId, oldValue)
+				block.properties[propertyId] = oldValue
 				await octo.updateBlock(block)
 			},
 			description

From 0b53e083dcbbd55ddff062be234a352a03b1f0fa Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 13 Oct 2020 22:14:08 -0700
Subject: [PATCH 32/34] Add mapstructure for dbconfig in config.go

---
 server/main/config.go | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/server/main/config.go b/server/main/config.go
index e851f4446..b7ab3f2f4 100644
--- a/server/main/config.go
+++ b/server/main/config.go
@@ -8,13 +8,13 @@ import (
 
 // Configuration is the app configuration stored in a json file
 type Configuration struct {
-	ServerRoot     string `json:"serverRoot"`
-	Port           int    `json:"port"`
-	DBType         string `json:"dbtype"`
-	DBConfigString string `json:"dbconfig"`
-	UseSSL         bool   `json:"useSSL"`
-	WebPath        string `json:"webpath"`
-	FilesPath      string `json:"filespath"`
+	ServerRoot     string `json:"serverRoot" mapstructure:"serverRoot"`
+	Port           int    `json:"port" mapstructure:"port"`
+	DBType         string `json:"dbtype" mapstructure:"dbtype"`
+	DBConfigString string `json:"dbconfig" mapstructure:"dbconfig"`
+	UseSSL         bool   `json:"useSSL" mapstructure:"useSSL"`
+	WebPath        string `json:"webpath" mapstructure:"webpath"`
+	FilesPath      string `json:"filespath" mapstructure:"filespath"`
 }
 
 func readConfigFile() (*Configuration, error) {

From 6b684a6eb76c9f0b4468015791b178f0e2ebd1e4 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 13 Oct 2020 22:24:03 -0700
Subject: [PATCH 33/34] Test code: Add multiple cards

---
 src/client/components/boardComponent.tsx | 28 ++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx
index 8932c5ba5..a2ead7735 100644
--- a/src/client/components/boardComponent.tsx
+++ b/src/client/components/boardComponent.tsx
@@ -279,6 +279,8 @@ class BoardComponent extends React.Component<Props, State> {
 
 		Menu.shared.options = [
 			{ id: "exportBoardArchive", name: "Export board archive" },
+			{ id: "testAdd100Cards", name: "TEST: Add 100 cards" },
+			{ id: "testAdd1000Cards", name: "TEST: Add 1,000 cards" },
 		]
 
 		Menu.shared.onMenuClicked = async (id: string) => {
@@ -287,11 +289,37 @@ class BoardComponent extends React.Component<Props, State> {
 					Archiver.exportBoardTree(boardTree)
 					break
 				}
+				case "testAdd100Cards": {
+					this.testAddCards(100)
+				}
+				case "testAdd1000Cards": {
+					this.testAddCards(1000)
+				}
 			}
 		}
 		Menu.shared.showAtElement(e.target as HTMLElement)
 	}
 
+	private async testAddCards(count: number) {
+		const { mutator, boardTree } = this.props
+		const { board, activeView } = boardTree
+
+		let optionIndex = 0
+
+		for (let i = 0; i < count; i++) {
+			const properties = CardFilter.propertiesThatMeetFilterGroup(activeView.filter, board.cardProperties)
+			const card = new Block({ type: "card", parentId: boardTree.board.id, properties })
+			if (boardTree.groupByProperty && boardTree.groupByProperty.options.length > 0) {
+				// Cycle through options
+				const option = boardTree.groupByProperty.options[optionIndex]
+				optionIndex = (optionIndex + 1) % boardTree.groupByProperty.options.length
+				card.properties[boardTree.groupByProperty.id] = option.value
+				card.title = `Test Card ${i + 1}`
+			}
+			await mutator.insertBlock(card, "test add card")
+		}
+	}
+
 	private async propertiesClicked(e: React.MouseEvent) {
 		const { mutator, boardTree } = this.props
 		const { activeView } = boardTree

From 6dc73a83b153cbe830625af1bb2c76841b3c2384 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 13 Oct 2020 22:24:54 -0700
Subject: [PATCH 34/34] Fix error on sort menu

---
 src/client/octoUtils.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/octoUtils.tsx b/src/client/octoUtils.tsx
index c44f876b8..0df9702e0 100644
--- a/src/client/octoUtils.tsx
+++ b/src/client/octoUtils.tsx
@@ -199,7 +199,7 @@ class OctoUtils {
 			return {
 				id: o.id,
 				name: o.name,
-				icon: (sortOption.propertyId === o.id) ? sortOption.reversed ? "sortUp" : "sortDown" : undefined
+				icon: (sortOption?.propertyId === o.id) ? sortOption.reversed ? "sortUp" : "sortDown" : undefined
 			}
 		})
 		Menu.shared.onMenuClicked = async (propertyId: string) => {