- )}
+ {shareZone}
{breakpoint >= 5 && !isReadonlyMode && (
diff --git a/packages/ui/src/lib/components/MenuZone.tsx b/packages/ui/src/lib/components/MenuZone.tsx
index 8b6e2713d..600a9c621 100644
--- a/packages/ui/src/lib/components/MenuZone.tsx
+++ b/packages/ui/src/lib/components/MenuZone.tsx
@@ -24,7 +24,7 @@ export const MenuZone = track(function MenuZone() {
- {breakpoint >= 5 && showQuickActions && (
+ {breakpoint >= 6 && showQuickActions && (
<>
diff --git a/packages/ui/src/lib/components/Toolbar/Toolbar.tsx b/packages/ui/src/lib/components/Toolbar/Toolbar.tsx
index b63681558..c8b816edd 100644
--- a/packages/ui/src/lib/components/Toolbar/Toolbar.tsx
+++ b/packages/ui/src/lib/components/Toolbar/Toolbar.tsx
@@ -115,7 +115,7 @@ export const Toolbar = function Toolbar() {
'tlui-toolbar__extras__hidden': !showExtraActions,
})}
>
- {breakpoint < 5 && (
+ {breakpoint < 6 && (
diff --git a/packages/ui/src/lib/components/primitives/Input.tsx b/packages/ui/src/lib/components/primitives/Input.tsx
index 360a64a3f..9f53aa63c 100644
--- a/packages/ui/src/lib/components/primitives/Input.tsx
+++ b/packages/ui/src/lib/components/primitives/Input.tsx
@@ -19,6 +19,7 @@ export interface InputProps {
onComplete?: (value: string) => void
onValueChange?: (value: string) => void
onCancel?: (value: string) => void
+ onBlur?: (value: string) => void
className?: string
/**
* Usually on iOS when you focus an input, the browser will adjust the viewport to bring the input
@@ -46,6 +47,7 @@ export const Input = React.forwardRef(function Inp
onComplete,
onValueChange,
onCancel,
+ onBlur,
shouldManuallyMaintainScrollPositionWhenFocused = false,
children,
value,
@@ -106,7 +108,14 @@ export const Input = React.forwardRef(function Inp
[onComplete, onCancel]
)
- const handleBlur = React.useCallback(() => setIsFocused(false), [])
+ const handleBlur = React.useCallback(
+ (e: React.FocusEvent) => {
+ setIsFocused(false)
+ const value = e.currentTarget.value
+ onBlur?.(value)
+ },
+ [onBlur]
+ )
React.useEffect(() => {
const visualViewport = window.visualViewport
diff --git a/packages/ui/src/lib/hooks/useTranslation/TLTranslationKey.ts b/packages/ui/src/lib/hooks/useTranslation/TLTranslationKey.ts
index 6f956baac..e923dc4f2 100644
--- a/packages/ui/src/lib/hooks/useTranslation/TLTranslationKey.ts
+++ b/packages/ui/src/lib/hooks/useTranslation/TLTranslationKey.ts
@@ -233,6 +233,7 @@ export type TLTranslationKey =
| 'share-menu.save-note'
| 'share-menu.fork-note'
| 'share-menu.share-project'
+ | 'share-menu.default-project-name'
| 'share-menu.copy-link'
| 'share-menu.readonly-link'
| 'share-menu.create-snapshot-link'
@@ -281,6 +282,12 @@ export type TLTranslationKey =
| 'shortcuts-dialog.tools'
| 'shortcuts-dialog.transform'
| 'shortcuts-dialog.view'
+ | 'home-project-dialog.title'
+ | 'home-project-dialog.description'
+ | 'rename-project-dialog.title'
+ | 'rename-project-dialog.cancel'
+ | 'rename-project-dialog.rename'
+ | 'home-project-dialog.ok'
| 'style-panel.title'
| 'style-panel.align'
| 'style-panel.vertical-align'
diff --git a/packages/ui/src/lib/hooks/useTranslation/defaultTranslation.ts b/packages/ui/src/lib/hooks/useTranslation/defaultTranslation.ts
index aaf8d99d3..aca2e8fc9 100644
--- a/packages/ui/src/lib/hooks/useTranslation/defaultTranslation.ts
+++ b/packages/ui/src/lib/hooks/useTranslation/defaultTranslation.ts
@@ -233,6 +233,7 @@ export const DEFAULT_TRANSLATION = {
'share-menu.save-note': 'Download this project to your computer as a .tldr file.',
'share-menu.fork-note': 'Create a new shared project based on this snapshot.',
'share-menu.share-project': 'Share this project',
+ 'share-menu.default-project-name': 'Shared Project',
'share-menu.copy-link': 'Copy share link',
'share-menu.readonly-link': 'Read-only',
'share-menu.create-snapshot-link': 'Copy snapshot link',
@@ -284,6 +285,12 @@ export const DEFAULT_TRANSLATION = {
'shortcuts-dialog.tools': 'Tools',
'shortcuts-dialog.transform': 'Transform',
'shortcuts-dialog.view': 'View',
+ 'home-project-dialog.title': 'Home project',
+ 'home-project-dialog.description': "This is your local home project. It's just for you!",
+ 'rename-project-dialog.title': 'Rename project',
+ 'rename-project-dialog.cancel': 'Cancel',
+ 'rename-project-dialog.rename': 'Rename',
+ 'home-project-dialog.ok': 'Ok',
'style-panel.title': 'Styles',
'style-panel.align': 'Align',
'style-panel.vertical-align': 'Vertical align',
diff --git a/packages/ui/ui.css b/packages/ui/ui.css
index c8887200c..b34b4439b 100644
--- a/packages/ui/ui.css
+++ b/packages/ui/ui.css
@@ -28,6 +28,7 @@
grid-column: 1;
grid-row: 1;
display: flex;
+ min-width: 0px;
}
.tlui-layout__top__left {
@@ -37,6 +38,19 @@
justify-content: flex-start;
width: 100%;
height: 100%;
+ flex-shrink: 1;
+}
+
+.tlui-layout__top__center {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ width: 100%;
+ height: 100%;
+ margin-left: var(--space-2);
+ flex-grow: 1;
+ min-width: 0px;
}
.tlui-layout__top__right {
@@ -46,6 +60,8 @@
justify-content: flex-start;
width: 100%;
height: 100%;
+ flex-shrink: 1;
+ min-width: 0px;
}
.scrollable,
@@ -1627,6 +1643,47 @@
}
}
+/* ------------------ Project Menu ------------------ */
+.tlui-project-menu__wrapper {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ min-width: 0px;
+}
+
+.tlui-project-menu__button {
+ display: flex;
+ gap: var(--space-4);
+ pointer-events: all;
+}
+
+.tlui-project-menu__button__name {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ min-width: 0px;
+}
+
+.tlui-project-menu__input {
+ min-width: 0px;
+ text-align: center;
+ pointer-events: all;
+
+ /* Position slightly to the right so that it doesn't jump around */
+ /* 40px is the width of the icon */
+ margin-left: 40px;
+}
+
+.tlui-rename-project-dialog__input {
+ background-color: var(--color-muted-2);
+ flex-grow: 2;
+ border-radius: var(--radius-2);
+ padding: 0px var(--space-4);
+}
+
/* ------------------- Navigation ------------------- */
.tlui-navigation-zone {