mirror of
https://github.com/multipleof4/GitRight.git
synced 2026-02-04 02:47:57 +00:00
Feat: Add repository management to right sidebar
This commit is contained in:
98
index.html
98
index.html
@@ -9,6 +9,17 @@
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
[x-cloak] { display: none !important; }
|
||||
/* Custom scrollbar for a cleaner look, Meowster */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #e2e8f0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white antialiased text-slate-900">
|
||||
@@ -17,7 +28,28 @@
|
||||
leftSidebar: false,
|
||||
rightSidebar: false,
|
||||
accountModal: false,
|
||||
githubPat: localStorage.getItem('github_pat') || ''
|
||||
githubPat: localStorage.getItem('github_pat') || '',
|
||||
repos: JSON.parse(localStorage.getItem('github_repos') || '[]'),
|
||||
|
||||
addRepo() {
|
||||
const repo = prompt('Enter repository (owner/repo@branch):', 'multipleof4/GitRight@master');
|
||||
if (repo && repo.includes('/')) {
|
||||
this.repos.push(repo);
|
||||
this.saveRepos();
|
||||
this.$nextTick(() => lucide.createIcons());
|
||||
} else if (repo) {
|
||||
alert('Invalid format, Meowster. Please use owner/repo@branch');
|
||||
}
|
||||
},
|
||||
|
||||
removeRepo(index) {
|
||||
this.repos.splice(index, 1);
|
||||
this.saveRepos();
|
||||
},
|
||||
|
||||
saveRepos() {
|
||||
localStorage.setItem('github_repos', JSON.stringify(this.repos));
|
||||
}
|
||||
}" class="min-h-screen flex flex-col">
|
||||
|
||||
<!-- Header -->
|
||||
@@ -50,7 +82,6 @@
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 flex flex-col items-center justify-center p-6">
|
||||
<!-- Content goes here, Meowster -->
|
||||
<div class="text-center space-y-4">
|
||||
<h1 class="text-xl font-medium text-slate-400">Empty State</h1>
|
||||
<p class="text-sm text-slate-300">Ready for your commands, Master.</p>
|
||||
@@ -71,24 +102,59 @@
|
||||
<div x-show="rightSidebar" x-cloak class="fixed inset-0 z-[60] flex justify-end">
|
||||
<div @click="rightSidebar = false" class="fixed inset-0 bg-black/20 backdrop-blur-sm"></div>
|
||||
<div class="relative w-72 bg-white h-full shadow-xl p-4 flex flex-col">
|
||||
<div class="flex-1">
|
||||
<h2 class="font-bold mb-4 text-slate-800">Right Menu</h2>
|
||||
<!-- Menu items could go here -->
|
||||
|
||||
<!-- New Repo Button -->
|
||||
<button
|
||||
@click="addRepo()"
|
||||
class="flex items-center justify-center space-x-2 w-full p-3 mb-6 bg-blue-600 hover:bg-blue-700 text-white rounded-2xl transition-all shadow-lg shadow-blue-100"
|
||||
>
|
||||
<i data-lucide="plus-circle" class="w-5 h-5"></i>
|
||||
<span class="font-semibold">New Repo</span>
|
||||
</button>
|
||||
|
||||
<!-- Repositories List (Scrollable) -->
|
||||
<div class="flex-1 flex flex-col min-h-0">
|
||||
<h2 class="font-bold mb-4 text-slate-800 flex items-center">
|
||||
<i data-lucide="github" class="w-4 h-4 mr-2"></i>
|
||||
Repositories
|
||||
</h2>
|
||||
|
||||
<div class="flex-1 overflow-y-auto pr-2 space-y-2 custom-scrollbar">
|
||||
<template x-for="(repo, index) in repos" :key="index">
|
||||
<div class="group flex items-center justify-between p-3 bg-slate-50 hover:bg-slate-100 rounded-xl border border-slate-100 transition-colors">
|
||||
<div class="flex items-center space-x-3 truncate">
|
||||
<i data-lucide="git-fork" class="w-4 h-4 text-slate-400"></i>
|
||||
<span class="text-sm font-medium text-slate-600 truncate" x-text="repo"></span>
|
||||
</div>
|
||||
<button @click="removeRepo(index)" class="opacity-0 group-hover:opacity-100 p-1 text-slate-400 hover:text-red-500 transition-all">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="repos.length === 0">
|
||||
<div class="text-center py-8">
|
||||
<p class="text-xs text-slate-400 italic">No repositories added yet, Meowster.</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account Button -->
|
||||
<button
|
||||
@click="accountModal = true; rightSidebar = false"
|
||||
class="flex items-center justify-between w-full p-3 bg-slate-50 hover:bg-slate-100 rounded-2xl transition-colors group"
|
||||
>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="bg-slate-900 rounded-full p-2">
|
||||
<i data-lucide="user" class="w-4 h-4 text-blue-400 fill-blue-400"></i>
|
||||
<div class="pt-4 mt-4 border-t border-slate-100">
|
||||
<button
|
||||
@click="accountModal = true; rightSidebar = false"
|
||||
class="flex items-center justify-between w-full p-3 bg-slate-50 hover:bg-slate-100 rounded-2xl transition-colors group"
|
||||
>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="bg-slate-900 rounded-full p-2">
|
||||
<i data-lucide="user" class="w-4 h-4 text-blue-400 fill-blue-400"></i>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700">Account</span>
|
||||
</div>
|
||||
<span class="font-medium text-slate-700">Account</span>
|
||||
</div>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 group-hover:text-slate-600"></i>
|
||||
</button>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 group-hover:text-slate-600"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user