-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Change "dashboard" to "view" so pages can share sidebar layout * Rename nav to sidebar, apply only to `/view/*` * Group layouts without changing URLs: Discovered this https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-of-layouts * Move generations to sidebar * Merge branch 'main' into sidebar-layout * New GenerationList, simple sorted list of links * Some polish on the sidebar Signed-off-by: Frank Noirot <[email protected]> * Add icons, start polishing view page * Make error version of view page * Persist generations to localStorage * Change "This Week" to "Past 7 Days" * Invalidate threlte renderer on navigation or resize * Add links to billing and github issues * Fix broken conditional for failed submissions * UX polish * Add mobile styling, sidebar * Make prompt text box auto-resize, other polish * preserve query params through homepage redirect * UX polish, colors and submit on enter for textarea * Polish error styling on view page * Polish dashboard, separate out components * Make some 3D lights move with camera * Add screen read labels to feedback buttons * Polish model color and resizing thank you to the @threlte team for setting me straight here: threlte/threlte#817 (comment) * Tablet polish and copy tweak * Add storage version key, remove @square/svelte-store * Remove logs, misc UX polish * Fix new prompt button dark mode hover * Trim prompt text * Add first integration test * Fix unit tests for time buckets * Try adding GitHub CI action * Switch to only do unit tests in CI for now * Remove Playwright steps * Fixes found after user testing * Make polling work better * Clean up home page responsive styles * @jessfraz feedback * Fix endless refresh after model completion --------- Signed-off-by: Frank Noirot <[email protected]>
- Loading branch information
1 parent
eea13bf
commit 3d02177
Showing
48 changed files
with
5,725 additions
and
678 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| VITE_API_BASE_URL=https://api.dev.zoo.dev | ||
| VITE_SITE_BASE_URL=https://dev.zoo.dev | ||
| PLAYWRIGHT_SESSION_COOKIE='' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| name: Unit Tests | ||
| on: | ||
| push: | ||
| branches: [main] | ||
| pull_request: | ||
| branches: [main] | ||
| jobs: | ||
| main: | ||
| timeout-minutes: 10 | ||
| runs-on: macos-latest | ||
| steps: | ||
| - uses: actions/checkout@v4 | ||
| - uses: actions/setup-node@v4 | ||
| with: | ||
| node-version-file: '.nvmrc' | ||
| cache: 'yarn' | ||
| - name: Install dependencies | ||
| run: yarn | ||
| - name: Run integration tests | ||
| run: yarn test:unit run | ||
| env: | ||
| CI: true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| v20.5.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,42 @@ | ||
| import type { PlaywrightTestConfig } from '@playwright/test' | ||
| import { AUTH_COOKIE_NAME } from './src/lib/cookies' | ||
| import dotenv from 'dotenv' | ||
| import path from 'path' | ||
|
|
||
| dotenv.config({ path: path.resolve(path.dirname('.'), '.env.development') }) | ||
| const expiration = new Date() | ||
| expiration.setFullYear(expiration.getFullYear() + 1) | ||
|
|
||
| const config: PlaywrightTestConfig = { | ||
| use: { | ||
| baseURL: 'https://localhost:3000', | ||
| storageState: { | ||
| cookies: [ | ||
| { | ||
| name: AUTH_COOKIE_NAME, | ||
| value: process.env.PLAYWRIGHT_SESSION_COOKIE ?? '', | ||
| domain: 'localhost', | ||
| path: '/', | ||
| expires: expiration.getTime() / 1000, | ||
| httpOnly: true, | ||
| secure: true, | ||
| sameSite: 'None' | ||
| } | ||
| ], | ||
| origins: [ | ||
| { | ||
| origin: 'https://localhost:3000', | ||
| localStorage: [] | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| webServer: { | ||
| command: 'npm run build && npm run preview', | ||
| port: 4173 | ||
| command: 'yarn dev', | ||
| port: 3000 | ||
| }, | ||
| testDir: 'tests', | ||
| testMatch: /(.+\.)?(test|spec)\.[jt]s/ | ||
| testMatch: /(.+\.)?(playwright)\.[jt]s/ | ||
| } | ||
|
|
||
| export default config |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,6 +2,7 @@ | |
| import type { Models } from '@kittycad/lib' | ||
| import { paths } from '$lib/paths' | ||
| import Person from './Icons/Person.svelte' | ||
| import ArrowRight from './Icons/ArrowRight.svelte' | ||
| export let user: Models['User_type'] | ||
| let open = false | ||
|
|
@@ -11,6 +12,14 @@ | |
| ((user?.name && user.name.length > 0) || | ||
| (user?.first_name && user.first_name.length > 0) || | ||
| (user?.email && user.email.length > 0)) | ||
| let displayName = | ||
| user?.first_name && user.first_name.length > 0 | ||
| ? (user.first_name + (user.last_name ? ' ' + user.last_name : '')).trim() | ||
| : user?.name && user.name.length > 0 | ||
| ? user.name | ||
| : user?.email && user.email.length > 0 | ||
| ? user.email | ||
| : 'Unnamed User' | ||
| function dismiss(e: KeyboardEvent) { | ||
| if (e.key === 'Escape') { | ||
|
|
@@ -19,55 +28,74 @@ | |
| } | ||
| </script> | ||
|
|
||
| <div class={'relative flex justify-center items-center ' + (open ? 'open' : '')}> | ||
| <div class={'relative flex ' + (open ? 'open' : '')}> | ||
| <button | ||
| class={'toggle grid place-content-center border border-solid hover:border-green overflow-hidden bg-currentColor w-8 h-8 md:w-12 md:h-12 ' + | ||
| (shouldDisplayInitial || shouldDisplayImage ? 'rounded-full' : 'rounded')} | ||
| class="flex flex-auto items-center gap-2" | ||
| on:click={() => { | ||
| open = !open | ||
| }} | ||
| on:keydown={dismiss} | ||
| > | ||
| <img | ||
| src={user.image} | ||
| alt="Avatar" | ||
| class="object-fill" | ||
| style={`display: ${shouldDisplayImage ? 'block' : 'none'}`} | ||
| referrerpolicy="no-referrer" | ||
| /> | ||
| {#if shouldDisplayInitial} | ||
| <span | ||
| class="w-5 h-5 font-bold text-xl leading-[1] pt-0.5 text-center text-chalkboard-10 dark:text-chalkboard-120" | ||
| data-testid="initial" | ||
| > | ||
| {user.name?.[0] || user.first_name?.[0] || user.email?.[0]} | ||
| </span> | ||
| {:else if !shouldDisplayImage} | ||
| <Person | ||
| data-testid="person-icon" | ||
| class="w-full text-chalkboard-10 dark:text-chalkboard-120" | ||
| <div | ||
| class={'toggle grid place-content-center border border-solid hover:border-green overflow-hidden bg-currentColor w-8 h-8 md:w-12 md:h-12 ' + | ||
| (shouldDisplayInitial || shouldDisplayImage ? 'rounded-full' : 'rounded')} | ||
| > | ||
| <img | ||
| src={user?.image} | ||
| alt="Avatar" | ||
| class="object-fill" | ||
| style={`display: ${shouldDisplayImage ? 'block' : 'none'}`} | ||
| referrerpolicy="no-referrer" | ||
| /> | ||
| {/if} | ||
| <span class="sr-only">Open menu</span> | ||
| {#if shouldDisplayInitial} | ||
| <span | ||
| class="uppercase w-5 h-5 font-bold text-xl leading-[1] pt-0.5 text-center text-chalkboard-10 dark:text-chalkboard-120" | ||
| data-testid="initial" | ||
| > | ||
| {user.name?.[0] || user.first_name?.[0] || user.email?.[0]} | ||
| </span> | ||
| {:else if !shouldDisplayImage} | ||
| <Person | ||
| data-testid="person-icon" | ||
| class="w-full text-chalkboard-10 dark:text-chalkboard-120" | ||
| /> | ||
| {/if} | ||
| </div> | ||
| <span class="mt-0.5 font-mono">{displayName}</span> | ||
| </button> | ||
| <dialog class="menu"> | ||
| <menu class="contents"> | ||
| <div class="p-4 pb-2"> | ||
| <p class="font-mono"> | ||
| {user?.first_name | ||
| ? user.first_name + (user.last_name ? user.last_name : '') | ||
| ? user.first_name + (user.last_name ? ' ' + user.last_name : '') | ||
| : user?.name || 'Unnamed User'} | ||
| </p> | ||
| <p class="font-mono text-sm text-chalkboard-70 dark:text-chalkboard-40"> | ||
| {user?.email || '[email protected]'} | ||
| </p> | ||
| </div> | ||
| <a | ||
| data-sveltekit-reload | ||
| href={paths.SIGN_OUT} | ||
| class="text-sm font-mono uppercase tracking-[1px] hover:bg-green hover:text-chalkboard-120 text-center px-4 py-2 border-t" | ||
| href={paths.ZOO_BILLING} | ||
| class="menu-button" | ||
| on:keydown={dismiss} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <span>Billing Info</span> | ||
| <ArrowRight class="w-5 h-5 inline-block origin-center -rotate-45 ml-1" /> | ||
| </a> | ||
| <a | ||
| href={paths.GITHUB_NEW_ISSUE} | ||
| class="menu-button" | ||
| on:keydown={dismiss} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <span>Report UI Issue</span> | ||
| <ArrowRight class="w-5 h-5 inline-block origin-center -rotate-45 ml-1" /> | ||
| </a> | ||
| <a data-sveltekit-reload href={paths.SIGN_OUT} class="menu-button" on:keydown={dismiss}> | ||
| Sign Out | ||
| </a> | ||
| </menu> | ||
|
|
@@ -76,33 +104,42 @@ | |
|
|
||
| <style lang="postcss"> | ||
| .menu { | ||
| @apply absolute top-full -right-4; | ||
| @apply z-10 mt-1 mr-0; | ||
| @apply absolute bottom-full left-0; | ||
| @apply z-10 mb-2; | ||
| @apply text-chalkboard-120 dark:text-chalkboard-10; | ||
| @apply bg-white dark:bg-chalkboard-90; | ||
| @apply border-solid border-2 border-chalkboard-100; | ||
| @apply border border-chalkboard-100 dark:border-chalkboard-20; | ||
| @apply flex flex-col gap-5; | ||
| @apply w-screen text-right; | ||
| @apply flex flex-col; | ||
| @apply w-screen; | ||
| max-inline-size: min(90vw, 250px); | ||
| min-inline-size: 150px; | ||
| @apply shadow-md; | ||
| /* These will transition in */ | ||
| pointer-events: none; | ||
| opacity: 0; | ||
| translate: 1px 10px; | ||
| translate: -1px 10px; | ||
| transition: transform 0.2s ease-out, opacity 0.1s ease-out; | ||
| } | ||
| .open .menu { | ||
| pointer-events: auto; | ||
| opacity: 1; | ||
| translate: 1px 0px; | ||
| translate: -1px 0px; | ||
| } | ||
| .open .toggle::after { | ||
| content: ''; | ||
| @apply fixed inset-0 z-0 bg-chalkboard-110/20; | ||
| @apply pointer-events-auto; | ||
| } | ||
| .menu-button { | ||
| @apply uppercase tracking-[1px] hover:bg-green hover:text-chalkboard-120; | ||
| @apply flex gap-2 justify-center items-center text-sm font-mono text-center px-4 py-2 border-t; | ||
| } | ||
| .menu-button span { | ||
| @apply pt-0.5; | ||
| } | ||
| </style> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.