From 7a3a016683712b607f2987b3f19a00b538831622 Mon Sep 17 00:00:00 2001
From: eiiko6 <myeiiko6@gmail.com>
Date: Sun, 18 Jan 2026 21:17:24 +0100
Subject: [PATCH] added compacat layout toggle and fixed colorschemes

---
 src/App.vue                    | 12 ++++---
 src/components/MessageList.vue | 62 +++++++++++++++++++++++-----------
 src/locales/en.ftl             |  1 +
 src/locales/fr.ftl             |  1 +
 src/pages/SettingsPage.vue     | 51 ++++++++++++++++++++++++----
 src/store.ts                   | 13 +++++++
 src/themes.json                |  2 +-
 7 files changed, 112 insertions(+), 30 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1cb61cf..ab47a1c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="page">
+  <div id="page" :class="{ 'is-mobile': currentPlatform === 'android' || currentPlatform === 'ios' }">
     <div v-if="currentPlatform != 'android' && currentPlatform != 'ios'" data-tauri-drag-region class="titlebar">
       <div class="titlebar-button" @click="minimize">
         <svg width="12" height="12" viewBox="0 0 12 12">
@@ -87,7 +87,7 @@ async function getBackendVersion() {
   width: 100%;
   max-width: 1100px;
   /* padding: 2rem; */
-  padding: calc(20px + 2rem) 2rem 2rem 2rem;
+  padding: calc(20px + 1.8rem) 1.8rem calc(1.8rem - 10px) 1.8rem;
 
   flex: 1;
   overflow-y: auto;
@@ -130,17 +130,21 @@ footer {
   width: 100%;
   display: flex;
   justify-content: center;
-  padding-bottom: 24px;
+  padding-bottom: calc(1.8rem - 10px);
   background: var(--bg);
 }
 
 @media (max-width: 720px) {
   #content {
     padding: 12px;
+    padding-top: calc(30px + 10px);
+  }
+
+  .is-mobile #content {
     padding-top: 30px;
   }
 
-  footer {
+  .is-mobile footer {
     padding-bottom: 56px;
   }
 }
diff --git a/src/components/MessageList.vue b/src/components/MessageList.vue
index 87c7c90..d80fbb4 100644
--- a/src/components/MessageList.vue
+++ b/src/components/MessageList.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul>
+  <ul :class="{ 'is-compact': isCompact }">
     <li v-for="(m, i) in messages" :key="i" class="message" :class="{ 'is-me': m.sender_uuid === currentUserUuid }">
       <div class="sender-info">
         <img :src="getAvatarUrl(m.sender_uuid)" @error="handleAvatarError" class="avatar" />
@@ -14,19 +14,21 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import type { Message } from '../types'
-import { getAvatarUrl } from '../store.ts'
+import { getAvatarUrl, getCompactLayoutPreference } from '../store.ts'
 import defaultAvatar from '../assets/default-avatar.png'
 import { getAuthData } from '../store.ts';
 
 defineProps<{ messages: Message[] }>()
 
 const currentUserUuid = ref<string | null>(null)
