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

* ♻️ (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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

View file

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

View file

@ -15,13 +15,12 @@ import { FaDiscord, FaGithub } from "react-icons/fa";
import { useShallow } from "zustand/react/shallow";
import useFileDrop from "../hooks/use-on-file-drop";
const EMPTY_PAGE_TITLE = "Your new favorite way to ship Agents";
const EMPTY_PAGE_DESCRIPTION =
"Design agents that connect to any API, model, or database.";
const EMPTY_PAGE_TITLE = "Welcome to Langflow";
const EMPTY_PAGE_DESCRIPTION = "Your new favorite way to ship Agents";
const EMPTY_PAGE_GITHUB_DESCRIPTION =
"Follow development, star the repo, and shape the future.";
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 =
"Already have a flow? Drag and drop to upload.";
const EMPTY_PAGE_FOLDER_DESCRIPTION = "Empty folder";
@ -86,14 +85,14 @@ export const EmptyPageCommunity = ({
</div>
<span
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}
</span>
<span
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
? EMPTY_PAGE_FOLDER_DESCRIPTION
@ -123,7 +122,7 @@ export const EmptyPageCommunity = ({
</div>
</div>
<div>
<span className="text-sm text-secondary-foreground">
<span className="text-base text-secondary-foreground">
{EMPTY_PAGE_GITHUB_DESCRIPTION}
</span>
</div>
@ -153,7 +152,7 @@ export const EmptyPageCommunity = ({
</div>
</div>
<div>
<span className="text-sm text-secondary-foreground">
<span className="text-base text-secondary-foreground">
{EMPTY_PAGE_DISCORD_DESCRIPTION}
</span>
</div>