Fit scratch toolbar onto one row when possible (#548)

* refactor scratch actions to its own component

* move toolbar actions into nav area

* fit ScratchToolbar on one line where possible

* fix HydrationError

* reduce wasted space by calculating layout in js

* avoid layout shift when edit time changes

* move edit time next to scratch name

* stop showing "Active now" after time

* align edit time on baseline

* drop 'Edited' prefix

Author: Alex Bates

frontend/package.json

@@ -50,6 +50,7 @@
         "@svgr/webpack": "^6.2.1",
         "@types/diff": "^5.0.2",
         "@types/react-modal": "^3.13.1",
+        "@types/react-timeago": "^4.1.3",
         "@types/react-virtualized-auto-sizer": "^1.0.1",
         "@types/react-window": "^1.8.5",
         "@typescript-eslint/eslint-plugin": "^5.0.0",

frontend/src/components/Breadcrumbs.module.scss

@@ -8,7 +8,7 @@
         list-style: none;
 
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         align-items: stretch;
 
         // Page links
@@ -38,7 +38,7 @@
             content: "";
 
             display: inline-block;
-            margin: 0 0.7em;
+            margin: 0 0.7em 0 0.4em;
 
             width: 0.5em;
             height: 0.5em;

frontend/src/components/Button.module.scss

@@ -5,6 +5,8 @@
     font-size: 0.8rem;
     font-weight: 500;
 
+    white-space: nowrap;
+
     user-select: none;
     appearance: none;
 

frontend/src/components/Nav/Nav.module.scss

@@ -6,13 +6,15 @@ $padding: 8px;
     user-select: none;
     background: var(--g300);
 
+    z-index: 2;
+
     ul {
         list-style: none;
     }
 }
 
 .header {
-    height: $innerSize;
+    min-height: $innerSize;
     padding: $padding;
     box-sizing: content-box;
 
@@ -21,10 +23,8 @@ $padding: 8px;
     grid-template-areas: "menutoggle sitelogo loginstate";
     justify-content: space-between;
 
-    border-bottom: 1px solid var(--g500);
-
     & > li {
-        height: $innerSize;
+        min-height: $innerSize;
     }
 }
 
@@ -34,9 +34,10 @@ $padding: 8px;
     & > button {
         width: $innerSize;
         height: $innerSize;
+
         border: none;
         background: transparent;
-        border-radius: 4px;
+
         cursor: pointer;
     }
 }
@@ -45,8 +46,10 @@ $padding: 8px;
     grid-area: loginstate;
 
     display: flex;
+    align-items: center;
     justify-content: flex-end;
 
+    height: $innerSize;
     padding-left: 12px;
 }
 
@@ -122,17 +125,34 @@ $padding: 8px;
         display: none;
         visibility: hidden;
     }
