diff --git a/packages/host/app/components/operator-mode/submode-layout.gts b/packages/host/app/components/operator-mode/submode-layout.gts index f801d63b65c..18d5cad2870 100644 --- a/packages/host/app/components/operator-mode/submode-layout.gts +++ b/packages/host/app/components/operator-mode/submode-layout.gts @@ -102,6 +102,13 @@ type PanelWidths = { export default class SubmodeLayout extends Component { @tracked private searchSheetMode: SearchSheetMode = SearchSheetModes.Closed; @tracked private profileSummaryOpened = false; + @tracked private sortOrder: 'default' | 'hosted-only' = 'default'; + + @action private setSortOrder(event: Event) { + this.sortOrder = (event.target as HTMLSelectElement).value as + | 'default' + | 'hosted-only'; + } private aiPanelWidths: PanelWidths = new TrackedObject({ defaultWidth: 30, @@ -401,6 +408,20 @@ export default class SubmodeLayout extends Component { {{on 'click' this.toggleWorkspaceChooser}} data-test-workspace-chooser-toggle /> + {{#if this.workspaceChooserOpened}} +
+ + +
+ {{/if}} {{#if (not this.workspaceChooserOpened)}} { {{#if this.workspaceChooserOpened}} - + {{/if}} {{yield @@ -574,6 +598,50 @@ export default class SubmodeLayout extends Component { gap: var(--operator-mode-spacing); } + .sort-controls { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + display: flex; + align-items: center; + gap: 10px; + pointer-events: auto; + } + .sort-label { + color: rgba(255 255 255 / 50%); + font: 400 var(--boxel-font-sm); + letter-spacing: var(--boxel-lsp); + white-space: nowrap; + } + .sort-dropdown { + appearance: none; + background-color: rgba(255 255 255 / 8%); + border: 1px solid rgba(255 255 255 / 25%); + border-radius: 7px; + color: var(--boxel-light); + cursor: pointer; + font: 400 var(--boxel-font-sm); + letter-spacing: var(--boxel-lsp); + padding: 6px 32px 6px 14px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 12px center; + transition: border-color 0.15s ease, background-color 0.15s ease; + } + .sort-dropdown:hover { + background-color: rgba(255 255 255 / 12%); + border-color: rgba(255 255 255 / 50%); + } + .sort-dropdown:focus { + outline: none; + border-color: rgba(255 255 255 / 50%); + } + .sort-dropdown option { + background-color: #1a1628; + color: var(--boxel-light); + } + .submode-switcher { border: none; border-radius: var(--submode-bar-item-border-radius); diff --git a/packages/host/app/components/operator-mode/workspace-chooser/add-workspace.gts b/packages/host/app/components/operator-mode/workspace-chooser/add-workspace.gts index af9c4ea52aa..aca990fd591 100644 --- a/packages/host/app/components/operator-mode/workspace-chooser/add-workspace.gts +++ b/packages/host/app/components/operator-mode/workspace-chooser/add-workspace.gts @@ -234,9 +234,7 @@ export default class AddWorkspace extends Component { data-test-add-workspace >
- -
- New workspace +
{{#if this.isModalOpen}} @@ -257,7 +255,7 @@ export default class AddWorkspace extends Component { {{/if}} } diff --git a/packages/host/app/components/operator-mode/workspace-chooser/item-container.gts b/packages/host/app/components/operator-mode/workspace-chooser/item-container.gts index 27ec29c2a6a..78f3e4a2913 100644 --- a/packages/host/app/components/operator-mode/workspace-chooser/item-container.gts +++ b/packages/host/app/components/operator-mode/workspace-chooser/item-container.gts @@ -14,15 +14,28 @@ const WorkspaceChooserItemContainer: TemplateOnlyComponent = + +} diff --git a/packages/host/app/components/operator-mode/workspace-chooser/workspace.gts b/packages/host/app/components/operator-mode/workspace-chooser/workspace.gts index bf24317ea3b..2295203ea19 100644 --- a/packages/host/app/components/operator-mode/workspace-chooser/workspace.gts +++ b/packages/host/app/components/operator-mode/workspace-chooser/workspace.gts @@ -2,13 +2,13 @@ import { on } from '@ember/modifier'; import { action } from '@ember/object'; import { service } from '@ember/service'; import Component from '@glimmer/component'; -import { cached } from '@glimmer/tracking'; +import { cached, tracked } from '@glimmer/tracking'; import { task } from 'ember-concurrency'; -import { RealmIcon } from '@cardstack/boxel-ui/components'; -import { cssVar } from '@cardstack/boxel-ui/helpers'; -import { Group, IconGlobe, Lock } from '@cardstack/boxel-ui/icons'; +import { BoxelDropdown, ContextButton, Menu, RealmIcon } from '@cardstack/boxel-ui/components'; +import { MenuItem, cssVar } from '@cardstack/boxel-ui/helpers'; +import { Group, IconGlobe, IconTrash, Lock, Star, StarFilled } from '@cardstack/boxel-ui/icons'; import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service'; import type RealmService from '@cardstack/host/services/realm'; @@ -17,7 +17,7 @@ import ItemContainer from './item-container'; import WorkspaceLoadingIndicator from './workspace-loading-indicator'; interface Signature { - Element: HTMLButtonElement; + Element: HTMLDivElement; Args: { realmURL: string; }; @@ -28,34 +28,141 @@ export default class Workspace extends Component { {{#if this.loadRealmTask.isRunning}} {{else}} - -
+ - -
- +
+
+ +
+ + +
+ + <:trigger as |bindings|> + + + <:content as |dd|> + + +
{{this.name}} {{this.visibility}} + > + + {{this.visibility}} +
- +
{{/if}} + @tracked isFavorited = false; + @service declare private operatorModeStateService: OperatorModeStateService; @service declare private realm: RealmService; @@ -135,13 +249,35 @@ export default class Workspace extends Component { @cached private get realmInfo() { - return this.realm.info(this.args.realmURL); + const info = this.realm.info(this.args.realmURL); + if (info.name === 'Boxel Skills') { + return { ...info, iconURL: '/assets/images/wrench-realm-icon.svg' }; + } + if (info.name === 'Cardstack Catalog') { + return { ...info, iconURL: '/assets/images/boxel-icon-figma.svg' }; + } + return info; } private get name() { return this.realmInfo.name; } + get tileMenuItems() { + return [ + new MenuItem({ + label: this.isFavorited ? 'Unfavorite' : 'Favorite', + icon: this.isFavorited ? StarFilled : Star, + action: this.toggleFavorite, + }), + new MenuItem({ label: 'Delete Workspace', icon: IconTrash, action: () => {}, dangerous: true }), + ]; + } + + @action toggleFavorite() { + this.isFavorited = !this.isFavorited; + } + private get backgroundURL() { return this.realmInfo.backgroundURL; } diff --git a/packages/host/public/assets/delete-workspace-warning.png b/packages/host/public/assets/delete-workspace-warning.png new file mode 100644 index 00000000000..83c76f1e483 --- /dev/null +++ b/packages/host/public/assets/delete-workspace-warning.png @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/host/public/assets/images/all-cards-preview.png b/packages/host/public/assets/images/all-cards-preview.png new file mode 100644 index 00000000000..8e05c5ec22b Binary files /dev/null and b/packages/host/public/assets/images/all-cards-preview.png differ diff --git a/packages/host/public/assets/images/boxel-homepage-preview.png b/packages/host/public/assets/images/boxel-homepage-preview.png new file mode 100644 index 00000000000..97f8380c8fd Binary files /dev/null and b/packages/host/public/assets/images/boxel-homepage-preview.png differ diff --git a/packages/host/public/assets/images/boxel-icon-figma.png b/packages/host/public/assets/images/boxel-icon-figma.png new file mode 100644 index 00000000000..e5f2cb38423 --- /dev/null +++ b/packages/host/public/assets/images/boxel-icon-figma.png @@ -0,0 +1,3 @@ + + + diff --git a/packages/host/public/assets/images/boxel-icon-figma.svg b/packages/host/public/assets/images/boxel-icon-figma.svg new file mode 100644 index 00000000000..18945339e17 --- /dev/null +++ b/packages/host/public/assets/images/boxel-icon-figma.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/host/public/assets/images/cardstack-catalog-preview.png b/packages/host/public/assets/images/cardstack-catalog-preview.png new file mode 100644 index 00000000000..adedbbe2829 Binary files /dev/null and b/packages/host/public/assets/images/cardstack-catalog-preview.png differ diff --git a/packages/host/public/assets/images/cardstack-realm-icon.svg b/packages/host/public/assets/images/cardstack-realm-icon.svg new file mode 100644 index 00000000000..4e05a284b62 --- /dev/null +++ b/packages/host/public/assets/images/cardstack-realm-icon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/host/public/assets/images/coding-blog-mock.html b/packages/host/public/assets/images/coding-blog-mock.html new file mode 100644 index 00000000000..520c1ed02c8 --- /dev/null +++ b/packages/host/public/assets/images/coding-blog-mock.html @@ -0,0 +1,156 @@ + + + + + + ByteStack — A Developer Blog + + + +
+ + +
+
+ Featured +

Building a Type-Safe API Layer with TypeScript Generics

+

Stop writing repetitive fetch wrappers. Here's how generics let you express your entire API contract in one elegant abstraction.

+
+
+ Maya Chen · Mar 7 · 8 min read +
+
+
+
+
React
+

Why I Stopped Using useEffect for Data Fetching

+

A deep dive into async patterns that actually compose well.

+
+ 6 min + · + Mar 5 +
+
+
+
Rust
+

Memory Safety Without Garbage Collection: A Practical Guide

+

The borrow checker explained through real-world examples.

+
+ 12 min + · + Mar 3 +
+
+
+
CSS
+

Container Queries Are Finally Here — And They're Better Than Media Queries

+
+ 4 min + · + Feb 28 +
+
+
+ + diff --git a/packages/host/public/assets/images/mock-cms.html b/packages/host/public/assets/images/mock-cms.html new file mode 100644 index 00000000000..afea5fe65b7 --- /dev/null +++ b/packages/host/public/assets/images/mock-cms.html @@ -0,0 +1,83 @@ + + + + + Prism — Content Studio + + + +
+ +
+ New Post
+
+
+
All
+
Published
+
Drafts
+
Scheduled
+
+
+
+
+
Q2 Product Launch Campaign
+ Published +
+
📣 Email · Blog · Social
+
+ Mar 8 · 4 min read + 1.2k views +
+
+
+
+
Spring Brand Refresh — Style Guide Update
+ In Review +
+
🎨 Brand
+
+ Mar 7 · Updated 2h ago +
+
+
+
+
Newsletter: Developer Spotlight #12
+ Draft +
+
✉️ Newsletter
+
+ Mar 5 · 60% complete +
+
+
+
+
SEO Audit — Homepage Copy Revisions
+ Published +
+
🌐 Website
+
+ Mar 3 · 843 views +
+
+
+ + diff --git a/packages/host/public/assets/images/mock-data-browser.html b/packages/host/public/assets/images/mock-data-browser.html new file mode 100644 index 00000000000..cdabdb6ea05 --- /dev/null +++ b/packages/host/public/assets/images/mock-data-browser.html @@ -0,0 +1,67 @@ + + + + + Vault — Data Explorer + + + +
+ +
db / users
+
+
+ + +
+
+
users
+
orders
+
products
+
events
+
+ + + + + + + + + + + + + + + + + + + +
id intname strplan strcreated
1Alice Chenpro2024-01-12
2Bob Ramosfree2024-01-14
3Priya Singhteam2024-02-03
4Marco Liunull2024-02-17
5Sara Kimpro2024-03-01
6Dev Patelteam2024-03-05
7Lena Müllerfree2024-03-07
8Kwame Asantepro2024-03-08
+ + diff --git a/packages/host/public/assets/images/mock-project.html b/packages/host/public/assets/images/mock-project.html new file mode 100644 index 00000000000..abc97c260d3 --- /dev/null +++ b/packages/host/public/assets/images/mock-project.html @@ -0,0 +1,101 @@ + + + + + Orbit — Project Tracker + + + +
+ +
+
AC
+
BR
+
PS
+
+
+
+ Sprint 14 +
+
+ 62% · 4d left +
+
+
+
+
✓
+
+
Auth token refresh endpoint
+
Feature
+
+
AC
+
+
+
✓
+
+
Fix pagination offset bug
+
High
+
+
BR
+
+
+
+
+
Notification preferences UI
+
FeatureMed
+
+
PS
+
+
+
+
+
Write API docs for v2 endpoints
+
Low
+
+
AC
+
+
+
+
+
Dark mode polish — sidebar contrast
+
Med
+
+
BR
+
+
+ + diff --git a/packages/host/public/assets/images/preview-boxel-catalog.png b/packages/host/public/assets/images/preview-boxel-catalog.png new file mode 100644 index 00000000000..388d8f4bc5c Binary files /dev/null and b/packages/host/public/assets/images/preview-boxel-catalog.png differ diff --git a/packages/host/public/assets/images/preview-cms.png b/packages/host/public/assets/images/preview-cms.png new file mode 100644 index 00000000000..83cbf1e1089 Binary files /dev/null and b/packages/host/public/assets/images/preview-cms.png differ diff --git a/packages/host/public/assets/images/preview-coding-blog.png b/packages/host/public/assets/images/preview-coding-blog.png new file mode 100644 index 00000000000..155ca558d0b Binary files /dev/null and b/packages/host/public/assets/images/preview-coding-blog.png differ diff --git a/packages/host/public/assets/images/preview-data-browser.png b/packages/host/public/assets/images/preview-data-browser.png new file mode 100644 index 00000000000..02d1f6612a9 Binary files /dev/null and b/packages/host/public/assets/images/preview-data-browser.png differ diff --git a/packages/host/public/assets/images/preview-github.png b/packages/host/public/assets/images/preview-github.png new file mode 100644 index 00000000000..8636d745442 Binary files /dev/null and b/packages/host/public/assets/images/preview-github.png differ diff --git a/packages/host/public/assets/images/preview-linear.png b/packages/host/public/assets/images/preview-linear.png new file mode 100644 index 00000000000..7e64b4a7ae7 Binary files /dev/null and b/packages/host/public/assets/images/preview-linear.png differ diff --git a/packages/host/public/assets/images/preview-notion.png b/packages/host/public/assets/images/preview-notion.png new file mode 100644 index 00000000000..c869f0edfe2 Binary files /dev/null and b/packages/host/public/assets/images/preview-notion.png differ diff --git a/packages/host/public/assets/images/preview-project.png b/packages/host/public/assets/images/preview-project.png new file mode 100644 index 00000000000..bf0d89b678a Binary files /dev/null and b/packages/host/public/assets/images/preview-project.png differ diff --git a/packages/host/public/assets/images/preview-youtube.png b/packages/host/public/assets/images/preview-youtube.png new file mode 100644 index 00000000000..9b1d18adf2a Binary files /dev/null and b/packages/host/public/assets/images/preview-youtube.png differ diff --git a/packages/host/public/assets/images/wrench-realm-icon.svg b/packages/host/public/assets/images/wrench-realm-icon.svg new file mode 100644 index 00000000000..0b58dad2a77 --- /dev/null +++ b/packages/host/public/assets/images/wrench-realm-icon.svg @@ -0,0 +1,6 @@ + + + + + +