v6: Add an empty state to the History panel (#4418)

## Summary

The History panel had no empty state. With no run history and no
favorites (first run, or right after "Clear"), it rendered only its
header and nothing below, just blank space. Add a "No queries run yet."
message for that case, styled to match the Collections panel's existing
empty state.

## Test plan

- [x] Open a fresh GraphiQL instance with no query history. Open the
History panel and confirm it shows a "No queries run yet." message below
the header instead of blank space.
- [x] Run a query. Reopen the History panel and confirm the empty-state
message is gone, replaced by the new history entry.
- [x] Click "Clear" to remove all history and favorites. Confirm the
empty-state message reappears.
- [x] Favorite an item, then delete the remaining regular history so
only the favorite is left. Confirm the empty-state message stays hidden
(favorites alone should not trigger it).
- [x] Check both Dark and Light themes. The empty-state text should be
legible and match Collections' muted styling in each.

Refs: #4219

Author: trevor-scheer

packages/graphiql-plugin-history/src/components.tsx

@@ -54,6 +54,10 @@ export const History: FC = () => {
         actions={clearButton}
       />
 
+      {!hasFavorites && !hasItems && (
+        <div className="graphiql-history-empty">No queries run yet.</div>
+      )}
+
       {hasFavorites && (
         <ul className="graphiql-history-items">
           {favorites.map(item => (

packages/graphiql-plugin-history/src/style.css

@@ -13,6 +13,12 @@
   flex: 1;
 }
 
+.graphiql-history-empty {
+  padding: var(--px-8) var(--px-12);
+  color: oklch(var(--fg-subtle));
+  font-size: var(--font-size-hint);
+}
+
 .graphiql-history-item {
   border-bottom: 1px solid oklch(var(--border-default));
   display: flex;