From 7ffbfac43237b0c2bf83c8fa55b55b9cac430f46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= <nicolas@theuniverse.today>
Date: Thu, 24 Oct 2024 21:44:56 +0200
Subject: [PATCH] FIX[WebApp]: fixes in formula bar

* fx is not clickable
* Removed chevron
* Show slecting/ed area in address
---
 webapp/src/components/formulabar.tsx | 10 ++++------
 webapp/src/components/util.ts        |  8 +++++---
 webapp/src/components/worksheet.tsx  |  2 ++
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/webapp/src/components/formulabar.tsx b/webapp/src/components/formulabar.tsx
index 8c6a674..a20ab9d 100644
--- a/webapp/src/components/formulabar.tsx
+++ b/webapp/src/components/formulabar.tsx
@@ -1,6 +1,5 @@
 import type { Model } from "@ironcalc/wasm";
-import { Button, styled } from "@mui/material";
-import { ChevronDown } from "lucide-react";
+import { styled } from "@mui/material";
 import { Fx } from "../icons";
 import {
   COLUMN_WIDTH_SCALE,
@@ -34,9 +33,6 @@ function FormulaBar(properties: FormulaBarProps) {
     <Container>
       <AddressContainer>
         <CellBarAddress>{cellAddress}</CellBarAddress>
-        <StyledButton>
-          <ChevronDown />
-        </StyledButton>
       </AddressContainer>
       <Divider />
       <FormulaContainer>
@@ -84,7 +80,9 @@ function FormulaBar(properties: FormulaBarProps) {
   );
 }
 
-const StyledButton = styled(Button)`
+const StyledButton = styled("div")`
+  display: inline-flex;
+  align-items: center;
   width: 15px;
   min-width: 0px;
   padding: 0px;
diff --git a/webapp/src/components/util.ts b/webapp/src/components/util.ts
index 43c3f26..c8e5309 100644
--- a/webapp/src/components/util.ts
+++ b/webapp/src/components/util.ts
@@ -29,12 +29,12 @@ export const isNavigationKey = (key: string): key is NavigationKey =>
     key,
   );
 
-export const getCellAddress = (selectedArea: Area, selectedCell?: Cell) => {
+export const getCellAddress = (selectedArea: Area, selectedCell: Cell) => {
   const isSingleCell =
     selectedArea.rowStart === selectedArea.rowEnd &&
     selectedArea.columnEnd === selectedArea.columnStart;
 
-  return isSingleCell && selectedCell
+  return isSingleCell
     ? `${columnNameFromNumber(selectedCell.column)}${selectedCell.row}`
     : `${columnNameFromNumber(selectedArea.columnStart)}${
         selectedArea.rowStart
@@ -57,5 +57,7 @@ export function rangeToStr(
   if (rowStart === rowEnd && columnStart === columnEnd) {
     return `${sheetName}${columnNameFromNumber(columnStart)}${rowStart}`;
   }
-  return `${sheetName}${columnNameFromNumber(columnStart)}${rowStart}:${columnNameFromNumber(columnEnd)}${rowEnd}`;
+  return `${sheetName}${columnNameFromNumber(
+    columnStart,
+  )}${rowStart}:${columnNameFromNumber(columnEnd)}${rowEnd}`;
 }
diff --git a/webapp/src/components/worksheet.tsx b/webapp/src/components/worksheet.tsx
index e48f64b..adde469 100644
--- a/webapp/src/components/worksheet.tsx
+++ b/webapp/src/components/worksheet.tsx
@@ -164,6 +164,7 @@ function Worksheet(props: {
       const { row, column } = cell;
       model.onAreaSelecting(row, column);
       canvas.renderSheet();
+      refresh();
     },
     onAreaSelected: () => {
       const styles = workbookState.getCopyStyles();
@@ -179,6 +180,7 @@ function Worksheet(props: {
       if (worksheetElement.current) {
         worksheetElement.current.style.cursor = "auto";
       }
+      refresh();
     },
     onExtendToCell: (cell) => {
       const canvas = worksheetCanvas.current;