From 1828d971ce490fc1ef2475dd7db57dc94ff84e5b Mon Sep 17 00:00:00 2001
From: "hermes.santos" <hermes.santos@edu.itajai.sc.gov.br>
Date: Thu, 30 Jul 2026 13:47:42 -0300
Subject: [PATCH] feat(i18n, layout): add dock orientation options and
 translations

Introduced new localization strings for "Dock to bottom" and "Dock to right" in English, Spanish, and Brazilian Portuguese. Updated layout service to manage details orientation, allowing users to toggle between bottom and right docking for the details panel in the History view.
---
 app/ui/src/i18n/en.json                       |  2 +
 app/ui/src/i18n/es.json                       |  2 +
 app/ui/src/i18n/pt-br.json                    |  2 +
 app/ui/src/layouts/History/HistoryView.vue    |  6 +-
 .../History/components/HistoryDetailPanel.vue | 73 ++++++++++++++++---
 app/ui/src/services/layoutService.ts          | 20 +++++
 6 files changed, 95 insertions(+), 10 deletions(-)

diff --git a/app/ui/src/i18n/en.json b/app/ui/src/i18n/en.json
index 2b2e4e6..1d24724 100644
--- a/app/ui/src/i18n/en.json
+++ b/app/ui/src/i18n/en.json
@@ -606,6 +606,8 @@
     "explain_commits": "Explain commits",
     "n_commits_selected": "{count} commits selected",
     "close_details": "Close Details",
+    "dock_bottom": "Dock to bottom",
+    "dock_right": "Dock to right",
     "tab_information": "INFORMATION",
     "tab_changes": "CHANGES",
     "tab_submodule": "SUBMODULE",
diff --git a/app/ui/src/i18n/es.json b/app/ui/src/i18n/es.json
index 0aefe79..d823211 100644
--- a/app/ui/src/i18n/es.json
+++ b/app/ui/src/i18n/es.json
@@ -548,6 +548,8 @@
     "explain_commits": "Explicar commits",
     "n_commits_selected": "{count} commits seleccionados",
     "close_details": "Cerrar detalles",
+    "dock_bottom": "Anclar abajo",
+    "dock_right": "Anclar a la derecha",
     "tab_information": "INFORMACIÓN",
     "tab_changes": "CAMBIOS",
     "tab_submodule": "SUBMÓDULO",
diff --git a/app/ui/src/i18n/pt-br.json b/app/ui/src/i18n/pt-br.json
index 93156b0..78771fa 100644
--- a/app/ui/src/i18n/pt-br.json
+++ b/app/ui/src/i18n/pt-br.json
@@ -606,6 +606,8 @@
     "explain_commits": "Explicar commits",
     "n_commits_selected": "{count} commits selecionados",
     "close_details": "Fechar detalhes",
+    "dock_bottom": "Encaixar embaixo",
+    "dock_right": "Encaixar à direita",
     "tab_information": "INFORMAÇÃO",
     "tab_changes": "ALTERAÇÕES",
     "tab_submodule": "SUBMÓDULO",
diff --git a/app/ui/src/layouts/History/HistoryView.vue b/app/ui/src/layouts/History/HistoryView.vue
index 53bf2f9..b3150f0 100644
--- a/app/ui/src/layouts/History/HistoryView.vue
+++ b/app/ui/src/layouts/History/HistoryView.vue
@@ -23,6 +23,7 @@ import {
   historyAuthorWidth, 
   historyDateWidth, 
   detailsWidth,
+  detailsOrientation,
   layoutRefs
 } from '../../services/layoutService';
 import { appendCommitGraph, createGraphState, GraphState } from '../../GraphBuilder';