+}
+
+@mixin borderBottomNoLayoutShift {
+    padding-bottom: $padding - 1px;
+    border-bottom: 1px solid var(--g600);
+}
+
+.border .header {
+    @include borderBottomNoLayoutShift;
+}
+
+// Sidebar
+@media (min-width: 500px) {
+    .container[data-open="true"] .header {
+        @include borderBottomNoLayoutShift;
+    }
 
-    // sidebar (tablets, desktop + data-force-toggle="true")
-    @media (min-width: 500px) {
+    .menu {
         width: 300px;
-        border-right: 1px solid var(--g500);
+        border-right: 1px solid var(--g600);
+
+        // Cover up header's border-bottom
+        box-shadow: -2px 0 0 2px var(--g300);
     }
 }
 
 .searchContainer {
     padding: $padding;
-    border-bottom: 1px solid var(--g500);
 }
 
 .search {
@@ -146,7 +166,7 @@ $padding: 8px;
         padding: 1.5 * $padding;
 
         &:not(:last-child) {
-            border-bottom: 1px solid var(--g500);
+            border-bottom: 1px solid var(--g400);
         }
 
         a {
@@ -222,6 +242,8 @@ $padding: 8px;
         display: flex;
         align-items: center;
         width: 100%;
+
+        overflow: hidden;
     }
 }
 

frontend/src/components/Nav/Nav.tsx

@@ -4,17 +4,19 @@ import Link from "next/link"
 import { useRouter } from "next/router"
 
 import { ThreeBarsIcon, XIcon } from "@primer/octicons-react"
+import classNames from "classnames"
 
 import Frog from "./frog.svg"
 import LoginState from "./LoginState"
 import styles from "./Nav.module.scss"
 import Search from "./Search"
 
 export interface Props {
+    border?: boolean
     children?: React.ReactNode
 }
 
-export default function Nav({ children }: Props) {
+export default function Nav({ border, children }: Props) {
     const [isOpen, toggleOpen] = useReducer(isOpen => !isOpen, false)
     const toggleLabel = `${isOpen ? "Close" : "Open"} Global Navigation Menu`
     const router = useRouter()
@@ -51,7 +53,10 @@ export default function Nav({ children }: Props) {
     }, [isOpen])
 
     return <nav
-        className={styles.container}
+        className={classNames({
+            [styles.container]: true,
+            [styles.border]: border,
+        })}
         aria-labelledby="navtoggle"
         data-open={isOpen}
         data-force-toggle={!!children}

frontend/src/components/Scratch/AboutScratch.module.scss

@@ -116,10 +116,6 @@
     margin-right: 6px;
 }
 
-.signInPrompt {
-    margin-left: 16px;
-}
-
 .projectFunctionLinks {
     a:last-child {
         color: var(--g800);

frontend/src/components/Scratch/AboutScratch.tsx

@@ -4,15 +4,13 @@ import TimeAgo from "react-timeago"
 import useSWR from "swr"
 
 import * as api from "../../lib/api"
-import GitHubLoginButton from "../GitHubLoginButton"
 import LoadingSpinner from "../loading.svg"
 import PlatformIcon from "../PlatformSelect/PlatformIcon"
 import PlatformName from "../PlatformSelect/PlatformName"
 import { getScoreText } from "../ScoreBadge"
 import UserLink from "../user/UserLink"
 
 import styles from "./AboutScratch.module.scss"
-import ClaimScratchButton from "./buttons/ClaimScratchButton"
 
 function ScratchLink({ url }: { url: string }) {
     const { data: scratch, error } = useSWR<api.Scratch>(url, api.get)
@@ -60,7 +58,6 @@ export type Props = {
 }
 
 export default function AboutScratch({ scratch, setScratch }: Props) {
-    const userIsYou = api.useUserIsYou()
     const { data: project } = useSWR<api.Project>(scratch.project, api.get)
     const { data: projectFunction } = useSWR<api.ProjectFunction>(scratch.project_function, api.get)
 
@@ -72,13 +69,7 @@ export default function AboutScratch({ scratch, setScratch }: Props) {
             </div>
             {<div className={styles.horizontalField}>
                 <p className={styles.label}>Owner</p>
-                {scratch.owner
-                    ? <UserLink user={scratch.owner} />
-                    : <ClaimScratchButton scratch={scratch} />
-                }
-                {scratch.owner?.is_anonymous && userIsYou(scratch.owner)
-                    && <GitHubLoginButton popup label="Sign in to keep" className={styles.signInPrompt} />
-                }
+                {scratch.owner && <UserLink user={scratch.owner} />}
             </div>}
             {scratch.parent &&<div className={styles.horizontalField}>
                 <p className={styles.label}>Fork of</p>

frontend/src/components/Scratch/Scratch.tsx

@@ -291,7 +291,6 @@ export default function Scratch({
             setScratch={setScratch}
             setDecompilationTabEnabled={setDecompilationTabEnabled}
         />
-        <hr />
         {layout && <CustomLayout
             layout={layout}
             onChange={setLayout}