jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat: Enhance main interface by ensuring persistent navbar visibility (#7889)

Browse source 
* ♻️ (appHeaderComponent/index.tsx): remove unused variables and condition for isEmpty to simplify the code and improve readability

* 📝 (empty-page.tsx): Update page title and descriptions to reflect the new branding and messaging for Langflow
🗑️ (github-bg.png): Delete unused background image file from the frontend assets folder

* 📝 (empty-page.tsx): update text size class from text-xs to text-sm for better readability

* 📝 (empty-page.tsx): Update EMPTY_PAGE_DESCRIPTION to remove extra period for consistency
📝 (empty-page.tsx): Increase font size for text elements for better readability and user experience
This commit is contained in:
Cristhian Zanforlin Lousa 2025-05-05 12:54:57 -03:00 • committed by GitHub
commit 051a6c2ae5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 8 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/frontend/src/assets/github-bg.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 22 KiB

10
src/frontend/src/components/core/appHeaderComponent/index.tsx
View file

@ -48,12 +48,6 @@ export default function AppHeader(): JSX.Element {
useResetDismissUpdateAll(); useResetDismissUpdateAll();
const flows = useFlowsManagerStore((state) => state.flows);
const examples = useFlowsManagerStore((state) => state.examples);
const folders = useFolderStore((state) => state.folders);
const isEmpty = flows?.length !== examples?.length || folders?.length > 1;
const getNotificationBadge = () => { const getNotificationBadge = () => {
const baseClasses = "absolute h-1 w-1 rounded-full bg-destructive"; const baseClasses = "absolute h-1 w-1 rounded-full bg-destructive";
return notificationCenter return notificationCenter
@ -63,9 +57,7 @@ export default function AppHeader(): JSX.Element {
return ( return (
<div <div
className={`flex h-[48px] w-full items-center justify-between border-b px-6 dark:bg-background ${ className={`flex h-[48px] w-full items-center justify-between border-b px-6 dark:bg-background`}
!isEmpty ? "hidden" : ""
}`}
data-testid="app-header" data-testid="app-header"
> >
{/* Left Section */} {/* Left Section */}

15
src/frontend/src/pages/MainPage/pages/empty-page.tsx
View file

@ -15,13 +15,12 @@ import { FaDiscord, FaGithub } from "react-icons/fa";
import { useShallow } from "zustand/react/shallow"; import { useShallow } from "zustand/react/shallow";
import useFileDrop from "../hooks/use-on-file-drop"; import useFileDrop from "../hooks/use-on-file-drop";
const EMPTY_PAGE_TITLE = "Your new favorite way to ship Agents"; const EMPTY_PAGE_TITLE = "Welcome to Langflow";
const EMPTY_PAGE_DESCRIPTION = const EMPTY_PAGE_DESCRIPTION = "Your new favorite way to ship Agents";
"Design agents that connect to any API, model, or database.";
const EMPTY_PAGE_GITHUB_DESCRIPTION = const EMPTY_PAGE_GITHUB_DESCRIPTION =
"Follow development, star the repo, and shape the future."; "Follow development, star the repo, and shape the future.";
const EMPTY_PAGE_DISCORD_DESCRIPTION = const EMPTY_PAGE_DISCORD_DESCRIPTION =
"Join builders, ask questions, and show off your agents."; "Join builders, ask questions, and show off your agents";
const EMPTY_PAGE_DRAG_AND_DROP_TEXT = const EMPTY_PAGE_DRAG_AND_DROP_TEXT =
"Already have a flow? Drag and drop to upload."; "Already have a flow? Drag and drop to upload.";
const EMPTY_PAGE_FOLDER_DESCRIPTION = "Empty folder"; const EMPTY_PAGE_FOLDER_DESCRIPTION = "Empty folder";
@ -86,14 +85,14 @@ export const EmptyPageCommunity = ({
</div> </div>
<span <span
data-testid="mainpage_title" data-testid="mainpage_title"
className="z-50 text-center font-chivo text-2xl font-semibold text-foreground" className="z-50 text-center font-chivo text-2xl font-medium text-foreground"
> >
{EMPTY_PAGE_TITLE} {EMPTY_PAGE_TITLE}
</span> </span>
<span <span
data-testid="empty_page_description" data-testid="empty_page_description"
className="z-50 text-center text-xs text-secondary-foreground" className="z-50 text-center text-base text-secondary-foreground"
> >
{folders?.length > 1 {folders?.length > 1
? EMPTY_PAGE_FOLDER_DESCRIPTION ? EMPTY_PAGE_FOLDER_DESCRIPTION
@ -123,7 +122,7 @@ export const EmptyPageCommunity = ({
</div> </div>
</div> </div>
<div> <div>
<span className="text-sm text-secondary-foreground"> <span className="text-base text-secondary-foreground">
{EMPTY_PAGE_GITHUB_DESCRIPTION} {EMPTY_PAGE_GITHUB_DESCRIPTION}
</span> </span>
</div> </div>
@ -153,7 +152,7 @@ export const EmptyPageCommunity = ({
</div> </div>
</div> </div>
<div> <div>
<span className="text-sm text-secondary-foreground"> <span className="text-base text-secondary-foreground">
{EMPTY_PAGE_DISCORD_DESCRIPTION} {EMPTY_PAGE_DISCORD_DESCRIPTION}
</span> </span>
</div> </div>