@@ -526,7 +527,10 @@ async function onRemoveFilter(name: string) {
       v-if="effectiveLogRefs.length"
       :refs="effectiveLogRefs"
       @remove="onRemoveFilter" />
-    <div class="flex flex-row flex-1 min-h-0 min-w-0 overflow-hidden">
+    <div
+      class="flex flex-1 min-h-0 min-w-0 overflow-hidden"
+      :class="detailsOrientation === 'bottom' ? 'flex-col' : 'flex-row'"
+    >
     <div class="flex-1 min-w-0 flex flex-col min-h-0">
       <HistoryCommitList
         ref="commitListRef"
diff --git a/app/ui/src/layouts/History/components/HistoryDetailPanel.vue b/app/ui/src/layouts/History/components/HistoryDetailPanel.vue
index 47e25cb..377088a 100644
--- a/app/ui/src/layouts/History/components/HistoryDetailPanel.vue
+++ b/app/ui/src/layouts/History/components/HistoryDetailPanel.vue
@@ -11,8 +11,9 @@ import Tabs from '../../../components/Common/Tabs.vue';
 import Tab from '../../../components/Common/Tab.vue';
 import Tooltip from '../../../components/Common/Tooltip.vue';
 import Resizer from '../../../components/Common/Resizer.vue';
-import { detailsWidth, layoutRefs } from '../../../services/layoutService';
+import { detailsOrientation, layoutRefs } from '../../../services/layoutService';
 import { submodules } from '../../../services/gitService';
+import { cn } from '../../../utils/cn';
 
 const props = defineProps<{
   selectedCommits: Commit[];
@@ -43,6 +44,12 @@ const emit = defineEmits<{
 const { t } = useI18n();
 const activeDetailTab = ref('information');
 
+const isBottom = computed(() => detailsOrientation.value === 'bottom');
+
+function toggleOrientation() {
+    detailsOrientation.value = isBottom.value ? 'right' : 'bottom';
+}
+
 // Let the parent drive the active tab (e.g. an AI file link jumps to "changes").
 watch(() => props.requestedTab, (tab) => {
     if (tab) activeDetailTab.value = tab;
@@ -76,9 +83,31 @@ function onSetTab(tab: string) {
 </script>
 
 <template>
-  <div class="flex flex-col bg-overlay border-l border-line flex-shrink-0 relative shadow-none dark:shadow-2xl z-10 min-h-0 overflow-hidden" :style="{ width: layoutRefs.detailsWidth.value + 'px' }">
-    <Resizer :target="layoutRefs.detailsWidth" :options="{ invert: true, min: 200, max: 1200, clampToContainer: true, reserve: 260 }" class="absolute left-0 top-0 bottom-0 -translate-x-1/2 z-30" />
-    
+  <div
+    :class="cn(
+      'flex flex-col bg-overlay flex-shrink-0 relative shadow-none dark:shadow-2xl z-10 min-h-0 overflow-hidden',
+      isBottom
+        ? 'w-full border-t border-neutral-200 dark:border-transparent'
+        : 'border-l border-neutral-200 dark:border-transparent',
+    )"
+    :style="isBottom
+      ? { height: layoutRefs.detailsHeight.value + 'px' }
+      : { width: layoutRefs.detailsWidth.value + 'px' }"
+  >
+    <Resizer
+      v-if="isBottom"
+      vertical
+      :target="layoutRefs.detailsHeight"
+      :options="{ axis: 'y', invert: true, min: 160, max: 1200, clampToContainer: true, reserve: 160 }"
+      class="absolute top-0 left-0 right-0 -translate-y-1/2 z-30"
+    />
+    <Resizer
+      v-else
+      :target="layoutRefs.detailsWidth"
+      :options="{ invert: true, min: 200, max: 1200, clampToContainer: true, reserve: 260 }"
+      class="absolute left-0 top-0 bottom-0 -translate-x-1/2 z-30"
+    />
+
     <!-- Top Title Bar like SourceGit: commit pinned left, explain as an icon
          button on the right. Both flex so they adapt when the panel is resized. -->
     <div v-if="selectedCommits.length === 1" class="flex-shrink-0 bg-surface border-b border-line flex items-center justify-between gap-2 px-3 h-[42px] min-w-0">
@@ -98,16 +127,42 @@ function onSetTab(tab: string) {
     <div v-if="selectedCommits.length > 1" class="flex-shrink-0 bg-surface border-b border-line flex items-center justify-between gap-2 px-3 h-[42px] min-w-0">
         <span class="text-xs text-content-strong font-bold truncate min-w-0">{{ t('history_detail.n_commits_selected', { count: selectedCommits.length }) }}</span>
 
-        <Tooltip :text="t('history_detail.explain_commits')" position="bottom">
-            <button @click="emit('explain')" class="h-7 w-7 flex items-center justify-center bg-accent hover:bg-accent-hover text-accent-fg rounded transition-colors outline-none shadow-sm shrink-0">
-                <Icon icon="lucide:sparkles" class="text-sm" />
-            </button>
-        </Tooltip>
+        <div class="flex items-center gap-1 shrink-0">
+            <Tooltip :text="isBottom ? t('history_detail.dock_right') : t('history_detail.dock_bottom')" position="bottom">
+                <button
+                    @click="toggleOrientation"
+                    class="h-7 w-7 flex items-center justify-center rounded text-content-muted hover:text-content-strong hover:bg-surface-hover transition-colors outline-none"
+                >
+                    <Icon :icon="isBottom ? 'lucide:panel-right' : 'lucide:panel-bottom'" class="text-base" />
+                </button>
+            </Tooltip>
+            <Tooltip :text="t('history_detail.explain_commits')" position="bottom">
+                <button @click="emit('explain')" class="h-7 w-7 flex items-center justify-center bg-accent hover:bg-accent-hover text-accent-fg rounded transition-colors outline-none shadow-sm shrink-0">
+                    <Icon icon="lucide:sparkles" class="text-sm" />
+                </button>
+            </Tooltip>
+            <Tooltip :text="t('history_detail.close_details')" position="bottom">
+                <button
+                    @click="emit('close')"
+                    class="h-7 w-7 flex items-center justify-center rounded text-content-muted hover:text-content-strong hover:bg-surface-hover transition-colors outline-none"
+                >
+                    <Icon icon="lucide:x" class="text-base" />
+                </button>
+            </Tooltip>
+        </div>
     </div>
 
     <div v-if="selectedCommits.length === 1" class="flex-1 overflow-hidden flex flex-col">
         <Tabs v-model="activeDetailTab" @change="emit('setTab', $event)">
             <template #tab-actions>
+                 <Tooltip :text="isBottom ? t('history_detail.dock_right') : t('history_detail.dock_bottom')" position="bottom">
+                   <button
+                       @click="toggleOrientation"
+                       class="h-7 w-7 flex items-center justify-center rounded text-content-muted hover:text-content-strong hover:bg-surface-hover transition-colors outline-none"
+                   >
+                      <Icon :icon="isBottom ? 'lucide:panel-right' : 'lucide:panel-bottom'" class="text-base" />
+                   </button>
+                 </Tooltip>
                  <Tooltip :text="t('history_detail.close_details')" position="bottom">
                    <button @click="emit('close')"
                            class="h-7 w-7 flex items-center justify-center rounded text-content-muted hover:text-content-strong hover:bg-surface-hover transition-colors outline-none">
diff --git a/app/ui/src/services/layoutService.ts b/app/ui/src/services/layoutService.ts
index 5894ef8..c487079 100644
--- a/app/ui/src/services/layoutService.ts
+++ b/app/ui/src/services/layoutService.ts
@@ -37,8 +37,26 @@ function persistedSize(key: string, fallback: number, min = 60, max = 2000): Ref
     return size;
 }
 
+export type DetailsOrientation = 'right' | 'bottom';
+
+function persistedString<T extends string>(key: string, fallback: T, allowed: readonly T[]): Ref<T> {
+    const saved = getItem(LAYOUT_KEY + key);
+    const initial = (allowed.includes(saved as T) ? saved : fallback) as T;
+    const value = ref(initial) as Ref<T>;
+    watch(value, (v) => {
+        setItem(LAYOUT_KEY + key, v);
+    });
+    return value;
+}
+
 export const sidebarWidth = persistedSize('sidebarWidth', 256, 160);
 export const detailsWidth = persistedSize('detailsWidth', 340, 200);
+export const detailsHeight = persistedSize('detailsHeight', 320, 160);
+export const detailsOrientation = persistedString<DetailsOrientation>(
+    'detailsOrientation',
+    'right',
+    ['right', 'bottom'] as const,
+);
 export const statusWidth = persistedSize('statusWidth', 300, 160);
 export const unstagedHeight = persistedSize('unstagedHeight', 300, 100);
 export const stashFilesHeight = persistedSize('stashFilesHeight', 300, 100);
@@ -56,6 +74,8 @@ export const submoduleDetailHeight = persistedSize('submoduleDetailHeight', 400,
 export const layoutRefs = {
     sidebarWidth,
     detailsWidth,
+    detailsHeight,
+    detailsOrientation,
     statusWidth,
     unstagedHeight,
     stashFilesHeight,