hale-commenting-system 2.2.0 → 2.2.2

package/src/app/AppLayout/AppLayout.tsx

@@ -0,0 +1,248 @@
+import * as React from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import {
+  Button,
+  Masthead,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadMain,
+  MastheadToggle,
+  Nav,
+  NavExpandable,
+  NavItem,
+  NavList,
+  Page,
+  PageSidebar,
+  PageSidebarBody,
+  SkipToContent,
+  Switch,
+} from '@patternfly/react-core';
+import { IAppRoute, IAppRouteGroup, routes } from '@app/routes';
+import { BarsIcon, ExternalLinkAltIcon, GithubIcon } from '@patternfly/react-icons';
+import { CommentOverlay, CommentPanel, useComments, useGitHubAuth } from '@app/commenting-system';
+
+interface IAppLayout {
+  children: React.ReactNode;
+}
+
+const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
+  const [sidebarOpen, setSidebarOpen] = React.useState(true);
+  const { commentsEnabled, setCommentsEnabled, drawerPinnedOpen, setDrawerPinnedOpen, floatingWidgetMode, setFloatingWidgetMode } = useComments();
+  const { isAuthenticated, user, login, logout } = useGitHubAuth();
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <Button
+            icon={<BarsIcon />}
+            variant="plain"
+            onClick={() => setSidebarOpen(!sidebarOpen)}
+            aria-label="Global navigation"
+          />
+        </MastheadToggle>
+        <MastheadBrand data-codemods>
+          <MastheadLogo data-codemods>
+            <svg height="40px" viewBox="0 0 679 158">
+              <title>PatternFly logo</title>
+              <defs>
+                <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-basic-masthead">
+                  <stop stopColor="#2B9AF3" offset="0%"></stop>
+                  <stop stopColor="#73BCF7" stopOpacity="0.502212631" offset="100%"></stop>
+                </linearGradient>
+              </defs>
+              <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <g
+                  transform="translate(206.000000, 45.750000)"
+                  fill="var(--pf-t--global--text--color--regular)"
+                  fillRule="nonzero"
+                >
+                  <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"></path>
+                  <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"></path>
+                  <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"></path>
+                  <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"></path>
+                  <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"></path>
+                  <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"></path>
+                  <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"></path>
+                  <polygon points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+                  <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+                  <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"></path>
+                </g>
+                <g transform="translate(0.000000, 0.000000)">
+                  <path
+                    d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
+                    fill="#0066CC"
+                  ></path>
+                  <path
+                    d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
+                    fill="url(#linearGradient-basic-masthead)"
+                  ></path>
+                  <path
+                    d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
+                    fill="url(#linearGradient-basic-masthead)"
+                    transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
+                  ></path>
+                </g>
+              </g>
+            </svg>
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+    </Masthead>
+  );
+
+  const location = useLocation();
+
+  const renderNavItem = (route: IAppRoute, index: number) => (
+    <NavItem key={`${route.label}-${index}`} id={`${route.label}-${index}`} isActive={route.path === location.pathname}>
+      <NavLink
+        to={route.path}
+      >
+        {route.label}
+      </NavLink>
+    </NavItem>
+  );
+
+  const renderNavGroup = (group: IAppRouteGroup, groupIndex: number) => {
+    // Special handling for Comments group
+    if (group.label === 'Comments') {
+      return (
+        <NavExpandable
+          key={`${group.label}-${groupIndex}`}
+          id={`${group.label}-${groupIndex}`}
+          title="Hale Commenting System"
+          isActive={group.routes.some((route) => route.path === location.pathname)}
+        >
+          <NavItem
+            onClick={(e) => {
+              e.stopPropagation();
+              setFloatingWidgetMode(!floatingWidgetMode);
+              if (!floatingWidgetMode) {
+                setDrawerPinnedOpen(false); // Close drawer if opening floating widget
+              }
+            }}
+            style={{ cursor: 'pointer' }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+              <ExternalLinkAltIcon />
+              <span>{floatingWidgetMode ? 'Close widget' : 'Pop out'}</span>
+            </div>
+          </NavItem>
+          <NavItem>
+            <div
+              data-comment-controls
+              style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingRight: '1rem' }}
+            >
+              <span>Enable Comments</span>
+              <Switch
+                id="comments-enabled-switch"
+                isChecked={commentsEnabled}
+                onChange={(_event, checked) => {
+                  setCommentsEnabled(checked);
+                  if (checked) {
+                    setDrawerPinnedOpen(true);
+                  }
+                }}
+                aria-label="Enable or disable comments"
+              />
+            </div>
+          </NavItem>
+          <NavItem>
+            <div
+              data-comment-controls
+              style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingRight: '1rem' }}
+            >
+              <span>Page info drawer</span>
+              <Switch
+                id="page-info-drawer-switch"
+                isChecked={drawerPinnedOpen}
+                onChange={(_event, checked) => setDrawerPinnedOpen(checked)}
+                aria-label="Pin page info drawer open"
+              />
+            </div>
+          </NavItem>
+          <NavItem>
+            <div
+              data-comment-controls
+              style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingRight: '1rem' }}
+            >
+              {isAuthenticated ? (
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+                    <GithubIcon />
+                    {user?.login ? `@${user.login}` : 'Signed in'}
+                  </span>
+                  <Button variant="link" isInline onClick={logout}>
+                    Sign out
+                  </Button>
+                </div>
+              ) : (
+                <Button variant="link" isInline icon={<GithubIcon />} onClick={login}>
+                  Sign in with GitHub
+                </Button>
+              )}
+            </div>
+          </NavItem>
+          {group.routes.map((route, idx) => route.label && renderNavItem(route, idx))}
+        </NavExpandable>
+      );
+    }
+
+    // Default handling for other groups
+    return (
+      <NavExpandable
+        key={`${group.label}-${groupIndex}`}
+        id={`${group.label}-${groupIndex}`}
+        title={group.label}
+        isActive={group.routes.some((route) => route.path === location.pathname)}
+      >
+        {group.routes.map((route, idx) => route.label && renderNavItem(route, idx))}
+      </NavExpandable>
+    );
+  };
+
+  const Navigation = (
+    <Nav id="nav-primary-simple">
+      <NavList id="nav-list-simple">
+        {routes.map(
+          (route, idx) => route.label && (!route.routes ? renderNavItem(route, idx) : renderNavGroup(route, idx)),
+        )}
+      </NavList>
+    </Nav>
+  );
+
+  const Sidebar = (
+    <PageSidebar>
+      <PageSidebarBody>{Navigation}</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  const pageId = 'primary-app-container';
+
+  const PageSkipToContent = (
+    <SkipToContent
+      onClick={(event) => {
+        event.preventDefault();
+        const primaryContentContainer = document.getElementById(pageId);
+        primaryContentContainer?.focus();
+      }}
+      href={`#${pageId}`}
+    >
+      Skip to Content
+    </SkipToContent>
+  );
+  return (
+    <Page
+      mainContainerId={pageId}
+      masthead={masthead}
+      sidebar={sidebarOpen && Sidebar}
+      skipToContent={PageSkipToContent}
+    >
+      <CommentPanel>
+        <CommentOverlay />
+        {children}
+      </CommentPanel>
+    </Page>
+  );
+};
+
+export { AppLayout };

