Feat/add new app configs and fix mobile view#51
Merged
luizhcastro merged 14 commits intoBeroLab:stagingfrom Feb 2, 2026
Merged
Conversation
Contributor
|
base branch must be staging |
- Add siteConfig with name, url, ogImage, description, links, authors, keywords - Add META_THEME_COLORS for light/dark theme (white and zinc-950) - Centralize app metadata for reuse in layout, OG and manifest
- Export fontVariables combining Geist, Geist Mono, Inter - Add Noto Sans Arabic and Noto Sans Hebrew for RTL languages - Use cn() to merge CSS variables for layout consumption
- Add favicon.ico, favicon-16x16/32x32, apple-touch-icon, android-chrome icons - Add site.webmanifest with theme_color and display standalone - Remove favicon from app dir in favor of public/
- Use siteConfig for title, description, keywords, authors, openGraph, twitter - Set metadataBase, icons and manifest from config - Apply fontVariables on html and remove inline font setup - Add theme-color meta and inline script for flash-free theme/layout init - Rely on public favicon and manifest URLs
- Add GET handler in app/og/ for OG image via next/og ImageResponse - Load Geist and Geist Mono from base64 JSON for ImageResponse - Render 1200x628 layout with Blaboard title and black background - Add note for contributors to improve layout/design
- Set default props and enableColorScheme in ThemeProvider - Normalize indentation in providers and theme-provider
Introduce useMetaColor hook to update the browser theme color dynamically when switching between light and dark modes, fixing mobile UI color mismatch after theme toggles.
script Adds a Biome lint ignore for `dangerouslySetInnerHTML` in the layout theme bootstrap script. This is required to prevent theme flash before hydration, ensuring the correct theme and `meta[name="theme-color"]` are applied on the first paint without affecting SEO or hydration stability.
jonattasmoraes
force-pushed
the
feat/add-new-app-configs-and-fix-mobile-view
branch
from
0e8492d to
95b5324
Compare
luizhcastro
requested changes
Feb 2, 2026
Removed contributor notes and documentation comments.
luizhcastro
pushed a commit
that referenced
this pull request
Feb 6, 2026
* feat(web): add site config and meta theme colors - Add siteConfig with name, url, ogImage, description, links, authors, keywords - Add META_THEME_COLORS for light/dark theme (white and zinc-950) - Centralize app metadata for reuse in layout, OG and manifest * feat(web): add fonts utility with Geist, Inter and RTL support - Export fontVariables combining Geist, Geist Mono, Inter - Add Noto Sans Arabic and Noto Sans Hebrew for RTL languages - Use cn() to merge CSS variables for layout consumption * chore(web): add favicons and PWA assets, remove app favicon - Add favicon.ico, favicon-16x16/32x32, apple-touch-icon, android-chrome icons - Add site.webmanifest with theme_color and display standalone - Remove favicon from app dir in favor of public/ * feat(web): wire root layout with config, fonts and metadata - Use siteConfig for title, description, keywords, authors, openGraph, twitter - Set metadataBase, icons and manifest from config - Apply fontVariables on html and remove inline font setup - Add theme-color meta and inline script for flash-free theme/layout init - Rely on public favicon and manifest URLs * feat(web): add dynamic Open Graph image route - Add GET handler in app/og/ for OG image via next/og ImageResponse - Load Geist and Geist Mono from base64 JSON for ImageResponse - Render 1200x628 layout with Blaboard title and black background - Add note for contributors to improve layout/design * refactor(web): theme-provider defaults and providers formatting - Set default props and enableColorScheme in ThemeProvider - Normalize indentation in providers and theme-provider * feat(theme): keep meta theme-color in sync with theme changes Introduce useMetaColor hook to update the browser theme color dynamically when switching between light and dark modes, fixing mobile UI color mismatch after theme toggles. * chore(biome): ignore noDangerouslySetInnerHtml for theme bootstrap script Adds a Biome lint ignore for `dangerouslySetInnerHTML` in the layout theme bootstrap script. This is required to prevent theme flash before hydration, ensuring the correct theme and `meta[name="theme-color"]` are applied on the first paint without affecting SEO or hydration stability. * refactor: use NEXT_PUBLIC_SERVER_URL for site URL and ogImage * refactor: switch frontend to NEXT_PUBLIC_FRONTEND_URL * refactor: add NEXT_PUBLIC_FRONTEND_URL to web env sample * feat: add theme options dropdown to ModeToggle * refacror: remove layout class from localStorage * refactor: clean up comments in route.tsx Removed contributor notes and documentation comments.
luizhcastro
added a commit
that referenced
this pull request
Feb 6, 2026
* Feat/add new app configs and fix mobile view (#51) * feat(web): add site config and meta theme colors - Add siteConfig with name, url, ogImage, description, links, authors, keywords - Add META_THEME_COLORS for light/dark theme (white and zinc-950) - Centralize app metadata for reuse in layout, OG and manifest * feat(web): add fonts utility with Geist, Inter and RTL support - Export fontVariables combining Geist, Geist Mono, Inter - Add Noto Sans Arabic and Noto Sans Hebrew for RTL languages - Use cn() to merge CSS variables for layout consumption * chore(web): add favicons and PWA assets, remove app favicon - Add favicon.ico, favicon-16x16/32x32, apple-touch-icon, android-chrome icons - Add site.webmanifest with theme_color and display standalone - Remove favicon from app dir in favor of public/ * feat(web): wire root layout with config, fonts and metadata - Use siteConfig for title, description, keywords, authors, openGraph, twitter - Set metadataBase, icons and manifest from config - Apply fontVariables on html and remove inline font setup - Add theme-color meta and inline script for flash-free theme/layout init - Rely on public favicon and manifest URLs * feat(web): add dynamic Open Graph image route - Add GET handler in app/og/ for OG image via next/og ImageResponse - Load Geist and Geist Mono from base64 JSON for ImageResponse - Render 1200x628 layout with Blaboard title and black background - Add note for contributors to improve layout/design * refactor(web): theme-provider defaults and providers formatting - Set default props and enableColorScheme in ThemeProvider - Normalize indentation in providers and theme-provider * feat(theme): keep meta theme-color in sync with theme changes Introduce useMetaColor hook to update the browser theme color dynamically when switching between light and dark modes, fixing mobile UI color mismatch after theme toggles. * chore(biome): ignore noDangerouslySetInnerHtml for theme bootstrap script Adds a Biome lint ignore for `dangerouslySetInnerHTML` in the layout theme bootstrap script. This is required to prevent theme flash before hydration, ensuring the correct theme and `meta[name="theme-color"]` are applied on the first paint without affecting SEO or hydration stability. * refactor: use NEXT_PUBLIC_SERVER_URL for site URL and ogImage * refactor: switch frontend to NEXT_PUBLIC_FRONTEND_URL * refactor: add NEXT_PUBLIC_FRONTEND_URL to web env sample * feat: add theme options dropdown to ModeToggle * refacror: remove layout class from localStorage * refactor: clean up comments in route.tsx Removed contributor notes and documentation comments. * Refact/side bar (#59) * refactor: move Sidebar to global authenticated layout - Create (authenticated) route group with shared layout - Move Sidebar from components/board to components/layout - Wrap authenticated pages with OrgGuard in layout - Simplify TaskBoard and TaskDetailsPage by removing Sidebar - Delete old (board) and task directories * refactor(sidebar): update styles, icons and typography - Update Phosphor icons to use new naming convention - Change default font to Onest - Adjust sidebar colors and dark mode theme - Improve button and navigation item styling - Add keyboard shortcut visual styling * feat(sidebar): add responsive layout with mobile drawer - Add SidebarProvider, SidebarTrigger, and useSidebar for mobile state - Implement mobile drawer with overlay and slide animation - Restructure sidebar with fixed header/footer and scrollable content - Add mobile header with hamburger menu trigger - Adjust paddings and gaps to match Figma design (6px icon-text gap) - Update icon imports to use new naming convention * feat(sidebar): add organization logo support - Add organization logo display using Next.js Image component - Show first letter fallback when no logo is available - Truncate long organization names - Update icon imports to use new naming convention - Adjust paddings and gaps to match design * style(sidebar): add subtle hover effects with rounded corners - Add rounded-lg/xl hover backgrounds to all interactive items - Add small margin (px-1.5) from sidebar edges for hover effect - Consistent hover styling across all sections - Remove negative margins approach for cleaner implementation * feat(sidebar): add collapsible sections and improve interactions - Add collapsible Projects and Teams sections with caret icons - Add active state background for current page navigation - Change footer links to hyperlink style with underline on hover - Reduce spacing between sections * feat(sidebar): add smooth animations and functional pin system - Add functional pin toggle for Projects and Teams items - Pinned items appear at top, others sorted alphabetically - Add smooth expand/collapse animations using CSS Grid - Improve dropdown menu animations with custom easing - Use Linear-style cubic-bezier curve for fluid motion * feat(sidebar): add drag and drop for section reordering - Add framer-motion dependency for animations - Implement Reorder.Group for Projects and Teams sections - Add drag handle icon that appears on hover - Sections animate smoothly when reordered * feat(sidebar): add command palette with cmdk - Add cmdk library for command menu functionality - Create CommandPalette component with search, pages, projects, teams and actions - Connect search button in sidebar to open command palette - Support keyboard shortcuts (⌘K, Ctrl+/) to toggle - Add smooth animations with Framer Motion - Add small gap between nav items to prevent hover overlap * style(sidebar): improve organization dropdown UX - Replace trash icon with edit icon (PencilSimpleIcon) - Add handleEditOrg to redirect to organization settings - Reduce dropdown item padding for smaller hover area - Add gap between dropdown items to prevent hover overlap - Adjust avatar size and border radius * style(sidebar): add cursor-pointer and improve drag UX - Add cursor-pointer to all clickable elements - Add solid background to dragged sections to prevent transparency - Reduce footer button clickable area to content only (w-fit) - Update dropdown menu items to use cursor-pointer * Feat/ws impl (#60) * feat(ws): add authenticated websocket plugin with org scoping and ping/pong Validate Better Auth session on connect; scope clients per organization; add ping/pong handling and message size limit. Let Elysia handle send errors. * feat(ws): implement robust websocket client with backoff, heartbeat, and error callback Add exponential backoff with jitter, heartbeat ping/pong, message size validation, and replace console logs with onError callback. Integrate with board UI for emitting events on mutations. * refactor(board): add mutation callbacks and types for websocket integration Expose optional onSuccess callbacks in task/column mutations and export useWebSocket from hooks index; add types for websocket messages. * fix: drag and drop usability, removing the flick view (#61) --------- Co-authored-by: Jônattas Moraes <135550080+jonattasmoraes@users.noreply.github.com> Co-authored-by: Daniel Rody <113403319+DaNnielRody@users.noreply.github.com>
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
O que foi alterado?
<meta name="theme-color">.A cor do meta theme passou a ser sincronizada com o tema resolvido pelo next-themes.
O fluxo de troca de tema foi ajustado para atualizar dinamicamente a cor da UI do navegador durante o toggle.
Corrigido o problema em que a barra de endereço/status em dispositivos móveis mantinha a cor do tema anterior após a troca.
Garantido que toda a lógica de atualização do theme-color seja executada exclusivamente no client-side, evitando problemas de hidratação e flash de tema na inicialização.
Atualizado o RootLayout para definir explicitamente a tag
<meta name="theme-color">com um valor padrão (light) durante o SSR.Adicionado um script inline no layout base para aplicar o tema correto e a cor do theme-color antes da hidratação do React, prevenindo flash de tema e inconsistência visual no primeiro paint.
Ajustada a configuração de metadata para manter compatibilidade com Open Graph e Twitter Cards, sem impacto nas rotas OG existentes.
Garantido que a lógica de layout se limite apenas à inicialização do tema, delegando atualizações dinâmicas ao hook useMetaColor.
Por que essa mudança foi feita?
Navegadores móveis mantêm em cache o valor da tag theme-color e não a atualizam automaticamente quando o tema da aplicação muda.
A definição explícita da tag no layout base (SSR) garante que navegadores e crawlers recebam um estado inicial consistente da UI, melhorando a previsibilidade da renderização desde o primeiro paint.
Ajustar a configuração de metadata no layout evita discrepâncias entre o HTML servido pelo servidor e o estado final após hidratação, reduzindo riscos de hydration mismatch e flash visual.
A aplicação antecipada do tema correto antes da hidratação melhora a experiência do usuário em dispositivos móveis, especialmente na barra de endereço e status, que passam a refletir o tema ativo imediatamente.
Uma estrutura de layout mais determinística contribui para melhores métricas de Core Web Vitals, reduzindo mudanças visuais inesperadas durante o carregamento inicial.
A manutenção do metadata estático no App Router (Open Graph, Twitter Cards, icons e manifest) garante compatibilidade total com SEO e social previews, sem interferir nas rotas de OG.
Separar a responsabilidade de bootstrap do tema (layout/config) da atualização dinâmica (hook useMetaColor) melhora a clareza arquitetural e facilita a evolução futura do setup de SEO e theming.