+const isCompact = ref(false)
 
 onMounted(async () => {
   const auth = await getAuthData()
   if (auth.user) {
     currentUserUuid.value = auth.user.uuid
   }
+  isCompact.value = await getCompactLayoutPreference()
 })
 
 const handleAvatarError = (event: Event) => {
@@ -50,14 +52,12 @@ ul {
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  /* gap: 0.5rem; */
-  background: var(--panel-accent);
   padding: 0;
   max-width: 80%;
   width: fit-content;
   align-self: flex-start;
-  /* border: 1px solid var(--border); */
   border-radius: var(--radius);
+  background: var(--panel-accent);
 }
 
 .sender-info {
@@ -66,14 +66,27 @@ ul {
   justify-content: flex-start;
   align-items: center;
   gap: 0.7rem;
-  /* border: 1px solid var(--border); */
   border-bottom: 1px solid var(--border);
-  /* border-radius: var(--radius) var(--radius) 0 0; */
-  /* background-color: rgba(255, 255, 255, 0.02); */
   width: 100%;
   padding: 5px 18px;
 }
 
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.message-content {
+  padding: 10px;
+  padding-left: 1rem;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  max-width: 100%;
+  display: block;
+}
+
 .message.is-me {
   align-self: flex-end;
   align-items: flex-end;
@@ -87,13 +100,33 @@ ul {
 .message.is-me .message-content {
   text-align: right;
   padding-right: 1rem;
-  padding-left: 10px;
+}
+
+/* --- Compact layout overrides --- */
+
+ul.is-compact .message {
+  background: transparent;
+  max-width: 90%;
+}
+
+ul.is-compact .sender-info {
+  border-bottom: none;
+  padding: 5px 18px 0 18px;
+}
+
+ul.is-compact .message-content {
+  padding: 5px 10px 10px 50px;
+}
+
+ul.is-compact .message.is-me .message-content {
+  padding-right: 50px;
+  padding-left: 0;
+  text-align: right;
 }
 
 .sender {
   font-weight: bold;
   font-size: 1.1rem;
-  /* flex: 1; */
 }
 
 .timestamp {
@@ -101,13 +134,4 @@ ul {
   opacity: 0.7;
   font-size: 0.7rem;
 }
-
-.message-content {
-  padding: 10px;
-  padding-left: 1rem;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  max-width: 100%;
-  display: block;
-}
 </style>
diff --git a/src/locales/en.ftl b/src/locales/en.ftl
index f922dc1..ba6972b 100644
--- a/src/locales/en.ftl
+++ b/src/locales/en.ftl
@@ -80,6 +80,7 @@ settings-title = Settings
 settings-account = Account
 settings-language = Language
 settings-appearance = Appearance
+settings-compact-layout = Use compact layout
 settings-label-username = Username:
 settings-label-email = Email:
 settings-update-btn = Update
diff --git a/src/locales/fr.ftl b/src/locales/fr.ftl
index 3a46467..6b49f84 100644
--- a/src/locales/fr.ftl
+++ b/src/locales/fr.ftl
@@ -80,6 +80,7 @@ settings-title = Paramètres
 settings-account = Compte
 settings-language = Langue
 settings-appearance = Apparence
+settings-compact-layout = Utiliser la disposition compacte
 settings-label-username = Nom d'utilisateur :
 settings-label-email = Email :
 settings-update-btn = Modifier
diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue
index 8378155..a440982 100644
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -46,6 +46,13 @@
       </button>
     </div>
 
+    <div class="setting-checkbox">
+      <label class="checkbox-label">
+        <input type="checkbox" v-model="useCompactLayout" @change="toggleCompactLayout" />
+        <span>{{ $t('settings-compact-layout') || 'Use Compact Layout' }} (WIP)</span>
+      </label>
+    </div>
+
     <button class="logout-btn" @click="logout">
       <i class="fa-solid fa-right-from-bracket"></i>
       <span>{{ $t('settings-logout-btn') }}</span>
@@ -59,6 +66,7 @@ import { useRouter } from 'vue-router'
 import { logout as authLogout } from '../store.ts'
 import { saveThemePreference, getThemePreference } from "../store.ts"
 import { getAuthData } from "../store.ts"
+import { saveCompactLayoutPreference, getCompactLayoutPreference } from "../store.ts"
 import type { User } from "../types"
 import UpdateAccountModal from '../components/UpdateAccountModal.vue'
 import { useFluent } from 'fluent-vue'
@@ -69,22 +77,25 @@ import defaultAvatar from '../assets/default-avatar.png'
 import { getAvatarUrl } from '../store.ts'
 import { getAvailableThemes } from '../themeLoader';
 
-const handleAvatarError = (event: Event) => {
-  const img = event.target as HTMLImageElement;
-  img.src = defaultAvatar;
-};
+const { $t } = useFluent()
 
 const showAvatarModal = ref(false)
 
 const router = useRouter()
+const availableThemes = getAvailableThemes();
+
 const user = ref<User | null>(null)
 const showUpdateModal = ref(false)
-const { $t } = useFluent()
 const currentLang = ref('')
 
 const languages = computed(() => getSupportedLanguagesMetadata())
 const currentTheme = ref('default');
-const availableThemes = getAvailableThemes();
+const useCompactLayout = ref(false)
+
+const handleAvatarError = (event: Event) => {
+  const img = event.target as HTMLImageElement;
+  img.src = defaultAvatar;
+};
 
 async function fetchUserData() {
   try {
@@ -99,6 +110,7 @@ onMounted(async () => {
   const pref = await getLocalePreference()
   currentLang.value = pref || (navigator.language.split('-')[0])
   currentTheme.value = await getThemePreference()
+  useCompactLayout.value = await getCompactLayoutPreference()
 
   fetchUserData()
 })
@@ -114,6 +126,10 @@ async function changeTheme(theme: string) {
   await saveThemePreference(theme)
 }
 
+async function toggleCompactLayout() {
+  await saveCompactLayoutPreference(useCompactLayout.value)
+}
+
 function logout() {
   authLogout()
   router.push('/login')
@@ -226,6 +242,29 @@ h2 {
   border-color: var(--accent);
 }
 
+.setting-checkbox {
+  padding: 10px;
+  margin-top: 15px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin-bottom: 1rem;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.checkbox-label input {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--accent);
+}
+
 .logout-btn {
   cursor: pointer;
   display: flex;
diff --git a/src/store.ts b/src/store.ts
index a922f24..f46422f 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -210,3 +210,16 @@ export async function applyStoredTheme() {
   const theme = await getThemePreference();
   document.documentElement.setAttribute('data-theme', theme);
 }
+
+// ==== Layout ====
+
+export async function saveCompactLayoutPreference(enabled: boolean) {
+  const s = await getStore();
+  await s.set('compact_layout', enabled);
+  await s.save();
+}
+
+export async function getCompactLayoutPreference(): Promise<boolean> {
+  const s = await getStore();
+  return (await s.get<boolean>('compact_layout')) ?? false;
+}
diff --git a/src/themes.json b/src/themes.json
index 092ad40..c8a4fb8 100644
--- a/src/themes.json
+++ b/src/themes.json
@@ -1,5 +1,5 @@
 {
-  "frangipane-dark": {
+  "default": {
     "name": "Frangipane Dark",
     "colors": {
       "bg": "#0f1116",