style(web): simplify z-index styling

[tyler-dane]

This pull request adds comprehensive documentation and skill files for code simplification across multiple directories, establishing clear guidelines, heuristics, and examples for minimizing complexity, avoiding duplication, and improving code legibility. The changes unify and expand the simplify-code skill for use in .cursor, .claude, and .codex environments, providing both high-level principles and practical before/after examples.

Skill documentation and principles:

• Added detailed SKILL.md files in .cursor/skills/simplify-code/, .claude/skills/simplify-code/, and .codex/skills/simplify-code/ describing when and how to simplify code, including DRY, legibility, durability, and anti-patterns to avoid. [1] [2] [3]

Heuristics and complexity thresholds:

• Added heuristics.md in .cursor/skills/simplify-code/ and .codex/skills/simplify-code/ outlining complexity thresholds, DRY detection rules, nesting reduction strategies, config-driven simplification, and durability checklists to guide refactoring decisions.

Practical examples:

• Added examples.md in .cursor/skills/simplify-code/ and .codex/skills/simplify-code/ with before/after code samples demonstrating guard clauses, single-pass iteration, config-driven handlers, shared helpers, and composing hooks instead of duplication.

Rules configuration:

• Added .cursor/rules/naming-convention.mdc to enforce naming conventions, ensuring consistent application of style rules.
  Related to Replace raw Tailwind colors with semantic names #1265

[Copilot]

Pull request overview

This PR adds centralized Tailwind z-index tokens and begins migrating a few web UI components away from hard-coded / constant z-index values to the new z-layer-* classes.

Changes:

• Added a custom theme.extend.zIndex scale to packages/web/tailwind.config.ts with documented layering tokens (layer-1 … layer-30, max).
• Updated Day view context menu base component to use z-layer-30 instead of ZIndex constants.
• Updated OverlayPanel to use the new z-index token (z-layer-20) instead of an arbitrary z-[1000] class.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/web/tailwind.config.ts	Introduces centralized Tailwind z-index tokens for layering.
packages/web/src/views/Day/components/ContextMenu/BaseContextMenu.tsx	Switches context menu z-index to new Tailwind token.
packages/web/src/views/Day/components/Agenda/Events/AgendaEventPreview/AgendaEventPreview.tsx	Removes redundant z-index class (z-index is controlled via inline style).
packages/web/src/components/OverlayPanel/OverlayPanel.tsx	Migrates overlay z-index from arbitrary value to tokenized layer.
packages/web/src/components/AuthModal/components/AuthButton.tsx	Removes font-medium from base AuthButton classes (unrelated to z-index).

[Copilot]

Pull request overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated 5 comments.

Comments suppressed due to low confidence (2)

packages/web/src/views/Day/components/Agenda/NowLine/NowLine.test.tsx:52

• Removing the z-index test may mask future regressions. The test validated that the NowLine component had proper z-index layering. While the implementation has changed to use Tailwind classes instead of dynamic z-index, the layering behavior is still critical for the NowLine to be visible above other elements. Consider updating the test to verify the z-5 class is present instead of completely removing it.

  it("updates time on minute sync", () => {
    let syncCallback: () => void;
    (setupMinuteSync as jest.Mock).mockImplementation((cb) => {
      syncCallback = cb;
      return jest.fn();
    });

packages/web/src/views/Day/components/StorageInfoModal/StorageInfoModal.tsx:1

• The PR description states this change is "related to #1265" which is about replacing raw Tailwind colors with semantic names. However, this PR focuses on centralizing z-index values and does not address color naming. The PR makes changes to z-index management but doesn't replace any raw color references with semantic variables. Consider updating the PR description to accurately reflect the z-index centralization work, or ensure color-related changes from issue #1265 are included if that was the intent.

[Copilot]

Pull request overview

Copilot reviewed 23 out of 24 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (3)

packages/web/src/views/CmdPalette/CmdPalette.tsx:157

• authCmdItems are spread into the Settings section, but the existing "Log Out" command is still always present. When unauthenticated, this results in showing Sign Up / Log In alongside Log Out, which is confusing and likely incorrect. Consider conditionally rendering the Log Out item only when authenticated (or have useAuthCmdItems return the appropriate auth-related items for both states).

              : "CloudArrowUpIcon",
            onClick: isGoogleCalendarConnected
              ? undefined
              : onConnectGoogleCalendar,
          },
          ...authCmdItems,
          {
            id: "log-out",
            children: "Log Out [z]",
            icon: "ArrowRightOnRectangleIcon",
            onClick: () => pressKey("z"),
          },

packages/web/src/views/Day/components/DayCmdPalette.tsx:94

• authCmdItems are spread into the Settings section, but "Log Out" is still always present. When the user is unauthenticated, this will show Log In / Sign Up items alongside Log Out. Consider guarding the Log Out command behind session.authenticated (or moving both authenticated/unauthenticated auth items into a single hook so only the correct set is rendered).

              ? "CheckCircleIcon"
              : "CloudArrowUpIcon",
            onClick: isGoogleCalendarConnected
              ? undefined
              : onConnectGoogleCalendar,
          },
          ...authCmdItems,
          {
            id: "log-out",
            children: "Log Out [z]",
            icon: "ArrowRightOnRectangleIcon",
            onClick: () => pressKey("z"),
          },

packages/web/src/views/Now/components/NowCmdPalette.tsx:71

• authCmdItems are spread into the Settings section, but "Log Out" is still always present. For unauthenticated users this will show Log In / Sign Up together with Log Out. Consider making Log Out conditional on session.authenticated (or have the auth-items hook return the correct item set for each auth state).

              : "CloudArrowUpIcon",
            onClick: isGoogleCalendarConnected
              ? undefined
              : onConnectGoogleCalendar,
          },
          ...authCmdItems,
          {
            id: "log-out",
            children: "Log Out [z]",
            icon: "ArrowRightOnRectangleIcon",
            onClick: () => pressKey("z"),
          },