package/src/app/Comments/Comments.tsx

@@ -0,0 +1,273 @@
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Button,
+  Card,
+  CardBody,
+  InputGroup,
+  InputGroupItem,
+  InputGroupText,
+  PageSection,
+  TextInput,
+  Title,
+} from '@patternfly/react-core';
+import { AngleDownIcon, AngleRightIcon, SearchIcon } from '@patternfly/react-icons';
+import { useComments } from '@app/commenting-system';
+
+const Comments: React.FunctionComponent = () => {
+  const navigate = useNavigate();
+  const { threads, setSelectedThreadId, setCommentsEnabled, setDrawerPinnedOpen } = useComments();
+  const [filter, setFilter] = React.useState('');
+  const [expanded, setExpanded] = React.useState<Record<string, boolean>>({});
+
+  // Dummy data so designers can see the intended table layout before any real comments exist.
+  const dummyThreads = React.useMemo(() => {
+    const now = Date.now();
+    return [
+      {
+        id: 'demo-thread-support-1',
+        route: '/support',
+        xPercent: 43.0,
+        yPercent: 68.3,
+        comments: [
+          { id: 'demo-c-1', text: 'The empty state is clear, but I’d prefer the primary CTA to be more prominent.', createdAt: new Date(now - 1000 * 60 * 55).toISOString() },
+          { id: 'demo-c-2', text: 'Can we add a short “How it works” blurb above the actions?', createdAt: new Date(now - 1000 * 60 * 48).toISOString() },
+          { id: 'demo-c-3', text: 'Spacing feels a little tight on smaller screens.', createdAt: new Date(now - 1000 * 60 * 35).toISOString() },
+          { id: 'demo-c-4', text: 'Love the hierarchy. Maybe add an icon to the primary action.', createdAt: new Date(now - 1000 * 60 * 22).toISOString() },
+          { id: 'demo-c-5', text: 'Could the secondary actions be collapsed into a kebab menu?', createdAt: new Date(now - 1000 * 60 * 12).toISOString() },
+        ],
+      },
+      {
+        id: 'demo-thread-projects-1',
+        route: '/projects',
+        xPercent: 27.5,
+        yPercent: 15.3,
+        comments: [
+          { id: 'demo-c-6', text: 'Filter dropdown should default to “All projects”.', createdAt: new Date(now - 1000 * 60 * 9).toISOString() },
+        ],
+      },
+      {
+        id: 'demo-thread-settings-1',
+        route: '/settings/general',
+        xPercent: 61.2,
+        yPercent: 42.7,
+        comments: [],
+      },
+    ];
+  }, []);
+
+  const isUsingDummyData = threads.length === 0;
+  const visibleThreads = isUsingDummyData ? dummyThreads : threads;
+
+  const normalizedFilter = filter.trim().toLowerCase();
+  const filteredThreads = visibleThreads
+    .filter((t) => {
+      if (!normalizedFilter) return true;
+      const haystack = `${t.route} ${t.xPercent} ${t.yPercent} ${(t.comments || []).map((c) => c.text).join(' ')}`.toLowerCase();
+      return haystack.includes(normalizedFilter);
+    })
+    .sort((a, b) => {
+      const aLast = a.comments?.[a.comments.length - 1]?.createdAt ?? '';
+      const bLast = b.comments?.[b.comments.length - 1]?.createdAt ?? '';
+      return bLast.localeCompare(aLast);
+    });
+
+  const toggleExpanded = (threadId: string) => {
+    setExpanded((prev) => ({ ...prev, [threadId]: !prev[threadId] }));
+  };
+
+  const goToPin = (threadId: string, route: string) => {
+    // Ensure visibility + open drawer on destination route
+    setCommentsEnabled(true);
+    setDrawerPinnedOpen(true);
+    setSelectedThreadId(threadId);
+    navigate(route);
+  };
+
+  const formatDate = (isoDate: string): string => {
+    if (!isoDate) return '—';
+    const date = new Date(isoDate);
+    return date.toLocaleString(undefined, {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    // Mark this page as "comment controls" so clicking around doesn't create pins
+    <PageSection data-comment-controls>
+      <Title headingLevel="h1" size="lg" style={{ marginBottom: 'var(--pf-t--global--spacer--sm)' }}>
+        View comments
+      </Title>
+      <p style={{ marginBottom: 'var(--pf-t--global--spacer--md)', color: 'var(--pf-t--global--text--color--subtle)' }}>
+        A <b>thread</b> is created when someone drops a pin on a screen. Expand a row to read comments, or use "Go to
+        pin" to jump to the exact spot.
+      </p>
+      <Card>
+        <CardBody>
+          {isUsingDummyData && (
+            <p
+              style={{
+                marginBottom: 'var(--pf-t--global--spacer--md)',
+                fontSize: 'var(--pf-t--global--font--size--sm)',
+                color: 'var(--pf-t--global--text--color--subtle)',
+              }}
+            >
+              Showing <b>sample data</b> (no real comment threads yet). Once pins/comments exist, this table will show
+              live data.
+            </p>
+          )}
+          <div style={{ display: 'flex', gap: 'var(--pf-t--global--spacer--sm)', marginBottom: 'var(--pf-t--global--spacer--md)' }}>
+            <InputGroup style={{ flex: 1 }}>
+              <InputGroupItem>
+                <InputGroupText>
+                  <SearchIcon />
+                </InputGroupText>
+              </InputGroupItem>
+              <InputGroupItem isFill>
+                <TextInput
+                  aria-label="Filter comments"
+                  value={filter}
+                  onChange={(_e, v) => setFilter(v)}
+                  placeholder="Search by page, text, or coordinates…"
+                />
+              </InputGroupItem>
+            </InputGroup>
+            <InputGroupItem>
+              <Button variant="secondary" onClick={() => setFilter('')} isDisabled={!filter.trim()}>
+                Clear
+              </Button>
+            </InputGroupItem>
+          </div>
+
+          <div style={{ overflowX: 'auto' }}>
+            <table className="pf-v6-c-table pf-m-grid-md" role="grid" aria-label="All comment threads table">
+              <thead className="pf-v6-c-table__thead">
+                <tr className="pf-v6-c-table__tr">
+                  <th className="pf-v6-c-table__th" scope="col" style={{ width: '3rem' }} />
+                  <th className="pf-v6-c-table__th" scope="col">
+                    Screen
+                  </th>
+                  <th className="pf-v6-c-table__th" scope="col">
+                    Pin location
+                  </th>
+                  <th className="pf-v6-c-table__th" scope="col">
+                    Comments
+                  </th>
+                  <th className="pf-v6-c-table__th" scope="col">
+                    Last activity
+                  </th>
+                  <th className="pf-v6-c-table__th" scope="col">
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="pf-v6-c-table__tbody">
+                {filteredThreads.length === 0 ? (
+                  <tr className="pf-v6-c-table__tr">
+                    <td className="pf-v6-c-table__td" colSpan={6}>
+                      No threads found.
+                    </td>
+                  </tr>
+                ) : (
+                  filteredThreads.map((thread) => {
+                    const isOpen = !!expanded[thread.id];
+                    const last = thread.comments?.[thread.comments.length - 1]?.createdAt ?? '';
+                    return (
+                      <React.Fragment key={thread.id}>
+                        <tr className="pf-v6-c-table__tr">
+                          <td className="pf-v6-c-table__td">
+                            <Button variant="plain" onClick={() => toggleExpanded(thread.id)} aria-label="Toggle thread">
+                              {isOpen ? <AngleDownIcon /> : <AngleRightIcon />}
+                            </Button>
+                          </td>
+                          <td className="pf-v6-c-table__td">
+                            <Button
+                              variant="link"
+                              isInline
+                              onClick={() => {
+                                if (!isUsingDummyData) goToPin(thread.id, thread.route);
+                              }}
+                              isDisabled={isUsingDummyData}
+                            >
+                              {thread.route}
+                            </Button>
+                          </td>
+                          <td className="pf-v6-c-table__td">
+                            ({thread.xPercent.toFixed(1)}%, {thread.yPercent.toFixed(1)}%)
+                          </td>
+                          <td className="pf-v6-c-table__td">{thread.comments.length}</td>
+                          <td className="pf-v6-c-table__td">{formatDate(last)}</td>
+                          <td className="pf-v6-c-table__td">
+                            <Button
+                              variant="secondary"
+                              onClick={() => {
+                                if (!isUsingDummyData) goToPin(thread.id, thread.route);
+                              }}
+                              isDisabled={isUsingDummyData}
+                            >
+                              Go to pin
+                            </Button>
+                          </td>
+                        </tr>
+
+                        {isOpen && (
+                          <tr className="pf-v6-c-table__tr">
+                            <td className="pf-v6-c-table__td" colSpan={6}>
+                              <div
+                                style={{
+                                  display: 'grid',
+                                  gap: 'var(--pf-t--global--spacer--sm)',
+                                  padding: 'var(--pf-t--global--spacer--md)',
+                                }}
+                              >
+                                {thread.comments.length === 0 ? (
+                                  <p style={{ color: 'var(--pf-t--global--text--color--subtle)' }}>No comments yet.</p>
+                                ) : (
+                                  thread.comments.map((c, idx) => (
+                                    <Card key={c.id} isCompact>
+                                      <CardBody>
+                                        <div style={{ fontWeight: 'var(--pf-t--global--font--weight--bold)' }}>
+                                          Comment #{idx + 1}
+                                        </div>
+                                        <div
+                                          style={{
+                                            fontSize: 'var(--pf-t--global--font--size--sm)',
+                                            color: 'var(--pf-t--global--text--color--subtle)',
+                                            marginTop: 'var(--pf-t--global--spacer--xs)',
+                                          }}
+                                        >
+                                          @— &nbsp; {formatDate(c.createdAt)}
+                                        </div>
+                                        <div
+                                          style={{
+                                            marginTop: 'var(--pf-t--global--spacer--sm)',
+                                            whiteSpace: 'pre-wrap',
+                                          }}
+                                        >
+                                          {c.text}
+                                        </div>
+                                      </CardBody>
+                                    </Card>
+                                  ))
+                                )}
+                              </div>
+                            </td>
+                          </tr>
+                        )}
+                      </React.Fragment>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+        </CardBody>
+      </Card>
+    </PageSection>
+  );
+};
+
+export { Comments };

package/src/app/Dashboard/Dashboard.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { PageSection, Title } from '@patternfly/react-core';
+
+const Dashboard: React.FunctionComponent = () => (
+  <PageSection hasBodyWrapper={false}>
+    <Title headingLevel="h1" size="lg">Dashboard Page Title!</Title>
+  </PageSection>
+)
+
+export { Dashboard };

package/src/app/NotFound/NotFound.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
+import {
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateFooter,
+  PageSection,
+} from '@patternfly/react-core';
+import { useNavigate } from 'react-router-dom';
+
+const NotFound: React.FunctionComponent = () => {
+  function GoHomeBtn() {
+    const navigate = useNavigate();
+    function handleClick() {
+      navigate('/');
+    }
+    return (
+      <Button onClick={handleClick}>Take me home</Button>
+    );
+  }
+
+  return (
+    <PageSection hasBodyWrapper={false}>
+      <EmptyState titleText="404 Page not found" variant="full" icon={ExclamationTriangleIcon} >
+        <EmptyStateBody>
+          We didn&apos;t find a page that matches the address you navigated to.
+        </EmptyStateBody><EmptyStateFooter>
+        <GoHomeBtn />
+      </EmptyStateFooter></EmptyState>
+    </PageSection>
+  )
+};
+
+export { NotFound };

package/src/app/Settings/General/GeneralSettings.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { PageSection, Title } from '@patternfly/react-core';
+import { useDocumentTitle } from '@app/utils/useDocumentTitle';
+
+const GeneralSettings: React.FunctionComponent = () => {
+  useDocumentTitle("General Settings");
+  return (
+    <PageSection hasBodyWrapper={false}>
+      <Title headingLevel="h1" size="lg">
+        General Settings Page Title
+      </Title>
+    </PageSection>
+  );
+}
+
+export { GeneralSettings };

package/src/app/Settings/Profile/ProfileSettings.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { PageSection, Title } from '@patternfly/react-core';
+import { useDocumentTitle } from '@app/utils/useDocumentTitle';
+
+const ProfileSettings: React.FunctionComponent = () => {
+  useDocumentTitle("Profile Settings");
+
+  return (
+    <PageSection hasBodyWrapper={false}>
+      <Title headingLevel="h1" size="lg">
+        Profile Settings Page Title
+      </Title>
+    </PageSection>
+  );
+
+}
+
+export { ProfileSettings };

package/src/app/Support/Support.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { CubesIcon } from '@patternfly/react-icons';
+import {
+  Button,
+  Content,
+  ContentVariants,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateVariant,
+  PageSection,
+} from '@patternfly/react-core';
+
+export interface ISupportProps {
+  sampleProp?: string;
+}
+
+// eslint-disable-next-line prefer-const
+let Support: React.FunctionComponent<ISupportProps> = () => (
+  <PageSection hasBodyWrapper={false}>
+    <EmptyState variant={EmptyStateVariant.full} titleText="Empty State (Stub Support Module)" icon={CubesIcon}>
+      <EmptyStateBody>
+        <Content>
+          <Content component="p">
+            This represents an the empty state pattern in Patternfly. Hopefully it&apos;s simple enough to use but
+            flexible enough to meet a variety of needs.
+          </Content>
+          <Content component={ContentVariants.small}>
+            This text has overridden a css component variable to demonstrate how to apply customizations using
+            PatternFly&apos;s CSS tokens.
+          </Content>
+        </Content>
+      </EmptyStateBody>
+      <EmptyStateFooter>
+        <Button variant="primary">Primary Action</Button>
+        <EmptyStateActions>
+          <Button variant="link">Multiple</Button>
+          <Button variant="link">Action Buttons</Button>
+          <Button variant="link">Can</Button>
+          <Button variant="link">Go here</Button>
+          <Button variant="link">In the secondary</Button>
+          <Button variant="link">Action area</Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  </PageSection>
+);
+
+export { Support };