fix: Fix delete unused css vars and unused detection (#5505)

## Description

- deleting all unused command only worked if the properties were on the
selected instance
- variables used inside of calc calls and similar were not found

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

apps/builder/app/builder/features/command-panel/groups/css-variables-group.tsx

@@ -15,9 +15,9 @@ import type { CssProperty } from "@webstudio-is/css-engine";
 import {
   DeleteCssVariableDialog,
   RenameCssVariableDialog,
-  $usedCssVariablesInInstances,
   $cssVariableInstancesByVariable,
   $cssVariableDefinitionsByVariable,
+  $unusedCssVariables,
 } from "~/builder/shared/css-variable-utils";
 import { deleteProperty } from "~/builder/features/style-panel/shared/use-style-data";
 import { InstanceList, showInstance } from "../shared/instance-list";
@@ -38,14 +38,14 @@ export type CssVariableOption = BaseOption & {
 };
 
 export const $cssVariableOptions = computed(
-  [$cssVariableDefinitionsByVariable, $usedCssVariablesInInstances],
-  (definitionsByVariable, usedVariablesInInstances) => {
+  [$cssVariableDefinitionsByVariable, $unusedCssVariables],
+  (definitionsByVariable, unusedVariables) => {
     const cssVariableOptions: CssVariableOption[] = [];
 
     // Create options for each defined CSS variable on each instance
     for (const [property, instanceIds] of definitionsByVariable) {
       for (const instanceId of instanceIds) {
-        const usages = usedVariablesInInstances.get(property) ?? 0;
+        const usages = unusedVariables.has(property) ? 0 : 1; // 0 if unused, 1+ otherwise
         cssVariableOptions.push({
           terms: [
             "css variables",
@@ -130,7 +130,12 @@ export const CssVariablesGroup = ({
                   {formatUsageCount(usages)}
                 </Text>
               </Text>
-              <Text as="span" color="moreSubtle">
+              <Text
+                as="span"
+                css={{ maxWidth: "20ch" }}
+                truncate
+                color="moreSubtle"
+              >
                 {getInstanceLabel(instanceId)}
               </Text>
             </CommandItem>

apps/builder/app/builder/features/command-panel/shared/instance-list.tsx

@@ -13,19 +13,17 @@ import {
   Kbd,
 } from "@webstudio-is/design-system";
 import type { Instance } from "@webstudio-is/sdk";
-import {
-  $instances,
-  $pages,
-  $registeredComponentMetas,
-} from "~/shared/nano-states";
+import { $instances, $pages } from "~/shared/nano-states";
 import { getInstanceLabel } from "~/builder/shared/instance-label";
 import { $awareness, findAwarenessByInstanceId } from "~/shared/awareness";
+import { buildInstancePath } from "~/shared/instance-utils";
 import { $commandContent } from "../command-state";
 import { $activeInspectorPanel } from "~/builder/shared/nano-states";
 
 export type InstanceOption = {
   label: string;
   id: string;
+  path: string[];
 };
 
 type InstanceListProps = {
@@ -35,17 +33,19 @@ type InstanceListProps = {
 
 export const InstanceList = ({ instanceIds, onSelect }: InstanceListProps) => {
   const instances = $instances.get();
-  const metas = $registeredComponentMetas.get();
+  const pages = $pages.get();
   const usedInInstances: InstanceOption[] = [];
   for (const instanceId of instanceIds) {
     const instance = instances.get(instanceId);
-    const meta = metas.get(instance?.component ?? "");
-    if (instance && meta) {
-      usedInInstances.push({
-        label: getInstanceLabel(instance),
-        id: instance.id,
-      });
+    if (!instance || !pages) {
+      continue;
     }
+    const path = buildInstancePath(instanceId, pages, instances);
+    usedInInstances.push({
+      label: getInstanceLabel(instance),
+      id: instance.id,
+      path,
+    });
   }
   const [search, setSearch] = useState("");
 
@@ -86,7 +86,7 @@ export const InstanceList = ({ instanceIds, onSelect }: InstanceListProps) => {
                   <Text color="subtle">No instances found</Text>
                 </Flex>
               ) : (
-                matches.map(({ id, label }) => (
+                matches.map(({ id, label, path }) => (
                   <CommandItem
                     key={id}
                     value={id}
@@ -95,6 +95,13 @@ export const InstanceList = ({ instanceIds, onSelect }: InstanceListProps) => {
                     }}
                   >
                     <Text variant="labelsTitleCase">{label}</Text>
+                    <Text
+                      color="moreSubtle"
+                      truncate
+                      css={{ maxWidth: "30ch" }}
+                    >
+                      /{path.join("/")}
+                    </Text>
                   </CommandItem>
                 ))
               )}
@@ -105,7 +112,7 @@ export const InstanceList = ({ instanceIds, onSelect }: InstanceListProps) => {
       <CommandGroupFooter>
         <Flex grow>
           <Button tabIndex={-1} color="ghost" onClick={goBack}>
-            Back <Kbd value={["backspace"]} />
+            <Kbd value={["backspace"]} /> Back
           </Button>
         </Flex>
       </CommandGroupFooter>