Multi-user sharing, groups, and in-app notifications
Backend: - Alembic migration 0025: groups, group_memberships, project_shares, note_shares, notifications tables - models: Group, GroupMembership, ProjectShare, NoteShare, Notification - services/access.py: permission resolution (viewer/editor/admin/owner) - services/groups.py + routes/groups.py: full group CRUD + membership - services/sharing.py + routes/shares.py: project/note sharing API - services/notifications.py: in-app notification create/list/mark-read - routes/in_app_notifications.py: GET/POST notification endpoints - routes/users.py: user search endpoint - services/projects.py + services/notes.py: *_for_user variants - routes updated to use *_for_user on get/list; adds permission field - app.py: register all new blueprints Frontend: - api/client.ts: ShareEntry, GroupEntry, NotificationEntry types + helpers - stores/notifications.ts: Pinia store with polling - NotificationBell.vue: bell icon + badge + dropdown toggle + 60s poll - NotificationsPanel.vue: unread notification list with mark-all-read - ShareDialog.vue: teleport modal for sharing projects/notes with users/groups - SharedWithMeView.vue: /shared route listing shared projects and notes - AppHeader: NotificationBell, Shared nav link - ProjectView, NoteViewerView, TaskViewerView: Share button + ShareDialog - SettingsView: Groups admin tab with create/delete groups + member mgmt - router: /shared route Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -75,6 +75,111 @@ export async function apiDelete(path: string): Promise<void> {
|
||||
return handleResponse<void>(res, path);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Sharing, Groups, Notifications, User search
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface ShareEntry {
|
||||
id: number
|
||||
permission: string
|
||||
shared_with_user_id: number | null
|
||||
shared_with_group_id: number | null
|
||||
username?: string
|
||||
group_name?: string
|
||||
invited_by: number
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface GroupEntry {
|
||||
id: number
|
||||
name: string
|
||||
description: string | null
|
||||
created_by: number | null
|
||||
member_count: number
|
||||
is_member: boolean
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface GroupMember {
|
||||
id: number
|
||||
group_id: number
|
||||
user_id: number
|
||||
role: string
|
||||
username: string
|
||||
email: string | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface NotificationEntry {
|
||||
id: number
|
||||
user_id: number
|
||||
type: string
|
||||
payload: Record<string, unknown>
|
||||
read_at: string | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface UserSearchResult {
|
||||
id: number
|
||||
username: string
|
||||
email: string | null
|
||||
}
|
||||
|
||||
// --- User search ---
|
||||
export const searchUsers = (q: string) =>
|
||||
apiGet<{ users: UserSearchResult[] }>(`/api/users/search?q=${encodeURIComponent(q)}`).then(r => r.users)
|
||||
|
||||
// --- Groups ---
|
||||
export const listGroups = () => apiGet<{ groups: GroupEntry[] }>('/api/groups').then(r => r.groups)
|
||||
export const createGroup = (name: string, description?: string) =>
|
||||
apiPost<GroupEntry>('/api/groups', { name, description })
|
||||
export const updateGroup = (id: number, data: { name?: string; description?: string }) =>
|
||||
apiPatch<GroupEntry>(`/api/groups/${id}`, data)
|
||||
export const deleteGroup = (id: number) => apiDelete(`/api/groups/${id}`)
|
||||
export const getGroupDetail = (id: number) =>
|
||||
apiGet<GroupEntry & { members: GroupMember[] }>(`/api/groups/${id}`)
|
||||
export const listGroupMembers = (id: number) =>
|
||||
apiGet<{ members: GroupMember[] }>(`/api/groups/${id}/members`).then(r => r.members)
|
||||
export const addGroupMember = (groupId: number, userId: number, role: string) =>
|
||||
apiPost<GroupMember>(`/api/groups/${groupId}/members`, { user_id: userId, role })
|
||||
export const updateGroupMember = (groupId: number, userId: number, role: string) =>
|
||||
apiPatch<GroupMember>(`/api/groups/${groupId}/members/${userId}`, { role })
|
||||
export const removeGroupMember = (groupId: number, userId: number) =>
|
||||
apiDelete(`/api/groups/${groupId}/members/${userId}`)
|
||||
|
||||
// --- Project shares ---
|
||||
export const listProjectShares = (projectId: number) =>
|
||||
apiGet<{ shares: ShareEntry[] }>(`/api/projects/${projectId}/shares`).then(r => r.shares)
|
||||
export const createProjectShare = (projectId: number, body: { user_id?: number; group_id?: number; permission: string }) =>
|
||||
apiPost<ShareEntry>(`/api/projects/${projectId}/shares`, body)
|
||||
export const updateProjectShare = (projectId: number, shareId: number, permission: string) =>
|
||||
apiPatch<ShareEntry>(`/api/projects/${projectId}/shares/${shareId}`, { permission })
|
||||
export const deleteProjectShare = (projectId: number, shareId: number) =>
|
||||
apiDelete(`/api/projects/${projectId}/shares/${shareId}`)
|
||||
|
||||
// --- Note / task shares ---
|
||||
export const listNoteShares = (noteId: number) =>
|
||||
apiGet<{ shares: ShareEntry[] }>(`/api/notes/${noteId}/shares`).then(r => r.shares)
|
||||
export const createNoteShare = (noteId: number, body: { user_id?: number; group_id?: number; permission: string }) =>
|
||||
apiPost<ShareEntry>(`/api/notes/${noteId}/shares`, body)
|
||||
export const updateNoteShare = (noteId: number, shareId: number, permission: string) =>
|
||||
apiPatch<ShareEntry>(`/api/notes/${noteId}/shares/${shareId}`, { permission })
|
||||
export const deleteNoteShare = (noteId: number, shareId: number) =>
|
||||
apiDelete(`/api/notes/${noteId}/shares/${shareId}`)
|
||||
|
||||
// --- Shared-with-me ---
|
||||
export const getSharedWithMe = () =>
|
||||
apiGet<{ projects: Record<string, unknown>[]; notes: Record<string, unknown>[] }>('/api/shared-with-me')
|
||||
|
||||
// --- In-app notifications ---
|
||||
export const getNotifications = (all = false) =>
|
||||
apiGet<{ notifications: NotificationEntry[] }>(`/api/notifications${all ? '?all=true' : ''}`).then(r => r.notifications)
|
||||
export const getNotificationCount = () =>
|
||||
apiGet<{ count: number }>('/api/notifications/count').then(r => r.count)
|
||||
export const markNotificationRead = (id: number) => apiPost<void>(`/api/notifications/${id}/read`, {})
|
||||
export const markAllNotificationsRead = () => apiPost<{ marked: number }>('/api/notifications/read-all', {})
|
||||
|
||||
export interface SSEStreamHandle {
|
||||
close(): void;
|
||||
/** Resolves when the stream closes (normally or via error/abort). */
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useShortcuts } from "@/composables/useShortcuts";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { useChatStore } from "@/stores/chat";
|
||||
import AppLogo from "@/components/AppLogo.vue";
|
||||
import NotificationBell from "@/components/NotificationBell.vue";
|
||||
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const { toggleShortcuts } = useShortcuts();
|
||||
@@ -76,6 +77,7 @@ router.afterEach(() => {
|
||||
<router-link to="/tasks" class="nav-link">Tasks</router-link>
|
||||
<router-link to="/chat" :class="['nav-link', { 'router-link-active': isChatActive }]">Chat</router-link>
|
||||
<router-link to="/graph" class="nav-link">Graph</router-link>
|
||||
<router-link to="/shared" class="nav-link">Shared</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Right: status + utilities + gear + user -->
|
||||
@@ -85,6 +87,8 @@ router.afterEach(() => {
|
||||
<span class="status-text">{{ statusShortLabel }}</span>
|
||||
</span>
|
||||
|
||||
<NotificationBell />
|
||||
|
||||
<button class="btn-icon" @click="toggleShortcuts" title="Keyboard shortcuts (?)">?</button>
|
||||
|
||||
<button class="btn-icon" @click="toggleTheme" :title="`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`">
|
||||
@@ -121,6 +125,7 @@ router.afterEach(() => {
|
||||
<router-link to="/tasks" class="nav-link">Tasks</router-link>
|
||||
<router-link to="/chat" :class="['nav-link', { 'router-link-active': isChatActive }]">Chat</router-link>
|
||||
<router-link to="/graph" class="nav-link">Graph</router-link>
|
||||
<router-link to="/shared" class="nav-link">Shared</router-link>
|
||||
<div class="mobile-divider"></div>
|
||||
<router-link to="/settings" class="nav-link">Settings</router-link>
|
||||
<div class="mobile-divider"></div>
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useNotificationsStore } from '@/stores/notifications'
|
||||
import NotificationsPanel from './NotificationsPanel.vue'
|
||||
|
||||
const store = useNotificationsStore()
|
||||
const open = ref(false)
|
||||
const wrapRef = ref<HTMLElement | null>(null)
|
||||
|
||||
let pollInterval: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
function toggle() {
|
||||
open.value = !open.value
|
||||
if (open.value) store.fetchAll()
|
||||
}
|
||||
|
||||
function close() {
|
||||
open.value = false
|
||||
}
|
||||
|
||||
function onDocClick(e: MouseEvent) {
|
||||
if (open.value && wrapRef.value && !wrapRef.value.contains(e.target as Node)) {
|
||||
close()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
store.fetchCount()
|
||||
pollInterval = setInterval(() => store.fetchCount(), 60_000)
|
||||
document.addEventListener('click', onDocClick, true)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (pollInterval) clearInterval(pollInterval)
|
||||
document.removeEventListener('click', onDocClick, true)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bell-wrap" ref="wrapRef">
|
||||
<button
|
||||
class="btn-bell"
|
||||
:class="{ active: open }"
|
||||
@click="toggle"
|
||||
aria-label="Notifications"
|
||||
:title="`${store.count} unread notification${store.count !== 1 ? 's' : ''}`"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
|
||||
<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||
</svg>
|
||||
<span v-if="store.count > 0" class="bell-badge" aria-live="polite">{{ store.count > 99 ? '99+' : store.count }}</span>
|
||||
</button>
|
||||
<NotificationsPanel v-if="open" @close="close" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.bell-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-bell {
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.25rem 0.45rem;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.btn-bell:hover,
|
||||
.btn-bell.active {
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.bell-badge {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
background: var(--color-danger, #ef4444);
|
||||
color: #fff;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 3px;
|
||||
line-height: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,156 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useNotificationsStore } from '@/stores/notifications'
|
||||
import { relativeTime } from '@/composables/useRelativeTime'
|
||||
|
||||
const emit = defineEmits<{ close: [] }>()
|
||||
const store = useNotificationsStore()
|
||||
const router = useRouter()
|
||||
|
||||
const typeIcon: Record<string, string> = {
|
||||
project_shared: '📁',
|
||||
note_shared: '📝',
|
||||
group_added: '👥',
|
||||
}
|
||||
|
||||
async function handleClick(notif: { id: number; payload: Record<string, unknown> }) {
|
||||
await store.markRead(notif.id)
|
||||
const url = notif.payload.url as string | undefined
|
||||
if (url) {
|
||||
emit('close')
|
||||
router.push(url)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => store.fetchAll())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="notif-panel" role="dialog" aria-label="Notifications">
|
||||
<header class="notif-panel-header">
|
||||
<span class="notif-panel-title">Notifications</span>
|
||||
<button
|
||||
v-if="store.count > 0"
|
||||
class="btn-mark-all"
|
||||
@click="store.markAll()"
|
||||
>Mark all read</button>
|
||||
</header>
|
||||
|
||||
<ul class="notif-list" v-if="store.items.length">
|
||||
<li
|
||||
v-for="n in store.items"
|
||||
:key="n.id"
|
||||
class="notif-item"
|
||||
@click="handleClick(n)"
|
||||
>
|
||||
<span class="notif-icon">{{ typeIcon[n.type] ?? '🔔' }}</span>
|
||||
<div class="notif-body">
|
||||
<p class="notif-msg">
|
||||
<strong v-if="n.payload.invited_by">{{ n.payload.invited_by }}</strong>
|
||||
{{ n.type === 'project_shared'
|
||||
? ` shared "${n.payload.project_title}" with you as ${n.payload.permission}`
|
||||
: n.type === 'note_shared'
|
||||
? ` shared "${n.payload.note_title}" with you as ${n.payload.permission}`
|
||||
: ` added you to "${n.payload.group_name}" as ${n.payload.role}` }}
|
||||
</p>
|
||||
<span class="notif-time">{{ relativeTime(n.created_at) }}</span>
|
||||
</div>
|
||||
<button class="btn-notif-close" @click.stop="store.markRead(n.id)" aria-label="Dismiss">✕</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else class="notif-empty">No unread notifications</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.notif-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
width: 340px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.notif-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.notif-panel-title {
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.btn-mark-all {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
font-size: 0.78rem;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.btn-mark-all:hover { text-decoration: underline; }
|
||||
|
||||
.notif-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.notif-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.6rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.notif-item:last-child { border-bottom: none; }
|
||||
.notif-item:hover { background: var(--color-hover); }
|
||||
|
||||
.notif-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.1rem; }
|
||||
|
||||
.notif-body { flex: 1; min-width: 0; }
|
||||
.notif-msg {
|
||||
margin: 0 0 0.2rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text);
|
||||
line-height: 1.4;
|
||||
word-break: break-word;
|
||||
}
|
||||
.notif-time { font-size: 0.75rem; color: var(--color-muted); }
|
||||
|
||||
.btn-notif-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.1rem 0.25rem;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.1s;
|
||||
}
|
||||
.btn-notif-close:hover { color: var(--color-text); }
|
||||
|
||||
.notif-empty {
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
color: var(--color-muted);
|
||||
font-size: 0.88rem;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,417 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import {
|
||||
searchUsers,
|
||||
listGroups,
|
||||
listProjectShares,
|
||||
createProjectShare,
|
||||
updateProjectShare,
|
||||
deleteProjectShare,
|
||||
listNoteShares,
|
||||
createNoteShare,
|
||||
updateNoteShare,
|
||||
deleteNoteShare,
|
||||
type ShareEntry,
|
||||
type GroupEntry,
|
||||
type UserSearchResult,
|
||||
} from '@/api/client'
|
||||
|
||||
const props = defineProps<{
|
||||
resourceType: 'project' | 'note'
|
||||
resourceId: number
|
||||
resourceTitle: string
|
||||
}>()
|
||||
const emit = defineEmits<{ close: [] }>()
|
||||
|
||||
const addMode = ref<'user' | 'group'>('user')
|
||||
const userQuery = ref('')
|
||||
const userResults = ref<UserSearchResult[]>([])
|
||||
const selectedUser = ref<UserSearchResult | null>(null)
|
||||
const selectedGroupId = ref<number | ''>('')
|
||||
const newPermission = ref('viewer')
|
||||
const groups = ref<GroupEntry[]>([])
|
||||
const shares = ref<ShareEntry[]>([])
|
||||
const saving = ref(false)
|
||||
|
||||
let searchTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
function debounceSearch() {
|
||||
if (searchTimer) clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(async () => {
|
||||
if (userQuery.value.length < 2) { userResults.value = []; return }
|
||||
userResults.value = await searchUsers(userQuery.value)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function selectUser(u: UserSearchResult) {
|
||||
selectedUser.value = u
|
||||
userQuery.value = u.username
|
||||
userResults.value = []
|
||||
}
|
||||
|
||||
async function loadShares() {
|
||||
if (props.resourceType === 'project') {
|
||||
shares.value = await listProjectShares(props.resourceId)
|
||||
} else {
|
||||
shares.value = await listNoteShares(props.resourceId)
|
||||
}
|
||||
}
|
||||
|
||||
async function addShare() {
|
||||
if (saving.value) return
|
||||
saving.value = true
|
||||
try {
|
||||
const body: { user_id?: number; group_id?: number; permission: string } = {
|
||||
permission: newPermission.value,
|
||||
}
|
||||
if (addMode.value === 'user' && selectedUser.value) {
|
||||
body.user_id = selectedUser.value.id
|
||||
} else if (addMode.value === 'group' && selectedGroupId.value) {
|
||||
body.group_id = selectedGroupId.value as number
|
||||
} else {
|
||||
return
|
||||
}
|
||||
if (props.resourceType === 'project') {
|
||||
await createProjectShare(props.resourceId, body)
|
||||
} else {
|
||||
await createNoteShare(props.resourceId, body)
|
||||
}
|
||||
selectedUser.value = null
|
||||
userQuery.value = ''
|
||||
selectedGroupId.value = ''
|
||||
newPermission.value = 'viewer'
|
||||
await loadShares()
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function changePermission(share: ShareEntry, permission: string) {
|
||||
if (props.resourceType === 'project') {
|
||||
await updateProjectShare(props.resourceId, share.id, permission)
|
||||
} else {
|
||||
await updateNoteShare(props.resourceId, share.id, permission)
|
||||
}
|
||||
await loadShares()
|
||||
}
|
||||
|
||||
async function removeShare(share: ShareEntry) {
|
||||
if (props.resourceType === 'project') {
|
||||
await deleteProjectShare(props.resourceId, share.id)
|
||||
} else {
|
||||
await deleteNoteShare(props.resourceId, share.id)
|
||||
}
|
||||
await loadShares()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
groups.value = await listGroups()
|
||||
await loadShares()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div class="share-overlay" @click.self="emit('close')">
|
||||
<div class="share-dialog" role="dialog" :aria-label="`Share ${resourceTitle}`">
|
||||
<header class="share-header">
|
||||
<h2 class="share-title">Share "{{ resourceTitle }}"</h2>
|
||||
<button class="btn-close" @click="emit('close')" aria-label="Close">✕</button>
|
||||
</header>
|
||||
|
||||
<!-- Add share form -->
|
||||
<div class="share-add">
|
||||
<div class="share-tabs">
|
||||
<button :class="['share-tab', { active: addMode === 'user' }]" @click="addMode = 'user'">User</button>
|
||||
<button :class="['share-tab', { active: addMode === 'group' }]" @click="addMode = 'group'">Group</button>
|
||||
</div>
|
||||
|
||||
<div v-if="addMode === 'user'" class="share-target-form">
|
||||
<div class="user-search-wrap">
|
||||
<input
|
||||
v-model="userQuery"
|
||||
class="share-input"
|
||||
placeholder="Search by username or email…"
|
||||
@input="debounceSearch"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<ul v-if="userResults.length" class="user-results">
|
||||
<li v-for="u in userResults" :key="u.id" @click="selectUser(u)" class="user-result-item">
|
||||
<span class="user-result-name">{{ u.username }}</span>
|
||||
<span class="user-result-email">{{ u.email }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<template v-if="selectedUser">
|
||||
<select v-model="newPermission" class="perm-select">
|
||||
<option value="viewer">Viewer</option>
|
||||
<option value="editor">Editor</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
<button class="btn-add-share" @click="addShare" :disabled="saving">Add</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-else class="share-target-form">
|
||||
<select v-model="selectedGroupId" class="share-input">
|
||||
<option value="" disabled>Select a group…</option>
|
||||
<option v-for="g in groups" :key="g.id" :value="g.id">{{ g.name }} ({{ g.member_count }} members)</option>
|
||||
</select>
|
||||
<select v-model="newPermission" class="perm-select">
|
||||
<option value="viewer">Viewer</option>
|
||||
<option value="editor">Editor</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
<button class="btn-add-share" @click="addShare" :disabled="saving || !selectedGroupId">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current shares -->
|
||||
<div class="shares-list-wrap">
|
||||
<p class="shares-label">Current access</p>
|
||||
<ul class="shares-list">
|
||||
<li v-for="share in shares" :key="share.id" class="share-row">
|
||||
<span class="share-target-icon">{{ share.shared_with_user_id ? '👤' : '👥' }}</span>
|
||||
<span class="share-target-name">
|
||||
{{ share.shared_with_user_id ? share.username : share.group_name }}
|
||||
</span>
|
||||
<select
|
||||
class="perm-select-inline"
|
||||
:value="share.permission"
|
||||
@change="changePermission(share, ($event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<option value="viewer">Viewer</option>
|
||||
<option value="editor">Editor</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
<button class="btn-remove-share" @click="removeShare(share)" aria-label="Remove">✕</button>
|
||||
</li>
|
||||
<li v-if="!shares.length" class="shares-empty">Not shared with anyone yet</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.share-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.share-dialog {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
width: 480px;
|
||||
max-width: 95vw;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.share-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.share-title {
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-muted);
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
padding: 0.25rem;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.btn-close:hover { color: var(--color-text); }
|
||||
|
||||
.share-add {
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.share-tabs {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.share-tab {
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
padding: 0.3rem 0.8rem;
|
||||
font-size: 0.82rem;
|
||||
cursor: pointer;
|
||||
color: var(--color-muted);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.share-tab.active {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.share-target-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.user-search-wrap {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.share-input {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.7rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.share-input:focus { border-color: var(--color-primary); }
|
||||
|
||||
.user-results {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
margin-top: 2px;
|
||||
list-style: none;
|
||||
padding: 0.25rem 0;
|
||||
z-index: 10;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
max-height: 180px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.user-result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.user-result-item:hover { background: var(--color-hover); }
|
||||
|
||||
.user-result-name { font-weight: 600; font-size: 0.88rem; }
|
||||
.user-result-email { color: var(--color-muted); font-size: 0.8rem; }
|
||||
|
||||
.perm-select {
|
||||
padding: 0.45rem 0.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-add-share {
|
||||
padding: 0.45rem 1rem;
|
||||
background: linear-gradient(135deg, #6366f1, #4f46e5);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-add-share:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.shares-list-wrap {
|
||||
padding: 1rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.shares-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--color-muted);
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.shares-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.share-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.share-target-icon { font-size: 1rem; flex-shrink: 0; }
|
||||
.share-target-name { flex: 1; font-size: 0.88rem; font-weight: 500; }
|
||||
|
||||
.perm-select-inline {
|
||||
padding: 0.25rem 0.4rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-remove-share {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.15rem 0.3rem;
|
||||
border-radius: 4px;
|
||||
transition: color 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-remove-share:hover { color: var(--color-danger, #ef4444); }
|
||||
|
||||
.shares-empty {
|
||||
color: var(--color-muted);
|
||||
font-size: 0.85rem;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
@@ -105,6 +105,11 @@ const router = createRouter({
|
||||
name: "chat-conversation",
|
||||
component: () => import("@/views/ChatView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/shared",
|
||||
name: "shared-with-me",
|
||||
component: () => import("@/views/SharedWithMeView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/settings",
|
||||
name: "settings",
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
getNotificationCount,
|
||||
getNotifications,
|
||||
markAllNotificationsRead,
|
||||
markNotificationRead,
|
||||
type NotificationEntry,
|
||||
} from '@/api/client'
|
||||
|
||||
export const useNotificationsStore = defineStore('notifications', () => {
|
||||
const count = ref(0)
|
||||
const items = ref<NotificationEntry[]>([])
|
||||
|
||||
async function fetchCount() {
|
||||
try {
|
||||
count.value = await getNotificationCount()
|
||||
} catch {
|
||||
// silently ignore — polling failure shouldn't surface to user
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchAll() {
|
||||
try {
|
||||
items.value = await getNotifications(false)
|
||||
count.value = items.value.length
|
||||
} catch {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
async function markRead(id: number) {
|
||||
await markNotificationRead(id)
|
||||
items.value = items.value.filter(n => n.id !== id)
|
||||
count.value = Math.max(0, count.value - 1)
|
||||
}
|
||||
|
||||
async function markAll() {
|
||||
await markAllNotificationsRead()
|
||||
items.value = []
|
||||
count.value = 0
|
||||
}
|
||||
|
||||
return { count, items, fetchCount, fetchAll, markRead, markAll }
|
||||
})
|
||||
@@ -8,12 +8,14 @@ import { apiPost, apiGet } from "@/api/client";
|
||||
import type { Note } from "@/types/note";
|
||||
import TagPill from "@/components/TagPill.vue";
|
||||
import TableOfContents from "@/components/TableOfContents.vue";
|
||||
import ShareDialog from "@/components/ShareDialog.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const store = useNotesStore();
|
||||
const backlinks = ref<{ type: string; id: number; title: string }[]>([]);
|
||||
const converting = ref(false);
|
||||
const showShare = ref(false);
|
||||
|
||||
// Context enrichment
|
||||
const projectTitle = ref<string | null>(null);
|
||||
@@ -169,6 +171,7 @@ async function convertToTask() {
|
||||
>
|
||||
{{ converting ? "Converting..." : "Convert to Task" }}
|
||||
</button>
|
||||
<button class="btn-share" @click="showShare = true">Share</button>
|
||||
</div>
|
||||
|
||||
<!-- Breadcrumb: parent → project → milestone -->
|
||||
@@ -248,6 +251,14 @@ async function convertToTask() {
|
||||
class="toc-sidebar"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ShareDialog
|
||||
v-if="showShare && store.currentNote"
|
||||
resource-type="note"
|
||||
:resource-id="store.currentNote.id"
|
||||
:resource-title="store.currentNote.title || '(untitled)'"
|
||||
@close="showShare = false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style src="@/assets/viewer-shared.css" />
|
||||
@@ -334,6 +345,19 @@ async function convertToTask() {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.btn-share {
|
||||
padding: 0.3rem 0.75rem;
|
||||
background: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.btn-share:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
||||
|
||||
.note-title {
|
||||
font-family: "Fraunces", Georgia, serif;
|
||||
font-size: 2rem;
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useRoute, useRouter } from "vue-router";
|
||||
import { apiGet, apiPatch, apiDelete, apiPost } from "@/api/client";
|
||||
import { useToastStore } from "@/stores/toast";
|
||||
import { relativeTime } from "@/composables/useRelativeTime";
|
||||
import ShareDialog from "@/components/ShareDialog.vue";
|
||||
|
||||
interface Milestone {
|
||||
id: number;
|
||||
@@ -267,6 +268,7 @@ async function saveProject() {
|
||||
}
|
||||
|
||||
const showDeleteConfirm = ref(false);
|
||||
const showShare = ref(false);
|
||||
|
||||
async function confirmDelete() {
|
||||
if (!project.value) return;
|
||||
@@ -294,6 +296,7 @@ async function confirmDelete() {
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
|
||||
Workspace
|
||||
</router-link>
|
||||
<button v-if="project" class="btn-share" @click="showShare = true">Share</button>
|
||||
<button v-if="project" class="btn-danger-outline" @click="showDeleteConfirm = true">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -582,6 +585,14 @@ async function confirmDelete() {
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
|
||||
<ShareDialog
|
||||
v-if="showShare && project"
|
||||
resource-type="project"
|
||||
:resource-id="project.id"
|
||||
:resource-title="project.title"
|
||||
@close="showShare = false"
|
||||
/>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -634,6 +645,19 @@ async function confirmDelete() {
|
||||
}
|
||||
.btn-workspace:hover { box-shadow: 0 4px 14px rgba(99, 102, 241, 0.42); opacity: 0.95; color: #fff; }
|
||||
|
||||
.btn-share {
|
||||
padding: 0.4rem 0.8rem;
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-secondary);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.btn-share:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
||||
|
||||
.btn-danger-outline {
|
||||
padding: 0.4rem 0.8rem;
|
||||
background: none;
|
||||
|
||||
@@ -3,7 +3,7 @@ import { ref, watch, onMounted } from "vue";
|
||||
import { useSettingsStore } from "@/stores/settings";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { useToastStore } from "@/stores/toast";
|
||||
import { apiGet, apiPost, apiPut, apiDelete } from "@/api/client";
|
||||
import { apiGet, apiPost, apiPut, apiDelete, listGroups, createGroup, deleteGroup, listGroupMembers, addGroupMember, removeGroupMember, searchUsers, type GroupEntry, type GroupMember, type UserSearchResult } from "@/api/client";
|
||||
import { usePushStore } from "@/stores/push";
|
||||
import type { User } from "@/types/auth";
|
||||
import PaginationBar from "@/components/PaginationBar.vue";
|
||||
@@ -31,15 +31,91 @@ const restoring = ref(false);
|
||||
const restoreFileInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
// Migrate stored "admin" → "config"; unknown tabs fall back to "general"
|
||||
const VALID_TABS = new Set(["general", "account", "notifications", "integrations", "data", "config", "users", "logs"]);
|
||||
const VALID_TABS = new Set(["general", "account", "notifications", "integrations", "data", "config", "users", "logs", "groups"]);
|
||||
const _stored = localStorage.getItem("settings_tab") ?? "general";
|
||||
const activeTab = ref(VALID_TABS.has(_stored) ? (_stored === "admin" ? "config" : _stored) : "general");
|
||||
watch(activeTab, (v) => {
|
||||
localStorage.setItem("settings_tab", v === "admin" ? "config" : v);
|
||||
if (v === "users" && authStore.isAdmin) loadUsersPanel();
|
||||
if (v === "logs" && authStore.isAdmin) loadLogsPanel();
|
||||
if (v === "groups" && authStore.isAdmin) loadGroupsPanel();
|
||||
});
|
||||
|
||||
// Groups management
|
||||
const groups = ref<GroupEntry[]>([]);
|
||||
const groupsLoading = ref(false);
|
||||
const newGroupName = ref("");
|
||||
const newGroupDesc = ref("");
|
||||
const creatingGroup = ref(false);
|
||||
const expandedGroupId = ref<number | null>(null);
|
||||
const groupMembers = ref<Record<number, GroupMember[]>>({});
|
||||
const groupMemberSearch = ref("");
|
||||
const groupMemberResults = ref<UserSearchResult[]>([]);
|
||||
let groupSearchTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const groupMemberRole = ref("member");
|
||||
|
||||
async function loadGroupsPanel() {
|
||||
groupsLoading.value = true;
|
||||
try {
|
||||
groups.value = await listGroups();
|
||||
} finally {
|
||||
groupsLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createNewGroup() {
|
||||
if (!newGroupName.value.trim() || creatingGroup.value) return;
|
||||
creatingGroup.value = true;
|
||||
try {
|
||||
await createGroup(newGroupName.value.trim(), newGroupDesc.value.trim() || undefined);
|
||||
newGroupName.value = "";
|
||||
newGroupDesc.value = "";
|
||||
await loadGroupsPanel();
|
||||
} finally {
|
||||
creatingGroup.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteGroupConfirm(g: GroupEntry) {
|
||||
if (!confirm(`Delete group "${g.name}"? This cannot be undone.`)) return;
|
||||
await deleteGroup(g.id);
|
||||
if (expandedGroupId.value === g.id) expandedGroupId.value = null;
|
||||
await loadGroupsPanel();
|
||||
}
|
||||
|
||||
async function toggleGroupExpand(g: GroupEntry) {
|
||||
if (expandedGroupId.value === g.id) {
|
||||
expandedGroupId.value = null;
|
||||
return;
|
||||
}
|
||||
expandedGroupId.value = g.id;
|
||||
groupMemberSearch.value = "";
|
||||
groupMemberResults.value = [];
|
||||
groupMembers.value[g.id] = await listGroupMembers(g.id);
|
||||
}
|
||||
|
||||
function debounceGroupMemberSearch() {
|
||||
if (groupSearchTimer) clearTimeout(groupSearchTimer);
|
||||
groupSearchTimer = setTimeout(async () => {
|
||||
if (groupMemberSearch.value.length < 2) { groupMemberResults.value = []; return; }
|
||||
groupMemberResults.value = await searchUsers(groupMemberSearch.value);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
async function addMemberToGroup(groupId: number, user: UserSearchResult) {
|
||||
await addGroupMember(groupId, user.id, groupMemberRole.value);
|
||||
groupMembers.value[groupId] = await listGroupMembers(groupId);
|
||||
groupMemberSearch.value = "";
|
||||
groupMemberResults.value = [];
|
||||
await loadGroupsPanel();
|
||||
}
|
||||
|
||||
async function removeMemberFromGroup(groupId: number, userId: number) {
|
||||
await removeGroupMember(groupId, userId);
|
||||
groupMembers.value[groupId] = await listGroupMembers(groupId);
|
||||
await loadGroupsPanel();
|
||||
}
|
||||
|
||||
// Chat retention
|
||||
const chatRetentionDays = ref(90);
|
||||
const savingRetention = ref(false);
|
||||
@@ -158,6 +234,7 @@ onMounted(async () => {
|
||||
} catch {
|
||||
// base URL not configured yet
|
||||
}
|
||||
if (activeTab.value === "groups") loadGroupsPanel();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -703,7 +780,7 @@ function formatUserDate(iso: string): string {
|
||||
<div v-if="authStore.isAdmin" class="sidebar-group">
|
||||
<div class="sidebar-group-label">Admin</div>
|
||||
<button
|
||||
v-for="tab in ['config', 'users', 'logs']"
|
||||
v-for="tab in ['config', 'users', 'groups', 'logs']"
|
||||
:key="tab"
|
||||
:class="['sidebar-item', { active: activeTab === tab }]"
|
||||
@click="activeTab = tab"
|
||||
@@ -1385,6 +1462,78 @@ function formatUserDate(iso: string): string {
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ── Groups ── -->
|
||||
<div v-if="authStore.isAdmin" v-show="activeTab === 'groups'" class="settings-grid">
|
||||
|
||||
<section class="settings-section full-width">
|
||||
<h2>Groups</h2>
|
||||
<p class="section-desc">Manage platform-wide groups for sharing projects and notes.</p>
|
||||
|
||||
<!-- Create group form -->
|
||||
<div class="group-create-form">
|
||||
<input v-model="newGroupName" class="input-field" placeholder="Group name" maxlength="100" @keydown.enter="createNewGroup" />
|
||||
<input v-model="newGroupDesc" class="input-field" placeholder="Description (optional)" maxlength="255" @keydown.enter="createNewGroup" />
|
||||
<button class="btn-primary" @click="createNewGroup" :disabled="creatingGroup || !newGroupName.trim()">
|
||||
{{ creatingGroup ? 'Creating…' : 'Create Group' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Groups list -->
|
||||
<div v-if="groupsLoading" class="loading-msg">Loading groups…</div>
|
||||
<div v-else-if="!groups.length" class="empty-msg">No groups yet.</div>
|
||||
<div v-else class="groups-list">
|
||||
<div v-for="g in groups" :key="g.id" class="group-card">
|
||||
<div class="group-card-header">
|
||||
<div class="group-card-info">
|
||||
<span class="group-name">{{ g.name }}</span>
|
||||
<span class="group-meta">{{ g.member_count }} member{{ g.member_count !== 1 ? 's' : '' }}</span>
|
||||
<span v-if="g.description" class="group-desc">{{ g.description }}</span>
|
||||
</div>
|
||||
<div class="group-card-actions">
|
||||
<button class="btn-sm" @click="toggleGroupExpand(g)">
|
||||
{{ expandedGroupId === g.id ? 'Collapse' : 'Manage' }}
|
||||
</button>
|
||||
<button class="btn-sm btn-danger-sm" @click="deleteGroupConfirm(g)">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Members panel -->
|
||||
<div v-if="expandedGroupId === g.id" class="group-members-panel">
|
||||
<div class="members-search">
|
||||
<div class="member-search-wrap">
|
||||
<input
|
||||
v-model="groupMemberSearch"
|
||||
class="input-field"
|
||||
placeholder="Search user to add…"
|
||||
@input="debounceGroupMemberSearch"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<ul v-if="groupMemberResults.length" class="member-results">
|
||||
<li v-for="u in groupMemberResults" :key="u.id" class="member-result-item" @click="addMemberToGroup(g.id, u)">
|
||||
<span class="member-result-name">{{ u.username }}</span>
|
||||
<span class="member-result-email">{{ u.email }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<select v-model="groupMemberRole" class="role-select">
|
||||
<option value="member">Member</option>
|
||||
<option value="owner">Owner</option>
|
||||
</select>
|
||||
</div>
|
||||
<ul class="members-list">
|
||||
<li v-for="m in (groupMembers[g.id] || [])" :key="m.user_id" class="member-row">
|
||||
<span class="member-name">{{ m.username }}</span>
|
||||
<span class="member-role-badge" :class="`role-${m.role}`">{{ m.role }}</span>
|
||||
<button class="btn-sm btn-danger-sm" @click="removeMemberFromGroup(g.id, m.user_id)">Remove</button>
|
||||
</li>
|
||||
<li v-if="!(groupMembers[g.id]?.length)" class="members-empty">No members yet.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div><!-- end .settings-content -->
|
||||
</main>
|
||||
</template>
|
||||
@@ -2056,4 +2205,211 @@ function formatUserDate(iso: string): string {
|
||||
background: var(--color-bg-secondary); color: var(--color-text-muted);
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
/* ── Groups tab ──────────────────────────────────────────────── */
|
||||
.btn-primary {
|
||||
padding: 0.4rem 0.9rem;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-primary:disabled { opacity: 0.6; cursor: default; }
|
||||
.btn-primary:hover:not(:disabled) { opacity: 0.9; }
|
||||
|
||||
.input-field {
|
||||
width: 100%;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.input-field:focus { border-color: var(--color-primary); }
|
||||
|
||||
.group-create-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
.group-create-form .input-field { flex: 1; min-width: 160px; }
|
||||
|
||||
.loading-msg, .empty-msg {
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
font-size: 0.88rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.groups-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.group-card {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md, 8px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.group-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.group-card-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.group-meta {
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.group-desc {
|
||||
font-size: 0.82rem;
|
||||
color: var(--color-text-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.group-card-actions {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.6rem;
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.btn-sm:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
||||
.btn-danger-sm:hover { border-color: var(--color-danger, #e74c3c); color: var(--color-danger, #e74c3c); }
|
||||
|
||||
.group-members-panel {
|
||||
padding: 0.75rem 1rem 1rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.members-search {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.member-search-wrap {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.member-results {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
margin-top: 2px;
|
||||
list-style: none;
|
||||
padding: 0.25rem 0;
|
||||
z-index: 10;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.member-result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.45rem 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.member-result-item:hover { background: var(--color-hover); }
|
||||
.member-result-name { font-weight: 600; font-size: 0.85rem; }
|
||||
.member-result-email { color: var(--color-text-muted); font-size: 0.78rem; }
|
||||
|
||||
.role-select {
|
||||
padding: 0.4rem 0.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.members-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.member-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.4rem 0.5rem;
|
||||
border-radius: 6px;
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.member-name { flex: 1; font-size: 0.88rem; font-weight: 500; color: var(--color-text); }
|
||||
|
||||
.member-role-badge {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.role-owner { background: color-mix(in srgb, var(--color-warning, #f59e0b) 15%, transparent); color: var(--color-warning, #f59e0b); }
|
||||
.role-member { background: color-mix(in srgb, var(--color-muted) 15%, transparent); color: var(--color-muted); }
|
||||
|
||||
.members-empty {
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
font-size: 0.82rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,256 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getSharedWithMe } from '@/api/client'
|
||||
|
||||
interface SharedProject {
|
||||
id: number
|
||||
title: string
|
||||
description: string | null
|
||||
status: string
|
||||
color: string | null
|
||||
permission: string
|
||||
owner_username: string
|
||||
}
|
||||
|
||||
interface SharedNote {
|
||||
id: number
|
||||
title: string
|
||||
is_task: boolean
|
||||
permission: string
|
||||
owner_username: string
|
||||
}
|
||||
|
||||
const projects = ref<SharedProject[]>([])
|
||||
const notes = ref<SharedNote[]>([])
|
||||
const loading = ref(true)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const data = await getSharedWithMe()
|
||||
projects.value = data.projects as unknown as SharedProject[]
|
||||
notes.value = data.notes as unknown as SharedNote[]
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="shared-page page-container">
|
||||
<header class="page-header">
|
||||
<h1 class="page-title">Shared with me</h1>
|
||||
</header>
|
||||
|
||||
<div v-if="loading" class="loading-state">Loading…</div>
|
||||
|
||||
<template v-else>
|
||||
<!-- Projects -->
|
||||
<section class="shared-section">
|
||||
<h2 class="section-heading">Projects</h2>
|
||||
<div v-if="projects.length" class="shared-grid">
|
||||
<router-link
|
||||
v-for="p in projects"
|
||||
:key="p.id"
|
||||
:to="`/projects/${p.id}`"
|
||||
class="shared-card"
|
||||
>
|
||||
<div class="card-color-bar" :style="p.color ? `background: ${p.color}` : ''" />
|
||||
<div class="card-body">
|
||||
<div class="card-title">{{ p.title }}</div>
|
||||
<div class="card-meta">
|
||||
<span class="card-owner">by {{ p.owner_username }}</span>
|
||||
<span class="perm-badge" :class="`perm-${p.permission}`">{{ p.permission }}</span>
|
||||
</div>
|
||||
<p v-if="p.description" class="card-desc">{{ p.description }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<p v-else class="empty-msg">No projects shared with you yet.</p>
|
||||
</section>
|
||||
|
||||
<!-- Notes & Tasks -->
|
||||
<section class="shared-section">
|
||||
<h2 class="section-heading">Notes & Tasks</h2>
|
||||
<div v-if="notes.length" class="shared-list">
|
||||
<router-link
|
||||
v-for="n in notes"
|
||||
:key="n.id"
|
||||
:to="n.is_task ? `/tasks/${n.id}` : `/notes/${n.id}`"
|
||||
class="shared-row"
|
||||
>
|
||||
<span class="row-icon">{{ n.is_task ? '✓' : '📄' }}</span>
|
||||
<span class="row-title">{{ n.title || '(untitled)' }}</span>
|
||||
<span class="row-owner">by {{ n.owner_username }}</span>
|
||||
<span class="perm-badge" :class="`perm-${n.permission}`">{{ n.permission }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<p v-else class="empty-msg">No notes or tasks shared with you yet.</p>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.shared-page {
|
||||
padding: 2rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
color: var(--color-muted);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.shared-section {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--color-muted);
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.shared-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.shared-card {
|
||||
display: flex;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.15s, transform 0.15s;
|
||||
}
|
||||
.shared-card:hover {
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.card-color-bar {
|
||||
width: 4px;
|
||||
flex-shrink: 0;
|
||||
background: var(--color-border);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0.9rem 1rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 0.3rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.card-owner {
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 0.82rem;
|
||||
color: var(--color-muted);
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.shared-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.shared-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.6rem 0.9rem;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.shared-row:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.row-icon {
|
||||
font-size: 0.9rem;
|
||||
flex-shrink: 0;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
.row-title {
|
||||
flex: 1;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.row-owner {
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.perm-badge {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 0.15rem 0.45rem;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.perm-viewer { background: color-mix(in srgb, var(--color-muted) 15%, transparent); color: var(--color-muted); }
|
||||
.perm-editor { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); }
|
||||
.perm-admin { background: color-mix(in srgb, var(--color-warning, #f59e0b) 15%, transparent); color: var(--color-warning, #f59e0b); }
|
||||
|
||||
.empty-msg {
|
||||
color: var(--color-muted);
|
||||
font-style: italic;
|
||||
font-size: 0.88rem;
|
||||
margin: 0;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
</style>
|
||||
@@ -12,6 +12,7 @@ import StatusBadge from "@/components/StatusBadge.vue";
|
||||
import PriorityBadge from "@/components/PriorityBadge.vue";
|
||||
import TagPill from "@/components/TagPill.vue";
|
||||
import TableOfContents from "@/components/TableOfContents.vue";
|
||||
import ShareDialog from "@/components/ShareDialog.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@@ -19,6 +20,7 @@ const store = useTasksStore();
|
||||
const notesStore = useNotesStore();
|
||||
const backlinks = ref<{ type: string; id: number; title: string }[]>([]);
|
||||
const converting = ref(false);
|
||||
const showShare = ref(false);
|
||||
|
||||
// Context enrichment
|
||||
const projectTitle = ref<string | null>(null);
|
||||
@@ -240,6 +242,7 @@ const subTaskProgress = computed(() => {
|
||||
>
|
||||
{{ converting ? "Converting..." : "Convert to Note" }}
|
||||
</button>
|
||||
<button class="btn-share" @click="showShare = true">Share</button>
|
||||
</div>
|
||||
|
||||
<!-- Breadcrumb: parent task → project → milestone -->
|
||||
@@ -364,6 +367,14 @@ const subTaskProgress = computed(() => {
|
||||
class="toc-sidebar"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ShareDialog
|
||||
v-if="showShare && store.currentTask"
|
||||
resource-type="note"
|
||||
:resource-id="store.currentTask.id"
|
||||
:resource-title="store.currentTask.title || '(untitled)'"
|
||||
@close="showShare = false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style src="@/assets/viewer-shared.css" />
|
||||
@@ -464,6 +475,19 @@ const subTaskProgress = computed(() => {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.btn-share {
|
||||
padding: 0.3rem 0.75rem;
|
||||
background: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.btn-share:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
||||
|
||||
.task-title {
|
||||
font-family: "Fraunces", Georgia, serif;
|
||||
font-size: 2rem;
|
||||
|
||||
Reference in New Issue
Block a user