ui/phase-12: order composer skeleton

OrderDraftStore persists per-game command drafts in Cache; the
sidebar Order tab renders the list with a per-row delete control.
The layout passes a `historyMode` prop through Sidebar / BottomTabs
as a constant `false`, so Phase 26 only flips the source.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

ui/frontend/src/lib/sidebar/tab-bar.svelte

@@ -1,8 +1,14 @@
 <!--
-Three-button tab switcher for the Phase 10 sidebar. Each button is
-labelled and tagged so component tests can target it; the parent
-sidebar component owns the selected-tab state and re-renders the
-matching tool panel.
+Three-button tab switcher for the sidebar. Each button is labelled
+and tagged so component tests can target it; the parent sidebar
+component owns the selected-tab state and re-renders the matching
+tool panel.
+
+Phase 12 introduces the `hideOrder` prop: when true the Order entry
+is filtered out of the tab list. The current consumer is the
+`historyMode` flag forwarded from the in-game shell layout — the
+flag is constant `false` in Phase 12 and Phase 26's history mode
+flips it on.
 -->
 <script lang="ts">
 	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
@@ -11,14 +17,18 @@ matching tool panel.
 	type Props = {
 		activeTab: SidebarTab;
 		onSelect: (tab: SidebarTab) => void;
+		hideOrder?: boolean;
 	};
-	let { activeTab, onSelect }: Props = $props();
+	let { activeTab, onSelect, hideOrder = false }: Props = $props();
 
-	const tabs: ReadonlyArray<{ id: SidebarTab; key: TranslationKey }> = [
+	const allTabs: ReadonlyArray<{ id: SidebarTab; key: TranslationKey }> = [
 		{ id: "calculator", key: "game.sidebar.tab.calculator" },
 		{ id: "inspector", key: "game.sidebar.tab.inspector" },
 		{ id: "order", key: "game.sidebar.tab.order" },
 	];
+	const tabs = $derived(
+		hideOrder ? allTabs.filter((t) => t.id !== "order") : allTabs,
+	);
 </script>
 
 <div class="tab-bar" role="tablist" data-testid="sidebar-tab-bar">