docs(design): move game folder selection into settings

Move the design contract for choosing the library game folder out of the top
bar and into Settings > Library. The launcher chrome now reserves the right
edge for the kebab/menu controls, while Settings owns the required folder path
and its set/unset states.

The reference mock now persists `gameFolder: string | null` instead of a
boolean, adds an exercisable GameFolderField, and includes matching CSS so the
prototype reflects the documented interaction. This is still design/reference
only; no runtime Tauri settings code changes here.

Test Plan:
- git diff --cached --check

Refs: none

design/design_reference/SoftLAN Launcher.html

@@ -36,9 +36,9 @@ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
   "density": "normal",
   "aspect": "square",
   "bg": "gradient",
-  "username": "d",
+  "username": "ddidderr",
   "language": "en",
-  "gameFolderSet": true
+  "gameFolder": "\/some\/folder\/to\/games"
 }/*EDITMODE-END*/;
 
 const ACCENTS = ['#3b82f6', '#22d3ee', '#a855f7', '#22c55e', '#f59e0b', '#ef4444'];
@@ -116,8 +116,8 @@ function App() {
                     onChange={(v) => setTweak('aspect', v)}/>
 
         <TweakSection label="Library"/>
-        <TweakToggle label="Game folder set" value={t.gameFolderSet}
-                     onChange={(v) => setTweak('gameFolderSet', v)}/>
+        <TweakText label="Game folder" value={t.gameFolder}
+                   onChange={(v) => setTweak('gameFolder', v)}/>
       </TweaksPanel>
     </React.Fragment>
   );

design/design_reference/components.jsx

@@ -524,6 +524,31 @@ function SegmentedRadio({ value, options, onChange, accent }) {
   );
 }
 
+function GameFolderField({ value, onChange, accent }) {
+  const isSet = !!(value && value.trim());
+  const handleChange = () => {
+    // In production: open native folder picker via Tauri.
+    // For the prototype, prompt for a path so the field is exercisable.
+    const next = window.prompt('Game folder path (leave empty to clear)', value || '');
+    if (next == null) return;
+    onChange(next.trim());
+  };
+  return (
+    <div className={`folder-field ${isSet ? 'is-set' : 'is-unset'}`}
+         style={{ '--accent': accent }}>
+      <span className="folder-field-icon" aria-hidden="true"><Icon.folder/></span>
+      <div className="folder-field-path" title={isSet ? value : 'No folder selected'}>
+        {isSet
+          ? <bdi>{value}</bdi>
+          : <span className="folder-field-empty">Not set</span>}
+      </div>
+      <button type="button" className="folder-field-btn" onClick={handleChange}>
+        {isSet ? 'Change\u2026' : 'Choose\u2026'}
+      </button>
+    </div>
+  );
+}
+
 function ColorSwatchPicker({ value, options, onChange }) {
   return (
     <div className="swatch-row">
@@ -582,6 +607,11 @@ function SettingsDialog({ settings, onChange, onClose }) {
           </div>
           <div className="settings-section">
             <div className="settings-section-title">Library</div>
+            <SettingsRow label="Game folder" hint="Parent directory where games are downloaded and installed">
+              <GameFolderField value={settings.gameFolder}
+                               onChange={(v) => onChange('gameFolder', v)}
+                               accent={settings.accent}/>
+            </SettingsRow>
             <SettingsRow label="Grid density" hint="How tightly cards are packed">
               <SegmentedRadio value={settings.density}
                               options={SETTING_OPTIONS.density}

design/design_reference/launcher.jsx

@@ -1,8 +1,6 @@
 // launcher.jsx — composes top bar + grid into a complete launcher screen
 // Comes in two chrome variants: 'single' (one-row) and 'two' (two-row).
 
-const DIR_PATH = '/home/pfs/Desktop/eti_games_AFTER_LAN_2025';
-
 function applyFilterAndSort(games, filter, sort, query) {
   let g = filterGames(games, filter);
   if (query.trim()) {
@@ -28,7 +26,7 @@ function Launcher({
   initialOpenGame = null,
   initialSettingsOpen = false,
 }) {
-  const { density, aspect, accent, bg, gameFolderSet } = tweaks;
+  const { density, aspect, accent, bg } = tweaks;
   const [filter, setFilter] = useState(initialFilter);
   const [sort, setSort] = useState(initialSort);
   const [query, setQuery] = useState(initialQuery);
@@ -68,7 +66,6 @@ function Launcher({
               <SortMenu value={sort} onChange={setSort} accent={accent}/>
             </div>
             <div className="topbar-right-trail">
-              <DirectoryButton path={gameFolderSet === false ? null : DIR_PATH}/>
               <KebabMenu items={menuItems}/>
             </div>
           </div>
@@ -80,7 +77,6 @@ function Launcher({
               <div className="brand-mark" style={{ background: accent }}>S</div>
               <div className="brand-name">SoftLAN <span className="brand-name-soft">Launcher</span></div>
             </div>
-            <DirectoryButton path={gameFolderSet === false ? null : DIR_PATH}/>
             <div className="topbar-row1-right">
               <StorageMeter accent={accent}/>
               <KebabMenu items={menuItems}/>

design/design_reference/styles.css

@@ -1240,3 +1240,74 @@
   color: var(--t-3);
   font-weight: 500;
 }
+
+/* ─── Settings: game-folder field ─── */
+.folder-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: 340px;
+  height: 36px;
+  padding: 0 4px 0 12px;
+  background: var(--bg-3);
+  border: 1px solid var(--bd-1);
+  border-radius: 8px;
+  transition: border-color .15s, background .15s;
+}
+.folder-field:hover { border-color: var(--bd-2); }
+.folder-field.is-unset {
+  border-color: color-mix(in srgb, var(--danger) 35%, var(--bd-1));
+  background: color-mix(in srgb, var(--danger) 6%, var(--bg-3));
+}
+.folder-field.is-unset:hover {
+  border-color: color-mix(in srgb, var(--danger) 55%, var(--bd-2));
+}
+.folder-field-icon {
+  display: inline-flex;
+  color: var(--t-3);
+  flex-shrink: 0;
+}
+.folder-field.is-unset .folder-field-icon { color: #f87171; }
+.folder-field-path {
+  flex: 1;
+  min-width: 0;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--t-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: rtl;          /* truncate from the head so the leaf folder stays visible */
+  text-align: left;
+  unicode-bidi: plaintext; /* keep character order intact */
+}
+.folder-field-empty {
+  font-family: var(--font-ui);
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #f87171;
+  letter-spacing: 0.1px;
+}
+.folder-field-btn {
+  flex-shrink: 0;
+  height: 28px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 6px;
+  background: rgba(255,255,255,0.06);
+  color: var(--t-1);
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0.1px;
+  cursor: pointer;
+  transition: background .15s, color .15s;
+}
+.folder-field-btn:hover { background: rgba(255,255,255,0.12); }
+.folder-field.is-unset .folder-field-btn {
+  background: color-mix(in srgb, var(--accent, #3b82f6) 85%, transparent);
+  color: #fff;
+}
+.folder-field.is-unset .folder-field-btn:hover {
+  background: var(--accent, #3b82f6);
+}