refactor: organize frontend by feature

frontend/src/features/settings/views/IntegrationsSettingsView.vue

@@ -0,0 +1,94 @@
+<script setup>
+    import { useI18n } from 'vue-i18n';
+
+    const { t } = useI18n();
+</script>
+
+<template>
+    <section class="page-shell">
+        <div class="page-header">
+            <div class="eyebrow">{{ t('integrations.eyebrow') }}</div>
+            <h1>{{ t('integrations.title') }}</h1>
+            <p>{{ t('integrations.description') }}</p>
+        </div>
+
+        <div class="panel">
+            <div class="panel-heading">
+                <strong>{{ t('integrations.googleDrive.title') }}</strong>
+                <span>{{ t('integrations.googleDrive.description') }}</span>
+            </div>
+
+            <div class="placeholder-block">
+                <span>{{ t('integrations.statusLabel') }}</span>
+                <strong>{{ t('integrations.pendingTitle') }}</strong>
+                <small>{{ t('integrations.googleDrive.nextStep') }}</small>
+            </div>
+        </div>
+
+        <div class="panel">
+            <div class="panel-heading">
+                <strong>{{ t('integrations.apiKeys.title') }}</strong>
+                <span>{{ t('integrations.apiKeys.description') }}</span>
+            </div>
+
+            <div class="placeholder-block">
+                <span>{{ t('integrations.statusLabel') }}</span>
+                <strong>{{ t('integrations.pendingTitle') }}</strong>
+                <small>{{ t('integrations.apiKeys.nextStep') }}</small>
+            </div>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+    .page-shell {
+        @apply flex flex-col gap-6;
+    }
+
+    .eyebrow {
+        @apply text-xs font-bold uppercase tracking-[0.24em];
+        color: #0f766e;
+    }
+
+    .page-header h1 {
+        @apply mt-2 text-4xl font-black;
+        color: #172033;
+    }
+
+    .page-header p,
+    .panel-heading span,
+    .placeholder-block span,
+    .placeholder-block small {
+        @apply text-sm leading-6;
+        color: #526178;
+    }
+
+    .panel {
+        @apply flex flex-col gap-5 rounded-[1.75rem] border p-5;
+        background: rgba(255, 255, 255, 0.9);
+        border-color: rgba(23, 32, 51, 0.08);
+    }
+
+    .panel-heading {
+        @apply flex flex-col gap-2;
+    }
+
+    .panel-heading strong,
+    .placeholder-block strong {
+        color: #172033;
+    }
+
+    .panel-heading strong {
+        @apply text-lg font-black;
+    }
+
+    .placeholder-block {
+        @apply flex flex-col gap-2 rounded-[1.25rem] border p-4;
+        background: #fffaf2;
+        border-color: rgba(23, 32, 51, 0.08);
+    }
+
+    .placeholder-block strong {
+        @apply text-xl font-black;
+    }
+</style>

frontend/src/features/settings/views/SettingsLayoutView.vue

@@ -0,0 +1,93 @@
+<script setup>
+    import { useI18n } from 'vue-i18n';
+    import { useAuthStore } from '@/features/auth/stores/authStore.js';
+
+    const authStore = useAuthStore();
+    const { t } = useI18n();
+</script>
+
+<template>
+    <section class="settings-shell">
+        <aside class="settings-nav">
+            <div class="settings-nav-header">
+                <div class="eyebrow">{{ t('settings.eyebrow') }}</div>
+                <h1>{{ t('settings.title') }}</h1>
+            </div>
+
+            <router-link
+                :to="{ name: 'settings-user-information' }"
+                class="settings-link"
+            >
+                {{ t('settings.userInformation') }}
+            </router-link>
+            <router-link
+                v-if="authStore.isManager"
+                :to="{ name: 'settings-workspaces' }"
+                class="settings-link"
+            >
+                {{ t('settings.workspaces') }}
+            </router-link>
+            <router-link
+                v-if="authStore.isManager"
+                :to="{ name: 'settings-integrations' }"
+                class="settings-link"
+            >
+                {{ t('settings.integrations') }}
+            </router-link>
+        </aside>
+
+        <div class="settings-content">
+            <router-view />
+        </div>
+    </section>
+</template>
+
+<style scoped>
+    .settings-shell {
+        @apply mx-auto grid w-full max-w-7xl gap-4 px-5 py-8 md:px-8 xl:grid-cols-[16rem_minmax(0,1fr)];
+    }
+
+    .settings-nav,
+    .settings-content :deep(.page-shell) {
+        min-width: 0;
+    }
+
+    .settings-nav {
+        @apply flex h-fit flex-col gap-2 rounded-[1.75rem] border p-4;
+        background: rgba(255, 255, 255, 0.9);
+        border-color: rgba(23, 32, 51, 0.08);
+    }
+
+    .settings-nav-header {
+        @apply mb-2 px-2;
+    }
+
+    .eyebrow {
+        @apply text-xs font-bold uppercase tracking-[0.24em];
+        color: #0f766e;
+    }
+
+    .settings-nav-header h1 {
+        @apply mt-2 text-2xl font-black;
+        color: #172033;
+    }
+
+    .settings-link {
+        @apply rounded-[1rem] px-4 py-3 text-sm font-semibold no-underline transition;
+        color: #526178;
+    }
+
+    .settings-link:hover {
+        background: rgba(23, 32, 51, 0.06);
+        color: #172033;
+    }
+
+    .settings-link.router-link-active {
+        background: #172033;
+        color: #fffaf2;
+    }
+
+    .settings-content {
+        min-width: 0;
+    }
+</style>