Improved source code structure.

.vscode/settings.json

@@ -2,6 +2,7 @@
     "cSpell.words": [
         "browserslist",
         "bson",
+        "Bukowski",
         "camelcase",
         "csstype",
         "Descriptable",

src/App.tsx

@@ -8,11 +8,11 @@ import { CSSObject, Global, ThemeProvider } from '@emotion/react';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/integration/react';
-import MainView from 'src/components/views/main/MainView';
+import MainView from 'src/views/main/MainView';
 import { theme } from 'src/styles/themes';
 import store, { persistor } from 'src/store';
-import { DialogProvider } from 'src/components/common/Dialog';
-import ScreenOrientationProvider from 'src/components/common/ScreenOrientationProvider';
+import { DialogProvider } from 'src/components/Dialog';
+import ScreenOrientationProvider from 'src/contexts/ScreenOrientationContext';
 
 interface Props {
     basename?: string,

src/components/specialized/tiles/EditWorkspaceToolbox.tsx → src/components/EditWorkspaceToolbox.tsx

@@ -4,11 +4,11 @@
 //
 //  @jsxImportSource @emotion/react
 
-import Toolbar from 'src/components/common/Toolbar';
+import Toolbar from 'src/components/Toolbar';
 import { useRootSelector } from 'src/hooks/useRootSelector';
-import EditTilesButton from '../EditTilesButton';
-import AddTileButton from '../AddTileButton';
-import ClearTilesButton from '../ClearTilesButton';
+import EditTilesButton from './EditTilesButton';
+import AddTileButton from './AddTileButton';
+import ClearTilesButton from './ClearTilesButton';
 
 export default function EditWorkspaceToolbox() {
     const isTileEditorActive = useRootSelector((state) => state.editor.isActive);

src/components/common/FlowContainer.tsx → src/components/FlowContainer.tsx

@@ -9,7 +9,7 @@ import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import { ReactElement } from 'react-markdown/lib/react-markdown';
 import { mergeStyles } from 'src/styles/mergeStyles';
 import { cloneElementWithEmotion } from 'src/types';
-import { ScreenOrientationContext } from './ScreenOrientationProvider';
+import { ScreenOrientationContext } from '../contexts/ScreenOrientationContext';
 
 type Direction = 'horizontal' | 'vertical'
 

src/components/specialized/TermsOfUseLink.tsx → src/components/TermsOfUseLink.tsx

@@ -4,8 +4,8 @@
 //
 //  @jsxImportSource @emotion/react
 
-import { DialogLink } from 'src/components/common/Dialog';
-import TermsOfUse from 'src/components/documents/TermsOfUse';
+import { DialogLink } from 'src/components/Dialog';
+import TermsOfUse from 'src/documents/TermsOfUse';
 
 export default function TermsOfUseLink() {
     return (

src/components/specialized/ThirdPartyLicensesLink.tsx → src/components/ThirdPartyLicensesLink.tsx

@@ -4,8 +4,8 @@
 //
 //  @jsxImportSource @emotion/react
 
-import { DialogLink } from 'src/components/common/Dialog';
-import ThirdPartyLicenses from 'src/components/documents/ThirdPartyLicenses';
+import { DialogLink } from 'src/components/Dialog';
+import ThirdPartyLicenses from 'src/documents/ThirdPartyLicenses';
 
 export default function ThirdPartyLicensesLink() {
     return (

src/components/specialized/tiles/running/TileBox.tsx → src/components/TileBox.tsx

@@ -6,10 +6,10 @@
 
 import { CSSObject } from '@emotion/react';
 import { TileDefinition } from 'src/store/tiles';
-import CloseButton from 'src/components/common/CloseButton';
-import EditButton from 'src/components/specialized/EditButton';
+import CloseButton from 'src/components/CloseButton';
+import EditButton from 'src/components/EditButton';
 import { AriaAttributes, useCallback, useMemo } from 'react';
-import Box from 'src/components/common/Box';
+import Box from 'src/components/Box';
 import { mergeStyles } from 'src/styles/mergeStyles';
 import { useRootSelector } from 'src/hooks/useRootSelector';
 import { Entity } from 'src/types';

src/components/specialized/tiles/editing/TileEditorDialog.tsx → src/components/TileEditorDialog.tsx

@@ -6,7 +6,7 @@
 
 import { CSSObject } from '@emotion/react';
 import { AriaAttributes } from 'react';
-import Dialog from 'src/components/common/Dialog';
+import Dialog from 'src/components/Dialog';
 import { TileDefinition } from 'src/store/tiles';
 import { Entity } from 'src/types';
 import TileNameEditor from './TileNameEditor';

src/components/specialized/TileGallery.tsx → src/components/TileGallery.tsx

@@ -6,12 +6,12 @@
 
 import { useCallback, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import FlowContainer from 'src/components/common/FlowContainer';
+import FlowContainer from 'src/components/FlowContainer';
 import { useRootSelector } from 'src/hooks/useRootSelector';
 import { selectAllTiles, removeTile } from 'src/store/tiles';
 import { startEditing, stopEditing } from 'src/store/editor';
-import TileBox from './tiles/running/TileBox';
-import TileEditorDialog from './tiles/editing/TileEditorDialog';
+import TileBox from './TileBox';
+import TileEditorDialog from './TileEditorDialog';
 
 export default function TileGallery() {
     const dispatch = useDispatch();

src/components/specialized/VersionHistoryLink.tsx → src/components/VersionHistoryLink.tsx

@@ -4,8 +4,8 @@
 //
 //  @jsxImportSource @emotion/react
 
-import { DialogLink } from 'src/components/common/Dialog';
-import VersionHistory from 'src/components/documents/VersionHistory';
+import { DialogLink } from 'src/components/Dialog';
+import VersionHistory from 'src/documents/VersionHistory';
 
 export default function VersionHistoryLink() {
     return (

src/components/documents/TermsOfUse.tsx → src/documents/TermsOfUse.tsx

@@ -5,9 +5,9 @@
 //  @jsxImportSource @emotion/react
 
 import raw from 'raw.macro';
-import MarkdownDocument from '../common/MarkdownDocument';
+import MarkdownDocument from '../components/MarkdownDocument';
 
-const termsOfUse = raw('../../../docs/TermsOfUse.md');
+const termsOfUse = raw('../../docs/TermsOfUse.md');
 
 export default function TermsOfUse() {
     return (

src/components/documents/ThirdPartyLicenses.tsx → src/documents/ThirdPartyLicenses.tsx

@@ -6,8 +6,8 @@
 
 import { useCallback, useState } from 'react';
 import thirdPartyLicenses from 'src/thirdPartyLicenses.g.json';
-import Accordion from '../common/Accordion';
-import MarkdownDocument from '../common/MarkdownDocument';
+import Accordion from '../components/Accordion';
+import MarkdownDocument from '../components/MarkdownDocument';
 
 const documents: Record<string, string> = {};
 thirdPartyLicenses.forEach(entry => {

src/components/documents/VersionHistory.tsx → src/documents/VersionHistory.tsx

@@ -5,7 +5,7 @@
 //  @jsxImportSource @emotion/react
 
 import versionHistory from 'src/versionHistory.g.json';
-import MarkdownDocument from '../common/MarkdownDocument';
+import MarkdownDocument from '../components/MarkdownDocument';
 
 const documentLines: string[] = [];
 versionHistory.forEach(entry => {

src/emotion.d.tsx

@@ -6,7 +6,7 @@
 
 import '@emotion/react';
 import type { Property } from 'csstype';
-import { DockDirection } from 'src/components/common/Dock';
+import { DockDirection } from 'src/components/Dock';
 
 declare module '@emotion/react' {
     export interface Theme {

src/index.tsx

@@ -4,7 +4,7 @@
 //
 //  @jsxImportSource @emotion/react
 
-import React from 'react';
+import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import axe from '@axe-core/react';
@@ -25,4 +25,8 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 const root = createRoot(rootElement);
-root.render(<App basename={baseUrl} />);
+root.render(
+    <StrictMode>
+        <App basename={baseUrl} />
+    </StrictMode>
+);

src/components/views/main/Footer.tsx → src/views/main/Footer.tsx

@@ -4,9 +4,9 @@
 //
 //  @jsxImportSource @emotion/react
 
-import Dock from 'src/components/common/Dock/Dock';
-import LinksSection from 'src/components/specialized/LinksSection';
-import VersionLabel from 'src/components/specialized/VersionLabel';
+import Dock from 'src/components/Dock/Dock';
+import LinksSection from 'src/components/LinksSection';
+import VersionLabel from 'src/components/VersionLabel';
 
 export default function Footer() {
     return (

src/components/views/main/Header.tsx → src/views/main/Header.tsx

@@ -5,7 +5,7 @@
 //  @jsxImportSource @emotion/react
 
 import { CSSObject } from '@emotion/react';
-import TilesTokenInput from 'src/components/specialized/TilesTokenInput';
+import TilesTokenInput from 'src/components/TilesTokenInput';
 
 const titleStyle: CSSObject = {
     display: 'inline-block',

src/components/views/main/MainView.tsx → src/views/main/MainView.tsx

@@ -5,7 +5,7 @@
 //  @jsxImportSource @emotion/react
 
 import { CSSObject } from '@emotion/react';
-import Dock from 'src/components/common/Dock';
+import Dock from 'src/components/Dock';
 import Footer from './Footer';
 import Header from './Header';
 import Toolbox from './Toolbox';

src/components/views/main/Toolbox.tsx → src/views/main/Toolbox.tsx

@@ -4,7 +4,7 @@
 //
 //  @jsxImportSource @emotion/react
 
-import EditWorkspaceToolbox from 'src/components/specialized/tiles/EditWorkspaceToolbox';
+import EditWorkspaceToolbox from 'src/components/EditWorkspaceToolbox';
 
 export default function Toolbox() {
     return <EditWorkspaceToolbox />;

src/components/views/main/Workspace.tsx → src/views/main/Workspace.tsx

@@ -7,7 +7,8 @@
 import { CSSObject, useTheme } from '@emotion/react';
 import { useMemo } from 'react';
 import { mergeStyles } from 'src/styles/mergeStyles';
-import TileGalleryView from 'src/components/specialized/TileGallery';
+import TileGalleryView from 'src/components/TileGallery';
+import Dock from 'src/components/Dock';
 
 const baseStyle: CSSObject = {
     label: 'Workspace',
@@ -25,7 +26,10 @@ export default function Workspace() {
 
     return (
         <main css={style}>
-            <TileGalleryView />
+            <Dock>
+                <TileGalleryView dock-direction="top" />
+                <TileGalleryView dock-direction="fill" />
+            </Dock>
         </main>
     );
 }